Skip to content

Changed HTML output to number input for Brightness, Speed, Intensity and Custom Sliders #4254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Svennte wants to merge 2 commits into from
Closed

Changed HTML output to number input for Brightness, Speed, Intensity and Custom Sliders #4254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31bbf1a
Changed HTML output to number input for Brightness, Speed, Intensity …
Svennte Nov 6, 2024
f96710d
Formatting: replaced spaces with tabs and adjust bracket placement
Svennte Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 21 additions & 32 deletions wled00/data/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,14 +442,14 @@ button {
/* Slider wrapper div */
.sliderwrap {
height: 30px;
width: 230px;
width: 222px;
max-width: 230px;
position: relative;
z-index: 0;
}

#sliders .slider {
padding-right: 64px; /* offset for bubble */
padding-right: 64px; /* offset for number input */
}

#sliders .slider, #info .slider {
Expand Down Expand Up @@ -694,26 +694,23 @@ img {
display: none;
}

.sliderbubble {
width: 24px;
position: absolute;
display: inline-block;
border-radius: 16px;
background: var(--c-3);
color: var(--c-f);
padding: 4px;
font-size: 14px;
right: 6px;
transition: visibility .25s ease,opacity .25s ease;
opacity: 0;
visibility: hidden;
/* left: 8px; */
top: 4px;
}

output.sliderbubbleshow {
visibility: visible;
opacity: 1;
input[type=number].sliderInput {
width: 24px;
position: absolute;
display: inline-block;
border-radius: 10px;
background: var(--c-3);
color: var(--c-f);
padding: 2px 4px;
font-size: 14px;
transition: visibility 0.25s ease, opacity 0.25s ease;
opacity: 1;
visibility: visible;
right: 4px;
bottom: 5px;
}
input[type=number].sliderInput:invalid {
color: #f00;
}

input[type=range] {
Expand All @@ -724,7 +721,6 @@ input[type=range] {
background-color: transparent;
cursor: pointer;
}

input[type=range]:focus {
outline: 0;
}
Expand Down Expand Up @@ -1506,13 +1502,6 @@ dialog {
background: var(--c-sbh);
}

@media not all and (hover: none) {
.sliderwrap:hover + output.sliderbubble {
visibility: visible;
opacity: 1;
}
}

@media all and (max-width: 1023px) {
.top button {
width: 8%;
Expand All @@ -1524,7 +1513,7 @@ dialog {
}

@media all and (max-width: 335px) {
.sliderbubble {
.sliderInput {
display: none;
}
}
Expand Down Expand Up @@ -1585,7 +1574,7 @@ dialog {
#putil .btn-s {
width: 114px;
}
#sliders .sliderbubble {
#sliders .sliderInput {
display: none;
}
#sliders .sliderwrap, .sbs .sliderwrap {
Expand Down
24 changes: 12 additions & 12 deletions wled00/data/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@
<div class="slider">
<i class="icons slider-icon" onclick="tglTheme()" style="transform: translateY(2px);">&#xe2a6;</i>
<div class="sliderwrap il">
<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
<input id="sliderBri" onchange="setBri(this.value)" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) {setBri(this.value)}" onfocus="this.select();" max="255" min="1" type="number" value="128">
</div>
</div>
<iframe id="liveview" src="about:blank"></iframe>
Expand Down Expand Up @@ -202,42 +202,42 @@
<div id="slider0" class="slider">
<i class="icons slider-icon" title="Freeze" onclick="tglFreeze()">&#xe325;</i>
<div title="Effect speed" class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<input id="sliderSpeed" class="noslide" onchange="setSpeed(this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) {setSpeed(this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="128" >
</div>
<div id="slider1" class="slider">
<i class="icons slider-icon" title="Toggle labels" onclick="tglLabels()">&#xe409;</i>
<div title="Effect intensity" class="sliderwrap il">
<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<input id="sliderIntensity" class="noslide" onchange="setIntensity(this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) {setIntensity(this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="128">
</div>
<div id="slider2" class="slider hide">
<i class="icons slider-icon">&#xe410;</i>
<div title="Custom 1" class="sliderwrap il">
<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<input id="sliderC1" class="noslide" onchange="setCustom(1, this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(1, this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="0">
</div>
<div id="slider3" class="slider hide">
<i class="icons slider-icon">&#xe0a2;</i>
<div title="Custom 2" class="sliderwrap il">
<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<input id="sliderC2" class="noslide" onchange="setCustom(2, this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(2, this.value); }" onfocus="this.select();" max="255" min="0" type="number" value="0">
</div>
<div id="slider4" class="slider hide">
<i class="icons slider-icon">&#xe0e8;</i>
<div title="Custom 3" class="sliderwrap il">
<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
<input id="sliderC3" class="noslide" onchange="setCustom(3, this.value)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(3, this.value); }" onfocus="this.select();" max="31" min="0" type="number" value="0">
</div>
<div id="fxopt" class="option fade">
<label id="opt0" title="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
Expand Down
37 changes: 13 additions & 24 deletions wled00/data/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,10 +295,6 @@ function onLoad()
d.addEventListener("visibilitychange", handleVisibilityChange, false);
//size();
gId("cv").style.opacity=0;
d.querySelectorAll('input[type="range"]').forEach((sl)=>{
sl.addEventListener('touchstart', toggleBubble);
sl.addEventListener('touchend', toggleBubble);
});
}

function updateTablinks(tabI)
Expand Down Expand Up @@ -1135,15 +1131,8 @@ function updateTrail(e)
var val = `linear-gradient(90deg, var(--bg) ${perc}%, var(--c-6) ${perc}%)`;
sd.style.backgroundImage = val;
}
var b = e.parentNode.parentNode.getElementsByTagName('output')[0];
if (b) b.innerHTML = e.value;
}

// rangetouch slider function
function toggleBubble(e)
{
var b = e.target.parentNode.parentNode.getElementsByTagName('output')[0];
b.classList.toggle('sliderbubbleshow');
var b = e.parentNode.parentNode.getElementsByClassName('sliderInput')[0];
if (b) b.value = e.value;
}

// updates segment length upon input of segment values
Expand Down Expand Up @@ -2371,32 +2360,32 @@ function setPalette(paletteId = null)
requestJson(obj);
}

function setBri()
function setBri(val)
{
var obj = {"bri": parseInt(gId('sliderBri').value)};
var obj = { "bri": parseInt(val) };
requestJson(obj);
}

function setSpeed()
function setSpeed(val)
{
var obj = {"seg": {"sx": parseInt(gId('sliderSpeed').value)}};
var obj = { "seg": { "sx": parseInt(val) } };
requestJson(obj);
}

function setIntensity()
function setIntensity(val)
{
var obj = {"seg": {"ix": parseInt(gId('sliderIntensity').value)}};
var obj = { "seg": { "ix": parseInt(val) } };
requestJson(obj);
}

function setCustom(i=1)
function setCustom(i=1, val)
{
if (i<1 || i>3) return;
var obj = {"seg": {}};
var val = parseInt(gId(`sliderC${i}`).value);
if (i===3) obj.seg.c3 = val;
else if (i===2) obj.seg.c2 = val;
else obj.seg.c1 = val;
val = parseInt(val);
if (i===3) obj.seg.c3 = val;
else if (i===2) obj.seg.c2 = val;
else obj.seg.c1 = val;
requestJson(obj);
}

Expand Down