-<script src="/socket.io/socket.io.js"></script>
-<script>
- var socket = io.connect('http://localhost');
- socket.on('write', function (data) {
- console.log(data);
- });
-</script>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>Remote Terminal Viewer</title>
+ <script src="/jquery.js"></script>
+ <script src="/socket.io/socket.io.js"></script>
+ <script>
+ $(function() {
+ 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') +
+ '; ';
+ }
+ 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 & 0xff);
+ if(style & 0x0ff00) css += 'background-' + color_to_css((style & 0xff00) >> 8);
+ return $('<span style="'+css+'"></span>').text(txt);
+ }
+ socket.on('init', function (v) {
+ $body.children().remove();
+ for(i in v.text) {
+ div = $('<div>');
+ txt = ''
+ a = 0;
+ for(j in v.text[i]) {
+ if(v.attributes[i][j] != a) {
+ if(txt.length) {
+ div.append(stylize(txt, a));
+ txt = ''
+ }
+ a = v.attributes[i][j]
+ }
+ txt += v.text[i][j]
+ }
+ if(txt.length) {
+ div.append(stylize(txt, a));
+ }
+ $body.append(div);
+ }
+ });
+ });
+ </script>
+ <style>
+ body {
+ color: white;
+ background: black;
+ font-family: monospace;
+ font-size: 12px;
+ line-height: 14px;
+ white-space: pre;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>