Embed html/js/css into Go executable

Signed-off-by: Jianhui Zhao <jianhuizhao329@gmail.com>

rttys.go

@@ -3,6 +3,7 @@ package main
 import (
     "flag"
     "fmt"
+    "log"
     "sync"
     "time"
     "errors"
@@ -13,6 +14,9 @@ import (
     "encoding/hex"
     "encoding/json"
     "github.com/gorilla/websocket"
+
+    _ "github.com/zhaojh329/rttys/statik"
+    "github.com/rakyll/statik/fs"
 )
 
 var upgrader = websocket.Upgrader{}
@@ -238,13 +242,18 @@ func serveWs(w http.ResponseWriter, r *http.Request) {
 
 func main() {
     port := flag.Int("port", 5912, "http service port")
-    document := flag.String("document", "./www", "http service document dir")
     flag.Parse()
 
     rand.Seed(time.Now().Unix())
 
+    statikFS, err := fs.New()
+    if err != nil {
+        log.Fatal(err)
+        return
+    }
+
     http.HandleFunc("/ws/device", serveWs)
     http.HandleFunc("/ws/browser", serveWs)
-    http.Handle("/", http.FileServer(http.Dir(*document)))
-    http.ListenAndServe(":" + strconv.Itoa(*port), nil)
-}
+    http.Handle("/", http.FileServer(statikFS))
+    log.Fatal(http.ListenAndServe(":" + strconv.Itoa(*port), nil))
+}

www/css/app.css

@@ -0,0 +1,64 @@
+html, body {
+    background-color: #555;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	height: 97%;
+}
+
+#box {
+    position: absolute;
+    top: 50%;
+    left:50%;
+    margin: -150px 0 0 -150px;
+    width: 300px;
+    height: 300px;
+}
+
+#box h1 {
+    color: #fff;
+    text-shadow:0 0 10px;
+    letter-spacing: 1px;
+    text-align: center;
+}
+
+#box input {
+    width: 278px;
+    height: 18px;
+    margin-bottom: 10px;
+    outline: none;
+    padding: 10px;
+    font-size: 15px;
+    color: #fff;
+    border-top: 1px solid #312E3D;
+    border-left: 1px solid #312E3D;
+    border-right: 1px solid #312E3D;
+    border-bottom: 1px solid #56536A;
+    border-radius: 4px;
+    background-color: #2D2D3F;
+}
+
+.btn {
+    width: 300px;
+    min-height: 20px;
+    background-color: #4a77d4;
+    border: 1px solid #3762bc;
+    color: #fff;
+    padding: 9px 14px;
+    font-size: 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+a:hover {
+	color: #fff;
+    text-shadow:0 0 10px;
+}
+
+#terminal-container {
+	height: 100%;
+}

www/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>RTTY</title>
+    <link rel="stylesheet" type="text/css" href="/css/app.css"/>
+	<link rel="stylesheet" href="/css/xterm.css" />
+	<script src="/js/jquery-1.12.4.min.js"></script>
+	<script src="/js/xterm.js"></script>
+	<script src="/js/fit.js"></script>
+	<script src="/js/base64.min.js"></script>
+</head>
+<body>
+    <div id="box">
+		<h1>RTTY</h1>
+		<input id="did" type="text" placeholder="Please input device id" name="did"></input>
+		<span id="msg" style="color:red;"></span>
+		<button id="connect" class="btn" type="button">Connect</button>
+    </div>
+	<div id="terminal-container"></div>
+	<script>
+		var ws;
+		var term;
+		var sid;
+		var did;
+
+		function getQueryString(name) {
+			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+			var r = window.location.search.substr(1).match(reg);
+			if (r != null)
+				return unescape(r[2]);
+			return null;
+		}
+
+		function new_session(did) {
+			ws = new WebSocket('ws://' + location.host + '/ws/browser?did=' + did);
+			ws.onopen = function() {
+				term = new Terminal({
+					focus: true,
+					cursorBlink: true,
+					screenKeys: true
+				});
+				
+				term.on('data', function(data) {
+					ws.send(JSON.stringify({type: 'data', did: did, sid: sid, data: Base64.encode(data)}));
+				});
+				
+				term.on('open', function() {
+					window.addEventListener("resize", function(event) {
+						term.fit();
+					});
+					
+					term.fit();
+				});
+				
+				ws.onmessage = function(evt) {
+					var resp = JSON.parse(evt.data);
+					
+					var type = resp.type
+					if (type == 'login') {
+						if (resp.err) {
+							$('#msg').text(resp.err);
+							return;
+						}
+						sid = resp.sid;
+						term.open($('#terminal-container')[0], true);
+					} else if (type == 'data') {
+						term.write(Base64.decode(resp.data));
+					} else if (type == 'logout') {
+						ws.close();
+					}
+				};
+				
+				ws.onclose = function () {
+					term.destroy();
+				};
+			};
+		}
+
+		function do_connect() {
+			if (did == '') {
+				$('#msg').text('Please input device id');
+			} else {
+				$('#msg').text('');
+				new_session(did);
+			}
+		}
+
+		$("#connect").click(function() {
+			did = $('#did').val().trim();
+			do_connect();
+		});
+
+		$(function() {
+			did = getQueryString('id');
+			if (did && did != '') {
+				do_connect();
+			}
+		});
+	</script>
+</body>
+</html>

www/js/base64.min.js

@@ -0,0 +1 @@
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(global):typeof define==="function"&&define.amd?define(factory):global.moment=factory(global)})(typeof self!=="undefined"?self:typeof window!=="undefined"?window:typeof global!=="undefined"?global:this,function(global){"use strict";var _Base64=global.Base64;var version="2.4.0";var buffer;if(typeof module!=="undefined"&&module.exports){try{buffer=require("buffer").Buffer}catch(err){}}var b64chars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<128?c:cc<2048?fromCharCode(192|cc>>>6)+fromCharCode(128|cc&63):fromCharCode(224|cc>>>12&15)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}else{var cc=65536+(c.charCodeAt(0)-55296)*1024+(c.charCodeAt(1)-56320);return fromCharCode(240|cc>>>18&7)+fromCharCode(128|cc>>>12&63)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|(ccc.length>1?ccc.charCodeAt(1):0)<<8|(ccc.length>2?ccc.charCodeAt(2):0),chars=[b64chars.charAt(ord>>>18),b64chars.charAt(ord>>>12&63),padlen>=2?"=":b64chars.charAt(ord>>>6&63),padlen>=1?"=":b64chars.charAt(ord&63)];return chars.join("")};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?buffer.from&&buffer.from!==Uint8Array.from?function(u){return(u.constructor===buffer.constructor?u:buffer.from(u)).toString("base64")}:function(u){return(u.constructor===buffer.constructor?u:new buffer(u)).toString("base64")}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(String(u)):_encode(String(u)).replace(/[+\/]/g,function(m0){return m0=="+"?"-":"_"}).replace(/=/g,"")};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(["[À-ß][€-¿]","[à-ï][€-¿]{2}","[ð-÷][€-¿]{3}"].join("|"),"g");var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=(7&cccc.charCodeAt(0))<<18|(63&cccc.charCodeAt(1))<<12|(63&cccc.charCodeAt(2))<<6|63&cccc.charCodeAt(3),offset=cp-65536;return fromCharCode((offset>>>10)+55296)+fromCharCode((offset&1023)+56320);case 3:return fromCharCode((15&cccc.charCodeAt(0))<<12|(63&cccc.charCodeAt(1))<<6|63&cccc.charCodeAt(2));default:return fromCharCode((31&cccc.charCodeAt(0))<<6|63&cccc.charCodeAt(1))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode(n>>>8&255),fromCharCode(n&255)];chars.length-=[0,0,2,1][padlen];return chars.join("")};var atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/[\s\S]{1,4}/g,cb_decode)};var _decode=buffer?buffer.from&&buffer.from!==Uint8Array.from?function(a){return(a.constructor===buffer.constructor?a:buffer.from(a,"base64")).toString()}:function(a){return(a.constructor===buffer.constructor?a:new buffer(a,"base64")).toString()}:function(a){return btou(atob(a))};var decode=function(a){return _decode(String(a).replace(/[-_]/g,function(m0){return m0=="-"?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict};if(typeof Object.defineProperty==="function"){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,"toBase64",noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,"toBase64URI",noEnum(function(){return encode(this,true)}))}}if(global["Meteor"]){Base64=global.Base64}if(typeof module!=="undefined"&&module.exports){module.exports.Base64=global.Base64}else if(typeof define==="function"&&define.amd){define([],function(){return global.Base64})}return{Base64:global.Base64}});

www/js/fit.js

@@ -0,0 +1,86 @@
+/**
+ * Fit terminal columns and rows to the dimensions of its DOM element.
+ *
+ * ## Approach
+ * - Rows: Truncate the division of the terminal parent element height by the terminal row height.
+ *
+ * - Columns: Truncate the division of the terminal parent element width by the terminal character
+ * width (apply display: inline at the terminal row and truncate its width with the current
+ * number of columns).
+ * @module xterm/addons/fit/fit
+ * @license MIT
+ */
+
+(function (fit) {
+  if (typeof exports === 'object' && typeof module === 'object') {
+    /*
+     * CommonJS environment
+     */
+    module.exports = fit(require('../../xterm'));
+  } else if (typeof define == 'function') {
+    /*
+     * Require.js is available
+     */
+    define(['../../xterm'], fit);
+  } else {
+    /*
+     * Plain browser environment
+     */
+    fit(window.Terminal);
+  }
+})(function (Xterm) {
+  var exports = {};
+
+  exports.proposeGeometry = function (term) {
+    if (!term.element.parentElement) {
+      return null;
+    }
+    var parentElementStyle = window.getComputedStyle(term.element.parentElement),
+        parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
+        parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
+        elementStyle = window.getComputedStyle(term.element),
+        elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
+        elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
+        availableHeight = parentElementHeight - elementPaddingVer,
+        availableWidth = parentElementWidth - elementPaddingHor,
+        container = term.rowContainer,
+        subjectRow = term.rowContainer.firstElementChild,
+        contentBuffer = subjectRow.innerHTML,
+        characterHeight,
+        rows,
+        characterWidth,
+        cols,
+        geometry;
+
+    subjectRow.style.display = 'inline';
+    subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
+    characterWidth = subjectRow.getBoundingClientRect().width;
+    subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
+    characterHeight = subjectRow.getBoundingClientRect().height;
+    subjectRow.innerHTML = contentBuffer;
+
+    rows = parseInt(availableHeight / characterHeight);
+    cols = parseInt(availableWidth / characterWidth);
+
+    geometry = {cols: cols, rows: rows};
+    return geometry;
+  };
+
+  exports.fit = function (term) {
+    var geometry = exports.proposeGeometry(term);
+
+    if (geometry) {
+      term.resize(geometry.cols, geometry.rows);
+    }
+  };
+
+  Xterm.prototype.proposeGeometry = function () {
+    return exports.proposeGeometry(this);
+  };
+
+  Xterm.prototype.fit = function () {
+    return exports.fit(this);
+  };
+
+  return exports;
+});