lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update html with PC mode

Browse Source
This commit is contained in:
Aircoookie 2020-02-18 14:22:20 +01:00
parent 3062786bb3
commit 9e62db5237
1 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
wled00/data/index.htm
View File

@ -658,6 +658,12 @@ input[type=number]::-webkit-outer-spin-button {
float: none; float: none;
} }
} }
@media all and (max-width: 1250px) {
#buttonPcm {
display: none;
}
}
</style> </style>
</head> </head>
<body onload="onLoad()"> <body onload="onLoad()">
@ -673,6 +679,7 @@ input[type=number]::-webkit-outer-spin-button {
<button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button> <button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button>
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Preview</p></button> <button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Preview</p></button>
<button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button> <button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
<button id="buttonPcm" onclick="togglePcMode()"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button>
</div> </div>
<div id="briwrap"> <div id="briwrap">
<p class="hd">Brightness</p> <p class="hd">Brightness</p>
@ -833,6 +840,7 @@ var savedPresets = 0;
var currentPreset = -1; var currentPreset = -1;
var lastUpdate = 0; var lastUpdate = 0;
var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0; var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0;
var pcMode = false;
var d = document; var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {}); const ranges = RangeTouch.setup('input[type="range"]', {});
@ -872,10 +880,12 @@ function updateTablinks(tabI)
for (i = 0; i < tablinks.length; i++) { for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", ""); tablinks[i].className = tablinks[i].className.replace(" active", "");
} }
if (pcMode) return;
tablinks[tabI].className += " active"; tablinks[tabI].className += " active";
} }
function openTab(tabI) { function openTab(tabI) {
if (pcMode) return;
var i, tabcontent, tablinks; var i, tabcontent, tablinks;
iSlide = tabI; iSlide = tabI;
_C.classList.toggle('smooth', false); _C.classList.toggle('smooth', false);
@ -1035,7 +1045,7 @@ function requestJson(command, verbose = true) {
e1 = d.getElementById('fxlist'); e1 = d.getElementById('fxlist');
e2 = d.getElementById('selectPalette'); e2 = d.getElementById('selectPalette');
url = command ? 'http://10.10.1.26/json/state':'http://10.10.1.26/json'; url = command ? '/json/state':'/json';
type = command ? 'post':'get'; type = command ? 'post':'get';
if (command) if (command)
@ -1394,17 +1404,18 @@ let iSlide = 0, x0 = null, y0 = null, scrollS = 0, locked = false, w;
function unify(e) { return e.changedTouches ? e.changedTouches[0] : e } function unify(e) { return e.changedTouches ? e.changedTouches[0] : e }
function lock(e) { function lock(e) {
if (pcMode) return;
var l = e.target.classList; var l = e.target.classList;
if (l.contains('noslide') || l.contains('iro__wheel__saturation') || l.contains('iro__slider__value') || l.contains('iro__slider')) return; if (l.contains('noslide') || l.contains('iro__wheel__saturation') || l.contains('iro__slider__value') || l.contains('iro__slider')) return;
x0 = unify(e).clientX; x0 = unify(e).clientX;
y0 = unify(e).clientY; y0 = unify(e).clientY;
scrollS = d.getElementsByClassName("tabcontent")[iSlide].scrollTop; scrollS = d.getElementsByClassName("tabcontent")[iSlide].scrollTop;
_C.classList.toggle('smooth', !(locked = true)) _C.classList.toggle('smooth', !(locked = true))
} }
function drag(e) { function drag(e) {
if (!locked) return; if (!locked || pcMode) return;
if (d.getElementsByClassName("tabcontent")[iSlide].scrollTop != scrollS) { if (d.getElementsByClassName("tabcontent")[iSlide].scrollTop != scrollS) {
move(e); return; move(e); return;
} }
@ -1417,7 +1428,7 @@ function drag(e) {
} }
function move(e) { function move(e) {
if(!locked) return; if(!locked || pcMode) return;
var dx = unify(e).clientX - x0, s = Math.sign(dx), var dx = unify(e).clientX - x0, s = Math.sign(dx),
f = +(s*dx/w).toFixed(2); f = +(s*dx/w).toFixed(2);
@ -1437,6 +1448,23 @@ function size() {
w = window.innerWidth; w = window.innerWidth;
_C.style.setProperty('--tp', d.getElementById('top').clientHeight + "px"); _C.style.setProperty('--tp', d.getElementById('top').clientHeight + "px");
_C.style.setProperty('--bt', d.getElementById('bot').clientHeight + "px"); _C.style.setProperty('--bt', d.getElementById('bot').clientHeight + "px");
if (w < 1250) togglePcMode();
}
function togglePcMode()
{
if (w < 1250 && !pcMode) return;
openTab(0);
pcMode = !pcMode;
if (w < 1250) pcMode = false;
updateTablinks(0);
d.getElementById('buttonPcm').className = (pcMode) ? "active":"";
if (pcMode)
{
_C.style.width = '100%';
} else {
_C.style.width = '400%';
}
} }
size(); size();