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

Updated for 8x8x8 tinytim cube.

Browse Source
This commit is contained in:
Jason Coon
2017-09-05 07:59:24 -05:00
parent 3a3bb2043c
commit 9025d0ed10
7 changed files with 114 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
data/css/simple.css
View File

@ -2,10 +2,20 @@
padding-bottom: 70px;
}*/
.grid-item-color-button {
border: 0px;
width: 7.69%;
height: 64px;
margin: 0px;
padding: 0px;
}
.grid-item-color {
width: 4%;
border: none;
width: 3.33%;
height: 32px;
cursor: pointer;
margin: 0px;
padding: 0px;
}
.grid-item-pattern {

4
data/index.htm
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 + FastLED by Evil Genius Labs</title>
<title>Cube by Evil Genius Labs</title>
<!-- request CSS from internet CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@ -36,7 +36,7 @@
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">ESP8266 + FastLED <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="/">Cube <span class="sr-only">(current)</span></a></li>
<li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
<li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
<li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li>

2
data/js/app.js
View File

@ -3,7 +3,7 @@ var address = location.hostname;
var urlBase = "";
// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
// var address = "esp8266-1920f7.local";
// var address = "192.168.86.55";
// var urlBase = "http://" + address + "/";
var postColorTimer = {};

68
data/js/simple.js
View File

@ -3,7 +3,7 @@ var address = location.hostname;
var urlBase = "";
// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
// var address = "192.168.1.13";
// var address = "192.168.86.55";
// var urlBase = "http://" + address + "/";
var postColorTimer = {};
@ -15,6 +15,27 @@ var patterns = [
"Pride",
"Color Waves",
"X Gradient Palette",
"Y Gradient Palette",
"Z Gradient Palette",
"XY Gradient Palette",
"XZ Gradient Palette",
"YZ Gradient Palette",
"XYZ Gradient Palette",
"Fire Noise",
"Fire Noise 2",
"Lava Noise",
"Rainbow Noise",
"Rainbow Stripe Noise",
"Party Noise",
"Forest Noise",
"Cloud Noise",
"Ocean Noise",
"Black & White Noise",
"Black & Blue Noise",
"Rainbow Twinkles",
"Snow Twinkles",
"Cloud Twinkles",
@ -35,15 +56,11 @@ var patterns = [
"Cloud 2 Twinkles",
"Ocean Twinkles",
"Rainbow",
"Rainbow With Glitter",
"Solid Rainbow",
"Confetti",
"Sinelon",
"Beat",
"Juggle",
"Fire",
"Water"
];
var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
@ -114,13 +131,13 @@ $(document).ready(function() {
});
function addColorButtons() {
var hues = 25;
var hues = 30;
var hueStep = 360 / hues;
var levels = 10;
var levelStep = 60 / levels;
var levels = 25;
var levelStep = 50 / levels;
for(var l = 20; l < 80; l += levelStep) {
for(var l = 50; l < 95; l += levelStep) {
for(var h = 0; h < hues; h++) {
addColorButton(h * hueStep, 100, l);
}
@ -131,24 +148,35 @@ function addColorButtons() {
layoutMode: 'fitRows'
});
$('.grid-color-buttons').isotope({
itemSelector: '.grid-item-color-button',
layoutMode: 'fitRows'
});
$('.grid-item-color-button').click(colorButtonClick);
}
var colorButtonIndex = 0;
function addColorButton(h, s, l) {
var color = "hsla(" + h + ", " + s + "%, " + l + "%, 1)"
var template = $("#colorButtonTemplate").clone();
template.attr("id", "color-button-" + colorButtonIndex++);
template.css("background-color", color);
template.click(function() {
var rgb = $(this).css('backgroundColor');
var components = rgbToComponents(rgb);
function colorButtonClick() {
var rgb = $(this).css('backgroundColor');
var components = rgbToComponents(rgb);
$(".grid-item-color").css("border", "none");
$(".grid-item-color").css("border", "none");
if($(this).attr("class") === "grid-item-color") {
$(this).css("border", "1px solid");
}
postColor("solidColor", components);
});
postColor("solidColor", components);
}
function addColorButton(h, s, l) {
var color = "hsl(" + h + ", " + s + "%, " + l + "%)"
var template = $("#colorButtonTemplate").clone();
template.css("background-color", color);
template.attr("title", template.css("background-color") + "\r\n" + color);
template.click(colorButtonClick);
$("#colorButtonsRow").append(template);
}

28
data/simple.htm
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 + FastLED by Evil Genius Labs</title>
<title>Cube by Evil Genius Labs</title>
<!-- request CSS from internet CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@ -20,22 +20,44 @@
<body>
<div id="container" class="container">
<div id="container" class="container-fluid">
<div style="margin: 5px;">
<button type="button" class="btn btn-default" id="btnOn">On</button>
<button type="button" class="btn btn-default" id="btnOff">Off</button>
</div>
<h4>Patterns</h4>
<div id="patternGrid" class="grid-pattern"></div>
<h4>Basic Colors</h4>
<div class="grid-color-buttons">
<button type="button" class="grid-item-color-button" style="background: #FF0000;" title="Red">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #FF8000;" title="Orange">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #00FF00;" title="Green">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #0080FF;" title="Azure">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #0000FF;" title="Blue">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #8000FF;" title="Violet">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #FF0080;" title="Rose">&nbsp;</button>
<button type="button" class="grid-item-color-button" style="background: #FFFFFF; border: 1px solid;" title="White">&nbsp;</button>
</div>
<h4>Color Palette</h4>
<div id="colorButtonsRow" class="grid-color"></div>
</div>
<div id="templates" style="display: none">
<div id="colorButtonTemplate" class="grid-item-color"></div>
<button id="colorButtonTemplate" class="grid-item-color"></button>
<button id="patternButtonTemplate" class="grid-item-pattern btn btn-default"></button>