Skip to content

Instantly share code, notes, and snippets.

@mwiemarc

mwiemarc/esp-light-control

Last active January 22, 2019 00:18
Show Gist options
  • Save mwiemarc/ff035d47a03b93835f90750b8670fb3c to your computer and use it in GitHub Desktop.
Save mwiemarc/ff035d47a03b93835f90750b8670fb3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
esp-light-control
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,300,600">
<link rel="stylesheet" href="https://cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<title>ESP Light Control</title>
<style type="text/css">
.header {
font-weight: bold;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #cfcfcf;
}
.row {
margin-bottom: 20px;
}
#brightness {
display: inline-block;
margin-left: 10px;
color: #cfcfcf;
font-size: 12px;
}
#connection-status {
text-align: right;
color: #f00;
}
#connection-status.connected {
color: #0f0;
}
#color-preview {
border-radius: 3px;
height: 160px;
background: #fff;
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.25);
}
input[type=range] {
-webkit-appearance: none;
border: none;
width: 100%;
border-radius: 3px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 26px;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 2px;
height: 32px;
width: 18px;
background: #efefef;
margin-top: -4px;
box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.6);
}
input[type=range]:focus {
outline: none;
}
#range-hue {
background: -webkit-linear-gradient(left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%) 100%);
}
#range-saturation {
background: -webkit-linear-gradient(left, #fff, hsl(0, 100%, 50%) 100%);
}
#range-brightness {
background: #dfdfdf;
}
</style>
</head>
<body>
<div class="container">
<div class="row header">
<div class="one-third column">ESP Light Control</div>
<div class="two-thirds column" id="connection-status">⬤</div>
</div>
<div class="row">
<div class="one-third column">
Brightness <span id="brightness"></span>
</div>
<div class="two-thirds column" id="connection-status">
<input id="range-brightness" type="range" value="0" min="0" max="255" step="1" oninput="updateBrightness()">
</div>
</div>
<br>
<div class="row">
<div class="column">
<div id="color-preview">&nbsp;</div>
</div>
</div>
<br>
<div class="row">
<div class="column">
<input id="range-hue" type="range" value="0" min="0" max="360" step="1" oninput="updateHue()">
</div>
</div>
<div class="row">
<div class="column">
<input id="range-saturation" type="range" value="0" min="0" max="100" step="1" oninput="updateSaturation()">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script>
var LED_COUNT = 0;
var socket = null;
var hue = 0;
var sat = 0;
function updateHue() {
hue = parseInt(document.querySelector('#range-hue').value);
document.querySelector('#range-saturation').style['background'] = '-webkit-linear-gradient(left, #fff, hsl(' + hue + ', 100%, 50%) 100%)';
updateColor();
}
function updateSaturation() {
sat = parseInt(document.querySelector('#range-saturation').value);
updateColor();
}
function updateColor() {
var c = tinycolor({ h: hue, s: sat, v: 100 });
document.querySelector('#color-preview').style['background'] = c.toHexString();
sendCommand('set_leds', c.toHex().repeat(LED_COUNT));
}
function updateBrightness() {
var b = parseInt(document.querySelector('#range-brightness').value);
document.querySelector('#brightness').innerHTML = b;
sendCommand('set_brightness', b);
}
function sendCommand(cmd, args = '') {
if (socket == null) {
alert('Socket not connected!');
return;
}
socket.send(args == '' ? cmd : cmd + ':' + args);
}
function connectSocket() {
var ip = location.hash.substr(1);
if (ip == '') {
alert('No IP set, unable to connect!');
return;
}
socket = new WebSocket('ws://' + ip);
socket.onopen = function () {
console.log('Socket opend');
document.querySelector('#connection-status').className = 'connected';
socket.send('get_leds');
socket.send('get_brightness');
};
socket.onclose = function () {
console.log('Socket closed, reconnect in 1sec');
document.querySelector('#connection-status').className = '';
setTimeout(function () {
socket = null;
connectSocket();
}, 1000);
};
socket.onmessage = function (event) {
var cmd = event.data.indexOf(':') == -1 ? event.data : event.data.split(':')[0];
var args = event.data.indexOf(':') > -1 ? event.data.split(':')[1] : '';
switch (cmd) {
case 'ok':
// do nothing
break;
case 'brightness':
var b = parseInt(args);
document.querySelector('#brightness').innerHTML = b;
document.querySelector('#range-brightness').value = b;
break;
case 'leds':
var c = (tinycolor('#' + args.substr(0, 6)));
LED_COUNT = args.length / 6;
hue = c.toHsv().h;
sat = c.toHsv().s * 100;
document.querySelector('#color-preview').style['background'] = c.toHexString();
document.querySelector('#range-saturation').style['background'] = '-webkit-linear-gradient(left, #fff, hsl(' + c.toHsl().h + ', 100%, 50%) 100%)';
document.querySelector('#range-hue').value = c.toHsv().h;
document.querySelector('#range-saturation').value = c.toHsv().s * 100;
break;
default:
console.log('Unknown command recieved: "' + event.data + '"');
break;
}
};
}
(function () {
connectSocket();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment