Random color background.

Few tweaks.
pull/2737/head
Blaz Kristan 2021-08-12 15:47:22 +02:00
rodzic 3640f977c8
commit 588789cb77
7 zmienionych plików z 3636 dodań i 3617 usunięć

Wyświetl plik

@ -621,13 +621,17 @@ input[type=range]::-moz-range-thumb {
margin-top: 10px;
}
.qcs {
padding: 14px;
margin: 2px;
border-radius: 14px;
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
}
.qcsb {
padding: 13px;
width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid var(--c-f);
}
#hexw {
@ -763,7 +767,6 @@ input[type=number]::-webkit-outer-spin-button {
width: 44px;
height: 44px;
margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.xxs-w {
@ -773,6 +776,10 @@ input[type=number]::-webkit-outer-spin-button {
height: 50px;
}
.qcs, .xss {
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.psts {
color: var(--c-f);
margin: 4px;

Wyświetl plik

@ -88,7 +88,7 @@
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<div id="csl">
<button class="btn xxs" onclick="selectSlot(0);">1</button>

Wyświetl plik

@ -93,7 +93,7 @@ button:hover {
background: var(--c-4);
}
.labels {
.label {
margin: 0;
padding: 8px 0 2px 0;
}
@ -494,13 +494,16 @@ input[type=range]::-moz-range-thumb {
}
.qcs {
padding: 14px;
margin: 2px;
border-radius: 14px;
display: inline-block;
}
width: 28px;
height: 28px;
line-height: 28px;}
.qcsb {
padding: 13px;
width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid var(--c-f);
}
option {
@ -552,7 +555,6 @@ input[type=number]::-webkit-outer-spin-button {
width: 44px;
height: 44px;
margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.xxs-w {
@ -562,6 +564,10 @@ input[type=number]::-webkit-outer-spin-button {
height: 50px;
}
.qcs, .xss {
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.psts {
color: var(--c-f);
margin: 6px;

Wyświetl plik

@ -27,7 +27,7 @@
<button id="buttonBri" onclick="tglBri()"><i class="icons">&#xe2a6;</i><p class="tab-label">Brightness</p></button>
</div>
<div id="briwrap">
<p class="labels hd">Global brightness</p>
<p class="label hd">Global brightness</p>
<div class="il">
<i class="icons slider-icon" onclick="tglTheme()">&#xe2a6;</i>
<div class="sliderwrap il">
@ -45,7 +45,7 @@
<div id="picker" class="center"></div>
<div id="wwrap" class="center">
<p class="labels h">White channel</p>
<p class="label h">White channel</p>
<i class="icons slider-icon" id="wht" title="White channel">&#xe333;</i>
<div class="sliderwrap il">
<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
@ -65,7 +65,7 @@
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<div id="csl" class="center" style="display: none;">
<button class="xxs btn" onclick="selectSlot(0);">1</button>
@ -78,12 +78,12 @@
</div>
<div id="QuickLoad" class="center">
<p class="labels h">Quick Load</p>
<p class="label h">Quick Load</p>
<div id="pql"></div>
</div>
<div id="Presets" class="center" style="display:none;">
<p class="labels h">Presets</p>
<p class="label h">Presets</p>
<div class="fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" />
<span onclick="clean(this)" class="icons">&#xe38f;</span>
@ -93,9 +93,9 @@
</div>
<div id="Effects" class="center">
<p class="labels h">Effect</p>
<!--p class="labels h">Effect speed</p-->
<div>
<p class="label h">Effect</p>
<!--p class="label h">Effect speed</p-->
<div title="Effect speed">
<i class="icons slider-icon">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
@ -103,8 +103,8 @@
</div>
<output class="sliderbubble"></output>
</div>
<!--p class="labels h">Effect intensity</p-->
<div>
<!--p class="label h">Effect intensity</p-->
<div title="Effect intensity">
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il">
<input id="sliderIntensity" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />

Wyświetl plik

@ -75,6 +75,8 @@ function applyCfg()
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";
e = d.querySelectorAll('.label');
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
e = d.querySelector('.hd');
e.style.display = l ? "block":"none";
//sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
@ -226,7 +228,7 @@ async function onLoad()
// Load initial data
loadPalettes(()=>{
loadPalettesData();
loadPalettesData(redrawPalPrev);
loadFX(()=>{
loadPresets(()=>{
loadInfo(requestJson);
@ -432,7 +434,7 @@ function populatePresets()
{
if (!pJson) {pJson={};return};
delete pJson["0"];
var cn = ""; //`<p class="labels">All presets</p>`;
var cn = ""; //`<p class="label">All presets</p>`;
var arr = Object.entries(pJson);
arr.sort(cmpP);
pQL = [];
@ -548,7 +550,7 @@ function populateSegments(s)
if (i > lSeg) lSeg = i;
cn +=
`${inst.n && cfg.comp.labels ? '<div class="labels h">'+inst.n+'</div>' : ''}
`<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}">&#xe08f;</i>
<div id="sliderSeg${i}Bri" class="sliderwrap il">
@ -826,7 +828,7 @@ function updateUI(scrollto=false)
redrawPalPrev();
var l = cfg.comp.labels; //l = false;
var e = d.querySelectorAll('.labels');
var e = d.querySelectorAll('.label');
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
}
@ -1221,8 +1223,7 @@ function loadPalettesData(callback = null)
palettesDataJson = JSON.parse(palettesDataJson);
if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) {
palettesData = palettesDataJson.p;
//redrawPalPrev() //TODO!
if (callback) callback();
if (callback) callback(); //redrawPalPrev()
return;
}
} catch (e) {}
@ -1234,8 +1235,7 @@ function loadPalettesData(callback = null)
p: palettesData,
vid: lastinfo.vid
}));
//redrawPalPrev();
if (callback) setTimeout(callback, 99); //go on to connect websocket
if (callback) setTimeout(callback, 99); //redrawPalPrev()
});
}

Plik diff jest za duży Load Diff

Plik diff jest za duży Load Diff