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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TwinkleFOX.h
View File

@ -194,7 +194,7 @@ void drawTwinkles()
uint8_t backgroundBrightness = bg.getAverageLight(); uint8_t backgroundBrightness = bg.getAverageLight();
for(uint8_t i = 0; i < NUM_LEDS; i++) { for(uint16_t i = 0; i < NUM_LEDS; i++) {
CRGB& pixel = leds[i]; CRGB& pixel = leds[i];
PRNG16 = (uint16_t)(PRNG16 * 2053) + 1384; // next 'random' number PRNG16 = (uint16_t)(PRNG16 * 2053) + 1384; // next 'random' number

14
data/css/simple.css
View File

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

4
data/index.htm
View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 --> <!-- 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"> <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>
<div class="collapse navbar-collapse" id="navbar-collapse-1"> <div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav"> <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="/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="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
<li><a href="/update" target="_blank" title="Update Firmware">Firmware</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 = ""; var urlBase = "";
// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS) // 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 urlBase = "http://" + address + "/";
var postColorTimer = {}; var postColorTimer = {};

68
data/js/simple.js
View File

@ -3,7 +3,7 @@ var address = location.hostname;
var urlBase = ""; var urlBase = "";
// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS) // 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 urlBase = "http://" + address + "/";
var postColorTimer = {}; var postColorTimer = {};
@ -15,6 +15,27 @@ var patterns = [
"Pride", "Pride",
"Color Waves", "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", "Rainbow Twinkles",
"Snow Twinkles", "Snow Twinkles",
"Cloud Twinkles", "Cloud Twinkles",
@ -35,15 +56,11 @@ var patterns = [
"Cloud 2 Twinkles", "Cloud 2 Twinkles",
"Ocean Twinkles", "Ocean Twinkles",
"Rainbow",
"Rainbow With Glitter",
"Solid Rainbow", "Solid Rainbow",
"Confetti", "Confetti",
"Sinelon", "Sinelon",
"Beat", "Beat",
"Juggle", "Juggle",
"Fire",
"Water"
]; ];
var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']); var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
@ -114,13 +131,13 @@ $(document).ready(function() {
}); });
function addColorButtons() { function addColorButtons() {
var hues = 25; var hues = 30;
var hueStep = 360 / hues; var hueStep = 360 / hues;
var levels = 10; var levels = 25;
var levelStep = 60 / levels; 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++) { for(var h = 0; h < hues; h++) {
addColorButton(h * hueStep, 100, l); addColorButton(h * hueStep, 100, l);
} }
@ -131,24 +148,35 @@ function addColorButtons() {
layoutMode: 'fitRows' layoutMode: 'fitRows'
}); });
$('.grid-color-buttons').isotope({
itemSelector: '.grid-item-color-button',
layoutMode: 'fitRows'
});
$('.grid-item-color-button').click(colorButtonClick);
} }
var colorButtonIndex = 0; var colorButtonIndex = 0;
function addColorButton(h, s, l) { function colorButtonClick() {
var color = "hsla(" + h + ", " + s + "%, " + l + "%, 1)" var rgb = $(this).css('backgroundColor');
var template = $("#colorButtonTemplate").clone(); var components = rgbToComponents(rgb);
template.attr("id", "color-button-" + colorButtonIndex++);
template.css("background-color", color);
template.click(function() {
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"); $(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); $("#colorButtonsRow").append(template);
} }

28
data/simple.htm
View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 --> <!-- 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"> <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> <body>
<div id="container" class="container"> <div id="container" class="container-fluid">
<div style="margin: 5px;"> <div style="margin: 5px;">
<button type="button" class="btn btn-default" id="btnOn">On</button> <button type="button" class="btn btn-default" id="btnOn">On</button>
<button type="button" class="btn btn-default" id="btnOff">Off</button> <button type="button" class="btn btn-default" id="btnOff">Off</button>
</div> </div>
<h4>Patterns</h4>
<div id="patternGrid" class="grid-pattern"></div> <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 id="colorButtonsRow" class="grid-color"></div>
</div> </div>
<div id="templates" style="display: none"> <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> <button id="patternButtonTemplate" class="grid-item-pattern btn btn-default"></button>

50
esp8266-fastled-webserver.ino
View File

@ -32,14 +32,14 @@ extern "C" {
#include <WebSocketsServer.h> #include <WebSocketsServer.h>
#include <FS.h> #include <FS.h>
#include <EEPROM.h> #include <EEPROM.h>
#include <IRremoteESP8266.h> //#include <IRremoteESP8266.h>
#include "GradientPalettes.h" #include "GradientPalettes.h"
#define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0])) #define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))
#include "Field.h" #include "Field.h"
#define HOSTNAME "ESP8266-" ///< Hostname. The setup function adds the Chip ID at the end. #define HOSTNAME "Cube-ESP8266-" ///< Hostname. The setup function adds the Chip ID at the end.
//#define RECV_PIN D4 //#define RECV_PIN D4
//IRrecv irReceiver(RECV_PIN); //IRrecv irReceiver(RECV_PIN);
@ -144,27 +144,27 @@ PatternAndNameList patterns = {
{ pride, "Pride" }, { pride, "Pride" },
{ colorWaves, "Color Waves" }, { colorWaves, "Color Waves" },
{ cubeXGradientPalette, "Cube X Gradient Palette" }, { cubeXGradientPalette, "X Gradient Palette" },
{ cubeYGradientPalette, "Cube Y Gradient Palette" }, { cubeYGradientPalette, "Y Gradient Palette" },
{ cubeZGradientPalette, "Cube Z Gradient Palette" }, { cubeZGradientPalette, "Z Gradient Palette" },
{ cubeXYGradientPalette, "Cube XY Gradient Palette" }, { cubeXYGradientPalette, "XY Gradient Palette" },
{ cubeXZGradientPalette, "Cube XZ Gradient Palette" }, { cubeXZGradientPalette, "XZ Gradient Palette" },
{ cubeYZGradientPalette, "Cube YZ Gradient Palette" }, { cubeYZGradientPalette, "YZ Gradient Palette" },
{ cubeXYZGradientPalette, "Cube XYZ Gradient Palette" }, { cubeXYZGradientPalette, "XYZ Gradient Palette" },
// 3d noise patterns // 3d noise patterns
{ fireNoise3d, "Fire Noise 3D" }, { fireNoise3d, "Fire Noise" },
{ fireNoise23d, "Fire Noise 2 3D" }, { fireNoise23d, "Fire Noise 2" },
{ lavaNoise3d, "Lava Noise 3D" }, { lavaNoise3d, "Lava Noise" },
{ rainbowNoise3d, "Rainbow Noise 3D" }, { rainbowNoise3d, "Rainbow Noise" },
{ rainbowStripeNoise3d, "Rainbow Stripe Noise 3D" }, { rainbowStripeNoise3d, "Rainbow Stripe Noise" },
{ partyNoise3d, "Party Noise 3D" }, { partyNoise3d, "Party Noise" },
{ forestNoise3d, "Forest Noise 3D" }, { forestNoise3d, "Forest Noise" },
{ cloudNoise3d, "Cloud Noise 3D" }, { cloudNoise3d, "Cloud Noise" },
{ oceanNoise3d, "Ocean Noise 3D" }, { oceanNoise3d, "Ocean Noise" },
{ blackAndWhiteNoise3d, "Black & White Noise 3D" }, { blackAndWhiteNoise3d, "Black & White Noise" },
{ blackAndBlueNoise3d, "Black & Blue Noise 3D" }, { blackAndBlueNoise3d, "Black & Blue Noise" },
// twinkle patterns // twinkle patterns
{ rainbowTwinkles, "Rainbow Twinkles" }, { rainbowTwinkles, "Rainbow Twinkles" },
@ -188,15 +188,15 @@ PatternAndNameList patterns = {
{ cloud2Twinkles, "Cloud 2 Twinkles" }, { cloud2Twinkles, "Cloud 2 Twinkles" },
{ oceanTwinkles, "Ocean Twinkles" }, { oceanTwinkles, "Ocean Twinkles" },
{ rainbow, "Rainbow" }, // { rainbow, "Rainbow" },
{ rainbowWithGlitter, "Rainbow With Glitter" }, // { rainbowWithGlitter, "Rainbow With Glitter" },
{ rainbowSolid, "Solid Rainbow" }, { rainbowSolid, "Solid Rainbow" },
{ confetti, "Confetti" }, { confetti, "Confetti" },
{ sinelon, "Sinelon" }, { sinelon, "Sinelon" },
{ bpm, "Beat" }, { bpm, "Beat" },
{ juggle, "Juggle" }, { juggle, "Juggle" },
{ fire, "Fire" }, // { fire, "Fire" },
{ water, "Water" }, // { water, "Water" },
{ showSolidColor, "Solid Color" } { showSolidColor, "Solid Color" }
}; };
@ -1155,7 +1155,7 @@ void heatMap(CRGBPalette16 palette, bool up)
random16_add_entropy(random(256)); random16_add_entropy(random(256));
// Array of temperature readings at each simulation cell // Array of temperature readings at each simulation cell
static byte heat[256]; static byte heat[NUM_LEDS];
byte colorindex; byte colorindex;