ManuelW/esp8266-nanoleaf-webserver
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed compiler errors in Arduino 1.6.8. Added color swatch buttons.

Browse Source
This commit is contained in:
Jason Coon
2016-03-12 11:28:33 -06:00
parent b9398eac51
commit 0d3d32258d
3 changed files with 91 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
data/index.htm
View File

@ -14,17 +14,8 @@
<header class="navbar navbar-default navbar-static-top" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">ESP8266 + FastLED</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
</nav>
<!--/.nav-collapse -->
</div>
</header>
<div class="container">
@ -70,7 +61,49 @@
<div class="form-group">
<label for="inputColor" class="col-sm-2 control-label">Color</label>
<div class="col-sm-6">
<input id="inputColor" type="text" id="hue-demo" class="form-control demo">
<input id="inputColor" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&nbsp;</button>
</div>
</div>
</div>
</div>
</form>

24
data/js/scripts.js
View File

@ -77,6 +77,19 @@ $("#inputColor").change(function() {
delaySetColor(rgb);
});
$(".btn-color").click(function() {
if(ignoreColorChange) return;
var rgb = $(this).css('backgroundColor');
var components = rgbToComponents(rgb);
delaySetColor(components);
var hexString = rgbToHex(components.r, components.g, components.b);
ignoreColorChange = true;
$("#inputColor").minicolors('value', hexString);
ignoreColorChange = false;
});
function getAll() {
$.get(urlBase + "all", function(data) {
allData = data;
@ -163,3 +176,14 @@ function componentToHex(c) {
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function rgbToComponents(rgb){
var components = {};
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
components.r = parseInt(rgb[1]);
components.g = parseInt(rgb[2]);
components.b = parseInt(rgb[3]);
return components;
}