parent
5c948b079b
commit
ca93a3b90d
@ -1 +1 @@ |
||||
var $=function(d,c){d=d.match(/^(\W)?(.*)/);return(c||document)["getElement"+(d[1]?d[1]=="#"?"ById":"sByClassName":"sByTagName")](d[2])};var m=function(e,d,f){d=document;f=d.createElement("p");f.innerHTML=e;e=d.createDocumentFragment();while(d=f.firstChild){e.appendChild(d)}return e};(function(){function a(r){return document.createElement(r)}var b=26,k=10;var l={a:false,x:0,y:0,suppress:false,hidden:false};var o=[];var g=["#111213","#CC0000","#4E9A06","#C4A000","#3465A4","#75507B","#06989A","#D3D7CF","#555753","#EF2929","#8AE234","#FCE94F","#729FCF","#AD7FA8","#34E2E2","#EEEEEC"];function p(){o.forEach(function(r,s){r.t=" ";r.fg=7;r.bg=0;d(r)})}function c(s,r){return o[s*b+r]}function i(){return c(l.y,l.x)}function q(r){l.hidden=!r;l.a&=r;d(i(),l.a)}function f(s,r){l.suppress=true;d(i(),false);l.x=r;l.y=s;l.suppress=false;d(i(),l.a)}function d(s,r){var v=s.e,t,u;t=r?s.bg:s.fg;u=r?s.fg:s.bg;v.innerText=(s.t+" ")[0];v.style.color=e(t);v.style.backgroundColor=e(u);v.style.fontWeight=t>7?"bold":"normal"}function h(){o.forEach(function(s,t){var r=l.a&&(t==l.y*b+l.x);d(s,r)})}function j(v){l.x=v.x;l.y=v.y;var w=0,C=0,y=v.screen;var r=7,x=0;while(w<y.length&&C<b*k){var A=o[C++];var u=y[w];if(u!=","){r=A.fg=parseInt(y[w++],16);x=A.bg=parseInt(y[w++],16)}else{w++;A.fg=r;A.bg=x}var B=A.t=y[w++];var s=0;switch(y[w]){case"r":s=1;break;case"s":s=2;break;case"t":s=3;break;case"u":s=4;break;default:s=0}if(s>0){var z=parseInt(y.substr(w+1,s));w=w+s+1;for(;z>0&&C<b*k;z--){A=o[C++];A.fg=r;A.bg=x;A.t=B}}}h()}function e(r){r=parseInt(r);if(r<0||r>15){r=0}return g[r]}function n(v){var u,r,t=$("#screen");for(var s=0;s<b*k;s++){u=a("span");if((s>0)&&(s%b==0)){t.appendChild(a("br"))}t.appendChild(u);r={t:" ",fg:7,bg:0,e:u};o.push(r);d(r)}setInterval(function(){l.a=!l.a;if(l.hidden){l.a=false}if(!l.suppress){d(i(),l.a)}},500);j(v)}window.Term={init:n,load:j,setCursor:f,enableCursor:q,clear:p}})();(function(){var g="ws://"+window.location.host+"/ws/update.cgi";var d;function c(i){console.log("CONNECTED")}function b(i){console.error("SOCKET CLOSED")}function f(i){try{console.log("RX: ",i.data);Term.load(JSON.parse(i.data))}catch(j){console.error(j)}}function e(i){console.error(i.data)}function a(i){if(typeof i!="string"){i=JSON.stringify(i)}d.send(i)}function h(){d=new WebSocket(g);d.onopen=c;d.onclose=b;d.onmessage=f;d.onerror=e;console.log("Opening socket.")}window.Conn={ws:null,init:h,send:a}})();function init(a){Term.init(a);Conn.init()}; |
||||
function mk(a){return document.createElement(a)}function q1(a){return document.querySelector(a)}function qa(a){return document.querySelectorAll(a)}(function(){var a,j;var k={a:false,x:0,y:0,suppress:false,hidden:false};var m=[];var f=["#111213","#CC0000","#4E9A06","#C4A000","#3465A4","#75507B","#06989A","#D3D7CF","#555753","#EF2929","#8AE234","#FCE94F","#729FCF","#AD7FA8","#34E2E2","#EEEEEC"];function n(){m.forEach(function(p,q){p.t=" ";p.fg=7;p.bg=0;c(p)})}function b(q,p){return m[q*a+p]}function h(){return b(k.y,k.x)}function o(p){k.hidden=!p;k.a&=p;c(h(),k.a)}function e(q,p){k.suppress=true;c(h(),false);k.x=p;k.y=q;k.suppress=false;c(h(),k.a)}function c(q,p){var t=q.e,r,s;r=p?q.bg:q.fg;s=p?q.fg:q.bg;t.innerText=(q.t+" ")[0];t.style.color=d(r);t.style.backgroundColor=d(s);t.style.fontWeight=r>7?"bold":"normal"}function g(){m.forEach(function(q,r){var p=k.a&&(r==k.y*a+k.x);c(q,p)})}function i(s){k.x=s.x;k.y=s.y;if(s.w!=a||s.h!=j){Term.init(s);return}var u=0,A=0,w=s.screen;var p=7,v=0;while(u<w.length&&A<a*j){var y=m[A++];var r=w[u];if(r!=","){p=y.fg=parseInt(w[u++],16);v=y.bg=parseInt(w[u++],16)}else{u++;y.fg=p;y.bg=v}var z=y.t=w[u++];var q=0;switch(w[u]){case"r":q=1;break;case"s":q=2;break;case"t":q=3;break;case"u":q=4;break;default:q=0}if(q>0){var x=parseInt(w.substr(u+1,q));u=u+q+1;for(;x>0&&A<a*j;x--){y=m[A++];y.fg=p;y.bg=v;y.t=z}}}g()}function d(p){p=parseInt(p);if(p<0||p>15){p=0}return f[p]}function l(t){a=t.w;j=t.h;var s,p,r=q1("#screen");while(r.firstChild){r.removeChild(r.firstChild)}m=[];for(var q=0;q<a*j;q++){s=mk("span");(function(){var u=q%a;var v=Math.floor(q/a);s.addEventListener("click",function(){Kinp.onTap(v,u)})})();if((q>0)&&(q%a==0)){r.appendChild(mk("br"))}r.appendChild(s);p={t:" ",fg:7,bg:0,e:s};m.push(p);c(p)}setInterval(function(){k.a=!k.a;if(k.hidden){k.a=false}if(!k.suppress){c(h(),k.a)}},500);i(t)}window.Term={init:l,load:i,setCursor:e,enableCursor:o,clear:n}})();(function(){var g="ws://"+window.location.host+"/ws/update.cgi";var d;function c(i){console.log("CONNECTED")}function b(i){console.error("SOCKET CLOSED")}function f(i){try{console.log("RX: ",i.data);Term.load(JSON.parse(i.data))}catch(j){console.error(j)}}function e(i){console.error(i.data)}function a(i){console.log("TX: ",i);if(d.readyState!=1){console.error("Socket not ready");return}if(typeof i!="string"){i=JSON.stringify(i)}d.send(i)}function h(){d=new WebSocket(g);d.onopen=c;d.onclose=b;d.onmessage=f;d.onerror=e;console.log("Opening socket.")}window.Conn={ws:null,init:h,send:a}})();(function(){function a(e){Conn.send("STR:"+e)}function b(f,e){Conn.send("TAP:"+f+","+e)}function d(e){Conn.send("BTN:"+e)}function c(){window.addEventListener("keypress",function(h){var g=+h.which;if(g>=32&&g<127){var f=String.fromCharCode(g);a(f)}});window.addEventListener("keydown",function(g){var f=g.keyCode;switch(f){case 8:a("\x08");break;case 13:a("\x0d\x0a");break;case 27:a("\x1b");break;case 37:a("\x1b[D");break;case 38:a("\x1b[A");break;case 39:a("\x1b[C");break;case 40:a("\x1b[B");break}});qa("#buttons button").forEach(function(e){e.addEventListener("click",function(){d(+this.dataset.n)})})}window.Kinp={init:c,onTap:b}})();function init(a){Term.init(a);Conn.init();Kinp.init()}; |
||||
@ -1 +1 @@ |
||||
html,body{background:#48505f;color:#eee;font-family:monospace;font-size:16pt;text-align:center}header{font-weight:bold;font-size:14pt;padding:6px;display:block}#screen{display:block;white-space:nowrap;background:#111213;border-radius:3px;padding:6px;box-shadow:inset 0 0 5px black;display:inline-block}#screen span{white-space:pre}#buttons{margin-top:10px}button{margin:0 2px;padding:10px 0;width:22%;max-width:80px;cursor:pointer} |
||||
html,body{background:#48505f;color:#eee;font-family:monospace;font-size:16pt;text-align:center}header{font-weight:bold;font-size:14pt;padding:6px;display:block}#screen{white-space:nowrap;background:#111213;border-radius:3px;padding:6px;box-shadow:inset 0 0 5px black;display:inline-block}#screen span{white-space:pre;cursor:pointer}#screen span:hover{outline:1px solid rgba(255,255,255,0.5)}#buttons{margin-top:10px;white-space:nowrap}button{margin:0 3px;padding:10px 0;width:18%;max-width:65px;cursor:pointer;font-weight:bold} |
||||
@ -1 +1 @@ |
||||
<!doctype html><meta charset=utf-8><title>ESP8266 Remote Terminal</title><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel=stylesheet href=style.css><script src=script.js></script><header>ESP8266 Remote Terminal</header><div id=screen></div><div id=buttons><button>1</button><button>2</button><button>3</button><button>4</button></div><script>init(%screenData%)</script> |
||||
<!doctype html><meta charset=utf-8><title>ESP8266 Remote Terminal</title><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel=stylesheet href=style.css><script src=script.js></script><header>ESP8266 Remote Terminal</header><div id=screen></div><div id=buttons><button data-n=1>1</button><button data-n=2>2</button><button data-n=3>3</button><button data-n=4>4</button><button data-n=5>5</button></div><script>init(%screenData%)</script> |
||||
@ -0,0 +1,21 @@ |
||||
<!DOCTYPE html> |
||||
|
||||
<meta charset="UTF-8"> |
||||
<title>ESP8266 Remote Terminal</title> |
||||
<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> |
||||
<link rel="stylesheet" href="style.css"> |
||||
<script src="script.js"></script> |
||||
|
||||
<header>ESP8266 Remote Terminal</header> |
||||
|
||||
<div id="screen"></div> |
||||
|
||||
<div id="buttons"> |
||||
<button data-n="1">1</button><!-- |
||||
--><button data-n="2">2</button><!-- |
||||
--><button data-n="3">3</button><!-- |
||||
--><button data-n="4">4</button><!-- |
||||
--><button data-n="5">5</button> |
||||
</div> |
||||
|
||||
<script>init({w: 26, h:10, x:0,y:0,screen:"70 t259"})</script> |
||||
Loading…
Reference in new issue