Skip to content

Instantly share code, notes, and snippets.

@MrTimcakes

MrTimcakes/WS2812b Interactive WebSocket.js

Last active May 25, 2016 22:20
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/6dc1c78f27d3841e47d3125e8b515407 to your computer and use it in GitHub Desktop.
Save MrTimcakes/6dc1c78f27d3841e47d3125e8b515407 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WS2812b Interactive WebSocket.js
var WiFi = require("Wifi");
var esp = require("ESP8266");
var brightness = 255;
var updateTimeout;
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 src="/interact.js"></script></body>';
var 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)};';
function updateLEDs(){
for (var i=0;i<arr.length;i+=3) {
arr[i ] = (1) * brightness;
arr[i+1] = (1) * brightness;
arr[i+2] = (1) * brightness;
}
esp.neopixelWrite(NodeMCU.D1, arr);
}
function onPageRequest(req, res) {
var a = url.parse(req.url, true);
if(a.pathname == "/interact.js"){
res.writeHead(200, {'Content-Type': 'application/javascript'});
res.end(script);
}else{
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(page);
}
}
var server = require('ws').createServer(onPageRequest);
server.listen(80);
server.on("websocket", function(ws) {
ws.on('message',function(msg) {
console.log("[WS]"+msg);
brightness = msg*2.55;
});
});
console.log(WiFi.getIP().ip);
var arr = new Uint8ClampedArray(112*3);
setInterval(updateLEDs, 500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment