From 071ebe6ef2f417c369f315cb98b1979fb03e7fc3 Mon Sep 17 00:00:00 2001 From: cschwinne Date: Fri, 16 Nov 2018 19:59:00 +0100 Subject: [PATCH] Gzipped UIs, improving speed and flash usage --- platformio.ini | 6 +- readme.md | 2 +- wled00/WS2812FX.cpp | 2 - wled00/WS2812FX.h | 10 +- wled00/data/index.htm | 29 +- wled00/data/index_mobile.htm | 2 +- wled00/data/settings_sec.htm | Bin 9120 -> 9120 bytes wled00/data/settings_ui.htm | Bin 7836 -> 7832 bytes wled00/html_classic.h | 710 ++++++++++++++ wled00/html_mobile.h | 1284 +++++++++++++++++++++++++ wled00/{htmls02.h => html_other.h} | 0 wled00/{htmls01.h => html_settings.h} | 4 +- wled00/htmls00.h | 157 --- wled00/wled00.ino | 21 +- wled00/wled02_xml.ino | 51 +- wled00/wled03_set.ino | 7 +- wled00/wled05_init.ino | 1 - wled00/wled17_mqtt.ino | 2 +- wled00/wled18_server.ino | 132 ++- 19 files changed, 2146 insertions(+), 274 deletions(-) create mode 100644 wled00/html_classic.h create mode 100644 wled00/html_mobile.h rename wled00/{htmls02.h => html_other.h} (100%) rename wled00/{htmls01.h => html_settings.h} (99%) delete mode 100644 wled00/htmls00.h diff --git a/platformio.ini b/platformio.ini index 4f44fb61..2ecc28ff 100644 --- a/platformio.ini +++ b/platformio.ini @@ -18,7 +18,7 @@ monitor_speed = 115200 board_build.flash_mode = dout upload_speed = 921600 build_flags = - ; -D VERSION=0.9.0-dev + ; -D VERSION=0.8.2-dev ; -D DEBUG # TODO replace libs in /lib with managed libs in here if possible. # If they are not changed it's just a metter of setting the correfct version and change the import statement @@ -42,12 +42,12 @@ build_flags = platform = espressif8266@1.7.0 build_flags = -D PIO_FRAMEWORK_ARDUINO_LWIP2_HIGHER_BANDWIDTH_LOW_FLASH - -D WLED_DISABLE_MOBILE_UI + ; -D WLED_DISABLE_MOBILE_UI -D WLED_DISABLE_OTA -D WLED_DISABLE_ALEXA ; -D WLED_DISABLE_BLYNK ; -D WLED_DISABLE_CRONIXIE - ; -D WLED_DISABLE_HUESYNC + -D WLED_DISABLE_HUESYNC [common:esp32] platform = espressif32@1.5.0 diff --git a/readme.md b/readme.md index 7eaffcdd..cde8801e 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ ![WLED logo](https://raw.githubusercontent.com/Aircoookie/WLED/development/wled_logo.png) -## Welcome to my project WLED! (v0.8.1) +## Welcome to my project WLED! (v0.8.2-dev) A fast and feature-rich implementation of an ESP8266/ESP32 webserver to control NeoPixel (WS2812B) LEDs! diff --git a/wled00/WS2812FX.cpp b/wled00/WS2812FX.cpp index 065079b6..8a263561 100644 --- a/wled00/WS2812FX.cpp +++ b/wled00/WS2812FX.cpp @@ -2430,8 +2430,6 @@ uint16_t WS2812FX::mode_noise16_2(void) uint16_t shift_y = SEGMENT_RUNTIME.counter_mode_step/42; uint32_t real_x = (i + shift_x) * scale; // calculate the coordinates within the noise field - uint32_t real_y = (i + shift_y) * scale; // based on the precalculated positions - uint32_t real_z = 4223; uint8_t noise = inoise16(real_x, 0, 4223) >> 8; // get the noise data and scale it down diff --git a/wled00/WS2812FX.h b/wled00/WS2812FX.h index 4ab1e837..fd76fafa 100644 --- a/wled00/WS2812FX.h +++ b/wled00/WS2812FX.h @@ -44,9 +44,9 @@ #define FASTLED_INTERNAL //remove annoying pragma messages #include "FastLED.h" -#define DEFAULT_BRIGHTNESS (uint8_t)50 +#define DEFAULT_BRIGHTNESS (uint8_t)127 #define DEFAULT_MODE (uint8_t)0 -#define DEFAULT_SPEED (uint16_t)1000 +#define DEFAULT_SPEED (uint8_t)128 #define DEFAULT_COLOR (uint32_t)0xFF0000 #define min(a,b) ((a)<(b)?(a):(b)) @@ -173,7 +173,7 @@ class WS2812FX { typedef struct Segment { // 21 bytes uint16_t start; uint16_t stop; - uint16_t speed; + uint8_t speed; uint8_t intensity; uint8_t palette; uint8_t mode; @@ -480,9 +480,9 @@ class WS2812FX { uint8_t _segment_index = 0; uint8_t _segment_index_palette_last = 99; uint8_t _num_segments = 1; - segment _segments[MAX_NUM_SEGMENTS] = { // SRAM footprint: 20 bytes per element + segment _segments[MAX_NUM_SEGMENTS] = { // SRAM footprint: 21 bytes per element // start, stop, speed, intensity, palette, mode, options, color[] - {0, 7, DEFAULT_SPEED, 128, 0, FX_MODE_STATIC, NO_OPTIONS, {DEFAULT_COLOR}} + { 0, 7, DEFAULT_SPEED, 128, 0, FX_MODE_STATIC, NO_OPTIONS, {DEFAULT_COLOR}} }; segment_runtime _segment_runtimes[MAX_NUM_SEGMENTS]; // SRAM footprint: 17 bytes per element }; diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 954c1901..9f9bff9b 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -2,7 +2,7 @@ - WLED 0.8.1 + WLED 0.8.2 -)====="; -#else -const char PAGE_indexM[] PROGMEM = R"=====( -Mobile UI is unsupported (limited storage). Go to /settings/ui and change UI mode to "Classic". -)====="; -#endif - - -/* - * Classic UI Index html - */ -//head0 (js) -const char PAGE_index0[] PROGMEM = R"=====( -WLED 0.8.1 - -)====="; - -//head1 (css) -const char PAGE_index1[] PROGMEM = R"=====( -.ctrl_box{margin:auto;width:80vw;background-color:var(--cCol);position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(-5px -5px 5px var(--sCol))}.sds{width:100%;height:12vh;margin-top:2vh}.sl{margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw}#slA{margin-top:0vh;background:linear-gradient(to right,black,yellow)}#slR{background:linear-gradient(to right,black,red)}#slG{background:linear-gradient(to right,black,green)}#slB{background:linear-gradient(to right,black,blue)}#slW{background:linear-gradient(to right,black,white)}#slH{background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,violet,red)}#slS{background:linear-gradient(to right,grey,green)}#slN{background:linear-gradient(to right,black,turquoise)}#slT{background:linear-gradient(to right,black,yellow)}.tools{margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw}#slX{background:linear-gradient(to right,black,white)}#slI{background:linear-gradient(to right,black,red)}body{font-family:var(--cFn),sans-serif;text-align:center;background:linear-gradient(var(--bCol),black);height:100%;margin:0;background-repeat:no-repeat;background-attachment:fixed;color:var(--tCol)}html{height:100%}iframe{display:none;border:0;filter:drop-shadow(-5px -5px 5px var(--sCol));margin:auto;width:80vw;height:60vh;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}svg{fill:var(--dCol);width:12vw;height:10vmin;filter:drop-shadow(-5px -5px 5px var(--sCol))}input{filter:drop-shadow(-5px -5px 5px var(--sCol));}button{background:var(--bCol);color:var(--tCol);border:.5ch solid var(--bCol);margin-bottom:1vh;font-family:var(--cFn),sans-serif;filter:drop-shadow(-5px -5px 5px var(--sCol))}select{background:var(--bCol);color:var(--tCol);font-family:var(--cFn),sans-serif;border:.5ch solid var(--bCol);filter:drop-shadow(-5px -5px 5px var(--sCol))}input[type=number]{background:var(--bCol);color:var(--dCol);border:.5ch solid var(--bCol);font-family:var(--cFn),sans-serif;width:3em}input[type=range]{-webkit-appearance:none;margin:-4px 0}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:12vh;cursor:pointer;background:var(--bCol)}input[type=range]::-webkit-slider-thumb{filter:drop-shadow(-5px -5px 5px var(--sCol));height:10vh;width:10vh;background:var(--aCol);cursor:pointer;-webkit-appearance:none;margin-top:1vh}input[type=range]::-moz-range-track{width:100%;height:12vh;cursor:pointer;background:var(--bCol)}input[type=range]::-moz-range-thumb{filter:drop-shadow(-5px -5px 5px var(--sCol));height:10vh;width:10vh;background:var(--aCol);cursor:pointer;margin-top:1vh}input[type=range]::-ms-track{width:100%;height:12vh;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#var(--bCol)}input[type=range]::-ms-fill-upper{background:#var(--bCol)}input[type=range]::-ms-thumb{width:10vh;background:var(--aCol);cursor:pointer;height:10vh} - - -Loading... -)====="; - -//body0 (svg defs) -const char PAGE_index2[] PROGMEM = R"=====( - - -//Linearicons.com/free - - - - - - - - - - - - - - - -)====="; - -//body1 (html) -const char PAGE_index3[] PROGMEM = R"=====( -
- - - - - - -
-
-
-
-
-
-
-
-
-Effect Panel

