From d9587259f3cdde62714ea759082bdf98852db8fb Mon Sep 17 00:00:00 2001 From: cschwinne Date: Sat, 9 Dec 2017 01:29:09 +0100 Subject: [PATCH] Updated Client HTML with new features Replaced SVG icons with a more modern look (Linearicons) Updated FX panel, added sec.color (NI) and CC options Added preset panel Slightly modified look Replaced most text fields in settings page with bound number fields Segmented index page sending to support larger 30kb site --- wled00/data/index-min.htm | 107 ++++---- wled00/data/index.htm | 562 +++++++++++++++++++++----------------- wled00/data/settings.htm | 61 +++-- wled00/htmls00.h | 114 ++++---- wled00/htmls01.h | 143 +++++----- wled00/wled00.ino | 4 +- wled00/wled05_init.ino | 8 +- 7 files changed, 540 insertions(+), 459 deletions(-) diff --git a/wled00/data/index-min.htm b/wled00/data/index-min.htm index 0db0064e..db63dba1 100644 --- a/wled00/data/index-min.htm +++ b/wled00/data/index-min.htm @@ -2,61 +2,39 @@ WLED 0.4p - - + + Loading... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +//Linearicons.com/free + + + + + + + + + + + + +
- - - - - - - + + + + + + +
-
+
@@ -66,18 +44,41 @@
-
-
+
+
- - - - -
+Effect Panel

+ + + + +


+Set secondary color to + + + + + +
+
Custom Theater Chase
+using primary and + secondary color LEDs,
+doing steps per tick, +from start and end. +
+
+
+Favorite Presets

+ + + + +


+Click checkmark to apply brightness, color and effects.

diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 71b13f26..339d037f 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -3,38 +3,38 @@ WLED 0.4p @@ -28,23 +31,23 @@ Network SSID (leave empty to not connect):

Network password:

Static IP (leave at 0.0.0.0 for DHCP):
- . - . - . -
+ . + . + . +
Static gateway:
- . - . - . -
+ . + . + . +
Static subnet mask:
- . - . - . -
+ . + . + . +
mDNS address (leave empty for no mDNS):
http:// .local
- Try connecting before opening AP for: s
+ Try connecting before opening AP for: s
Client IP: Not connected

Configure Access Point

AP SSID (leave empty for no AP):

@@ -58,20 +61,21 @@ Server description:
Use HSB sliders instead of RGB by default:

LED setup

- LED count (max. 255):
+ LED count (max. 255):
+ The default boot color is saved in preset slot 0.
Default RGB color: - - -
- Default brightness: (0-255)
- Default white value (only RGBW, -1 to disable):
- Default effect ID:
- Default effect speed:
+ + +
+ Default brightness: (0-255)
+ Default white value (only RGBW, -1 to disable):
+ Default effect ID:
+ Default effect speed:
Ignore and use current color, brightness and effects:
Turn on after power up/reset:
Use Gamma correction for brightness:
Use Gamma correction for color:
- Brightness factor: %
+ Brightness factor: %

Button setup

On/Off button enabled:

Transitions

@@ -79,8 +83,8 @@ Sweep: Invert direction:
Transition Delay: ms

Timed light

- Target brightness: (0-255)
- Change after: min
+ Target brightness: (0-255)
+ Change after: min
Fade:

Broadcast

UDP Port:
@@ -96,8 +100,8 @@ Get time from NTP server:
Current local time is unknown

Advanced

- Default overlay ID:
- WARLS offset: negative
+ Default overlay ID:
+ WARLS offset: negative

Security

OTA locked:
Passphrase:
@@ -115,12 +119,13 @@

About

WLED version 0.4p
(c) 2016-2017 Christian Schwinne
- Licensed under the MIT license
+ Licensed under the MIT license

Uses libraries:
ESP8266 Arduino Core
WS2812FX by kitesurfer1404 (Aircoookie fork)
Timezone library by JChristensen
- arduino-esp8266-alexa-multiple-wemo-switch by kakopappa
+ arduino-esp8266-alexa-multiple-wemo-switch by kakopappa

+ UI icons by Linearicons created by Perxis! (CC-BY-SA 4.0)

Server message: XML response error!

