X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=index.html;h=738d7d7f965e16f25901b806743a544dfa0fa740;hb=50a84f79b9bf74674a4191db9ae771c63385cd17;hp=6fb1473bb941a1a769a9d73d64e184e3b1606084;hpb=394a14939b00dbbb2a30c8a87ac3333a41c74ef2;p=watch-my-terminal.git

diff --git a/index.html b/index.html
index 6fb1473..738d7d7 100644
--- a/index.html
+++ b/index.html
@@ -3,59 +3,364 @@
 <head>
 	<title>Remote Terminal Viewer</title>
 	<script src="/jquery.js"></script>
+	<script src="/terminal.js"></script>
 	<script src="/socket.io/socket.io.js"></script>
 	<script>
 		$(function() {
+			var term = null;
+			// 8-14 are bolded versions
+			var palette = [
+				'2e3436',
+				'cc0000',
+				'4e9a06',
+				'c4a000',
+				'3465a4',
+				'75507b',
+				'06989a',
+				'd3d7cf',
+				'555753',
+				'ef2929',
+				'8ae234',
+				'fce94f',
+				'729fcf',
+				'ad7fa8',
+				'34e2e2',
+				'eeeeec',
+
+				// 256 colors
+				'000000',
+				'00005f',
+				'000087',
+				'0000af',
+				'0000d7',
+				'0000ff',
+				'005f00',
+				'005f5f',
+				'005f87',
+				'005faf',
+				'005fd7',
+				'005fff',
+				'008700',
+				'00875f',
+				'008787',
+				'0087af',
+				'0087d7',
+				'0087ff',
+				'00af00',
+				'00af5f',
+				'00af87',
+				'00afaf',
+				'00afd7',
+				'00afff',
+				'00d700',
+				'00d75f',
+				'00d787',
+				'00d7af',
+				'00d7d7',
+				'00d7ff',
+				'00ff00',
+				'00ff5f',
+				'00ff87',
+				'00ffaf',
+				'00ffd7',
+				'00ffff',
+				'5f0000',
+				'5f005f',
+				'5f0087',
+				'5f00af',
+				'5f00d7',
+				'5f00ff',
+				'5f5f00',
+				'5f5f5f',
+				'5f5f87',
+				'5f5faf',
+				'5f5fd7',
+				'5f5fff',
+				'5f8700',
+				'5f875f',
+				'5f8787',
+				'5f87af',
+				'5f87d7',
+				'5f87ff',
+				'5faf00',
+				'5faf5f',
+				'5faf87',
+				'5fafaf',
+				'5fafd7',
+				'5fafff',
+				'5fd700',
+				'5fd75f',
+				'5fd787',
+				'5fd7af',
+				'5fd7d7',
+				'5fd7ff',
+				'5fff00',
+				'5fff5f',
+				'5fff87',
+				'5fffaf',
+				'5fffd7',
+				'5fffff',
+				'870000',
+				'87005f',
+				'870087',
+				'8700af',
+				'8700d7',
+				'8700ff',
+				'875f00',
+				'875f5f',
+				'875f87',
+				'875faf',
+				'875fd7',
+				'875fff',
+				'878700',
+				'87875f',
+				'878787',
+				'8787af',
+				'8787d7',
+				'8787ff',
+				'87af00',
+				'87af5f',
+				'87af87',
+				'87afaf',
+				'87afd7',
+				'87afff',
+				'87d700',
+				'87d75f',
+				'87d787',
+				'87d7af',
+				'87d7d7',
+				'87d7ff',
+				'87ff00',
+				'87ff5f',
+				'87ff87',
+				'87ffaf',
+				'87ffd7',
+				'87ffff',
+				'af0000',
+				'af005f',
+				'af0087',
+				'af00af',
+				'af00d7',
+				'af00ff',
+				'af5f00',
+				'af5f5f',
+				'af5f87',
+				'af5faf',
+				'af5fd7',
+				'af5fff',
+				'af8700',
+				'af875f',
+				'af8787',
+				'af87af',
+				'af87d7',
+				'af87ff',
+				'afaf00',
+				'afaf5f',
+				'afaf87',
+				'afafaf',
+				'afafd7',
+				'afafff',
+				'afd700',
+				'afd75f',
+				'afd787',
+				'afd7af',
+				'afd7d7',
+				'afd7ff',
+				'afff00',
+				'afff5f',
+				'afff87',
+				'afffaf',
+				'afffd7',
+				'afffff',
+				'd70000',
+				'd7005f',
+				'd70087',
+				'd700af',
+				'd700d7',
+				'd700ff',
+				'd75f00',
+				'd75f5f',
+				'd75f87',
+				'd75faf',
+				'd75fd7',
+				'd75fff',
+				'd78700',
+				'd7875f',
+				'd78787',
+				'd787af',
+				'd787d7',
+				'd787ff',
+				'd7af00',
+				'd7af5f',
+				'd7af87',
+				'd7afaf',
+				'd7afd7',
+				'd7afff',
+				'd7d700',
+				'd7d75f',
+				'd7d787',
+				'd7d7af',
+				'd7d7d7',
+				'd7d7ff',
+				'd7ff00',
+				'd7ff5f',
+				'd7ff87',
+				'd7ffaf',
+				'd7ffd7',
+				'd7ffff',
+				'ff0000',
+				'ff005f',
+				'ff0087',
+				'ff00af',
+				'ff00d7',
+				'ff00ff',
+				'ff5f00',
+				'ff5f5f',
+				'ff5f87',
+				'ff5faf',
+				'ff5fd7',
+				'ff5fff',
+				'ff8700',
+				'ff875f',
+				'ff8787',
+				'ff87af',
+				'ff87d7',
+				'ff87ff',
+				'ffaf00',
+				'ffaf5f',
+				'ffaf87',
+				'ffafaf',
+				'ffafd7',
+				'ffafff',
+				'ffd700',
+				'ffd75f',
+				'ffd787',
+				'ffd7af',
+				'ffd7d7',
+				'ffd7ff',
+				'ffff00',
+				'ffff5f',
+				'ffff87',
+				'ffffaf',
+				'ffffd7',
+				'ffffff',
+				'080808',
+				'121212',
+				'1c1c1c',
+				'262626',
+				'303030',
+				'3a3a3a',
+				'444444',
+				'4e4e4e',
+				'585858',
+				'626262',
+				'6c6c6c',
+				'767676',
+				'808080',
+				'8a8a8a',
+				'949494',
+				'9e9e9e',
+				'a8a8a8',
+				'b2b2b2',
+				'bcbcbc',
+				'c6c6c6',
+				'd0d0d0',
+				'dadada',
+				'e4e4e4',
+				'eeeeee'
+			];
 			var $body = $('body');
 			var socket = io.connect('http://localhost');
 			var color_to_css = function(i) {
-				return 'color: #' +
-					((i & 0xe0) ? 'ff' : '00') +
-					((i & 0x1c) ? 'ff' : '00') +
-					((i & 0x03) ? 'ff' : '00') +
-					'; ';
-			}
+				index = i & 0xff
+				// lighten the basic 8 colors when they're bold
+				if (i & 0x10000 && index < 8) {
+					index += 8;
+				}
+				return 'color: #' + palette[index] + '; ';
+			};
+			var bg_color_to_css = function(i) {
+				return 'background-' + color_to_css((i&0x10000) | ((i&0xff00) >> 8));
+			};
 			var stylize = function (txt, style) {
-				if(txt.length == 0 || style == 0) {
+				if (txt.length == 0 || style == 0) {
 					return txt
 				}
 				css = ''
-				if(style & 0x10000) css += 'font-weight: bold; ';
-				if(style & 0x20000) css += 'text-decoration: underline; ';
-				if(style & 0x40000) css += 'text-decoration: underline; '; // blink
-				if(style & 0x80000) css += 'text-decoration: line-through; '; // invisible
-				if(style & 0x000ff) css += color_to_css(style & 0xff);
-				if(style & 0x0ff00) css += 'background-' + color_to_css((style & 0xff00) >> 8);
+				if (style & 0x10000) css += 'font-weight: bold; ';
+				if (style & 0x20000) css += 'text-decoration: underline; ';
+				if (style & 0x40000) css += 'text-decoration: underline; '; // blink
+				if (style & 0x80000) css += 'text-decoration: line-through; '; // invisible
+				if (style & 0x000ff) css += color_to_css(style);
+				if (style & 0x0ff00) css += bg_color_to_css(style);
 				return $('<span style="'+css+'"></span>').text(txt);
-			}
-			socket.on('init', function (v) {
+			};
+			var redraw_wait = false;
+			var redraw_again = false;
+			var redraw_now = function () {
 				$body.children().remove();
-				for(i in v.text) {
+				for (i in term.text) {
 					div = $('<div>');
 					txt = ''
 					a = 0;
-					for(j in v.text[i]) {
-						if(v.attributes[i][j] != a) {
-							if(txt.length) {
+					for (j in term.text[i]) {
+						if (term.attributes[i][j] != a) {
+							if (txt.length) {
 								div.append(stylize(txt, a));
 								txt = ''
 							}
-							a = v.attributes[i][j]
+							a = term.attributes[i][j]
 						}
-						txt += v.text[i][j]
+						txt += term.text[i][j]
 					}
 					if(txt.length) {
 						div.append(stylize(txt, a));
 					}
 					$body.append(div);
 				}
+			}
+			// limit to 50fps
+			var redraw = function () {
+				if (redraw_wait) {
+					redraw_again = true;
+				} else {
+					redraw_now()
+					redraw_wait = true;
+					redraw_again = false;
+					setTimeout(function () {
+						redraw_wait = false;
+						if(redraw_again) {
+							redraw_again = false;
+							redraw();
+						}
+					}, 20);
+				}
+			}
+			var update = function (data) {
+				if (term) {
+					term.update(data);
+					redraw();
+				}
+			};
+
+			socket.on('data', function (data) {
+				update(data);
+			});
+			socket.on('init', function (v) {
+				term = terminal.new(v.width, v.height);
+				term.x = v.x;
+				term.y = v.y;
+				term.a = v.a;
+				term.text = v.text;
+				term.attributes = v.attributes;
+				redraw();
 			});
 		});
 	</script>
 	<style>
 		body {
-			color: white;
-			background: black;
+			color: #d3d7cf;
+			background: #2e3436;
 			font-family: monospace;
 			font-size: 12px;
 			line-height: 14px;
