diff --git a/CHANGELOG.md b/CHANGELOG.md index 0df948c52..d79564271 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ ### Development versions after 0.9.1 release +#### Build 2005010 + +- Added module info page to web UI +- Added realtime override functionality to web UI +- Added individial segment power and brightness to web UI +- Added feature to one-click select single segment only by tapping segment name +- Removed palette jumping to default if color is changed + #### Build 2004300 - Added realtime override option and `lor` JSON property diff --git a/platformio.ini b/platformio.ini index 7e74aaa48..2075a7db9 100644 --- a/platformio.ini +++ b/platformio.ini @@ -177,7 +177,7 @@ board = esp01 platform = ${common.platform_latest} board_build.ldscript = ${common.ldscript_512k} build_flags = ${common.build_flags_esp8266} -D WLED_DISABLE_OTA -D WLED_DISABLE_ALEXA -D WLED_DISABLE_BLYNK - -D WLED_DISABLE_HUESYNC -D WLED_DISABLE_INFRARED + -D WLED_DISABLE_CRONIXIE -D WLED_DISABLE_HUESYNC -D WLED_DISABLE_INFRARED [env:esp01_1m_ota] board = esp01_1m diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 3446f7ceb..e4c877790 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -14,16 +14,32 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'); } +:root { + --c-bg: #111; + --c-tx: #fff; + --c-2 : #222; + --c-3 : #333; + --c-4 : #444; + --c-5 : #555; + --c-6 : #666; + --c-8 : #888; + --c-b : #bbb; + --c-c : #ccc; + --c-e : #eee; + --c-d : #ddd; + --c-red:#831; +} + html { touch-action: manipulation; } body { margin: 0; - background-color: #111; + background-color: var(--c-bg); font-family: Helvetica, Verdana, sans-serif; font-size: 17px; - color: white; + color: var(--c-tx); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; @@ -43,13 +59,7 @@ body { p { margin: 10px 0 2px 0; - color: #ddd; -} - -td { - text-align: center; - text-transform: uppercase; - font-size: 14px; + color: var(--c-d); } button { @@ -66,7 +76,7 @@ button { position: fixed; bottom: 72px; right: 4px; - color: #666; + color: var(--c-6); writing-mode: vertical-rl; } @@ -79,7 +89,7 @@ button { top: 0; left: 0; right: 0; - background: #222; + background: var(--c-2); z-index: 1; } @@ -92,32 +102,53 @@ button { margin: -2px 0 4px 0; } -table { +.huge { + font-size: 42px; +} + +.infot { + table-layout: fixed; + width: 100%; +} + +.segt { table-layout: fixed; width: 76%; } -td { +.segtd { text-align: center; + text-transform: uppercase; + font-size: 14px; +} + +.keytd { + text-align: left; + padding-bottom: 8px; +} + +.valtd { + text-align: right; + padding-bottom: 8px; } .slider-icon { transform: translateY(3px); - color: #ddd; + color: var(--c-d); } .sel-icon { margin: -1px 2px 5px 0; vertical-align: middle; - color: #ddd; + color: var(--c-d); } .flr { float: right; cursor: pointer; margin: 0; - color: #fff; + color: var(--c-tx); transform: rotate(0deg); transition: transform 0.3s; } @@ -139,8 +170,8 @@ td { } .tab { - background-color: #222; - color: #ddd; + background-color: var(--c-2); + color: var(--c-d); filter: drop-shadow(0px 0px 0px #111); } @@ -157,7 +188,7 @@ td { border: none; transition: 0.3s; font-size: 17px; - color: #ccc; + color: var(--c-c); } .top button { @@ -170,18 +201,18 @@ td { } .tab button:hover { - background-color: #333; - color: #eee; + background-color: var(--c-3); + color: var(--c-e); } .tab button.active { - background-color: #666; - color: #fff; + background-color: var(--c-6); + color: var(--c-tx); } .active { - background-color: #666 !important; - color: #fff; + background-color: var(--c-6) !important; + color: var(--c-tx); } .container { @@ -209,7 +240,7 @@ td { #Effects { padding-top: 0; - border-top: 11px solid #111; + border-top: 11px solid var(--c-bg); } .smooth { transition: transform calc(var(--f, 1)*.5s) ease-out } @@ -220,29 +251,30 @@ td { } .overlay { - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - background-color: #333; - font-size: 24px; - display: flex; - align-items: center; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + background-color: var(--c-3); + font-size: 24px; + display: flex; + align-items: center; justify-content: center; - z-index: 11; - opacity: 0.95; - transition: 0.7s; - pointer-events: none; + z-index: 11; + opacity: 0.95; + transition: 0.7s; + pointer-events: none; } .staytop { display: block; position: -webkit-sticky; position: sticky; - background: #111; + background: var(--c-bg); top: 0px; z-index: 1; + margin-top: 1px; } #staytop1 { @@ -255,14 +287,14 @@ td { #toast { opacity: 0; - background-color: #555; + background-color: var(--c-5); max-width: 90%; - color: #fff; + color: var(--c-tx); text-align: center; - border-radius: 2px; + border-radius: 5px; padding: 16px; position: fixed; - z-index: 2; + z-index: 5; left: 50%; transform: translateX(-50%); bottom: 100px; @@ -281,6 +313,62 @@ td { animation: fadein 0.5s; } +.modal { + position:fixed; + left: 0px; + bottom: 0px; + right: 0px; + background-color: #222e; + transform: translateY(100%); + transition: transform 0.4s; + padding: 8px; + font-size: 20px; + overflow: auto; +} + +#info { + z-index: 3; +} + +#rover { + z-index: 2; +} + +#roverstar { + position: fixed; + top: 75px; + left: 1px; + display: none; + cursor: pointer; +} + +#imgw { + width: 200px; + height: 55px; + display: inline-block; +} + +#kv { + max-width: 490px; + display: inline-block; +} + +#lv { + max-width: 600px; + display: inline-block; +} + +#heart { + transition: color 0.9s; + font-size: 16px; + color: #f00; +} + +img { + max-width: 100%; + max-height: 100%; +} + @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 100px; opacity: 1;} @@ -291,7 +379,7 @@ td { position: absolute; top: 13px; bottom: 13px; left: 10px; right: 10px; - background: #444; + background: var(--c-4); border-radius: 17px; pointer-events: none; z-index: -1; @@ -318,7 +406,7 @@ input[type=range]::-webkit-slider-thumb { height: 16px; width: 16px; border-radius: 17px; - background: #fff; + background: var(--c-tx); cursor: pointer; -webkit-appearance: none; margin-top: 7px; @@ -333,7 +421,7 @@ input[type=range]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 17px; - background: #fff; + background: var(--c-tx); transform: translateY(7px); } input[type=range]::-ms-track { @@ -353,7 +441,7 @@ input[type=range]::-ms-thumb { height: 16px; width: 16px; border-radius: 16px; - background: #fff; + background: var(--c-tx); margin-top: -12px; } @@ -367,6 +455,14 @@ input[type=range]::-ms-thumb { position: relative; } +.sws { + width: 212px; +} + +.sis { + width: 192px !important; +} + #briwrap { float: right; } @@ -374,7 +470,7 @@ input[type=range]::-ms-thumb { #picker { margin: 10px auto; width: 260px; - filter: drop-shadow(0px 0px 2px #000); + filter: drop-shadow(0px 0px 1px #000); } .btn { @@ -382,11 +478,11 @@ input[type=range]::-ms-thumb { margin: 10px; width: 230px; font-size: 19px; - background-color: #333; - color: white; + background-color: var(--c-3); + color: var(--c-tx); border: 0px solid white; border-radius: 25px; - filter: drop-shadow(0px 0px 2px #000); + filter: drop-shadow(0px 0px 1px #000); transition-duration: 0.5s; -webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0); @@ -395,10 +491,10 @@ input[type=range]::-ms-thumb { .btn-i { padding-bottom: 4px; width: 276px; - background-color: #222; + background-color: var(--c-2); } .btn-icon { - margin: 0px 8px 5px 0; + margin: 0px 8px 4px 0; vertical-align: middle; } @@ -413,7 +509,7 @@ input[type=range]::-ms-thumb { } .qcsb { padding: 13px; - border: 1px solid white; + border: 1px solid var(--c-tx); } .cl { @@ -437,13 +533,13 @@ select:-moz-focusring { text-shadow: 0 0 0 #fff; } option { - background-color: #333; - color: #fff; + background-color: var(--c-3); + color: var(--c-tx); } input[type=number] { - background: #333; - color: white; + background: var(--c-3); + color: var(--c-tx); border: 0px solid white; border-radius: 5px; padding: 8px; @@ -458,7 +554,7 @@ input[type=number] { } input[type=number]:focus { - background: #666; + background: var(--c-6); } input[type=number]::-webkit-inner-spin-button, @@ -470,6 +566,19 @@ input[type=number]::-webkit-outer-spin-button { margin: 3px 0 6px 0 !important; } +.segname { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + cursor: pointer; +} + +.newseg { + cursor: default; +} + .ic { padding: 6px 0 0 0; } @@ -484,34 +593,44 @@ input[type=number]::-webkit-outer-spin-button { } .psts { - background-color: #222; - color: #888; + background-color: var(--c-2); + color: var(--c-8); cursor: default; } .stored { - background-color: #333; - color: white; + background-color: var(--c-3); + color: var(--c-tx); cursor: pointer; } .saving { - background-color: #333; - color: white; + background-color: var(--c-3); + color: var(--c-tx); cursor: pointer; } .stored.saving { - background-color: #831; - color: white; + background-color: var(--c-red); + color: var(--c-tx); } .cnf { - position: absolute; - top: 66px; - right: 28px; - color: #fff; - cursor: pointer; - background: #333; - padding: 43px 6px; - border-radius: 5px; + position: absolute; + top: 66px; + right: 28px; + color: var(--c-tx); + cursor: pointer; + background: var(--c-3); + padding: 43px 6px; + border-radius: 5px; +} + +.pwr { + color: var(--c-6); + transform: translate(2px, 3px); + cursor: pointer; +} + +.act { + color: var(--c-tx); } .half { @@ -523,7 +642,7 @@ input[type=number]::-webkit-outer-spin-button { position: absolute; bottom: 8px; right: 8px; - color: #fff; + color: var(--c-tx); cursor: pointer; } @@ -537,13 +656,14 @@ input[type=number]::-webkit-outer-spin-button { } .schkl { - padding: 2px 70px 0px 35px; + padding: 2px 22px 0px 35px; margin-bottom: 0px; } .revchkl { padding: 2px 0px 0px 35px; margin-bottom: 0px; + margin-top: 8px; } .check input { @@ -560,7 +680,7 @@ input[type=number]::-webkit-outer-spin-button { left: 0; height: 25px; width: 25px; - background-color: #333; + background-color: var(--c-3); border-radius: 5px; } @@ -583,11 +703,11 @@ input[type=number]::-webkit-outer-spin-button { .check:hover input ~ .checkmark { - background-color: #444; + background-color: var(--c-4); } .check input:checked ~ .checkmark { - background-color: #666; + background-color: var(--c-6); } .checkmark:after { @@ -605,7 +725,7 @@ input[type=number]::-webkit-outer-spin-button { top: 5px; width: 5px; height: 10px; - border: solid white; + border: solid var(--c-tx); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); @@ -615,7 +735,7 @@ input[type=number]::-webkit-outer-spin-button { .h { font-size: 13px; text-align: center; - color: #bbb; + color: var(--c-b); } .bp { @@ -629,11 +749,11 @@ input[type=number]::-webkit-outer-spin-button { margin: 10px; width: 260px; font-size: 19px; - background-color: #222; - color: white; + background-color: var(--c-2); + color: var(--c-tx); border: 0px solid white; border-radius: 5px; - filter: drop-shadow(0px 0px 2px #000); + filter: drop-shadow(0px 0px 1px #000); text-align: left; } @@ -646,9 +766,15 @@ input[type=number]::-webkit-outer-spin-button { display: block; } -@media all and (max-width: 645px) { +@media all and (max-width: 550px) and (min-width: 374px) { + .infobtn { + width: 155px; + } +} + +@media all and (max-width: 685px) { .top button { - width: 20%; + width: 16.6%; padding: 8px 0 4px 0; } .hd { @@ -659,7 +785,7 @@ input[type=number]::-webkit-outer-spin-button { } } -@media all and (max-width: 1250px) { +@media all and (max-width: 1249px) { #buttonPcm { display: none; } @@ -677,9 +803,10 @@ input[type=number]::-webkit-outer-spin-button { - + + - +
Brightness
@@ -814,7 +941,28 @@ input[type=number]::-webkit-outer-spin-button { +