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