ansilove.js

A script to display ANSi and artscene related file formats on web pages
Log | Files | Refs | README | LICENSE

commit d6d2c3c03c6472d0e27a547a16b14da64b13c3d3
parent 2ebe98addf2337f47cc23c37ce6e00510789b9a6
Author: Andy Herbert <andy.herbert@gmail.com>
Date:   Sun, 13 Oct 2013 18:42:38 +0100

Updated the example page for animations.

Diffstat:
Mexample/example_usage.ans | 24+++++++++++++++++++++++-
Mexample/index.html | 22++++++++++------------
2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/example/example_usage.ans b/example/example_usage.ans @@ -1,3 +1,24 @@ -[?33hAnsilove.render("cl!-al02.ans", function (canvas, sauce) { +[?33hAnsilove.render("cl!-al02.ans", function (canvas, sauce) { document.getElementById("ansi-container").appendChild(canvas); + console.log(sauce); }, {"bits": "9"}); + +// And for producing extremely long files, +// spanning multiple canvas elements by splitting every nth row... + +[?33hAnsilove.splitRender("long_ansi.ans", function (canvases, sauce) { + canvases.forEach(function (canvas) { + document.getElementById("ansi-container").appendChild(canvas); + }); + console.log(sauce); +}, 27, {"bits": "8"}); + +// And for ansimations... + +var controller = [?33hAnsilove.animate("ansimation.ans", function (canvas, sauce) { + document.getElementById("ansi-container").appendChild(canvas); + console.log(sauce); + controller.play(2800, function () { + console.log("Finished Playing"); + }); +}, {"bits": "9"});+ \ No newline at end of file diff --git a/example/index.html b/example/index.html @@ -9,16 +9,17 @@ background: black; } .center { - margin: 16px auto; + margin: 0 auto; background-color: black; padding: 16px; } #header { width: 720px; - border: 1px solid #aaaaaa; + height: 464px; } #example { - width: 528px; + width: 720px; + height: 384px; overflow: hidden; } </style> @@ -26,22 +27,19 @@ <body> <div id="header" class="center"></div> + <div id="example" class="center"></div> + <script type="text/javascript"> +var controller; AnsiLove.render("cl!-al02.ans", function (canvas, sauce) { document.getElementById("header").appendChild(canvas); }, {"bits": "9"}); -</script> - - <div id="example" class="center"></div> - -<script type="text/javascript"> - -AnsiLove.render("example_usage.ans", function (canvas, sauce) { +controller = AnsiLove.animate("example_usage.ans", function (canvas, sauce) { document.getElementById("example").appendChild(canvas); -}); - + controller.play(2800); +}, {"bits": "9"}); </script> </body>