jsttyplay/html/showtty.js

// showtty.js - a building block for viewing tty animations
// Copyright 2008 Jack Christopher Kastorff
(function(){

var repeatString = function (str, rep) {
    var outstr = '';
    for (var i = 0; i < rep; i++) {
        outstr += str;
    }
    return outstr;
};

var makeTable = function (width, height) {
    var table = document.createElement("div");
    var arr = [];
    for (var j = 1; j <= height; j++) {
        var row = document.createElement("div");
        var arrrow = [];
        row.style.fontFamily = '"ProFont", "Luxi Mono", "Monaco", "Courier", "Courier new", monospace';
        row.style.margin = '0';
        row.style.padding = '0';
        row.style.wordSpacing = '0';
//        row.style.height = '1.2em';   // XXX fix line spacing
        for (var i = 1; i <= width; i++) {
            var charelem = document.createElement("pre");
            charelem.style.backgroundColor = '#000';
            charelem.style.color = '#FFF';
            charelem.style.display = 'inline';
            charelem.style.fontWeight = 'normal';
            charelem.style.textDecoration = 'none';
            charelem.style.letterSpacing = '0';
            charelem.style.margin = '0';
            charelem.style.padding = '0 0 0.2em 0';
            charelem.appendChild(document.createTextNode(" "));
            row.appendChild(charelem);
            arrrow.push(charelem);
        }
        table.appendChild(row);
        arr.push(arrrow);
    }
    return { "arr": arr, "elem": table };
};

var setTextChunk = function (tb, r, index, stx) {
    for (var i = 0; i < r.length; i++) {
        tb.arr[index][i+stx].firstChild.replaceData(0, 1, r.charAt(i));
    }
};

var setBoldChunk = function (tb, r, index, stx) {
    for (var i = 0; i < r.length; i++) {
        tb.arr[index][i+stx].style.fontWeight = r.charAt(i) == 0 ? 'normal' : 'bold';
    }
};

var setUnderlineChunk = function (tb, r, index, stx) {
    for (var i = 0; i < r.length; i++) {
        tb.arr[index][i+stx].style.textDecoration = r.charAt(i) == 0 ? 'none' : 'underline';
    }
};

var clut = { 0: "#000", 1: "#D00", 2: "#0D0", 3: "#DD0", 4: "#00D", 5: "#D0D", 6: "#0DD", 7: "#DDD" };

var setFcolorChunk = function (tb, r, index, stx) {
    for (var i = 0; i < r.length; i++) {
        tb.arr[index][i+stx].style.color = clut[r.charAt(i)];
    }
};

var t = 0;
var setBcolorChunk = function (tb, r, index, stx) {
    for (var i = 0; i < r.length; i++) {
        tb.arr[index][i+stx].style.backgroundColor = clut[r.charAt(i)];
    }
};

var loadIFrame = function (tb, rowcaches, fr, width, height) {
    var d = uncompressIFrameBlock(fr.d, width);
    for (var i = 0; i < d.length; i++) {
        setTextChunk(tb, d[i], i, 0);
        rowcaches.d[i] = d[i];
    }
    var B = uncompressIFrameBlock(fr.B, width);
    for (var i = 0; i < B.length; i++) {
        setBoldChunk(tb, B[i], i, 0);
        rowcaches.B[i] = B[i];
    }
    var U = uncompressIFrameBlock(fr.U, width);
    for (var i = 0; i < U.length; i++) {
        setUnderlineChunk(tb, U[i], i, 0);
        rowcaches.U[i] = U[i];
    }
    var f = uncompressIFrameBlock(fr.f, width);
    for (var i = 0; i < f.length; i++) {
        setFcolorChunk(tb, f[i], i, 0);
        rowcaches.f[i] = f[i];
    }
    var b = uncompressIFrameBlock(fr.b, width);
    for (var i = 0; i < b.length; i++) {
        setBcolorChunk(tb, b[i], i, 0);
        rowcaches.b[i] = b[i];
    }
};

var uncompressIFrameBlock = function (d,width) {
    var uncomp = [];
    var last = null;
    for (var i = 0; i < d.length; i++) {
        var uncomprow = null;
        if ( typeof d[i] == 'array' || typeof d[i] == 'object' ) {
            if ( d[i][0] == "r" ) {
                uncomprow = d[i][1];
            } else if ( d[i][0] == "a" ) {
                uncomprow = repeatString(d[i][1], width);
            } else {
                throw new Error ("bad iframe data: subarray is not valid");
            }
        } else if ( typeof d[i] == 'string' && d[i] == 'd' ) {
            uncomprow = last;
        } else {
            throw new Error ("bad iframe data: unknown " + (typeof d[i]) + " in array");
        }
        uncomp.push(uncomprow);
        last = uncomprow;
    }
    return uncomp;
};

var loadPFrame = function (table, rowcaches, fr, width, height) {
    if ( fr.d ) {
        diffPushGeneric(table, annotatedPFrameBlock(fr.d, width), rowcaches.d, setTextChunk);
    }
    if ( fr.B )  {
        diffPushGeneric(table, annotatedPFrameBlock(fr.B, width), rowcaches.B, setBoldChunk);
    }
    if ( fr.U ) {
        diffPushGeneric(table, annotatedPFrameBlock(fr.U, width), rowcaches.U, setUnderlineChunk);
    }
    if ( fr.f ) {
        diffPushGeneric(table, annotatedPFrameBlock(fr.f, width), rowcaches.f, setFcolorChunk);
    }
    if ( fr.b ) {
        diffPushGeneric(table, annotatedPFrameBlock(fr.b, width), rowcaches.b, setBcolorChunk);
    }
};

var diffPushGeneric = function (table, d, rowcache, set) {
    // convert everything to line operations
    for (var i = 0; i < d.length; i++) {
        var e = d[i];
        if ( e[0] == "cp" ) {
            set(table, rowcache[e[1]], e[2], 0);
            rowcache[e[2]] = rowcache[e[1]];
        } else if ( e[0] == 'char' ) {
            var r = e[1];
            var v = rowcache[r];
            var da = v.slice(0, e[2]) + e[3] + v.slice(e[2]+1);
            set(table, e[3], e[1], e[2]);
            rowcache[r] = da;
        } else if ( e[0] == 'chunk' ) {
            var r = e[1];
            var v = rowcache[r];
            var da = v.slice(0, e[2]) + e[4] + v.slice(e[3]+1);
            set(table, e[4], e[1], e[2]);
            rowcache[r] = da;
        } else if ( e[0] == 'line' ) {
            set(table, e[2], e[1], 0);
            rowcache[e[1]] = e[2];
        } else {
            throw new Error ("unknown p-frame item type " + e[0] + ", len " + e.length);
        }
    }
};

var annotatedPFrameBlock = function (frame, width) {
    var ann = [];
    for (var i = 0; i < frame.length; i++) {
        var e = frame[i];
        if ( e[0] == 'cp' ) {
            ann.push(e);
        } else if ( e.length == 2 ) {
            // raw line
            if ( typeof e[1] == 'string' ) {
                ann.push(['line', e[0], e[1]]);
            } else if ( e[1][0] == "a" ) {
                ann.push(['line', e[0], repeatString(e[1][1], width)]);
            } else {
                throw new Error ("p-frame corrupted: invalid 2-len");
            }
        } else if ( e.length == 3 ) {
            // char
            ann.push(['char', e[0], e[1], e[2]]);
        } else if ( e.length == 4 ) {
            // chunk
            if ( typeof e[3] == 'string' ) {
                ann.push(['chunk', e[0], e[1], e[2], e[3]]);
            } else if ( e[3][0] == 'a' ) {
                ann.push(['chunk', e[0], e[1], e[2], repeatString(e[3][1], e[2]-e[1]+1)]);
            } else {
                throw new Error ("p-frame corrupted: invalid 4-len");
            }
        } else {
            throw new Error ("p-frame corrupted: no such thing as a " + e.length + "-len");
        }
    }
    return ann;
};

var handleCursor = function (table, bgcache, curpos, dx, dy) {
    if ( typeof dx == 'number' || typeof dy == 'number' ) {
        // make sure the old cursor position has been overwritten
        setBcolorChunk(table, bgcache[curpos[1]-1].charAt(curpos[0]-1), curpos[1]-1, curpos[0]-1);
        if ( typeof dx == 'number' ) {
            curpos[0] = dx;
        }
        if ( typeof dy == 'number' ) {
            curpos[1] = dy;
        }
    }

    // draw the cursor
    table.arr[curpos[1]-1][curpos[0]-1].style.backgroundColor = '#FFF';
};

var animateNextFrame = function (holder) { with (holder) {

        // check if play_frames checkbox is checked
        var ttyrec_pause = document.getElementById('ttyrec_pause');
        if ( ttyrec_pause && ttyrec_pause.checked ) {
                setTimeout(function(){animateNextFrame(holder);}, 500); // check very 0.5s
                return;
        }
        var ttyrec_frame = document.getElementById('ttyrec_frame');
        if ( ttyrec_frame ) ttyrec_frame.innerHTML = nextframe;

    var fr = timeline[nextframe];
    if ( fr.i ) {
        loadIFrame(table, rowcaches, fr, width, height);
    } else {
        loadPFrame(table, rowcaches, fr, width, height);
    }
    handleCursor(table, rowcaches.b, curpos, fr.x, fr.y);
    nextframe++;
    if ( timeline.length > nextframe ) {
        var wait = timeadd + timeline[nextframe].t - (new Date).getTime()/1000;
        if ( wait < 0 ) {
            // we're out of date! try to catch up.
            return animateNextFrame(holder);
        } else {
            setTimeout(function(){animateNextFrame(holder);}, wait*1000);
        }
    } else {
                ttyrec_frame.innerHTML = 'last';
    }
}};

var makeCache = function (ch, wid, hei) {
    var c = [];
    for (var y = 0; y < hei; y++) {
        c.push( repeatString(ch, wid) );
    }
    return c;
};

showTTY = function (elem, data) {
    while ( elem.firstChild ) {
        elem.removeChild( elem.firstChild );
    }
    
    var width = data.width;
    var height = data.height;
    var timeline = data.timeline;

    var table = makeTable(width, height);
    elem.appendChild(table.elem);

    var holder = {
        'width': width,
        'height': height,
        'timeline': timeline,
        'table': table,
        'nextframe': 0,
        'time': 0,
        'rowcaches': {
            'd': makeCache(" ", width, height),
            'f': makeCache("7", width, height),
            'b': makeCache("0", width, height),
            'B': makeCache("0", width, height),
            'U': makeCache("0", width, height)
        },
        'curpos': [1,1],
        'timeadd': (new Date).getTime()/1000-timeline[0].t
      };

        var ttyrec_status = document.getElementById('ttyrec_status');
        if ( ttyrec_status ) ttyrec_status.style.display = 'block';

    animateNextFrame(holder);
};

showTTYURL = function (elem, url) {
    var showText = function (text) {
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }
        elem.appendChild( document.createTextNode( text ) );
    };

    showText("Loading " + url);

    var req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.onreadystatechange = function () {
        if ( req.readyState == 4 && req.status == 200 ) {
            var data = eval("(" + req.responseText + ")");
            if ( typeof data == "undefined" ) {
                showText("Error: didn't get tty data from " + url);
                req = null;
                return;
            }
            showTTY(elem, data);
        } else if ( req.readyState == 4 && req.status != 200 ) {
            showText("Error: couldn't retrieve " + url + ", got status code " + this.status);
            req = null;
        }
    };
    req.send(null);
};

}());
1	dpavlin	1	// showtty.js - a building block for viewing tty animations
2			// Copyright 2008 Jack Christopher Kastorff
3			(function(){
4
5			var repeatString = function (str, rep) {
6			var outstr = '';
7			for (var i = 0; i < rep; i++) {
8			outstr += str;
9			}
10			return outstr;
11			};
12
13			var makeTable = function (width, height) {
14			var table = document.createElement("div");
15			var arr = [];
16			for (var j = 1; j <= height; j++) {
17			var row = document.createElement("div");
18			var arrrow = [];
19			row.style.fontFamily = '"ProFont", "Luxi Mono", "Monaco", "Courier", "Courier new", monospace';
20			row.style.margin = '0';
21			row.style.padding = '0';
22			row.style.wordSpacing = '0';
23	dpavlin	2	// row.style.height = '1.2em'; // XXX fix line spacing
24	dpavlin	1	for (var i = 1; i <= width; i++) {
25			var charelem = document.createElement("pre");
26			charelem.style.backgroundColor = '#000';
27			charelem.style.color = '#FFF';
28			charelem.style.display = 'inline';
29			charelem.style.fontWeight = 'normal';
30			charelem.style.textDecoration = 'none';
31			charelem.style.letterSpacing = '0';
32			charelem.style.margin = '0';
33			charelem.style.padding = '0 0 0.2em 0';
34			charelem.appendChild(document.createTextNode(" "));
35			row.appendChild(charelem);
36			arrrow.push(charelem);
37			}
38			table.appendChild(row);
39			arr.push(arrrow);
40			}
41			return { "arr": arr, "elem": table };
42			};
43
44			var setTextChunk = function (tb, r, index, stx) {
45			for (var i = 0; i < r.length; i++) {
46			tb.arr[index][i+stx].firstChild.replaceData(0, 1, r.charAt(i));
47			}
48			};
49
50			var setBoldChunk = function (tb, r, index, stx) {
51			for (var i = 0; i < r.length; i++) {
52			tb.arr[index][i+stx].style.fontWeight = r.charAt(i) == 0 ? 'normal' : 'bold';
53			}
54			};
55
56			var setUnderlineChunk = function (tb, r, index, stx) {
57			for (var i = 0; i < r.length; i++) {
58			tb.arr[index][i+stx].style.textDecoration = r.charAt(i) == 0 ? 'none' : 'underline';
59			}
60			};
61
62			var clut = { 0: "#000", 1: "#D00", 2: "#0D0", 3: "#DD0", 4: "#00D", 5: "#D0D", 6: "#0DD", 7: "#DDD" };
63
64			var setFcolorChunk = function (tb, r, index, stx) {
65			for (var i = 0; i < r.length; i++) {
66			tb.arr[index][i+stx].style.color = clut[r.charAt(i)];
67			}
68			};
69
70			var t = 0;
71			var setBcolorChunk = function (tb, r, index, stx) {
72			for (var i = 0; i < r.length; i++) {
73			tb.arr[index][i+stx].style.backgroundColor = clut[r.charAt(i)];
74			}
75			};
76
77			var loadIFrame = function (tb, rowcaches, fr, width, height) {
78			var d = uncompressIFrameBlock(fr.d, width);
79			for (var i = 0; i < d.length; i++) {
80			setTextChunk(tb, d[i], i, 0);
81			rowcaches.d[i] = d[i];
82			}
83			var B = uncompressIFrameBlock(fr.B, width);
84			for (var i = 0; i < B.length; i++) {
85			setBoldChunk(tb, B[i], i, 0);
86			rowcaches.B[i] = B[i];
87			}
88			var U = uncompressIFrameBlock(fr.U, width);
89			for (var i = 0; i < U.length; i++) {
90			setUnderlineChunk(tb, U[i], i, 0);
91			rowcaches.U[i] = U[i];
92			}
93			var f = uncompressIFrameBlock(fr.f, width);
94			for (var i = 0; i < f.length; i++) {
95			setFcolorChunk(tb, f[i], i, 0);
96			rowcaches.f[i] = f[i];
97			}
98			var b = uncompressIFrameBlock(fr.b, width);
99			for (var i = 0; i < b.length; i++) {
100			setBcolorChunk(tb, b[i], i, 0);
101			rowcaches.b[i] = b[i];
102			}
103			};
104
105			var uncompressIFrameBlock = function (d,width) {
106			var uncomp = [];
107			var last = null;
108			for (var i = 0; i < d.length; i++) {
109			var uncomprow = null;
110			if ( typeof d[i] == 'array' \|\| typeof d[i] == 'object' ) {
111			if ( d[i][0] == "r" ) {
112			uncomprow = d[i][1];
113			} else if ( d[i][0] == "a" ) {
114			uncomprow = repeatString(d[i][1], width);
115			} else {
116			throw new Error ("bad iframe data: subarray is not valid");
117			}
118			} else if ( typeof d[i] == 'string' && d[i] == 'd' ) {
119			uncomprow = last;
120			} else {
121			throw new Error ("bad iframe data: unknown " + (typeof d[i]) + " in array");
122			}
123			uncomp.push(uncomprow);
124			last = uncomprow;
125			}
126			return uncomp;
127			};
128
129			var loadPFrame = function (table, rowcaches, fr, width, height) {
130			if ( fr.d ) {
131			diffPushGeneric(table, annotatedPFrameBlock(fr.d, width), rowcaches.d, setTextChunk);
132			}
133			if ( fr.B ) {
134			diffPushGeneric(table, annotatedPFrameBlock(fr.B, width), rowcaches.B, setBoldChunk);
135			}
136			if ( fr.U ) {
137			diffPushGeneric(table, annotatedPFrameBlock(fr.U, width), rowcaches.U, setUnderlineChunk);
138			}
139			if ( fr.f ) {
140			diffPushGeneric(table, annotatedPFrameBlock(fr.f, width), rowcaches.f, setFcolorChunk);
141			}
142			if ( fr.b ) {
143			diffPushGeneric(table, annotatedPFrameBlock(fr.b, width), rowcaches.b, setBcolorChunk);
144			}
145			};
146
147			var diffPushGeneric = function (table, d, rowcache, set) {
148			// convert everything to line operations
149			for (var i = 0; i < d.length; i++) {
150			var e = d[i];
151			if ( e[0] == "cp" ) {
152			set(table, rowcache[e[1]], e[2], 0);
153			rowcache[e[2]] = rowcache[e[1]];
154			} else if ( e[0] == 'char' ) {
155			var r = e[1];
156			var v = rowcache[r];
157			var da = v.slice(0, e[2]) + e[3] + v.slice(e[2]+1);
158			set(table, e[3], e[1], e[2]);
159			rowcache[r] = da;
160			} else if ( e[0] == 'chunk' ) {
161			var r = e[1];
162			var v = rowcache[r];
163			var da = v.slice(0, e[2]) + e[4] + v.slice(e[3]+1);
164			set(table, e[4], e[1], e[2]);
165			rowcache[r] = da;
166			} else if ( e[0] == 'line' ) {
167			set(table, e[2], e[1], 0);
168			rowcache[e[1]] = e[2];
169			} else {
170			throw new Error ("unknown p-frame item type " + e[0] + ", len " + e.length);
171			}
172			}
173			};
174
175			var annotatedPFrameBlock = function (frame, width) {
176			var ann = [];
177			for (var i = 0; i < frame.length; i++) {
178			var e = frame[i];
179			if ( e[0] == 'cp' ) {
180			ann.push(e);
181			} else if ( e.length == 2 ) {
182			// raw line
183			if ( typeof e[1] == 'string' ) {
184			ann.push(['line', e[0], e[1]]);
185			} else if ( e[1][0] == "a" ) {
186			ann.push(['line', e[0], repeatString(e[1][1], width)]);
187			} else {
188			throw new Error ("p-frame corrupted: invalid 2-len");
189			}
190			} else if ( e.length == 3 ) {
191			// char
192			ann.push(['char', e[0], e[1], e[2]]);
193			} else if ( e.length == 4 ) {
194			// chunk
195			if ( typeof e[3] == 'string' ) {
196			ann.push(['chunk', e[0], e[1], e[2], e[3]]);
197			} else if ( e[3][0] == 'a' ) {
198			ann.push(['chunk', e[0], e[1], e[2], repeatString(e[3][1], e[2]-e[1]+1)]);
199			} else {
200			throw new Error ("p-frame corrupted: invalid 4-len");
201			}
202			} else {
203			throw new Error ("p-frame corrupted: no such thing as a " + e.length + "-len");
204			}
205			}
206			return ann;
207			};
208
209			var handleCursor = function (table, bgcache, curpos, dx, dy) {
210			if ( typeof dx == 'number' \|\| typeof dy == 'number' ) {
211			// make sure the old cursor position has been overwritten
212			setBcolorChunk(table, bgcache[curpos[1]-1].charAt(curpos[0]-1), curpos[1]-1, curpos[0]-1);
213			if ( typeof dx == 'number' ) {
214			curpos[0] = dx;
215			}
216			if ( typeof dy == 'number' ) {
217			curpos[1] = dy;
218			}
219			}
220
221			// draw the cursor
222			table.arr[curpos[1]-1][curpos[0]-1].style.backgroundColor = '#FFF';
223			};
224
225			var animateNextFrame = function (holder) { with (holder) {
226	dpavlin	3
227			// check if play_frames checkbox is checked
228			var ttyrec_pause = document.getElementById('ttyrec_pause');
229			if ( ttyrec_pause && ttyrec_pause.checked ) {
230			setTimeout(function(){animateNextFrame(holder);}, 500); // check very 0.5s
231			return;
232			}
233			var ttyrec_frame = document.getElementById('ttyrec_frame');
234			if ( ttyrec_frame ) ttyrec_frame.innerHTML = nextframe;
235
236	dpavlin	1	var fr = timeline[nextframe];
237			if ( fr.i ) {
238			loadIFrame(table, rowcaches, fr, width, height);
239			} else {
240			loadPFrame(table, rowcaches, fr, width, height);
241			}
242			handleCursor(table, rowcaches.b, curpos, fr.x, fr.y);
243			nextframe++;
244			if ( timeline.length > nextframe ) {
245			var wait = timeadd + timeline[nextframe].t - (new Date).getTime()/1000;
246			if ( wait < 0 ) {
247			// we're out of date! try to catch up.
248			return animateNextFrame(holder);
249			} else {
250			setTimeout(function(){animateNextFrame(holder);}, wait*1000);
251			}
252	dpavlin	7	} else {
253			ttyrec_frame.innerHTML = 'last';
254	dpavlin	1	}
255			}};
256
257			var makeCache = function (ch, wid, hei) {
258			var c = [];
259			for (var y = 0; y < hei; y++) {
260			c.push( repeatString(ch, wid) );
261			}
262			return c;
263			};
264
265			showTTY = function (elem, data) {
266			while ( elem.firstChild ) {
267			elem.removeChild( elem.firstChild );
268			}
269
270			var width = data.width;
271			var height = data.height;
272			var timeline = data.timeline;
273
274			var table = makeTable(width, height);
275			elem.appendChild(table.elem);
276
277			var holder = {
278			'width': width,
279			'height': height,
280			'timeline': timeline,
281			'table': table,
282			'nextframe': 0,
283			'time': 0,
284			'rowcaches': {
285			'd': makeCache(" ", width, height),
286			'f': makeCache("7", width, height),
287			'b': makeCache("0", width, height),
288			'B': makeCache("0", width, height),
289			'U': makeCache("0", width, height)
290			},
291			'curpos': [1,1],
292			'timeadd': (new Date).getTime()/1000-timeline[0].t
293			};
294
295	dpavlin	3	var ttyrec_status = document.getElementById('ttyrec_status');
296			if ( ttyrec_status ) ttyrec_status.style.display = 'block';
297
298	dpavlin	1	animateNextFrame(holder);
299			};
300
301			showTTYURL = function (elem, url) {
302			var showText = function (text) {
303			while ( elem.firstChild ) {
304			elem.removeChild( elem.firstChild );
305			}
306			elem.appendChild( document.createTextNode( text ) );
307			};
308
309			showText("Loading " + url);
310
311			var req = new XMLHttpRequest();
312			req.open("GET", url, true);
313			req.onreadystatechange = function () {
314			if ( req.readyState == 4 && req.status == 200 ) {
315			var data = eval("(" + req.responseText + ")");
316			if ( typeof data == "undefined" ) {
317			showText("Error: didn't get tty data from " + url);
318			req = null;
319			return;
320			}
321			showTTY(elem, data);
322			} else if ( req.readyState == 4 && req.status != 200 ) {
323			showText("Error: couldn't retrieve " + url + ", got status code " + this.status);
324			req = null;
325			}
326			};
327			req.send(null);
328			};
329
330			}());