- - - -

-

-Set secondary color to - - - - - -or
-
FastLED Palette

-
-
-
-Favorite Presets

- - - - -


-Click checkmark to apply brightness, color and effects.

-Cycle through presets to , keep each for ms:

-
-Timed Light

-

-Gradually dim down
-1st slider sets duration (1-255min), 2nd sets target brightness.
-
-
-
- -)====="; diff --git a/wled00/wled00.ino b/wled00/wled00.ino index a04e0f46..ec6608a2 100644 --- a/wled00/wled00.ino +++ b/wled00/wled00.ino @@ -3,7 +3,7 @@ */ /* * @title WLED project sketch - * @version 0.8.1 + * @version 0.8.2-dev * @author Christian Schwinne */ @@ -11,11 +11,9 @@ //ESP8266-01 (blue) got too little storage space to work with all features of WLED. To use it, you must use ESP8266 Arduino Core v2.3.0 and the setting 512K(64K SPIFFS). //ESP8266-01 (black) has 1MB flash and can thus fit the whole program. Use 1M(64K SPIFFS). -//If you want the OTA update function though, you need to make sure the sketch is smaller than 479kB. //Uncomment some of the following lines to disable features to compile for ESP8266-01 (max flash size 434kB): -//You are required to disable these two features: -//#define WLED_DISABLE_MOBILE_UI +//You are required to disable over-the-air updates: //#define WLED_DISABLE_OTA //You need to choose 1-2 of these features to disable: @@ -23,6 +21,7 @@ //#define WLED_DISABLE_BLYNK //#define WLED_DISABLE_CRONIXIE //#define WLED_DISABLE_HUESYNC +//#define WLED_DISABLE_MOBILE_UI //to toggle usb serial debug (un)comment following line(s) //#define DEBUG @@ -56,15 +55,16 @@ #endif #include "src/dependencies/e131/E131.h" #include "src/dependencies/pubsubclient/PubSubClient.h" -#include "htmls00.h" -#include "htmls01.h" -#include "htmls02.h" +#include "html_classic.h" +#include "html_mobile.h" +#include "html_settings.h" +#include "html_other.h" #include "WS2812FX.h" //version code in format yymmddb (b = daily build) -#define VERSION 1811091 -char versionString[] = "0.8.1"; +#define VERSION 1811162 +char versionString[] = "0.8.2-dev"; //AP and OTA default passwords (for maximum change them!) @@ -287,7 +287,6 @@ bool udpConnected = false, udpRgbConnected = false; //ui style char cssCol[6][9]={"","","","","",""}; -String cssColorString=""; bool showWelcomePage = false; //hue @@ -376,7 +375,7 @@ unsigned int ntpLocalPort = 2390; #define NTP_PACKET_SIZE 48 //string temp buffer -#define OMAX 1750 +#define OMAX 2000 char obuf[OMAX]; uint16_t olen = 0; diff --git a/wled00/wled02_xml.ino b/wled00/wled02_xml.ino index 8c6307ef..09694fbc 100644 --- a/wled00/wled02_xml.ino +++ b/wled00/wled02_xml.ino @@ -3,7 +3,7 @@ */ //build XML response to HTTP /win API request -void XML_response(bool isHTTP) +void XML_response(bool isHTTP, bool includeTheme) { olen = 0; oappend(""); @@ -47,7 +47,28 @@ void XML_response(bool isHTTP) oappendi(useHSB); oappend(""); oappend(serverDescription); - oappend(""); + oappend(""); + if (includeTheme) + { + char cs[6][9]; + getThemeColors(cs); + oappend("#"); + oappend(cs[0]); + oappend("#"); + oappend(cs[1]); + oappend("#"); + oappend(cs[2]); + oappend("#"); + oappend(cs[3]); + oappend("#"); + oappend(cs[4]); + oappend("#"); + oappend(cs[5]); + oappend(""); + oappend(cssFont); + oappend(""); + } + oappend(""); if (isHTTP) server.send(200, "text/xml", obuf); } @@ -320,3 +341,29 @@ void getSettingsJS(byte subPage) } oappend("}"); } + + +//get colors from current theme as c strings +void getThemeColors(char o[][9]) +{ + switch (currentTheme) + { + // accent color (aCol) background (bCol) panel (cCol) controls (dCol) shadows (sCol) text (tCol) + default: strcpy(o[0], "D9B310"); strcpy(o[1], "0B3C5D"); strcpy(o[2], "1D2731"); strcpy(o[3], "328CC1"); strcpy(o[4], "000"); strcpy(o[5], "328CC1"); break; //night + case 1: strcpy(o[0], "eee"); strcpy(o[1], "ddd"); strcpy(o[2], "b9b9b9"); strcpy(o[3], "049"); strcpy(o[4], "777"); strcpy(o[5], "049"); break; //modern + case 2: strcpy(o[0], "abc"); strcpy(o[1], "fff"); strcpy(o[2], "ddd"); strcpy(o[3], "000"); strcpy(o[4], "0004"); strcpy(o[5], "000"); break; //bright + case 3: strcpy(o[0], "c09f80"); strcpy(o[1], "d7cec7"); strcpy(o[2], "76323f"); strcpy(o[3], "888"); strcpy(o[4], "3334"); strcpy(o[5], "888"); break; //wine + case 4: strcpy(o[0], "3cc47c"); strcpy(o[1], "828081"); strcpy(o[2], "d9a803"); strcpy(o[3], "1e392a"); strcpy(o[4], "000a"); strcpy(o[5], "1e392a"); break; //electric + case 5: strcpy(o[0], "57bc90"); strcpy(o[1], "a5a5af"); strcpy(o[2], "015249"); strcpy(o[3], "88c9d4"); strcpy(o[4], "0004"); strcpy(o[5], "88c9d4"); break; //mint + case 6: strcpy(o[0], "f7c331"); strcpy(o[1], "dcc7aa"); strcpy(o[2], "6b7a8f"); strcpy(o[3], "f7882f"); strcpy(o[4], "0007"); strcpy(o[5], "f7882f"); break; //amber + case 7: strcpy(o[0], "fc3"); strcpy(o[1], "124"); strcpy(o[2], "334"); strcpy(o[3], "f1d"); strcpy(o[4], "f00"); strcpy(o[5], "f1d"); break; //club + case 8: strcpy(o[0], "0ac"); strcpy(o[1], "124"); strcpy(o[2], "224"); strcpy(o[3], "003eff"); strcpy(o[4], "003eff"); strcpy(o[5], "003eff"); break; //air + case 9: strcpy(o[0], "f70"); strcpy(o[1], "421"); strcpy(o[2], "221"); strcpy(o[3], "a50"); strcpy(o[4], "f70"); strcpy(o[5], "f70"); break; //nixie + case 10: strcpy(o[0], "2d2"); strcpy(o[1], "010"); strcpy(o[2], "121"); strcpy(o[3], "060"); strcpy(o[4], "040"); strcpy(o[5], "3f3"); break; //terminal + case 11: strcpy(o[0], "867ADE"); strcpy(o[1], "4033A3"); strcpy(o[2], "483AAA"); strcpy(o[3], "483AAA"); strcpy(o[4], ""); strcpy(o[5], "867ADE"); break; //c64 + case 12: strcpy(o[0], "fbe8a6"); strcpy(o[1], "d2fdff"); strcpy(o[2], "b4dfe5"); strcpy(o[3], "f4976c"); strcpy(o[4], ""); strcpy(o[5], "303c6c"); break; //easter + case 13: strcpy(o[0], "d4af37"); strcpy(o[1], "173305"); strcpy(o[2], "308505"); strcpy(o[3], "f21313"); strcpy(o[4], "f002"); strcpy(o[5], "d4af37"); break; //christmas + case 14: strcpy(o[0], "fc7"); strcpy(o[1], "49274a"); strcpy(o[2], "94618e"); strcpy(o[3], "f4decb"); strcpy(o[4], "0008"); strcpy(o[5], "f4decb"); break; //end + case 15: for (int i=0;i<6;i++) strcpy(o[i], cssCol[i]); //custom + } +} diff --git a/wled00/wled03_set.ino b/wled00/wled03_set.ino index 4b52a4c1..6875942f 100644 --- a/wled00/wled03_set.ino +++ b/wled00/wled03_set.ino @@ -138,7 +138,6 @@ void handleSettingsSet(byte subPage) strcpy(cssCol[i],server.arg(k).c_str()); } strcpy(cssFont,server.arg("CF").c_str()); - buildCssColorString(); } //SYNC @@ -280,7 +279,7 @@ void handleSettingsSet(byte subPage) if (server.hasArg("RS")) //complete factory reset { clearEEPROM(); - serveMessage(200, "All Settings erased.", "Connect to WLED-AP to setup again...",255); + serveMessage(200, "All Settings erased.", "Connect to WLED-AP to setup again",255); reset(); } @@ -331,7 +330,7 @@ bool handleSet(String req) } pos = req.indexOf("IN"); - if (pos < 1) XML_response(true); + if (pos < 1) XML_response(true, false); return true; //if you save a macro in one request, other commands in that request are ignored due to unwanted behavior otherwise } @@ -744,7 +743,7 @@ bool handleSet(String req) //internal call, does not send XML response pos = req.indexOf("IN"); - if (pos < 1) XML_response(true); + if (pos < 1) XML_response(true, (req.indexOf("IT") > 0)); //include theme if firstload //do not send UDP notifications this time pos = req.indexOf("NN"); if (pos > 0) diff --git a/wled00/wled05_init.ino b/wled00/wled05_init.ino index 04d4dd21..12c38ce1 100644 --- a/wled00/wled05_init.ino +++ b/wled00/wled05_init.ino @@ -24,7 +24,6 @@ void wledInit() if (!initLedsLast) initStrip(); DEBUG_PRINT("CSSID: "); DEBUG_PRINT(clientSSID); - buildCssColorString(); userBeginPreConnection(); if (strcmp(clientSSID,"Your_Network") == 0) showWelcomePage = true; diff --git a/wled00/wled17_mqtt.ino b/wled00/wled17_mqtt.ino index 986183e6..c98833f7 100644 --- a/wled00/wled17_mqtt.ino +++ b/wled00/wled17_mqtt.ino @@ -60,7 +60,7 @@ void publishMQTT() //if you want to use this, increase the MQTT buffer in PubSubClient.h to 350+ //it will publish the API response to MQTT - /*XML_response(false); + /*XML_response(false, false); strcpy(subuf, mqttDeviceTopic); strcat(subuf, "/v"); mqtt->publish(subuf, obuf);*/ diff --git a/wled00/wled18_server.ino b/wled00/wled18_server.ino index 23f56a21..387b97f7 100644 --- a/wled00/wled18_server.ino +++ b/wled00/wled18_server.ino @@ -103,7 +103,7 @@ void initServer() server.on("/power", HTTP_GET, [](){ String val = (String)(int)strip.getPowerEstimate(ledCount,strip.getColor(),strip.getBrightness()); val += "mA currently"; - serveMessage(200,val,"This is just an estimate (does not take into account several factors like effects and wire resistance). It is NOT an accurate measurement!",254); + serveMessage(200,val,"This is just an estimate (does not account for factors like effects and wire resistance). It is NOT a measurement!",254); }); server.on("/u", HTTP_GET, [](){ @@ -136,7 +136,7 @@ void initServer() httpUpdater.setup(&server); #else server.on("/update", HTTP_GET, [](){ - serveMessage(500, "Not implemented", "OTA updates are not supported in this build.", 254); + serveMessage(500, "Not implemented", "OTA updates are unsupported in this build.", 254); }); #endif } else @@ -185,43 +185,6 @@ void initServer() #endif } -void buildCssColorString() -{ - String cs[]={"","","","","",""}; - switch (currentTheme) - { - default: cs[0]="D9B310"; cs[1]="0B3C5D"; cs[2]="1D2731"; cs[3]="328CC1"; cs[4]="000"; cs[5]="328CC1"; break; //night - case 1: cs[0]="eee"; cs[1]="ddd"; cs[2]="b9b9b9"; cs[3]="049"; cs[4]="777"; cs[5]="049"; break; //modern - case 2: cs[0]="abc"; cs[1]="fff"; cs[2]="ddd"; cs[3]="000"; cs[4]="0004"; cs[5]="000"; break; //bright - case 3: cs[0]="c09f80"; cs[1]="d7cec7"; cs[2]="76323f"; cs[3]="888"; cs[4]="3334"; cs[5]="888"; break; //wine - case 4: cs[0]="3cc47c"; cs[1]="828081"; cs[2]="d9a803"; cs[3]="1e392a"; cs[4]="000a"; cs[5]="1e392a"; break; //electric - case 5: cs[0]="57bc90"; cs[1]="a5a5af"; cs[2]="015249"; cs[3]="88c9d4"; cs[4]="0004"; cs[5]="88c9d4"; break; //mint - case 6: cs[0]="f7c331"; cs[1]="dcc7aa"; cs[2]="6b7a8f"; cs[3]="f7882f"; cs[4]="0007"; cs[5]="f7882f"; break; //amber - case 7: cs[0]="fc3"; cs[1]="124"; cs[2]="334"; cs[3]="f1d"; cs[4]="f00"; cs[5]="f1d"; break;//club - case 8: cs[0]="0ac"; cs[1]="124"; cs[2]="224"; cs[3]="003eff"; cs[4]="003eff"; cs[5]="003eff"; break;//air - case 9: cs[0]="f70"; cs[1]="421"; cs[2]="221"; cs[3]="a50"; cs[4]="f70"; cs[5]="f70"; break;//nixie - case 10: cs[0]="2d2"; cs[1]="010"; cs[2]="121"; cs[3]="060"; cs[4]="040"; cs[5]="3f3"; break; //terminal - case 11: cs[0]="867ADE"; cs[1]="4033A3"; cs[2]="483AAA"; cs[3]="483AAA"; cs[4]=""; cs[5]="867ADE"; break; //c64 - case 12: cs[0]="fbe8a6"; cs[1]="d2fdff"; cs[2]="b4dfe5"; cs[3]="f4976c"; cs[4]=""; cs[5]="303c6c"; break; //c64 - case 14: cs[0]="fc7"; cs[1]="49274a"; cs[2]="94618e"; cs[3]="f4decb"; cs[4]="0008"; cs[5]="f4decb"; break; //end - case 15: for (int i=0;i<6;i++)cs[i]=cssCol[i];//custom - } - cssColorString="