Removed example project junk & added UART drivers
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
<!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>
|
||||
|
||||
<!-- Katedra mereni FEL, 2017 -->
|
||||
<!-- TODO GitHub link -->
|
||||
|
||||
<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()</script>
|
||||
@@ -0,0 +1,271 @@
|
||||
//region Libs / utils
|
||||
|
||||
/*
|
||||
* DOM selector
|
||||
*
|
||||
* Usage:
|
||||
* $('div');
|
||||
* $('#name');
|
||||
* $('.name');
|
||||
*
|
||||
*
|
||||
* Copyright (C) 2011 Jed Schmidt <http://jed.is> - WTFPL
|
||||
* More: https://gist.github.com/991057
|
||||
*
|
||||
*/
|
||||
|
||||
var $ = function(
|
||||
a, // take a simple selector like "name", "#name", or ".name", and
|
||||
b // an optional context, and
|
||||
){
|
||||
a = a.match(/^(\W)?(.*)/); // split the selector into name and symbol.
|
||||
return( // return an element or list, from within the scope of
|
||||
b // the passed context
|
||||
|| document // or document,
|
||||
)[
|
||||
"getElement" + ( // obtained by the appropriate method calculated by
|
||||
a[1]
|
||||
? a[1] == "#"
|
||||
? "ById" // the node by ID,
|
||||
: "sByClassName" // the nodes by class name, or
|
||||
: "sByTagName" // the nodes by tag name,
|
||||
)
|
||||
](
|
||||
a[2] // called with the name.
|
||||
)
|
||||
};
|
||||
|
||||
/*
|
||||
* Create DOM element
|
||||
*
|
||||
* Usage:
|
||||
* var el = m('<h1>Hello</h1>');
|
||||
* document.body.appendChild(el);
|
||||
*
|
||||
*
|
||||
* DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
* Version 2, December 2004
|
||||
*
|
||||
* Copyright (C) 2011 Jed Schmidt <http://jed.is> - WTFPL
|
||||
* More: https://gist.github.com/966233
|
||||
*
|
||||
*/
|
||||
|
||||
var m = function(
|
||||
a, // an HTML string
|
||||
b, // placeholder
|
||||
c // placeholder
|
||||
){
|
||||
b = document; // get the document,
|
||||
c = b.createElement("p"); // create a container element,
|
||||
c.innerHTML = a; // write the HTML to it, and
|
||||
a = b.createDocumentFragment(); // create a fragment.
|
||||
|
||||
while ( // while
|
||||
b = c.firstChild // the container element has a first child
|
||||
) a.appendChild(b); // append the child to the fragment,
|
||||
|
||||
return a // and then return the fragment.
|
||||
};
|
||||
|
||||
//endregion
|
||||
|
||||
|
||||
//
|
||||
// Terminal class
|
||||
//
|
||||
(function () {
|
||||
function make(e) {return document.createElement(e)}
|
||||
|
||||
var W = 26, H = 10; //26, 10
|
||||
var cursor = {a: false, x: 0, y: 0, suppress: false, hidden: false};
|
||||
var screen = [];
|
||||
|
||||
/** Colors table */
|
||||
var CLR = [// dark gray #2E3436
|
||||
// 0 black, 1 red, 2 green, 3 yellow
|
||||
// 4 blue, 5 mag, 6 cyan, 7 white
|
||||
'#111213','#CC0000','#4E9A06','#C4A000',
|
||||
'#3465A4','#75507B','#06989A','#D3D7CF',
|
||||
// BRIGHT
|
||||
// 8 black, 9 red, 10 green, 11 yellow
|
||||
// 12 blue, 13 mag, 14 cyan, 15 white
|
||||
'#555753','#EF2929','#8AE234','#FCE94F',
|
||||
'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
|
||||
];
|
||||
|
||||
/** Clear screen */
|
||||
function cls() {
|
||||
screen.forEach(function(cell, i) {
|
||||
cell.t = ' ';
|
||||
cell.fg = 7;
|
||||
cell.bg = 0;
|
||||
blit(cell);
|
||||
});
|
||||
}
|
||||
|
||||
/** Set text and color at XY */
|
||||
function cellAt(y, x) {
|
||||
return screen[y*W+x];
|
||||
}
|
||||
|
||||
/** Get cell under cursor */
|
||||
function cursorCell() {
|
||||
return cellAt(cursor.y, cursor.x);
|
||||
}
|
||||
|
||||
/** Enable or disable cursor visibility */
|
||||
function cursorEnable(enable) {
|
||||
cursor.hidden = !enable;
|
||||
cursor.a &= enable;
|
||||
blit(cursorCell(), cursor.a);
|
||||
}
|
||||
|
||||
/** Safely move cursor */
|
||||
function cursorSet(y, x) {
|
||||
// Hide and prevent from showing up during the move
|
||||
cursor.suppress = true;
|
||||
blit(cursorCell(), false);
|
||||
|
||||
cursor.x = x;
|
||||
cursor.y = y;
|
||||
|
||||
// Show again
|
||||
cursor.suppress = false;
|
||||
blit(cursorCell(), cursor.a);
|
||||
}
|
||||
|
||||
/** Update cell on display. inv = invert (for cursor) */
|
||||
function blit(cell, inv) {
|
||||
var e = cell.e, fg, bg;
|
||||
// Colors
|
||||
fg = inv ? cell.bg : cell.fg;
|
||||
bg = inv ? cell.fg : cell.bg;
|
||||
// Update
|
||||
e.innerText = (cell.t+' ')[0];
|
||||
e.style.color = colorHex(fg);
|
||||
e.style.backgroundColor = colorHex(bg);
|
||||
e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
|
||||
}
|
||||
|
||||
/** Show entire screen */
|
||||
function blitAll() {
|
||||
screen.forEach(function(cell, i) {
|
||||
/* Invert if under cursor & cursor active */
|
||||
var inv = cursor.a && (i == cursor.y*W+cursor.x);
|
||||
blit(cell, inv);
|
||||
});
|
||||
}
|
||||
|
||||
/** Load screen content from a 'binary' sequence */
|
||||
function load(seq) {
|
||||
if (seq.length != W*H*3) throw "Bad data format.";
|
||||
|
||||
// primitive format with 3 chars per cell: letter, fg [hex], bg [hex]
|
||||
for (var i = 0; i < W * H; i++) {
|
||||
var cell = screen[i];
|
||||
cell.t = seq[i*3];
|
||||
cell.fg = parseInt(seq[i*3+1], 16);
|
||||
cell.bg = parseInt(seq[i*3+2], 16);
|
||||
}
|
||||
|
||||
blitAll();
|
||||
}
|
||||
|
||||
/** Parse color */
|
||||
function colorHex(c) {
|
||||
var c = parseInt(c);
|
||||
if (c < 0 || c > 15) c = 0;
|
||||
return CLR[c];
|
||||
}
|
||||
|
||||
/** Init the terminal */
|
||||
function init() {
|
||||
/* Build screen & show */
|
||||
var e, scr = $('#screen');
|
||||
for(var i = 0; i < W*H; i++) {
|
||||
e = make('span');
|
||||
|
||||
/* End of line */
|
||||
if ((i > 0) && (i % W == 0)) {
|
||||
scr.appendChild(make('br'));
|
||||
}
|
||||
/* The cell */
|
||||
scr.appendChild(e);
|
||||
|
||||
var cell = {t: ' ', fg: 7, bg: 0, e: e};
|
||||
screen.push(cell);
|
||||
blit(cell);
|
||||
}
|
||||
|
||||
/* Cursor blinking */
|
||||
setInterval(function() {
|
||||
cursor.a = !cursor.a;
|
||||
if (cursor.hidden) {
|
||||
cursor.a = false;
|
||||
}
|
||||
|
||||
if (!cursor.suppress) {
|
||||
blit(cursorCell(), cursor.a);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// publish
|
||||
window.Term = {
|
||||
init: init,
|
||||
load: load,
|
||||
setCursor: cursorSet,
|
||||
enableCursor: cursorEnable,
|
||||
clear: cls,
|
||||
};
|
||||
})();
|
||||
|
||||
//
|
||||
// Connection class
|
||||
//
|
||||
(function() {
|
||||
var wsUri = "ws://"+window.location.host+"/ws/update.cgi";
|
||||
var ws;
|
||||
|
||||
function onOpen(evt) {
|
||||
console.log("CONNECTED");
|
||||
}
|
||||
|
||||
function onClose(evt) {
|
||||
console.error("SOCKET CLOSED");
|
||||
}
|
||||
|
||||
function onMessage(evt) {
|
||||
console.log("Message received!", evt.data);
|
||||
// TODO process
|
||||
}
|
||||
|
||||
function onError(evt) {
|
||||
console.error(evt.data);
|
||||
}
|
||||
|
||||
function doSend(message) {
|
||||
ws.send(message);
|
||||
}
|
||||
|
||||
function init() {
|
||||
ws = new WebSocket(wsUri);
|
||||
ws.onopen = onOpen;
|
||||
ws.onclose = onClose
|
||||
ws.onmessage = onMessage;
|
||||
ws.onerror = onError;
|
||||
|
||||
console.log("Opening socket.");
|
||||
}
|
||||
|
||||
window.Conn = {
|
||||
ws: null,
|
||||
init: init,
|
||||
};
|
||||
})();
|
||||
|
||||
function init() {
|
||||
Term.init();
|
||||
Conn.init();
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user