diff --git a/wled00/htmls00.h b/wled00/htmls00.h index fa135267..6e55bb2b 100644 --- a/wled00/htmls00.h +++ b/wled00/htmls00.h @@ -20,66 +20,53 @@ const char favicon[156] PROGMEM = { /* * Index html */ -const char PAGE_index[] PROGMEM = R"=====( +//head +const char PAGE_index0[] PROGMEM = R"=====( WLED 0.4p - - + + +)====="; + +//body1 (svg defs) +const char PAGE_index1[] PROGMEM = R"=====( Loading... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +//Linearicons.com/free + + + + + + + + + + + + + +)====="; + +//body2 (html) +const char PAGE_index2[] PROGMEM = R"=====(
- - - - - - - + + + + + + +
- +
@@ -96,11 +83,34 @@ const char PAGE_index[] PROGMEM = R"=====(
- - - - -
+Effect Panel

+ + + + +


+Set secondary color to + + + + + +
+
Custom Theater Chase
+using primary and + secondary color LEDs,
+doing steps per tick, +from start and end. +
+
+
+Favorite Presets

+ + + + +


+Click checkmark to apply brightness, color and effects.

diff --git a/wled00/htmls01.h b/wled00/htmls01.h index 5680f564..3a3719f6 100644 --- a/wled00/htmls01.h +++ b/wled00/htmls01.h @@ -13,113 +13,120 @@ var d=document; const char PAGE_settings1[] PROGMEM = R"=====( } - + - -

WLED Settings

- -
+ +

WLED Settings

+ +

WiFi setup

Connect to existing network

-Network SSID (leave empty to not connect):

-Network password:

+Network SSID (leave empty to not connect):

+Network password:

Static IP (leave at 0.0.0.0 for DHCP):
- . - . - . -
+ . + . + . +
Static gateway:
- . - . - . -
+ . + . + . +
Static subnet mask:
- . - . - . -
+ . + . + . +
mDNS address (leave empty for no mDNS):
-http:// .local
-Try connecting before opening AP for: s
-Client IP: Not connected
+http:// .local
+Try connecting before opening AP for: s
+Client IP: Not connected

Configure Access Point

-AP SSID (leave empty for no AP):

-Hide AP SSID:
-AP password (leave empty for open):

-AP channel:
-AP IP: Not active
+AP SSID (leave empty for no AP):

+Hide AP SSID:
+AP password (leave empty for open):

+AP channel:
+AP IP: Not active

Application setup

Web setup

-Server description:
-Use HSB sliders instead of RGB by default:
+Server description:
+Use HSB sliders instead of RGB by default:

LED setup

-LED count (max. 255):
+LED count (max. 255):
+The default boot color is saved in preset slot 0.
Default RGB color: - - -
-Default brightness: (0-255)
-Default white value (only RGBW, -1 to disable):
-Default effect ID:
-Default effect speed:
-Ignore and use current color, brightness and effects:
-Turn on after power up/reset:
-Use Gamma correction for brightness:
-Use Gamma correction for color:
-Brightness factor: %
+ + +
+Default brightness: (0-255)
+Default white value (only RGBW, -1 to disable):
+Default effect ID:
+Default effect speed:
+Ignore and use current color, brightness and effects:
+Turn on after power up/reset:
+Use Gamma correction for brightness:
+Use Gamma correction for color:
+Brightness factor: %

Button setup

-On/Off button enabled:
+On/Off button enabled:

Transitions

-Fade:
-Sweep: Invert direction:
-Transition Delay: ms
+Fade:
+Sweep: Invert direction:
+Transition Delay: ms

Timed light

-Target brightness: (0-255)
-Change after: min
-Fade:
+Target brightness: (0-255)
+Change after: min
+Fade:

Broadcast

-UDP Port:
-Receive notifications:
-Send notifications on direct change:
-Send notifications on button press:
+UDP Port:
+Receive notifications:
+Send notifications on direct change:
+Send notifications on button press:

Interfaces

-Emulate Alexa device:
-Alexa invocation name:
-Send Alexa notifications:
+Emulate Alexa device:
+Alexa invocation name:
+Send Alexa notifications:

Time (experimental!)

NTP was updated but still causes crashes. Requires reboot.
-Get time from NTP server:
-Current local time is unknown
+Get time from NTP server:
+Current local time is unknown

Advanced

-Default overlay ID:
-WARLS offset: negative
+Default overlay ID:
+WARLS offset: negative

Security

-OTA locked:
-Passphrase:
+OTA locked:
+Passphrase:
To enable OTA, for security reasons you need to also enter the correct password!
The password may/should be changed when OTA is enabled.
Disable OTA when not in use, otherwise an attacker could reflash device software!

-Disable recovery AP:
+Disable recovery AP:
In case of a connection error there will be no wireless recovery possible!
Completely disables all Access Point functions.
Setting only changable if OTA is enabled!

-Factory reset:
+Factory reset:
All EEPROM content (settings) will be erased.

HTTP traffic is not encrypted. An attacker in the same network could intercept form data!

About

WLED version 0.4p
(c) 2016-2017 Christian Schwinne
-Licensed under the MIT license
+Licensed under the MIT license

Uses libraries:
ESP8266 Arduino Core
WS2812FX by kitesurfer1404 (Aircoookie fork)
Timezone library by JChristensen
-arduino-esp8266-alexa-multiple-wemo-switch by kakopappa
-Server message: XML response error! +arduino-esp8266-alexa-multiple-wemo-switch by kakopappa

+UI icons by Linearicons created by Perxis! (CC-BY-SA 4.0)

+Server message: XML response error!

-
+
diff --git a/wled00/wled00.ino b/wled00/wled00.ino index d99f344c..3f8d7f77 100644 --- a/wled00/wled00.ino +++ b/wled00/wled00.ino @@ -20,7 +20,7 @@ #include "CallbackFunction.h" //version in format yymmddb (b = daily build) -#define VERSION 1712022 +#define VERSION 1712090 //If you have an RGBW strip, uncomment first line in WS2812FX.h! @@ -31,7 +31,7 @@ //#define USEFS //overlays, needed for clocks etc. -#define USEOVERLAYS +//#define USEOVERLAYS #ifdef USEFS #include diff --git a/wled00/wled05_init.ino b/wled00/wled05_init.ino index 9ab9d82a..5d5ff105 100644 --- a/wled00/wled05_init.ino +++ b/wled00/wled05_init.ino @@ -82,7 +82,13 @@ void wledInit() if(!handleFileRead("/favicon.ico")) server.send(200, "image/x-icon", favicon); }); server.on("/", HTTP_GET, [](){ - if(!handleFileRead("/index.htm")) server.send(200, "text/html", PAGE_index); + if(!handleFileRead("/index.htm")) { + server.setContentLength(strlen_P(PAGE_index0) + strlen_P(PAGE_index1) + strlen_P(PAGE_index2)); + server.send(200, "text/html", ""); + server.sendContent_P(PAGE_index0); + server.sendContent_P(PAGE_index1); + server.sendContent_P(PAGE_index2); + } }); server.on("/reset", HTTP_GET, [](){ server.send(200, "text/plain", "Rebooting...");