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:
2 files changed, 33 insertions(+), 13 deletions(-)
diff --git a/example/example_usage.ans b/example/example_usage.ans
@@ -1,3 +1,24 @@
-[7h[0;1;40;37m[?33hAnsilove.[35mrender[0m([32m"cl!-al02.ans"[37m, [1;33mfunction [37m([0mcanvas[1m, [0msauce[1m) {
+[0;1;40;37m[?33hAnsilove.[35mrender[0m([32m"cl!-al02.ans"[37m, [1;33mfunction [37m([0mcanvas[1m, [0msauce[1m) {
document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+ [33mconsole[37m.log(sauce);
}, {[0;32m"bits"[1;37m: [0;32m"9"[1;37m});
+
+[0m// And for producing extremely long files,
+// spanning multiple canvas elements by splitting every nth row...
+
+[0;1;40;37m[?33hAnsilove.[35msplitRender[0m([32m"long_ansi.ans"[37m, [1;33mfunction [37m([0mcanvases[1m, [0msauce[1m) {
+ canvases.[35mforEach[37m([1;33mfunction [37m([0mcanvas[1m) {
+ document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+ });
+ [33mconsole[37m.log(sauce);
+}, [31m27[37m, {[0;32m"bits"[1;37m: [0;32m"8"[1;37m});
+
+[0m// And for ansimations...
+
+[1;33mvar [1;37mcontroller = [0;1;40;37m[?33hAnsilove.[35manimate[0m([32m"ansimation.ans"[37m, [1;33mfunction [37m([0mcanvas[1m, [0msauce[1m) {
+ document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+ [33mconsole[37m.log(sauce);
+ controller.play([31m2800[37m, [33mfunction [1;37m() {
+ [33mconsole[37m.log([0;32m"Finished Playing"[1;37m);
+ });
+}, {[0;32m"bits"[1;37m: [0;32m"9"[1;37m});
+\ 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>
