WebSocket Interactive UI

You are reading a single comment by @MrTimcakes and its replies. Click here to read the full conversation.

•

MrTimcakes

NOTE: This done with an ESP-12E running Espruino on the latest Travis builds of User1 and User2 as they include crypto support which is needed for the WebSocket Server.

This is an example of using WebSockets for real-time interaction, it is adapted from the Interactive Web UI example. The Espruino acts as both the WebSocket Server and a web server to serve the page to the client.

The code for the webpage for this client is in this Gist on GitHub as it was too large to fit on the forum. This code send the value over a WebSocket every time the value is updated instead of sending a POST request when the mouse is lifted like the Interactive Web UI demo.

The Espruino code is just below (New Code in this post). Just upload it to your ESP after setting Wifi up and saving that. I'd recommend visiting the page from a smartphone, the touch controls feel fluid. The webpage is a (espIP):8000

var page = '<body style="width:100%;height:100%;overflow:hidden;"><svg style="width:100%;height:100%;"  viewbox="0 0 500 500" id="svg"><path style="fill:#80e5ff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 250 0 C 111.92882 3.7895613e-14 0 111.92882 0 250 C -1.249508e-14 341.05067 48.689713 420.72528 121.4375 464.4375 L 154.625 409.40625 C 100.50052 376.95218 64.28125 317.69934 64.28125 250 C 64.28125 147.43284 147.43284 64.28125 250 64.28125 C 352.56716 64.28125 435.71875 147.43284 435.71875 250 C 435.71875 317.53896 399.66155 376.65256 345.75 409.15625 L 378.71875 464.34375 C 451.37991 420.61135 500 340.98541 500 250 C 500 111.92882 388.07118 -1.8947806e-14 250 0 z " id="ring"/> <rect style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="needle" width="16" height="80" x="242"/> <text xml:space="preserve" style="font-size:122.59261322px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica;-inkscape-font-specification:Helvetica" x="250.01915" y="845.31812" id="text"><tspan id="label" x="250.01915" y="292.95594">0</tspan></text> <path style="fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="up" d="m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z" transform="matrix(0.61903879,0,0,0.61903879,95.682477,91.16682)" /> <path transform="matrix(0.61903879,0,0,-0.61903879,95.682477,408.80767)" d="m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z" id="dn" style="fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none" /></svg><script>var ws=new WebSocket("ws://"+location.host,"protocolOne"),timestamp=Date.now(),pos=50,dragging=!1;function $(a){return document.getElementById(a)}function setPos(a){0>a&&(a=0);100<a&&(a=100);pos=a;100<Date.now()-timestamp&&(timestamp=Date.now(),ws.send(pos));$("label").textContent=pos;a=2.8*(pos-50);$("needle").setAttribute("transform","rotate("+a+" 250 250)")}setPos(pos);function dragStart(){dragging=!0;$("ring").style.fill="#ff0000"}document.addEventListener("mousemove",function(a){if(dragging){a.preventDefault();var b=$("svg");setPos(Math.round(180*Math.atan2(a.clientX-b.clientWidth/2,b.clientHeight/2-a.clientY)/Math.PI/2.8+50))}});document.addEventListener("mouseup",function(a){dragging=!1;$("ring").style.fill="#80e5ff";$("up").style.fill="#d5f6ff";$("dn").style.fill="#d5f6ff"});function touchHandler(a){var b=a.changedTouches[0],c="";switch(a.type){case "touchstart":c="mousedown";break;case "touchmove":c="mousemove";break;case "touchend":c="mouseup";break;default:return}var d=document.createEvent("MouseEvent");d.initMouseEvent(c,!0,!0,window,1,b.screenX,b.screenY,b.clientX,b.clientY,!1,!1,!1,!1,0,null);b.target.dispatchEvent(d);a.preventDefault()}document.addEventListener("touchstart",touchHandler,!0);document.addEventListener("touchmove",touchHandler,!0);document.addEventListener("touchend",touchHandler,!0);document.addEventListener("touchcancel",touchHandler,!0);$("ring").onmousedown=dragStart;$("needle").onmousedown=dragStart;$("up").onmousedown=function(a){a.preventDefault();this.style.fill="#00ff00"};$("dn").onmousedown=function(a){a.preventDefault();this.style.fill="#ff0000"};$("up").onmouseup=function(a){setPos(pos+10)};$("dn").onmouseup=function(a){setPos(pos-10)};</script></body>';

function onPageRequest(req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(page);
}

var server = require('ws').createServer(onPageRequest);
server.listen(8000);
server.on("websocket", function(ws) {
    ws.on('message',function(msg) { print("[WS] "+JSON.strin

Immediately after uploading the code the memory looks like this

>process.memory();
={ "free": 785, "usage": 615, "total": 1400, "history": 532 }

Then when the first user connects

ERROR: Out of Memory!
Execution Interrupted
>process.memory();
={ "free": 588, "usage": 812, "total": 1400, "history": 1 }

I believe the history is cleared and the out of memory error isn't a problem

WebSocket Interactive UI

About

Espruino