2017-02-01 21:25:09 +01:00
/*
2020-04-10 12:30:08 +02:00
* Settings html
*/
2019-08-17 12:27:06 +02:00
2018-09-17 11:15:08 +02:00
//common CSS of settings pages
2020-03-26 19:43:23 +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;}.d5{width:4.5em !important;}</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>
2020-02-23 22:24:51 +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 >
2020-02-23 22:24:51 +01:00
< form action = / settings / ui > < button type = submit > User Interface < / button > < / form > % DMXMENU %
2018-02-20 22:29:48 +01:00
< 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 >
2020-02-23 22:24:51 +01:00
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 >
2020-02-20 17:08:56 +01:00
AP IP : < span class = " sip " > Not active < / span > < br >
< h3 > Experimental < / h3 >
Disable WiFi sleep : < input type = " checkbox " name = " WS " > < br >
< i > Can help with connectivity issues . < br >
Do not enable if WiFi is working correctly , increases power consumption . < / i >
< 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 >
2020-02-20 00:45:09 +01:00
Auto - calculate white channel from RGB : < br >
< select name = AW >
< option value = 0 > None < / option >
< option value = 1 > Brighter < / option >
< option value = 2 > Accurate < / option >
< option value = 3 > Dual < / option >
< option value = 4 > Legacy < / option >
< / select >
< 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
2020-02-23 22:24:51 +01:00
# ifdef WLED_ENABLE_DMX
//DMX Output settings
const char PAGE_settings_dmx [ ] PROGMEM = R " =====(<!DOCTYPE html>
< html > < head > < meta name = " viewport " content = " width=500 " > < meta charset = " utf-8 " > < title > DMX Settings < / title > < script >
function GCH ( num ) {
d = document ;
d . getElementById ( ' dmxchannels ' ) . innerHTML + = " " ;
for ( i = 0 ; i < num ; i + + ) {
d . getElementById ( ' dmxchannels ' ) . innerHTML + = " <span id=CH " + ( i + 1 ) + " s >Channel " + ( i + 1 ) + " : <select name=CH " + ( i + 1 ) + " id= \" CH " + ( i + 1 ) + " \" ><option value=0>Set to 0</option><option value=1>Red</option><option value=2>Green</option><option value=3>Blue</option><option value=4>White</option><option value=5>Shutter (Brightness)</option><option value=6>Set to 255</option></select></span><br /> \n " ;
}
}
function mMap ( ) {
d = document ;
numCh = document . Sf . CN . value ;
numGap = document . Sf . CG . value ;
if ( parseInt ( numCh ) > parseInt ( numGap ) ) {
d . getElementById ( " gapwarning " ) . style . display = " block " ;
} else {
d . getElementById ( " gapwarning " ) . style . display = " none " ;
}
for ( i = 0 ; i < 15 ; i + + ) {
if ( i > = numCh ) {
d . getElementById ( " CH " + ( i + 1 ) + " s " ) . style . opacity = " 0.5 " ;
d . getElementById ( " CH " + ( i + 1 ) ) . disabled = true ;
} else {
d . getElementById ( " CH " + ( i + 1 ) + " s " ) . style . opacity = " 1 " ;
d . getElementById ( " CH " + ( i + 1 ) ) . disabled = false ;
}
}
}
function S ( ) { GCH ( 15 ) ; GetV ( ) ; mMap ( ) ; } function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/DMX " ) ; } function B ( ) { window . history . back ( ) ; } function GetV ( ) { var d = document ;
% CSS % % SCSS % < / head >
< body onload = " S() " >
< 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 >
< h2 > Imma firin ma lazer ( if it has DMX support ) < / h2 > < ! - - TODO : Change to something less - meme - related //-->
2020-05-11 11:51:11 +02:00
Proxy Universe < input name = PU type = number min = 0 max = 63999 required > from E1 .31 to DMX ( 0 = disabled ) < br >
< i > This will disable the LED data output to DMX configurable below < / i > < br > < br >
2020-02-23 22:24:51 +01:00
< i > Number of fixtures is taken from LED config page < / i > < br >
2020-04-10 12:30:08 +02:00
Channels per fixture ( 15 max ) : < input type = " number " min = " 1 " max = " 15 " name = " CN " maxlength = " 2 " onchange = " mMap() ; " ><br />
Start channel : < input type = " number " min = " 1 " max = " 512 " name = " CS " maxlength = " 2 " > < br / >
Spacing between start channels : < input type = " number " min = " 1 " max = " 512 " name = " CG " maxlength = " 2 " onchange = " mMap(); " > [ < a href = " javascript:alert('if set to 10, first fixture will start at 10, \n second will start at 20 etc. \n Regardless of the channel count. \n Makes memorizing channel numbers easier.'); " > info < / a > ] < br >
2020-02-23 22:24:51 +01:00
< div id = " gapwarning " style = " color: orange; display: none; " > WARNING : Channel gap is lower than channels per fixture . < br / > This will cause overlap . < / div >
2020-03-28 12:07:02 +01:00
< button type = " button " onclick = " location.href='/dmxmap'; " > DMX Map < / button > < br >
2020-04-10 12:30:08 +02:00
DMX fixtures start LED : < input type = " number " min = " 0 " max = " 1500 " name = " SL " >
2020-02-23 22:24:51 +01:00
< h3 > channel functions < / h3 >
< div id = " dmxchannels " > < / div >
< hr > < button type = " button " onclick = " B() " > Back < / button > < button type = " submit " > Save < / button >
< / form >
< / body >
< / html > ) = = = = = " ;
# else
const char PAGE_settings_dmx [ ] PROGMEM = R " =====()===== " ;
# endif
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
2020-02-23 22:24:51 +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>
2020-04-13 00:42:27 +02:00
< html > < head > < meta name = viewport content = " width=500 " > < meta charset = utf - 8 > < title > Sync Settings < / title >
< script > var d = document ; function H ( ) { window . open ( " https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings " ) } function B ( ) { window . open ( " /settings " , " _self " ) } function adj ( ) { if ( d . Sf . DI . value = = 6454 ) { if ( d . Sf . DA . value = = 1 ) { d . Sf . DA . value = 0 } if ( d . Sf . EU . value = = 1 ) { d . Sf . EU . value = 0 } } else { if ( d . Sf . DI . value = = 5568 ) { if ( d . Sf . DA . value = = 0 ) { d . Sf . DA . value = 1 } if ( d . Sf . EU . value = = 0 ) { d . Sf . EU . value = 1 } } } } function SP ( ) { var a = d . Sf . DI . value ; d . getElementById ( " xp " ) . style . display = ( a > 0 ) ? " none " : " block " ; if ( a > 0 ) { d . Sf . EP . value = a } } function SetVal ( ) { switch ( parseInt ( d . Sf . EP . value ) ) { case 5568 : d . Sf . DI . value = 5568 ; break ; case 6454 : d . Sf . DI . value = 6454 ; break } SP ( ) } function S ( ) { GetV ( ) ; SetVal ( ) } ; function GetV ( ) {
2019-02-16 00:21:22 +01:00
% CSS % % SCSS % < / head >
2020-04-13 00:42:27 +02:00
< body onload = S ( ) >
< 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 > Sync setup < / h2 >
< h3 > Button setup < / h3 >
2020-04-13 00:42:27 +02:00
On / Off button enabled : < input type = checkbox name = BT > < br >
2020-02-18 18:52:47 +01:00
Infrared remote :
< select name = IR >
< option value = 0 > Disabled < / option >
< option value = 1 > 24 - key RGB < / option >
< option value = 2 > 24 - key with CT < / option >
< option value = 3 > 40 - key blue < / option >
< option value = 4 > 44 - key RGB < / option >
< option value = 5 > 21 - key RGB < / option >
< option value = 6 > 6 - key black < / option >
< / select > < br >
2020-04-13 00:42:27 +02: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 >
2020-04-13 00:42:27 +02:00
UDP Port : < input name = UP type = number min = 1 max = 65535 class = d5 required > < br >
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 >
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 >
2020-04-13 00:42:27 +02:00
Receive UDP realtime : < input type = checkbox name = RD > < br > < br >
< i > Network DMX input < / i > < br >
Type :
< select name = DI onchange = SP ( ) ; adj ( ) >
< option value = 5568 > E1 .31 ( sACN ) < / option >
< option value = 6454 > Art - Net < / option >
< option value = 0 selected > Custom port < / option >
< / select > < br >
< div id = xp > Port : < input name = EP type = number min = 1 max = 65535 value = 5568 class = d5 required > < br > < / div >
Multicast : < input type = checkbox name = EM > < br >
Start universe : < input name = EU type = number min = 0 max = 63999 required > < br >
< i > Reboot required . < / i > Check out < a href = https : //github.com/ahodges9/LedFx target=_blank>LedFx</a>!<br>
Skip out - of - sequence packets : < input type = checkbox name = ES > < br >
DMX start address : < input name = DA type = number min = 0 max = 510 required > < br >
2020-02-18 18:52:47 +01:00
DMX mode :
< select name = DM >
< option value = 0 > Disabled < / option >
< option value = 1 > Single RGB < / option >
< option value = 2 > Single DRGB < / option >
< option value = 3 > Effect < / option >
< option value = 4 > Multi RGB < / option >
< option value = 5 > Multi DRGB < / option >
< / select > < br >
2020-04-13 00:42:27 +02:00
< a href = https : //github.com/Aircoookie/WLED/wiki/E1.31-DMX target=_blank>E1.31 info</a><br>
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 >
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 >
2020-04-13 00:42:27 +02:00
Emulate Alexa device : < input type = checkbox name = AL > < br >
Alexa invocation name : < input name = AI maxlength = 32 >
2018-07-16 11:50:09 +02:00
< 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 >
2020-04-13 00:42:27 +02:00
Device Auth token : < input name = BK maxlength = 33 > < br >
< 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 >
2020-04-13 00:42:27 +02:00
Enable MQTT : < input type = checkbox name = MQ > < br >
Broker : < input name = MS maxlength = 32 >
Port : < input name = MQPORT type = number min = 1 max = 65535 class = d5 > < 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 >
2020-04-13 00:42:27 +02:00
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 >
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-04-13 00:42:27 +02: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 >
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-04-13 00:42:27 +02: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 >
2020-04-30 01:52:36 +02:00
Hue status : < span class = sip > Disabled in this build < / span > < hr >
2020-04-13 00:42:27 +02:00
< button type = button onclick = B ( ) > Back < / button > < button type = submit > Save < / button >
2018-02-20 22:29:48 +01:00
< / form >
2020-04-13 00:42:27 +02:00
< / body > < / 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 >
2020-05-03 01:48:23 +02:00
< option value = " 16 " > ACST < / option >
< option value = " 17 " > ACST / ACDT < / 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-05-03 20:57:53 +02:00
< a href = " https://github.com/Aircoookie/WLED " target = " _blank " > WLED < / a > version 0.10 .0 < 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 >
2020-04-30 01:52:36 +02:00
Server message : < span class = " sip " > 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 > ) = = = = = " ;
