Skip to content

Instantly share code, notes, and snippets.

@MrTimcakes

MrTimcakes/WebSocket Interaction Espruino Script

Last active April 11, 2016 05:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MrTimcakes/b81e7a70f0a523298383213abecef904 to your computer and use it in GitHub Desktop.
Save MrTimcakes/b81e7a70f0a523298383213abecef904 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WebSocket Interaction Espruino Script
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.stringify(msg)); });
ws.send("Hello from Espruino!");
});
Raw
WebSocket Interaction Webpage
<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"); //Mumbojumbo protocol to prevent default SSL?
var timestamp = Date.now();
var pos = 50;
var dragging = false;
function $(id) { return document.getElementById(id); } //save some space by compressing document.getElementById to $
function setPos(p) {
0>p&&(p=0);100<p&&(p=100); // Force P within 0-100
pos = p;
if((Date.now() - timestamp) > 100){ // Only allow 1 message every 100ms
timestamp = Date.now();
ws.send(pos)
}
$("label").textContent = pos;
var a = (pos-50)*2.8;
$("needle").setAttribute("transform","rotate("+a+" 250 250)");
}
setPos(pos);
function dragStart() {
dragging = true;
$("ring").style.fill = "#ff0000";
}
document.addEventListener("mousemove", function(e) {
if (dragging) {
e.preventDefault();
var svg = $("svg");
setPos(Math.round(((Math.atan2(e.clientX-(svg.clientWidth/2),(svg.clientHeight/2)-e.clientY)*180/Math.PI)/2.8)+50));
}
});
document.addEventListener("mouseup", function(e) {
dragging = false;
$("ring").style.fill = "#80e5ff";
$("up").style.fill = "#d5f6ff";
$("dn").style.fill = "#d5f6ff";
});
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0], type = "";
switch(event.type) {
case "touchstart": type="mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
$("ring").onmousedown = dragStart;
$("needle").onmousedown = dragStart;
$("up").onmousedown = function(e) { e.preventDefault(); this.style.fill = "#00ff00"; };
$("dn").onmousedown = function(e) { e.preventDefault(); this.style.fill = "#ff0000"; };
$("up").onmouseup = function(e) { setPos(pos+10); };
$("dn").onmouseup = function(e) { setPos(pos-10); };
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment