Compare commits
No commits in common. "35df7485d2ffd4bc49f6e12bfbf2e4c4184f1036" and "08c946a80fe5daeef75684d34e64c62e0e2e0df3" have entirely different histories.
35df7485d2
...
08c946a80f
@ -17,12 +17,6 @@ body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.full .clr-field button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.b-example-divider {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
|
@ -51,10 +51,11 @@ $(document).ready(function () {
|
||||
$("#colors1").append(
|
||||
'<tr>' +
|
||||
'<td contenteditable="true" class="time"></td>' +
|
||||
'<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
|
||||
'<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
|
||||
'<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
|
||||
'</tr>'
|
||||
);
|
||||
$('.colorPicky').colorpicker();
|
||||
|
||||
});
|
||||
|
||||
@ -62,23 +63,42 @@ $(document).ready(function () {
|
||||
$("#colors2").append(
|
||||
'<tr>' +
|
||||
'<td contenteditable="true" class="time"></td>' +
|
||||
'<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></td></td>' +
|
||||
'<td contenteditable="true" class="color"><input id="demo-input2" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
|
||||
'<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
|
||||
'</tr>'
|
||||
);
|
||||
$('.colorPicky').colorpicker();
|
||||
});
|
||||
|
||||
$("#copyColors").click(function CopyTextColors(event) {
|
||||
event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
|
||||
saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
|
||||
setTimeout(function () {
|
||||
document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
|
||||
}, 500)
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$("input[name='btnradio2']").click(function (event) {
|
||||
console.debug()
|
||||
const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
|
||||
if (darkid == 1) {
|
||||
DarkReader.disable()
|
||||
} else if (darkid == 2) {
|
||||
DarkReader.enable()
|
||||
} else {
|
||||
DarkReader.auto()
|
||||
}
|
||||
Cookies.set("interfaceColor", darkid)
|
||||
});
|
||||
|
||||
// Restore settings
|
||||
saveOption("/api/v1/data", function (event, xmlHttp) {
|
||||
|
||||
const tableEntry = ' <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>\
|
||||
<td class="pt-3-half full" contenteditable="false"> \
|
||||
<div class="clr-field" style="color: #bg-COLOR#;"> \
|
||||
<button aria-labelledby="clr-open-label"></button> \
|
||||
<input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> \
|
||||
</div> \
|
||||
<td class="pt-3-half" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td>\
|
||||
<td>\
|
||||
<span class="table-remove"><button type="button"\
|
||||
class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
|
||||
@ -104,7 +124,7 @@ $(document).ready(function () {
|
||||
temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
|
||||
temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
|
||||
document.getElementById("colors1").innerHTML += temp
|
||||
//console.log(jsonResult.colorSegments[item])
|
||||
console.log(jsonResult.colorSegments[item])
|
||||
}
|
||||
|
||||
// Text colors
|
||||
@ -113,44 +133,22 @@ $(document).ready(function () {
|
||||
temp = temp.replace("#COLOR#", jsonResult.textColors[item]);
|
||||
temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]);
|
||||
document.getElementById("colors2").innerHTML += temp
|
||||
//console.log(jsonResult.textColors[item])
|
||||
console.log(jsonResult.textColors[item])
|
||||
}
|
||||
|
||||
|
||||
|
||||
//console.debug(jsonResult, currentModeInt)
|
||||
console.debug(jsonResult, currentModeInt)
|
||||
$('.colorPicky').colorpicker();
|
||||
$('.colorPicky').on('colorpickerChange', function (event) {
|
||||
event.target.parentElement.style.backgroundColor = event.target.value
|
||||
});
|
||||
$(".deleteRow1").on("click", function removeRowEntry(event) {
|
||||
//console.warn(event.target.parentElement)
|
||||
console.warn(event.target.parentElement)
|
||||
$(event.target).closest("tbody").remove();
|
||||
});
|
||||
})
|
||||
|
||||
$("#copyColors").click(function CopyTextColors(event) {
|
||||
event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
|
||||
saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
|
||||
setTimeout(function () {
|
||||
document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
|
||||
}, 500)
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$("input[name='btnradio2']").click(function (event) {
|
||||
const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
|
||||
if (darkid == 1) {
|
||||
DarkReader.disable()
|
||||
} else if (darkid == 2) {
|
||||
DarkReader.enable()
|
||||
} else {
|
||||
DarkReader.auto()
|
||||
}
|
||||
Cookies.set("interfaceColor", darkid)
|
||||
});
|
||||
|
||||
// Presets
|
||||
$(".pres").click(function (event) {
|
||||
currentTime = parseInt(event.currentTarget.value)
|
||||
@ -186,6 +184,8 @@ $(document).ready(function () {
|
||||
const colors = convertColorSegments("colors1")
|
||||
const colors2 = convertColorSegments("colors2")
|
||||
|
||||
console.log(JSON.stringify(colors))
|
||||
|
||||
allPathes.push("/api/v1/set/layout/showTime?show=" + showTimeB)
|
||||
allPathes.push("/api/v1/set/layout/showMillis?show=" + showMillisB)
|
||||
allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB)
|
||||
@ -196,6 +196,7 @@ $(document).ready(function () {
|
||||
|
||||
for (pI in allPathes) {
|
||||
const path = allPathes[pI];
|
||||
console.warn(path)
|
||||
saveOption(path, function (event) {
|
||||
console.debug(event)
|
||||
})
|
||||
@ -225,6 +226,7 @@ $(document).ready(function () {
|
||||
|
||||
for (pI in allPathes) {
|
||||
const path = allPathes[pI];
|
||||
console.warn(path)
|
||||
saveOption(path, function (event) {
|
||||
console.debug(event)
|
||||
})
|
||||
@ -396,7 +398,7 @@ $(document).ready(function () {
|
||||
|
||||
$(".pageC").addClass("hidden")
|
||||
$("#" + event.target.href.split("#")[1]).removeClass("hidden")
|
||||
// console.log(event.target.href.split("#")[1])
|
||||
console.log(event.target.href.split("#")[1])
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -9,9 +9,6 @@ let socket = new ReconnectingWebSocket("ws://localhost:" + location.port);
|
||||
let ackdSessionToken = false
|
||||
let isFirstPacket = true
|
||||
|
||||
let lastTime = "00:00:00";
|
||||
let timerCountdownFirst = true;
|
||||
|
||||
socket.onopen = function (e) {
|
||||
// alert("[open] Connection established");
|
||||
//alert("Sending to server");
|
||||
@ -50,7 +47,29 @@ socket.onclose = function (event) {
|
||||
// e.g. server process killed or network down
|
||||
// event.code is usually 1006 in this case
|
||||
console.error('[close] Connection died');
|
||||
|
||||
/*websocketFailed = true
|
||||
if (recoveryAttempts < 5) {
|
||||
setTimeout(function handleWebsocketRecovery() {
|
||||
// requestBackend()
|
||||
websocketFailed = false
|
||||
recoveryAttempts++;
|
||||
console.warn("Trying to recover websocket connection")
|
||||
socket.onopen = function (e) {
|
||||
// alert("[open] Connection established");
|
||||
//alert("Sending to server");
|
||||
socket.send("new client");
|
||||
};
|
||||
}, 1000)
|
||||
} else {
|
||||
backReqInt = setInterval(requestBackend, 500);
|
||||
}
|
||||
*/
|
||||
}
|
||||
};
|
||||
|
||||
socket.onerror = function (error) {
|
||||
// alert(`[error] ${error.message}`);
|
||||
};
|
||||
|
||||
allowFullscreen = true
|
||||
@ -60,9 +79,9 @@ let timeDiff = 0
|
||||
function enterFullscreen(element) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
} else if (element.msRequestFullscreen) { // for IE11 (remove June 15, 2022)
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
} else if (element.webkitRequestFullscreen) { // iOS Safari
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
@ -82,6 +101,7 @@ function updateFullscreen() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
function msToTime(s, data) {
|
||||
isSmallerThenZero = false
|
||||
if (s < 0) {
|
||||
@ -150,6 +170,25 @@ function handleUpdate() {
|
||||
var data = dataFame;
|
||||
document.getElementById("incomeData").innerHTML = JSON.stringify(data)
|
||||
document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
|
||||
if (new Date().getTime() - data.srvTime > 1000 * 5) {
|
||||
|
||||
if (!isSlowed) {
|
||||
console.error("Server timeout")
|
||||
// clearInterval(updateInter)
|
||||
// updateInter = setInterval(handleUpdate, 900)
|
||||
document.getElementById("warningBanner").style.display = "block"
|
||||
isSlowed = true
|
||||
// recoInter = setInterval(handleRecovery, 10000)
|
||||
}
|
||||
} else {
|
||||
if (isSlowed) {
|
||||
//clearInterval(updateInter)
|
||||
//clearInterval(recoInter)
|
||||
//updateInter = setInterval(handleUpdate, 2)
|
||||
document.getElementById("warningBanner").style.display = "none"
|
||||
isSlowed = false
|
||||
}
|
||||
}
|
||||
|
||||
if (data.debug) {
|
||||
document.getElementById("timediff").style.display = "block";
|
||||
@ -192,35 +231,13 @@ function handleUpdate() {
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
document.getElementById("timer").style.color = "white"
|
||||
timerCountdownFirst = true;
|
||||
|
||||
} else if (data.mode == "timer") {
|
||||
document.getElementById("wholeProgBar").style.display = "block";
|
||||
const now = new Date()
|
||||
|
||||
if(timerCountdownFirst){
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
timerCountdownFirst = false
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
document.getElementById("progBar").style.width = "0%";
|
||||
}
|
||||
|
||||
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
if (data.enableColoredText) {
|
||||
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
|
||||
} else {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
}
|
||||
|
||||
if (data.timerRunState) {
|
||||
const now = new Date()
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
lastTime = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
@ -235,18 +252,14 @@ function handleUpdate() {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
|
||||
} else {
|
||||
document.getElementById("timer").innerHTML = lastTime
|
||||
}
|
||||
} else if (data.mode == "black") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
|
||||
} else if (data.mode == "test") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "block";
|
||||
document.getElementById("progBar").style.display = "none";
|
||||
|
@ -21,8 +21,8 @@
|
||||
<script type="text/javascript" src="/js/cookie.js"></script>
|
||||
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/css/mainStyle.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
|
||||
<link href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
|
||||
<script src="colorpicker/js/bootstrap-colorpicker.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -412,13 +412,6 @@
|
||||
<input type="checkbox" name="debugMode" id="debugModeEnable" value="true"><br><br>
|
||||
|
||||
<button type="button" class="btn btn-outline-success" id="applyDebug">Apply settings</button>
|
||||
<br>
|
||||
<div class="full">
|
||||
<p>Full size thumbnail</p>
|
||||
<div class="clr-field" style="color: rgb(255, 204, 0);">
|
||||
<button aria-labelledby="clr-open-label"></button>
|
||||
<input type="text" class="coloris" value="#ffcc00"></div>
|
||||
</div>
|
||||
<br><br>
|
||||
<h3>Raw server reponse</h3>
|
||||
<code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
|
||||
@ -443,13 +436,7 @@
|
||||
</main>
|
||||
<script type="text/javascript" src="js/jsonview.js"></script>
|
||||
<script type="text/javascript" src="/js/interface.js"> </script>
|
||||
<script type="text/javascript">
|
||||
|
||||
Coloris({
|
||||
el: '.coloris',
|
||||
alpha: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user