2017-02-01 21:25:09 +01:00
/*
2018-01-27 23:28:20 +01:00
* Settings html
2017-02-01 21:25:09 +01:00
*/
2019-08-17 12:27:06 +02:00
2018-09-17 11:15:08 +02:00
//common CSS of settings pages
2019-12-02 12:41:35 +01:00
const char PAGE_settingsCss [ ] PROGMEM = R " =====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}hr{border-color:#666}button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input[type=number]{width:4em}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:0.5ch solid #333}td{padding:2px;}</style>)===== " ;
2018-01-27 23:28:20 +01:00
2018-09-17 11:15:08 +02:00
//settings menu
2019-02-16 00:21:22 +01:00
const char PAGE_settings [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-12-02 12:41:35 +01:00
< html > < head > < title > WLED Settings < / title > < style > body { text - align : center ; background : # 222 ; height : 100 % ; margin : 0 } html { - - h : 11.55 vh } button { background : # 333 ; color : # fff ; font - family : Verdana , Helvetica , sans - serif ; border : .3 ch solid # 333 ; display : inline - block ; font - size : 8 vmin ; height : var ( - - h ) ; width : 95 % ; margin - top : 2.4 vh } < / style >
2019-02-16 00:21:22 +01:00
< script > function BB ( ) { if ( window . frameElement ) { document . getElementById ( " b " ) . style . display = " none " ; document . documentElement . style . setProperty ( " --h " , " 13.86vh " ) } } ; < / script > < / head >
2018-06-24 01:20:15 +02:00
< body onload = BB ( ) >
< form action = / > < button type = submit id = b > Back < / button > < / form >
2018-02-20 22:29:48 +01:00
< form action = / settings / wifi > < button type = submit > WiFi Setup < / button > < / form >
< form action = / settings / leds > < button type = submit > LED Preferences < / button > < / form >
< form action = / settings / ui > < button type = submit > User Interface < / button > < / form >
< form action = / settings / sync > < button type = submit > Sync Interfaces < / button > < / form >
< form action = / settings / time > < button type = submit > Time & Macros < / button > < / form >
< form action = / settings / sec > < button type = submit > Security & Updates < / button > < / form >
2019-02-16 00:21:22 +01:00
< / body > < / html > ) = = = = = " ;
2018-02-20 22:29:48 +01:00
2018-09-17 11:15:08 +02:00
//wifi settings
2019-02-16 00:21:22 +01:00
const char PAGE_settings_wifi [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-11-13 01:20:14 +01:00
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " >
2019-02-16 00:21:22 +01:00
< title > WiFi Settings < / title > < script > function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#wifi-settings " ) ; } function B ( ) { window . history . back ( ) ; } function GetV ( ) { var d = document ;
% CSS % % SCSS % < / head > < body onload = " GetV() " >
2018-02-20 22:29:48 +01:00
< form id = " form_s " name = " Sf " method = " post " >
< div class = " helpB " > < button type = " button " onclick = " H() " > ? < / button > < / div >
2019-10-25 00:14:58 +02:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save & Connect < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > WiFi setup < / h2 >
< h3 > Connect to existing network < / h3 >
2018-03-14 19:05:51 +01:00
Network name ( SSID , empty to not connect ) : < br > < input name = " CS " maxlength = " 32 " > < br >
Network password : < br > < input type = " password " name = " CP " maxlength = " 63 " > < br >
Static IP ( leave at 0.0 .0 .0 for DHCP ) : < br >
< input name = " I0 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " I1 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " I2 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " I3 " type = " number " min = " 0 " max = " 255 " required > < br >
Static gateway : < br >
< input name = " G0 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " G1 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " G2 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " G3 " type = " number " min = " 0 " max = " 255 " required > < br >
Static subnet mask : < br >
< input name = " S0 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " S1 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " S2 " type = " number " min = " 0 " max = " 255 " required > .
< input name = " S3 " type = " number " min = " 0 " max = " 255 " required > < br >
mDNS address ( leave empty for no mDNS ) : < br / >
http : // <input name="CM" maxlength="32"> .local<br>
Client IP : < span class = " sip " > Not connected < / span > < br >
2018-02-20 22:29:48 +01:00
< h3 > Configure Access Point < / h3 >
2019-10-29 01:19:56 +01:00
AP name ( SSID ) : < br > < input name = " AS " maxlength = " 32 " > < br >
2018-03-14 19:05:51 +01:00
Hide AP name : < input type = " checkbox " name = " AH " > < br >
2019-02-25 19:14:13 +01:00
AP password ( leave empty for open ) : < br > < input type = " password " name = " AP " maxlength = " 63 " > < br >
2018-03-14 19:05:51 +01:00
Access Point WiFi channel : < input name = " AC " type = " number " min = " 1 " max = " 13 " required > < br >
2019-10-25 00:14:58 +02:00
AP opens :
< select name = " AB " >
< option value = " 0 " > No connection after boot < / option >
< option value = " 1 " > Disconnected < / option >
< option value = " 2 " > Always < / option >
< option value = " 3 " > Never ( not recommended ) < / option > < / select > < br >
2018-03-14 19:05:51 +01:00
AP IP : < span class = " sip " > Not active < / span > < hr >
2019-10-25 00:14:58 +02:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save & Connect < / button >
2018-02-20 22:29:48 +01:00
< / form >
< / body >
2019-02-10 23:05:06 +01:00
< / html > ) = = = = = " ;
2018-01-27 23:28:20 +01:00
2018-09-17 11:15:08 +02:00
//LED settings
2019-02-16 00:21:22 +01:00
const char PAGE_settings_leds [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-12-04 02:01:47 +01:00
< html > < head >
< meta charset = utf - 8 >
< meta name = viewport content = " width=500 " >
< title > LED Settings < / title >
2020-01-15 00:38:25 +01:00
< script > var d = document , laprev = 55 ; function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#led-settings " ) } function B ( ) { window . open ( " /settings " , " _self " ) } function S ( ) { GetV ( ) ; setABL ( ) }
function enABL ( ) { var a = d . getElementById ( " able " ) . checked ; d . Sf . LA . value = ( a ) ? laprev : 0 ; d . getElementById ( " abl " ) . style . display = ( a ) ? " inline " : " none " ; d . getElementById ( " psu2 " ) . style . display = ( a ) ? " inline " : " none " ; if ( d . Sf . LA . value > 0 ) { setABL ( ) } } function enLA ( ) { var a = d . Sf . LAsel . value ; d . Sf . LA . value = a ; d . getElementById ( " LAdis " ) . style . display = ( a = = 50 ) ? " inline " : " none " ; UI ( ) } function setABL ( ) { d . getElementById ( " able " ) . checked = true ; d . Sf . LAsel . value = 50 ; switch ( parseInt ( d . Sf . LA . value ) ) { case 0 : d . getElementById ( " able " ) . checked = false ; enABL ( ) ; break ; case 30 : d . Sf . LAsel . value = 30 ; break ; case 35 : d . Sf . LAsel . value = 35 ; break ; case 55 : d . Sf . LAsel . value = 55 ; break ; case 255 : d . Sf . LAsel . value = 255 ; break ; default : d . getElementById ( " LAdis " ) . style . display = " inline " } UI ( ) } function UI ( ) { var b = d . querySelectorAll ( " .wc " ) , a = b . length ; for ( i = 0 ; i < a ; i + + ) { b [ i ] . style . display = ( d . getElementById ( " rgbw " ) . checked ) ? " inline " : " none " } d . getElementById ( " ledwarning " ) . style . display = ( d . Sf . LC . value > 1000 ) ? " inline " : " none " ; d . getElementById ( " ampwarning " ) . style . display = ( d . Sf . MA . value > 7200 ) ? " inline " : " none " ; if ( d . Sf . LA . value = = 255 ) { laprev = 12 } else if ( d . Sf . LA . value > 0 ) { laprev = d . Sf . LA . value } var j = Math . ceil ( ( 100 + d . Sf . LC . value * laprev ) / 500 ) / 2 ; j = ( j > 5 ) ? Math . ceil ( j ) : j ; var g = " " ; var e = ( d . Sf . LAsel . value = = 30 ) ; var i = ( d . Sf . LAsel . value = = 255 ) ; if ( j < 1.02 & & ! e & & ! i ) { g = " ESP 5V pin with 1A USB supply " } else { g + = e ? " 12V " : i ? " WS2815 12V " : " 5V " ; g + = j ; g + = " A supply connected to LEDs " } var h = Math . ceil ( ( 100 + d . Sf . LC . value * laprev ) / 1500 ) / 2 ; h = ( h > 5 ) ? Math . ceil ( h ) : h ; var c = " (for most effects, ~ " ; c + = h ; c + = " A is enough)<br> " ; d . getElementById ( " psu " ) . innerHTML = g ; d . getElementById ( " psu2 " ) . innerHTML = i ? " " : c } function GetV ( ) { var d = document ;
2019-12-04 02:01:47 +01:00
% CSS % % SCSS % < / head > < body onload = S ( ) >
2019-11-12 19:33:34 +01:00
< form id = form_s name = Sf method = post >
< div class = helpB > < button type = button onclick = H ( ) > ? < / button > < / div >
< button type = button onclick = B ( ) > Back < / button > < button type = submit > Save < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > LED setup < / h2 >
2019-11-12 19:33:34 +01:00
LED count : < input name = LC type = number min = 1 max = 1500 oninput = UI ( ) required > < br >
2019-12-04 02:01:47 +01:00
< div id = ledwarning style = color : orange ; display : none >
2019-11-12 19:33:34 +01:00
& # 9888 ; You might run into stability or lag issues . < br >
Use less than 1000 LEDs per ESP for the best experience ! < br >
< / div >
2018-12-04 00:58:06 +01:00
< i > Recommended power supply for brightest white : < / i > < br >
2019-11-12 19:33:34 +01:00
< b > < span id = psu > ? < / span > < / b > < br >
< span id = psu2 > < br > < / span >
< br >
Enable automatic brightness limiter : < input type = checkbox name = ABen onchange = enABL ( ) id = able > < br >
< div id = abl >
Maximum Current : < input name = MA type = number min = 250 max = 65000 oninput = UI ( ) required > mA < br >
2019-12-04 02:01:47 +01:00
< div id = ampwarning style = color : orange ; display : none >
2019-11-12 19:33:34 +01:00
& # 9888 ; Your power supply provides high current . < br >
To improve the safety of your setup , < br >
please use thick cables , < br >
multiple power injection points and a fuse ! < br >
< / div >
2018-12-04 00:58:06 +01:00
< i > Automatically limits brightness to stay close to the limit . < br >
2018-12-06 00:27:36 +01:00
Keep at & lt ; 1 A if powering LEDs directly from the ESP 5 V pin ! < br >
2019-11-12 19:33:34 +01:00
If you are using an external power supply , enter its rating . < br >
( Current estimated usage : < span class = pow > unknown < / span > ) < / i > < br > < br >
LED voltage ( Max . current for a single LED ) : < br >
< select name = LAsel onchange = enLA ( ) >
< option value = 55 selected > 5 V default ( 55 mA ) < / option >
< option value = 35 > 5 V efficient ( 35 mA ) < / option >
< option value = 30 > 12 V ( 30 mA ) < / option >
2020-01-13 18:09:20 +01:00
< option value = 255 > WS2815 ( 12 mA ) < / option >
2019-11-12 19:33:34 +01:00
< option value = 50 > Custom < / option >
< / select > < br >
< span id = LAdis style = display : none > Custom max . current per LED : < input name = LA type = number min = 0 max = 255 id = la oninput = UI ( ) required > mA < br > < / span >
< i > Keep at default if you are unsure about your type of LEDs . < / i > < br >
< / div >
< br >
LEDs are 4 - channel type ( RGBW ) : < input type = checkbox name = EW onchange = UI ( ) id = rgbw > < br >
2019-12-04 02:01:47 +01:00
< span class = wc >
Auto - calculate white channel from RGB : < input type = checkbox name = AW > < br > < / span >
2018-11-28 12:24:32 +01:00
Color order :
2019-11-12 19:33:34 +01:00
< select name = CO >
< option value = 0 > GRB < / option >
< option value = 1 > RGB < / option >
2019-12-11 00:59:15 +01:00
< option value = 2 > BRG < / option >
2019-11-12 19:33:34 +01:00
< option value = 3 > RBG < / option >
2020-01-14 10:59:57 +01:00
< option value = 4 > BGR < / option >
< option value = 5 > GBR < / option >
2019-11-12 19:33:34 +01:00
< / select >
2018-12-04 00:58:06 +01:00
< h3 > Defaults < / h3 >
2019-11-12 19:33:34 +01:00
Turn LEDs on after power up / reset : < input type = checkbox name = BO > < br >
Default brightness : < input name = CA type = number min = 0 max = 255 required > ( 0 - 255 ) < br > < br >
2019-12-04 02:01:47 +01:00
Apply preset < input name = BP type = number min = 0 max = 16 required > at boot ( 0 uses defaults )
2019-02-25 22:23:26 +01:00
< br > - < i > or < / i > - < br >
2019-12-04 02:01:47 +01:00
Set current preset cycle setting as boot default : < input type = checkbox name = PC > < br > < br >
2019-11-12 19:33:34 +01:00
Use Gamma correction for color : < input type = checkbox name = GC > ( strongly recommended ) < br >
Use Gamma correction for brightness : < input type = checkbox name = GB > ( not recommended ) < br > < br >
Brightness factor : < input name = BF type = number min = 1 max = 255 required > %
2018-02-20 22:29:48 +01:00
< h3 > Transitions < / h3 >
2019-11-12 19:33:34 +01:00
Crossfade : < input type = checkbox name = TF > < br >
Transition Time : < input name = TD maxlength = 5 size = 2 > ms < br >
Enable Palette transitions : < input type = checkbox name = PF >
2018-02-20 22:29:48 +01:00
< h3 > Timed light < / h3 >
2019-11-12 19:33:34 +01:00
Default Duration : < input name = TL type = number min = 1 max = 255 required > min < br >
Default Target brightness : < input name = TB type = number min = 0 max = 255 required > < br >
Fade down : < input type = checkbox name = TW > < br >
2018-02-20 22:29:48 +01:00
< h3 > Advanced < / h3 >
2018-09-11 00:20:12 +02:00
Palette blending :
2019-11-12 19:33:34 +01:00
< select name = PB >
< option value = 0 > Linear ( wrap if moving ) < / option >
< option value = 1 > Linear ( always wrap ) < / option >
< option value = 2 > Linear ( never wrap ) < / option >
< option value = 3 > None ( not recommended ) < / option >
2018-09-11 00:20:12 +02:00
< / select > < br >
2019-11-12 19:33:34 +01:00
Reverse LED order ( rotate 180 ) : < input type = checkbox name = RV > < br >
2020-01-14 10:59:57 +01:00
Skip first LED : < input type = checkbox name = SL > < hr >
2019-11-12 19:33:34 +01:00
< button type = button onclick = B ( ) > Back < / button > < button type = submit > Save < / button >
2019-12-04 02:01:47 +01:00
< / form > < / body > < / html > ) = = = = = " ;
2018-01-27 23:28:20 +01:00
2018-09-17 11:15:08 +02:00
//User Interface settings
2019-02-16 00:21:22 +01:00
const char PAGE_settings_ui [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-11-13 01:20:14 +01:00
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " > < title > UI Settings < / title > < script >
2019-02-16 00:21:22 +01:00
function gId ( s ) { return document . getElementById ( s ) ; } function S ( ) { GetV ( ) ; Ct ( ) ; } function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings " ) ; } function B ( ) { window . history . back ( ) ; } function Ct ( ) { if ( gId ( " co " ) . selected ) { gId ( " cth " ) . style . display = " block " ; } else { gId ( " cth " ) . style . display = " none " ; } } function GetV ( ) { var d = document ;
% CSS % % SCSS % < / head >
2018-02-20 22:29:48 +01:00
< body onload = " S() " >
< form id = " form_s " name = " Sf " method = " post " >
< div class = " helpB " > < button type = " button " onclick = " H() " > ? < / button > < / div >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > Web Setup < / h2 >
2019-12-13 01:23:07 +01:00
Server description : < input name = " DS " maxlength = " 32 " > < br >
Sync button toggles both send and receive : < input type = " checkbox " name = " ST " > < br > < br >
2018-03-14 00:25:54 +01:00
< hr > < button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button >
2018-02-20 22:29:48 +01:00
< / form >
< / body >
2019-02-10 23:05:06 +01:00
< / html > ) = = = = = " ;
2018-02-20 22:29:48 +01:00
2018-09-17 11:15:08 +02:00
//sync settings
2019-02-16 00:21:22 +01:00
const char PAGE_settings_sync [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-11-13 01:20:14 +01:00
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " > < title > Sync Settings < / title >
2019-02-16 00:21:22 +01:00
< script > function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings " ) ; } function B ( ) { window . open ( " /settings " , " _self " ) ; } function GetV ( ) { var d = document ;
% CSS % % SCSS % < / head >
2018-02-20 22:29:48 +01:00
< body onload = " GetV() " >
< form id = " form_s " name = " Sf " method = " post " >
< div class = " helpB " > < button type = " button " onclick = " H() " > ? < / button > < / div >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > Sync setup < / h2 >
< h3 > Button setup < / h3 >
2018-11-21 23:28:20 +01:00
On / Off button enabled : < input type = " checkbox " name = " BT " > < br >
2020-01-25 17:35:18 +01:00
Infrared receiver type ( 0 = disabled ) : < input name = " IR " type = " number " min = " 0 " max = " 6 " required > < br >
2018-11-21 23:28:20 +01:00
< a href = " https://github.com/Aircoookie/WLED/wiki/Infrared-Control " target = " _blank " > IR info < / a >
2018-02-20 22:29:48 +01:00
< h3 > WLED Broadcast < / h3 >
2019-02-25 19:14:13 +01:00
UDP Port : < input name = " UP " type = " number " min = " 1 " max = " 65535 " required > < br >
2018-03-14 19:05:51 +01:00
Receive < input type = " checkbox " name = " RB " > Brightness , < input type = " checkbox " name = " RC " > Color , and < input type = " checkbox " name = " RX " > Effects < br >
Send notifications on direct change : < input type = " checkbox " name = " SD " > < br >
Send notifications on button press : < input type = " checkbox " name = " SB " > < br >
Send Alexa notifications : < input type = " checkbox " name = " SA " > < br >
Send Philips Hue change notifications : < input type = " checkbox " name = " SH " > < br >
2019-02-19 12:57:50 +01:00
Send Macro notifications : < input type = " checkbox " name = " SM " > < br >
Send notifications twice : < input type = " checkbox " name = " S2 " >
2018-08-11 22:57:13 +02:00
< h3 > Realtime < / h3 >
Receive UDP realtime : < input type = " checkbox " name = " RD " > < br > < br >
< i > E1 .31 ( sACN ) < / i > < br >
Use E1 .31 multicast : < input type = " checkbox " name = " EM " > < br >
2018-11-01 16:16:38 +01:00
E1 .31 start universe : < input name = " EU " type = " number " min = " 1 " max = " 63999 " required > < br >
2020-02-09 19:10:29 +01:00
< i > Reboot required . < / i > Check out < a href = " https://github.com/ahodges9/LedFx " target = " _blank " > LedFx < / a > ! < br >
2020-02-08 20:52:45 +01:00
DMX start address : < input name = " DA " type = " number " min = " 1 " max = " 510 " value = " 1 " required > < br >
DMX mode : < input name = " DM " type = " radio " value = " 0 " > disabled < br >
< input name = " DM " type = " radio " value = " 1 " > Single RGB ( 3 Channels for all LEDs : Red Green Blue ) < br >
< input name = " DM " type = " radio " value = " 2 " > Single DRGB ( 4 Channels for all LEDs : Dimmer Red Green Blue ) < br >
2020-02-09 19:10:29 +01:00
< input name = " DM " type = " radio " value = " 3 " > Effect ( 11 Channels for properties : Dimmer FX Speed Intensity Palette PriR PriG PriB SecR SecG SecB ) < br >
2020-02-08 20:52:45 +01:00
< input name = " DM " type = " radio " value = " 4 " > Multiple RGB ( 3 Channels for each LED : Red Green Blue ) < br >
2020-02-09 19:10:29 +01:00
< input name = " DM " type = " radio " value = " 5 " > Multiple DRGB ( 1 + 3 Channels for each LED : Dimmer R1 G1 B1 R2 G2 B2 . . . ) < br > < br >
2018-08-11 22:57:13 +02:00
Timeout : < input name = " ET " type = " number " min = " 1 " max = " 65000 " required > ms < br >
Force max brightness : < input type = " checkbox " name = " FB " > < br >
Disable realtime gamma correction : < input type = " checkbox " name = " RG " > < br >
2019-02-19 12:57:50 +01:00
Realtime LED offset : < input name = " WO " type = " number " min = " -255 " max = " 255 " required >
2018-02-20 22:29:48 +01:00
< h3 > Alexa Voice Assistant < / h3 >
2018-03-14 19:05:51 +01:00
Emulate Alexa device : < input type = " checkbox " name = " AL " > < br >
2018-07-16 11:50:09 +02:00
Alexa invocation name : < input name = " AI " maxlength = " 32 " >
< h3 > Blynk < / h3 >
2018-12-06 00:27:36 +01:00
< b > Blynk , MQTT and Hue sync all connect to external hosts ! < br >
2019-02-19 12:57:50 +01:00
This may impact the responsiveness of the ESP8266 . < / b > < br >
2018-12-06 00:27:36 +01:00
For best results , only use one of these services at a time . < br >
( alternatively , connect a second ESP to them and use the UDP sync ) < br > < br >
2018-07-16 11:50:09 +02:00
Device Auth token : < input name = " BK " maxlength = " 33 " > < br >
2018-08-11 22:57:13 +02:00
< i > Clear the token field to disable . < / i > < a href = " https://github.com/Aircoookie/WLED/wiki/Blynk " target = " _blank " > Setup info < / a >
2018-10-04 16:50:12 +02:00
< h3 > MQTT < / h3 >
2019-12-13 01:23:07 +01:00
Enable MQTT : < input type = " checkbox " name = " MQ " > < br >
2019-08-18 18:14:17 +02:00
Broker : < input name = " MS " maxlength = " 32 " >
2020-02-09 10:35:32 +01:00
Port : < input name = " MQPORT " type = " number " min = " 1 " max = " 65535 " > < br >
2019-08-18 18:14:17 +02:00
< b > The MQTT credentials are sent over an unsecured connection . < br >
Never use the MQTT password for another service ! < / b > < br >
Username : < input name = " MQUSER " maxlength = " 40 " > < br >
Password : < input type = " password " input name = " MQPASS " maxlength = " 40 " > < br >
Client ID : < input name = " MQCID " maxlength = " 40 " > < br >
2018-10-04 16:50:12 +02:00
Device Topic : < input name = " MD " maxlength = " 32 " > < br >
Group Topic : < input name = " MG " maxlength = " 32 " > < br >
< i > Reboot required to apply changes . < / i > < a href = " https://github.com/Aircoookie/WLED/wiki/MQTT " target = " _blank " > MQTT info < / a >
2018-02-20 22:29:48 +01:00
< h3 > Philips Hue < / h3 >
2018-02-28 00:27:10 +01:00
< i > You can find the bridge IP and the light number in the ' About ' section of the hue app . < / i > < br >
2020-01-28 20:47:37 +01:00
Poll Hue light < input name = " HL " type = " number " min = " 1 " max = " 99 " > every < input name = " HI " type = " number " min = " 100 " max = " 65000 " > ms : < input type = " checkbox " name = " HP " > < br >
2018-06-24 01:20:15 +02:00
Then , receive < input type = " checkbox " name = " HO " > On / Off , < input type = " checkbox " name = " HB " > Brightness , and < input type = " checkbox " name = " HC " > Color < br >
2018-02-20 22:29:48 +01:00
Hue Bridge IP : < br >
2020-01-28 20:47:37 +01:00
< input name = " H0 " type = " number " min = " 0 " max = " 255 " > .
< input name = " H1 " type = " number " min = " 0 " max = " 255 " > .
< input name = " H2 " type = " number " min = " 0 " max = " 255 " > .
< input name = " H3 " type = " number " min = " 0 " max = " 255 " > < br >
2018-02-28 00:27:10 +01:00
< b > Press the pushlink button on the bridge , after that save this page ! < / b > < br >
2018-02-20 22:29:48 +01:00
( when first connecting ) < br >
2018-03-14 19:05:51 +01:00
Hue status : < span class = " hms " > Internal ESP Error ! < / span > < hr >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button >
2018-02-20 22:29:48 +01:00
< / form >
< / body >
2019-02-10 23:05:06 +01:00
< / html > ) = = = = = " ;
2018-02-20 22:29:48 +01:00
2018-09-17 11:15:08 +02:00
//time and macro settings
2019-02-16 00:21:22 +01:00
const char PAGE_settings_time [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-11-13 01:20:14 +01:00
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " > < title > Time Settings < / title >
2019-01-31 00:09:44 +01:00
< script > var d = document ; function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#time-settings " ) ; } function B ( ) { window . open ( " /settings " , " _self " ) ; } function S ( ) { BTa ( ) ; GetV ( ) ; Cs ( ) ; FC ( ) ; } function gId ( s ) { return d . getElementById ( s ) ; } function Cs ( ) { gId ( " cac " ) . style . display = " none " ; gId ( " coc " ) . style . display = " block " ; gId ( " ccc " ) . style . display = " none " ; if ( gId ( " ca " ) . selected ) { gId ( " cac " ) . style . display = " block " ; } if ( gId ( " cc " ) . selected ) { gId ( " coc " ) . style . display = " none " ; gId ( " ccc " ) . style . display = " block " ; } if ( gId ( " cn " ) . selected ) { gId ( " coc " ) . style . display = " none " ; } }
function BTa ( ) { var ih = " <tr><th>Active</th><th>Hour</th><th>Minute</th><th>Macro</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr> " ; for ( i = 0 ; i < 8 ; i + + ) { ih + = " <tr><td><input name= \" W " + i + " \" id= \" W " + i + " \" type= \" number \" style= \" display:none \" ><input id= \" W " + i + " 0 \" type= \" checkbox \" ></td><td><input name= \" H " + i + " \" type= \" number \" min= \" 0 \" max= \" 24 \" ></td><td><input name= \" N " + i + " \" type= \" number \" min= \" 0 \" max= \" 59 \" ></td><td><input name= \" T " + i + " \" type= \" number \" min= \" 0 \" max= \" 16 \" ></td> " ; for ( j = 1 ; j < 8 ; j + + ) ih + = " <td><input id= \" W " + i + j + " \" type= \" checkbox \" ></td> " ; } gId ( " TMT " ) . innerHTML = ih ; }
function FC ( ) { for ( j = 0 ; j < 8 ; j + + ) { for ( i = 0 ; i < 8 ; i + + ) gId ( " W " + i + j ) . checked = gId ( " W " + i ) . value > > j & 1 ; } }
2019-02-16 00:21:22 +01:00
function Wd ( ) { a = [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ] ; for ( i = 0 ; i < 8 ; i + + ) { m = 1 ; for ( j = 0 ; j < 8 ; j + + ) { a [ i ] + = gId ( " W " + i + j ) . checked * m ; m * = 2 ; } gId ( " W " + i ) . value = a [ i ] ; } } function GetV ( ) {
% CSS % % SCSS % < / head >
2018-03-14 00:25:54 +01:00
< body onload = " S() " >
2019-01-31 00:09:44 +01:00
< form id = " form_s " name = " Sf " method = " post " onsubmit = " Wd() " >
2018-02-20 22:29:48 +01:00
< div class = " helpB " > < button type = " button " onclick = " H() " > ? < / button > < / div >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > Time setup < / h2 >
2018-03-14 19:05:51 +01:00
Get time from NTP server : < input type = " checkbox " name = " NT " > < br >
2019-12-04 02:01:47 +01:00
< input name = " NS " maxlength = " 32 " > < br >
2018-03-14 19:05:51 +01:00
Use 24 h format : < input type = " checkbox " name = " CF " > < br >
2019-08-17 12:27:06 +02:00
Time zone :
2018-03-14 19:05:51 +01:00
< select name = " TZ " >
2018-03-14 00:25:54 +01:00
< option value = " 0 " selected > GMT ( UTC ) < / option >
< option value = " 1 " > GMT / BST < / option >
< option value = " 2 " > CET / CEST < / option >
< option value = " 3 " > EET / EEST < / option >
< option value = " 4 " > US - EST / EDT < / option >
< option value = " 5 " > US - CST / CDT < / option >
< option value = " 6 " > US - MST / MDT < / option >
< option value = " 7 " > US - AZ < / option >
< option value = " 8 " > US - PST / PDT < / option >
< option value = " 9 " > CST ( AWST ) < / option >
< option value = " 10 " > JST ( KST ) < / option >
< option value = " 11 " > AEST / AEDT < / option >
< option value = " 12 " > NZST / NZDT < / option >
2018-04-01 00:08:50 +02:00
< option value = " 13 " > North Korea < / option >
2019-10-29 01:19:56 +01:00
< option value = " 14 " > IST ( India ) < / option >
2019-12-23 20:54:00 +01:00
< option value = " 15 " > CA - Saskatchewan < / option >
2018-02-20 22:29:48 +01:00
< / select > < br >
2018-03-14 19:05:51 +01:00
UTC offset : < input name = " UO " type = " number " min = " -65500 " max = " 65500 " required > seconds ( max . 18 hours ) < br >
2018-02-20 22:29:48 +01:00
Current local time is < span class = " times " > unknown < / span > .
2018-03-14 00:25:54 +01:00
< h3 > Clock < / h3 >
Clock Overlay :
2018-03-14 19:05:51 +01:00
< select name = " OL " onchange = " Cs() " >
2018-03-14 00:25:54 +01:00
< option value = " 0 " id = " cn " selected > None < / option >
2018-09-04 15:51:38 +02:00
< option value = " 1 " id = " ca " > Analog Clock < / option >
2019-12-11 00:59:15 +01:00
< option value = " 2 " disabled > - < / option >
2018-09-04 15:51:38 +02:00
< option value = " 3 " id = " cc " > Cronixie Clock < / option >
2018-03-14 00:25:54 +01:00
< / select > < br >
< div id = " coc " >
2018-03-14 19:05:51 +01:00
First LED : < input name = " O1 " type = " number " min = " 0 " max = " 255 " required > Last LED : < input name = " O2 " type = " number " min = " 0 " max = " 255 " required > < br >
2018-03-14 00:25:54 +01:00
< div id = " cac " >
2018-03-14 19:05:51 +01:00
12 h LED : < input name = " OM " type = " number " min = " 0 " max = " 255 " required > < br >
Show 5 min marks : < input type = " checkbox " name = " O5 " > < br > < / div >
Seconds ( as trail ) : < input type = " checkbox " name = " OS " > < br >
2018-03-14 00:25:54 +01:00
< / div >
< div id = " ccc " >
2018-03-14 19:05:51 +01:00
Cronixie Display : < input name = " CX " maxlength = " 6 " > < br >
Cronixie Backlight : < input type = " checkbox " name = " CB " > < br >
2018-03-14 00:25:54 +01:00
< / div >
2018-03-14 19:05:51 +01:00
Countdown Mode : < input type = " checkbox " name = " CE " > < br >
2018-12-06 00:27:36 +01:00
Countdown Goal : < br >
Year : 20 < input name = " CY " type = " number " min = " 0 " max = " 99 " required > Month : < input name = " CI " type = " number " min = " 1 " max = " 12 " required > Day : < input name = " CD " type = " number " min = " 1 " max = " 31 " required > < br >
2018-03-14 19:05:51 +01:00
Hour : < input name = " CH " type = " number " min = " 0 " max = " 23 " required > Minute : < input name = " CM " type = " number " min = " 0 " max = " 59 " required > Second : < input name = " CS " type = " number " min = " 0 " max = " 59 " required > < br >
2018-02-20 22:29:48 +01:00
< h3 > Advanced Macros < / h3 >
2018-03-14 00:25:54 +01:00
Define API macros here : < br >
2018-03-14 19:05:51 +01:00
1 : < input name = " M1 " maxlength = " 64 " > < br >
2 : < input name = " M2 " maxlength = " 64 " > < br >
3 : < input name = " M3 " maxlength = " 64 " > < br >
4 : < input name = " M4 " maxlength = " 64 " > < br >
5 : < input name = " M5 " maxlength = " 64 " > < br >
6 : < input name = " M6 " maxlength = " 64 " > < br >
7 : < input name = " M7 " maxlength = " 64 " > < br >
8 : < input name = " M8 " maxlength = " 64 " > < br >
9 : < input name = " M9 " maxlength = " 64 " > < br >
10 : < input name = " M10 " maxlength = " 64 " > < br >
11 : < input name = " M11 " maxlength = " 64 " > < br >
12 : < input name = " M12 " maxlength = " 64 " > < br >
13 : < input name = " M13 " maxlength = " 64 " > < br >
14 : < input name = " M14 " maxlength = " 64 " > < br >
15 : < input name = " M15 " maxlength = " 64 " > < br >
16 : < input name = " M16 " maxlength = " 64 " > < br > < br >
2018-03-14 00:25:54 +01:00
< i > Use 0 for the default action instead of a macro < / i > < br >
2019-03-13 11:13:03 +01:00
Boot macro : < input name = " MB " type = " number " min = " 0 " max = " 16 " required > < br >
Alexa On / Off macros : < input name = " A0 " type = " number " min = " 0 " max = " 16 " required > < input name = " A1 " type = " number " min = " 0 " max = " 16 " required > < br >
Button short press macro : < input name = " MP " type = " number " min = " 0 " max = " 16 " required > < br >
Long press : < input name = " ML " type = " number " min = " 0 " max = " 16 " required > Double press : < input name = " MD " type = " number " min = " 0 " max = " 16 " required > < br >
Countdown - Over macro : < input name = " MC " type = " number " min = " 0 " max = " 16 " required > < br >
Timed - Light - Over macro : < input name = " MN " type = " number " min = " 0 " max = " 16 " required > < br >
Time - Controlled macros : < br >
2019-01-31 00:09:44 +01:00
< div style = " display: inline-block " >
< table id = " TMT " >
< / table > < / div > < hr >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button >
2018-02-20 22:29:48 +01:00
< / form >
2018-02-23 01:33:32 +01:00
< / body >
2019-02-10 23:05:06 +01:00
< / html > ) = = = = = " ;
2018-02-20 22:29:48 +01:00
2018-09-17 11:15:08 +02:00
//security settings and about
2019-02-16 00:21:22 +01:00
const char PAGE_settings_sec [ ] PROGMEM = R " =====(<!DOCTYPE html>
2019-11-13 01:20:14 +01:00
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " >
2018-02-20 22:29:48 +01:00
< title > Misc Settings < / title >
2019-02-16 00:21:22 +01:00
< script > function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#security-settings " ) ; } function B ( ) { window . open ( " /settings " , " _self " ) ; } function U ( ) { window . open ( " /update " , " _self " ) ; } function GetV ( ) { var d = document ;
% CSS % % SCSS % < / head >
2018-02-20 22:29:48 +01:00
< body onload = " GetV() " >
< form id = " form_s " name = " Sf " method = " post " >
< div class = " helpB " > < button type = " button " onclick = " H() " > ? < / button > < / div >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save & Reboot < / button > < hr >
2018-02-20 22:29:48 +01:00
< h2 > Security & Update setup < / h2 >
2018-05-10 19:55:58 +02:00
Lock wireless ( OTA ) software update : < input type = " checkbox " name = " NO " > < br >
2018-03-14 19:05:51 +01:00
Passphrase : < input type = " password " name = " OP " maxlength = " 32 " > < br >
2018-02-20 22:29:48 +01:00
To enable OTA , for security reasons you need to also enter the correct password ! < br >
2018-03-14 19:05:51 +01:00
The password should be changed when OTA is enabled . < br >
< b > Disable OTA when not in use , otherwise an attacker can reflash device software ! < / b > < br >
2018-02-20 22:29:48 +01:00
< i > Settings on this page are only changable if OTA lock is disabled ! < / i > < br >
2018-03-14 19:05:51 +01:00
Deny access to WiFi settings if locked : < input type = " checkbox " name = " OW " > < br > < br >
Factory reset : < input type = " checkbox " name = " RS " > < br >
2018-02-20 22:29:48 +01:00
All EEPROM content ( settings ) will be erased . < br > < br >
2018-03-14 19:05:51 +01:00
HTTP traffic is unencrypted . An attacker in the same network can intercept form data !
2018-02-20 22:29:48 +01:00
< h3 > Software Update < / h3 >
< button type = " button " onclick = " U() " > Manual OTA Update < / button > < br >
2018-03-14 19:05:51 +01:00
Enable ArduinoOTA : < input type = " checkbox " name = " AO " > < br >
2018-02-20 22:29:48 +01:00
< h3 > About < / h3 >
2020-02-09 10:35:32 +01:00
< a href = " https://github.com/Aircoookie/WLED " target = " _blank " > WLED < / a > version 0.9 .1 < br > < br >
2018-11-23 00:03:44 +01:00
< a href = " https://github.com/Aircoookie/WLED/wiki/Contributors-&-About " target = " _blank " > Contributors , dependencies and special thanks < / a > < br >
A huge thank you to everyone who helped me create WLED ! < br > < br >
2020-01-02 02:12:10 +01:00
( c ) 2016 - 2020 Christian Schwinne < br >
2018-02-20 22:29:48 +01:00
< i > Licensed under the MIT license < / i > < br > < br >
Server message : < span class = " msg " > Response error ! < / span > < hr >
2018-03-14 00:25:54 +01:00
< button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save & Reboot < / button >
2018-02-20 22:29:48 +01:00
< / form >
< / body >
2019-02-10 23:05:06 +01:00
< / html > ) = = = = = " ;
