X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=index.html;h=a38d7056896b288a78d9d166ba009ddc023e7c54;hb=e80ebd564e2216cf66d839520e91c4d17ec9e177;hp=091da51765727a90377ba6aa534a3f5329f94d2b;hpb=1700d1f6d76490cd696f9072bf28d595a4e484c5;p=watch-my-terminal.git

diff --git a/index.html b/index.html
index 091da51..a38d705 100644
--- a/index.html
+++ b/index.html
@@ -3,23 +3,122 @@
 <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'
+			];
 			var $body = $('body');
 			var socket = io.connect('http://localhost');
-			socket.on('init', function (v) {
+			var color_to_css = function(i) {
+				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) {
+					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);
+				if (style & 0x0ff00) css += bg_color_to_css(style);
+				return $('<span style="'+css+'"></span>').text(txt);
+			};
+			var redraw_wait = false;
+			var redraw_again = false;
+			var redraw_now = function () {
 				$body.children().remove();
-				for(i in v.text) {
-					$body.append($('<div>').text(v.text[i].join('')));
+				for (i in term.text) {
+					div = $('<div>');
+					txt = ''
+					a = 0;
+					for (j in term.text[i]) {
+						if (term.attributes[i][j] != a) {
+							if (txt.length) {
+								div.append(stylize(txt, a));
+								txt = ''
+							}
+							a = term.attributes[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;
