Support tablet PCMode, Peek -> GFX
index.css: remove #Colors (br instead), PCmode when size < 798 index.html: Change Peek to GFX, add div colorGFX, effectGFX, segGFX index.js: - remove peekexp, segvexp, - add colorGFX, effectGFX, segGFX controls, - remove expandV/eandp - improve segment view gfx - refactor toggleLiveView - togglePcMode: support smaller (tablet) screens
This commit is contained in:
Ewoud
@@ -66,7 +66,7 @@
|
||||
<button id="buttonPower" onclick="togglePower()" class="tgl"><i class="icons"></i><p class="tab-label">Power</p></button>
|
||||
<button id="buttonNl" onclick="toggleNl()"><i class="icons"></i><p class="tab-label">Timer</p></button>
|
||||
<button id="buttonSync" onclick="toggleSync()"><i class="icons"></i><p class="tab-label">Sync</p></button>
|
||||
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons"></i><p class="tab-label">Peek</p></button>
|
||||
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons"></i><p class="tab-label">GFX ☾</p></button>
|
||||
<button id="buttonI" onclick="toggleInfo()"><i class="icons"></i><p class="tab-label">Info</p></button>
|
||||
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons"></i><p class="tab-label">Nodes</p></button>
|
||||
<button onclick="window.location.href='/settings';"><i class="icons"></i><p class="tab-label">Config</p></button>
|
||||
@@ -89,99 +89,102 @@
|
||||
|
||||
<div class ="container">
|
||||
<div id="Colors" class="tabcontent">
|
||||
<div id="picker" class="noslide"></div>
|
||||
<div id="hwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Hue</span>
|
||||
</div>
|
||||
<div id="swrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Saturation</span>
|
||||
</div>
|
||||
<div id="vwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Value/Brightness</span>
|
||||
</div>
|
||||
<div id="kwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Kelvin/Temperature</span>
|
||||
</div>
|
||||
<div id="rgbwrap">
|
||||
<!--p class="labels hd">RGB color</p-->
|
||||
<div id="rwrap" class="slider">
|
||||
<div id="colorGFX"> <!--WLEDMM-->
|
||||
<br> <!--WLEDMM: instead of padding-top:18 in css-->
|
||||
<div id="picker" class="noslide"></div>
|
||||
<div id="hwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Hue</span>
|
||||
</div>
|
||||
<div id="swrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Saturation</span>
|
||||
</div>
|
||||
<div id="vwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Red channel</span>
|
||||
<span class="tooltiptext">Value/Brightness</span>
|
||||
</div>
|
||||
<div id="gwrap" class="slider">
|
||||
<div id="kwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Green channel</span>
|
||||
<span class="tooltiptext">Kelvin/Temperature</span>
|
||||
</div>
|
||||
<div id="bwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div id="rgbwrap">
|
||||
<!--p class="labels hd">RGB color</p-->
|
||||
<div id="rwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Red channel</span>
|
||||
</div>
|
||||
<div id="gwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Green channel</span>
|
||||
</div>
|
||||
<div id="bwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Blue channel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wwrap" class="slider">
|
||||
<!--p class="labels hd">White channel</p-->
|
||||
<div id="whibri" class="sliderwrap il">
|
||||
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Blue channel</span>
|
||||
<span class="tooltiptext">White channel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wwrap" class="slider">
|
||||
<!--p class="labels hd">White channel</p-->
|
||||
<div id="whibri" class="sliderwrap il">
|
||||
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
<div id="wbal" class="slider">
|
||||
<!--p class="labels hd">White balance</p-->
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">White balance</span>
|
||||
</div>
|
||||
<span class="tooltiptext">White channel</span>
|
||||
</div>
|
||||
<div id="wbal" class="slider">
|
||||
<!--p class="labels hd">White balance</p-->
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
<div id="qcs-w">
|
||||
<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>
|
||||
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
|
||||
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
|
||||
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
|
||||
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
|
||||
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
|
||||
<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:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
||||
</div>
|
||||
<span class="tooltiptext">White balance</span>
|
||||
</div>
|
||||
<div id="qcs-w">
|
||||
<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>
|
||||
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
|
||||
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
|
||||
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
|
||||
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
|
||||
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
|
||||
<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:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
||||
</div>
|
||||
<div id="csl">
|
||||
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
|
||||
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
|
||||
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
|
||||
</div>
|
||||
<p class="labels h" id="cslLabel"></p>
|
||||
<div id="hexw">
|
||||
<i class="icons sel-icon" onclick="tglRgb()"></i>
|
||||
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
||||
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
||||
</div>
|
||||
<div id="csl">
|
||||
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
|
||||
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
|
||||
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
|
||||
</div>
|
||||
<p class="labels h" id="cslLabel"></p>
|
||||
<div id="hexw">
|
||||
<i class="icons sel-icon" onclick="tglRgb()"></i>
|
||||
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
||||
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
||||
</div>
|
||||
</div> <!--colorGFX-->
|
||||
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()"></i> Color palette</p>
|
||||
<div id="palw" class="il">
|
||||
<div class="staytop fnd">
|
||||
@@ -204,6 +207,12 @@
|
||||
</div>
|
||||
|
||||
<div id="Effects" class="tabcontent">
|
||||
<div id="effectGFX"> <!--WLEDMM-->
|
||||
<!-- <p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p> -->
|
||||
<br>
|
||||
<canvas id="canvasPeek"></canvas><br>
|
||||
<br>
|
||||
</div>
|
||||
<div id="fx">
|
||||
<p class="labels hd" id="modeLabel">Effect mode</p>
|
||||
<div class="staytop fnd" id="fxFind">
|
||||
@@ -309,19 +318,16 @@
|
||||
</div>
|
||||
|
||||
<div id="Segments" class="tabcontent">
|
||||
<!--WLEDMM Views-->
|
||||
<div id="segviews">
|
||||
<p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p>
|
||||
<canvas id="canvasPeek"></canvas><br>
|
||||
<p class="labels hd">Segment view ☾ <button class="btn infobtn btn-xs" onclick="expandV(this,gId('segvis'));">v</button></p>
|
||||
<div id="segvis">
|
||||
<canvas id="canvasSegments"></canvas><br>
|
||||
<div class="labels hd" id="MD"></div> <!-- Matrix dimensions -->
|
||||
</div>
|
||||
<div id="segGFX"> <!--WLEDMM-->
|
||||
<br>
|
||||
<canvas id="canvasSegments"></canvas><br>
|
||||
<br>
|
||||
</div>
|
||||
<p class="labels" id="modeLabel">Segments</p>
|
||||
<div id="segcont">
|
||||
Loading...
|
||||
</div>
|
||||
<div class="labels hd" id="MD"></div> <!-- WLEDMM Matrix dimensions -->
|
||||
<div id="segutil" class="staybot">
|
||||
</div>
|
||||
<div id="segutil2">
|
||||
|
||||
Reference in New Issue
Block a user