Simple page CSS & JS update.
Added simple UI as a separate page (/simple.htm).
This commit is contained in:
Blaz Kristan
parent
f921d9a1f8
commit
19129c8786
@ -157,7 +157,7 @@ button:hover {
|
||||
|
||||
.slider-icon
|
||||
{
|
||||
transform: translate(6px,3px);
|
||||
transform: translate(4px,3px);
|
||||
color: var(--c-d);
|
||||
}
|
||||
|
||||
@ -352,17 +352,17 @@ img {
|
||||
|
||||
.sliderwrap {
|
||||
height: 30px;
|
||||
width: 240px;
|
||||
width: 220px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sliderdisplay {
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 13px; bottom: 13px;
|
||||
left: 10px; right: 10px;
|
||||
top: 14px; bottom: 12px;
|
||||
left: 4px; right: 4px;
|
||||
background: var(--c-4);
|
||||
border-radius: 17px;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
@ -374,12 +374,13 @@ img {
|
||||
border-radius: 10px;
|
||||
background: var(--c-3);
|
||||
color: var(--c-f);
|
||||
padding: 4px 4px 2px;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
right: 5px;
|
||||
transition: visibility 0.25s ease, opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
output.sliderbubbleshow {
|
||||
@ -393,9 +394,9 @@ output.sliderbubbleshow {
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 220px;
|
||||
padding: 0px;
|
||||
margin: 0px 10px 0px 10px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -411,7 +412,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 17px;
|
||||
border-radius: 8px;
|
||||
background: var(--c-f);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
@ -426,7 +427,7 @@ input[type=range]::-moz-range-thumb {
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 17px;
|
||||
border-radius: 8px;
|
||||
background: var(--c-f);
|
||||
transform: translateY(7px);
|
||||
}
|
||||
@ -446,6 +447,7 @@ input[type=range]::-moz-range-thumb {
|
||||
#picker {
|
||||
margin: 10px auto;
|
||||
width: 260px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rgbwrap {
|
||||
@ -577,7 +579,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.pwr {
|
||||
color: var(--c-6);
|
||||
transform: translate(2px, 3px);
|
||||
/*transform: translate(2px, 3px);*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -585,6 +587,87 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
color: var(--c-f);
|
||||
}
|
||||
|
||||
.check, .radio {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.schkl {
|
||||
padding: 2px 2px 2px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.check input, .radio input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark, .radiomark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--c-3);
|
||||
border: 1px solid var(--c-2);
|
||||
}
|
||||
|
||||
.radiomark {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.check:hover input ~ .checkmark {
|
||||
background-color: var(--c-4);
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark {
|
||||
background-color: var(--c-6);
|
||||
}
|
||||
|
||||
.checkmark:after, .radiomark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.check .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid var(--c-f);
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio .radiomark:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
}
|
||||
|
||||
.h {
|
||||
font-size: 13px;
|
||||
color: var(--c-b);
|
||||
|
||||
@ -44,16 +44,6 @@
|
||||
<div class="tabcontent">
|
||||
<div id="picker" class="center"></div>
|
||||
|
||||
<div id="wwrap" class="center">
|
||||
<p class="label h">White channel</p>
|
||||
<i class="icons slider-icon" id="wht" title="White channel"></i>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
|
||||
<div id="qcs-w" class="center">
|
||||
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
|
||||
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
|
||||
@ -73,6 +63,16 @@
|
||||
<button class="xxs btn" onclick="selectSlot(2);">3</button>
|
||||
</div>
|
||||
|
||||
<div id="wwrap" class="center">
|
||||
<p class="label h">White channel</p>
|
||||
<i class="icons slider-icon" id="wht" title="White channel"></i>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
|
||||
<div id="Segments" class="center">
|
||||
<div id="segcont"></div>
|
||||
</div>
|
||||
|
||||
@ -69,9 +69,9 @@ function applyCfg()
|
||||
var bg = cfg.theme.color.bg;
|
||||
if (bg) sCol('--c-1', bg);
|
||||
var ccfg = cfg.comp.colors;
|
||||
gId('picker').style.display = "none"; // ccfg.picker ? "block":"none";
|
||||
//gId('picker').style.display = "none"; // ccfg.picker ? "block":"none";
|
||||
//gId('rgbwrap').style.display = ccfg.rgb ? "block":"none";
|
||||
gId('qcs-w').style.display = "block"; // ccfg.quick ? "block":"none";
|
||||
gId('qcs-w').style.display = ccfg.quick ? "block":"none";
|
||||
var l = cfg.comp.labels; //l = false;
|
||||
var e = d.querySelectorAll('.tab-label');
|
||||
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
|
||||
@ -556,7 +556,12 @@ function populateSegments(s)
|
||||
cn +=
|
||||
`<div class="label h">${(inst.n&&inst.n!=='')?inst.n:('Segment '+y)}</div>
|
||||
<div>
|
||||
<i class="icons pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}"></i>
|
||||
<label class="check schkl">
|
||||
|
||||
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
<i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}"></i>
|
||||
<div id="sliderSeg${i}Bri" class="sliderwrap il">
|
||||
<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
||||
<div class="sliderdisplay"></div>
|
||||
@ -1055,7 +1060,8 @@ function tglBri(b=null)
|
||||
|
||||
function tglCP()
|
||||
{
|
||||
var p = gId(`picker`).style.display === "block";
|
||||
// var p = gId(`picker`).style.display === "block";
|
||||
var p = gId('buttonCP').className === "active";
|
||||
gId('buttonCP').className = !p ? "active":"";
|
||||
gId('picker').style.display = !p ? "block":"none";
|
||||
var csl = gId(`csl`).style.display === "block";
|
||||
@ -1071,6 +1077,13 @@ function tglCs(i)
|
||||
gId(`p${i}o2`).style.display = !pss? "block" : "none";
|
||||
}
|
||||
|
||||
function selSeg(s)
|
||||
{
|
||||
var sel = gId(`seg${s}sel`).checked;
|
||||
var obj = {"seg": {"id": s, "sel": sel}};
|
||||
requestJson(obj);
|
||||
}
|
||||
|
||||
function tglPalDropdown()
|
||||
{
|
||||
var p = gId('palDropdown').style;
|
||||
|
||||
3595
wled00/html_simple.h
3595
wled00/html_simple.h
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,9 @@
|
||||
* Integrated HTTP web server page declarations
|
||||
*/
|
||||
|
||||
bool handleIfNoneMatchCacheHeader(AsyncWebServerRequest* request);
|
||||
void setStaticContentCacheHeaders(AsyncWebServerResponse *response);
|
||||
|
||||
//Is this an IP?
|
||||
bool isIp(String str) {
|
||||
for (size_t i = 0; i < str.length(); i++) {
|
||||
@ -164,6 +167,15 @@ void initServer()
|
||||
size_t len, bool final) {handleUpload(request, filename, index, data, len, final);}
|
||||
);
|
||||
|
||||
server.on("/simple.htm", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||
if (handleFileRead(request, "/simple.htm")) return;
|
||||
if (handleIfNoneMatchCacheHeader(request)) return;
|
||||
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_simple, PAGE_simple_L);
|
||||
response->addHeader(F("Content-Encoding"),"gzip");
|
||||
setStaticContentCacheHeaders(response);
|
||||
request->send(response);
|
||||
});
|
||||
|
||||
//if OTA is allowed
|
||||
if (!otaLock){
|
||||
#ifdef WLED_ENABLE_FS_EDITOR
|
||||
|
||||
Loading…
Reference in New Issue
Block a user