diff --git a/locales/de/translation.json b/locales/de/translation.json index 129c397..c737d75 100644 --- a/locales/de/translation.json +++ b/locales/de/translation.json @@ -53,6 +53,8 @@ "preview": "Vorschau", "program": "Programm", "statusMessage": "Statusmeldung", + "statusMessageScrolling": "Scrollen Aktivieren", + "statusMessageScrollingDuration": "Scroll Dauer (s)", "askChangeBundle": "Paket wirklich ändern?" }, "editBundleSlides": { diff --git a/locales/en/translation.json b/locales/en/translation.json index c8c204a..a513ba2 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -53,6 +53,8 @@ "preview": "Preview", "program": "Program", "statusMessage": "Status Message", + "statusMessageScrolling": "Enable Scrolling", + "statusMessageScrollingDuration": "Scroll Duration (s)", "askChangeBundle": "Really change bundle?" }, "editBundleSlides": { diff --git a/locales/fi/translation.json b/locales/fi/translation.json index a500bf2..af152da 100644 --- a/locales/fi/translation.json +++ b/locales/fi/translation.json @@ -53,6 +53,8 @@ "preview": "Esikatselu", "program": "Ohjelma", "statusMessage": "Tilaviesti", + "statusMessageScrolling": "Ota vieritys käyttöön", + "statusMessageScrollingDuration": "Vierityksen kesto (s)", "askChangeBundle": "Vaihda diapaketti?" }, "editBundleSlides": { diff --git a/modules/admin.js b/modules/admin.js index 9532989..91b6905 100644 --- a/modules/admin.js +++ b/modules/admin.js @@ -299,8 +299,10 @@ export default class admin { } }); - socket.on("admin.setStatusMessage", function (message) { - self.getView().serverOptions.statusMessage = message; + socket.on("admin.setStatusMessage", function (data) { + self.getView().serverOptions.statusMessage = data.msg; + self.getView().serverOptions.statusMessageScrolling = data.scrolling; + self.getView().serverOptions.statusMessageScrollingDuration = data.scrollingDuration; self.getView().updateUI(); }); diff --git a/modules/display.js b/modules/display.js index c525eab..47b6abb 100644 --- a/modules/display.js +++ b/modules/display.js @@ -49,6 +49,8 @@ export default class display { transition: "fade", displayTime: true, statusMessage: "", + statusMessageScrolling: false, + statusMessageScrollingDuration: 15 }; /** @property {Array} timeoutId - holds setTimeout id's for mainLoop */ diff --git a/public/js/dashboard.js b/public/js/dashboard.js index 2ab5cd5..0135e34 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -49,6 +49,8 @@ socket.on("callback.dashboard.sync", function (data) { }).dropdown("set selected", { bundle: serverOptions.currentBundle }); $('#currentBundle').text(serverOptions.currentBundle); $('#statusMessageAdmin').val(serverOptions.statusMessage.replace("
", "\n")); + $('#statusMessageScrolling')[0].checked = serverOptions.statusMessageScrolling; + $('#statusMessageScrollingDuration').val(serverOptions.statusMessageScrollingDuration); // update dropdown at menu with bundles valueArray = []; let x = 0; @@ -235,7 +237,10 @@ function editSlide(name, type) { } function setStatusMessage() { - emit("admin.setStatusMessage", $('#statusMessageAdmin').val().replace("\n", "
")); + const msgText = $('#statusMessageAdmin').val().replace("\n", "
"); + const msgScrolling = $('#statusMessageScrolling')[0].checked + const msgScrollingDuration = $('#statusMessageScrollingDuration').val() + emit("admin.setStatusMessage", { msg: msgText, scrolling: msgScrolling, scrollingDuration: msgScrollingDuration}); } function clearStatusMessage() { diff --git a/public/js/display.js b/public/js/display.js index 8bac997..f0927f6 100644 --- a/public/js/display.js +++ b/public/js/display.js @@ -224,8 +224,16 @@ function checkBlackout() { function updateStatusMessage() { if (serverOptions.statusMessage !== "") { - $('#statusMessageOuter').fadeIn(); - $('#statusMessage').html(serverOptions.statusMessage); + //only update on a real change + let msg = serverOptions.statusMessage; + if (serverOptions.statusMessageScrolling) { + const dur = serverOptions.statusMessageScrollingDuration || 15 + msg = '
' + msg + '
' + } + if ($('#statusMessage').html() !== msg) { + $('#statusMessageOuter').fadeIn(); + $('#statusMessage').html(msg); + } } else { $('#statusMessageOuter').fadeOut(); $('#statusMessage').text(""); diff --git a/public/js/displayLite.js b/public/js/displayLite.js index 731cc77..9d8b3be 100644 --- a/public/js/displayLite.js +++ b/public/js/displayLite.js @@ -183,8 +183,16 @@ function checkBlackout() { function updateStatusMessage() { if (serverOptions.statusMessage !== "") { - $('#statusMessageOuter').fadeIn(); - $('#statusMessage').html(serverOptions.statusMessage); + //only update on a real change + let msg = serverOptions.statusMessage; + if (serverOptions.statusMessageScrolling) { + const dur = serverOptions.statusMessageScrollingDuration || 15 + msg = '
' + msg + '
' + } + if ($('#statusMessage').html() !== msg) { + $('#statusMessageOuter').fadeIn(); + $('#statusMessage').html(msg); + } } else { $('#statusMessageOuter').fadeOut(); $('#statusMessage').text(""); diff --git a/public/js/displayWebGl.js b/public/js/displayWebGl.js index a33febd..4f79942 100644 --- a/public/js/displayWebGl.js +++ b/public/js/displayWebGl.js @@ -212,8 +212,16 @@ function checkBlackout() { function updateStatusMessage() { if (serverOptions.statusMessage !== "") { - $('#statusMessageOuter').fadeIn(); - $('#statusMessage').html(serverOptions.statusMessage); + //only update on a real change + let msg = serverOptions.statusMessage; + if (serverOptions.statusMessageScrolling) { + const dur = serverOptions.statusMessageScrollingDuration || 15 + msg = '
' + msg + '
' + } + if ($('#statusMessage').html() !== msg) { + $('#statusMessageOuter').fadeIn(); + $('#statusMessage').html(msg); + } } else { $('#statusMessageOuter').fadeOut(); $('#statusMessage').text(""); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index a24cbf4..c7ad577 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -226,6 +226,27 @@ canvas { overflow-block: clip; } +#statusMessage { + overflow: hidden; + width: 100%; +} + +#statusMessageScrolling { + white-space: nowrap; + will-change: transform; + animation: marquee 15s linear infinite; +} + +/* Animation keyframes for the scroll */ +@keyframes marquee { + 0% { + transform: translateX(100%); + } + 100% { + transform: translateX(-100%); + } +} + #time { position: absolute; z-index: 12; diff --git a/views/admin/dashboard.twig b/views/admin/dashboard.twig index 708c3aa..31016f2 100644 --- a/views/admin/dashboard.twig +++ b/views/admin/dashboard.twig @@ -115,6 +115,33 @@ + +
+
+ +
+
+ + +
+
+ +
+ +
+ +
+
+
+