commit ebac2465e8ff4473858737951b42c58f3f0d1fb3
parent fa7ecab29a2fdc268fb3449b24e67275375e1dc4
Author: Andy Herbert <andy.herbert@gmail.com>
Date: Mon, 14 Oct 2013 20:40:39 +0100
Added blinking for animations.
Diffstat:
M | ansilove.js | | | 68 | +++++++++++++++++++++++++++++++++++++++++++++++++------------------- |
1 file changed, 49 insertions(+), 19 deletions(-)
diff --git a/ansilove.js b/ansilove.js
@@ -1110,7 +1110,14 @@ var AnsiLove = (function () {
}
function Ansimation(file, canvas, ctx, font, icecolors, palette) {
- var escaped, escapeCode, j, code, values, x, y, savedX, savedY, foreground, background, bold, blink, inverse, timer;
+ var blinkCanvas, buffer, bufferCtx, blinkCtx, escaped, escapeCode, j, code, values, x, y, savedX, savedY, foreground, background, drawForeground, drawBackground, bold, inverse, blink;
+
+ blinkCanvas = [createCanvas(canvas.width, canvas.height), createCanvas(canvas.width, canvas.height)];
+ buffer = createCanvas(canvas.width, canvas.height);
+ blinkCtx = blinkCanvas.map(function (canvas) {
+ return canvas.getContext("2d");
+ });
+ bufferCtx = buffer.getContext("2d");
function resetAttributes() {
foreground = 7;
@@ -1120,14 +1127,28 @@ var AnsiLove = (function () {
inverse = false;
}
+ function clearScreen(sx, sy, width, height) {
+ ctx.fillStyle = "rgb(" + palette[0][0] + ", " + palette[0][1] + ", " + palette[0][2] + ")";
+ ctx.fillRect(sx, sy, width, height);
+ blinkCtx[0].clearRect(sx, sy, width, height);
+ blinkCtx[1].clearRect(sx, sy, width, height);
+ }
+
function newLine() {
var characterHeight;
x = 1;
if (y === 26 - 1) {
characterHeight = font.getHeight();
ctx.drawImage(canvas, 0, characterHeight, canvas.width, canvas.height - characterHeight * 2, 0, 0, canvas.width, canvas.height - characterHeight * 2);
- ctx.fillStyle = "rgb(" + palette[0][0] + ", " + palette[0][1] + ", " + palette[0][2] + ")";
- ctx.fillRect(0, canvas.height - characterHeight * 2, canvas.width, characterHeight);
+ bufferCtx.clearRect(0, 0, canvas.width, canvas.height);
+ bufferCtx.drawImage(blinkCanvas[0], 0, characterHeight, canvas.width, canvas.height - characterHeight * 2, 0, 0, canvas.width, canvas.height - characterHeight * 2);
+ blinkCtx[0].clearRect(0, 0, canvas.width, canvas.height);
+ blinkCtx[0].drawImage(buffer, 0, 0);
+ bufferCtx.clearRect(0, 0, canvas.width, canvas.height);
+ bufferCtx.drawImage(blinkCanvas[1], 0, characterHeight, canvas.width, canvas.height - characterHeight * 2, 0, 0, canvas.width, canvas.height - characterHeight * 2);
+ blinkCtx[1].clearRect(0, 0, canvas.width, canvas.height);
+ blinkCtx[1].drawImage(buffer, 0, 0);
+ clearScreen(0, canvas.height - characterHeight * 2, canvas.width, characterHeight);
return true;
}
++y;
@@ -1139,13 +1160,8 @@ var AnsiLove = (function () {
y = Math.min(26, Math.max(1, newY));
}
- function clearScreen() {
- ctx.fillStyle = "rgb(" + palette[0][0] + ", " + palette[0][1] + ", " + palette[0][2] + ")";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- }
-
function resetAll() {
- clearScreen();
+ clearScreen(0, 0, canvas.width, canvas.height);
resetAttributes();
setPos(1, 1);
escapeCode = "";
@@ -1162,7 +1178,7 @@ var AnsiLove = (function () {
}
function read(num) {
- var i;
+ var i, characterWidth, characterHeight;
for (i = 0; i < num; ++i) {
if (file.eof()) {
break;
@@ -1203,13 +1219,13 @@ var AnsiLove = (function () {
if (values[0] === 2) {
x = 1;
y = 1;
- clearScreen();
+ clearScreen(0, 0, canvas.width, canvas.height);
}
break;
case "K":
- for (j = x - 1; j < 80; ++j) {
- font.draw(ctx, j, y, 0, palette[0], palette[0]);
- }
+ characterWidth = font.getWidth();
+ characterHeight = font.getHeight();
+ clearScreen((x - 1) * characterWidth, (y - 1) * characterHeight, canvas.width - (x - 1) * characterWidth, characterHeight);
break;
case "m":
for (j = 0; j < values.length; ++j) {
@@ -1278,11 +1294,18 @@ var AnsiLove = (function () {
if (code === 27 && file.peek() === 0x5B) {
escaped = true;
} else {
- if (!inverse) {
- font.draw(ctx, x - 1, y - 1, code, palette[bold ? (foreground + 8) : foreground], palette[(blink && icecolors) ? (background + 8) : background]);
+ if (inverse) {
+ drawForeground = background;
+ drawBackground = foreground;
} else {
- font.draw(ctx, x - 1, y - 1, code, palette[bold ? (background + 8) : background], palette[(blink && icecolors) ? (foreground + 8) : foreground]);
+ drawForeground = foreground;
+ drawBackground = background;
+ }
+ if (!icecolors && blink) {
+ font.draw(blinkCtx[0], x - 1, y - 1, code, palette[bold ? (drawForeground + 8) : drawForeground], palette[drawBackground]);
+ font.draw(blinkCtx[1], x - 1, y - 1, code, palette[drawBackground], palette[drawBackground]);
}
+ font.draw(ctx, x - 1, y - 1, code, palette[bold ? (drawForeground + 8) : drawForeground], palette[(blink && icecolors) ? (drawBackground + 8) : drawBackground]);
if (++x === 80 + 1) {
if (newLine()) {
return i + 1;
@@ -1298,8 +1321,14 @@ var AnsiLove = (function () {
return {
"play": function (baud, callback) {
- var length;
+ var timer, interval, length, drawBlink;
clearTimeout(timer);
+ clearInterval(interval);
+ drawBlink = false;
+ interval = setInterval(function () {
+ ctx.drawImage(blinkCanvas[drawBlink ? 1 : 0], 0, 0);
+ drawBlink = !drawBlink;
+ }, 250);
function drawChunk() {
if (read(length)) {
timer = setTimeout(drawChunk, 10);
@@ -1315,7 +1344,7 @@ var AnsiLove = (function () {
}
function animate(url, callback, options) {
- var ansimation, canvas, ctx, file, icecolors, bits, font, palette;
+ var ansimation, icecolors, bits, font, palette;
if (options) {
icecolors = options.icecolors || false;
bits = options.bits || 8;
@@ -1339,6 +1368,7 @@ var AnsiLove = (function () {
palette = Palette.ANSI;
}
httpGet(url, function (bytes) {
+ var file, canvas, ctx;
file = new File(bytes);
canvas = createCanvas(80 * font.getWidth(), 26 * font.getHeight());
ctx = canvas.getContext("2d");