Merge pull request #73 from kasimos/addScrolling

Add scrolling options for status messages

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": {

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": {

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": {

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();
             });
 

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 */

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("<br>", "\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", "<br>"));
+    const msgText = $('#statusMessageAdmin').val().replace("\n", "<br>");
+    const msgScrolling = $('#statusMessageScrolling')[0].checked
+    const msgScrollingDuration = $('#statusMessageScrollingDuration').val()
+    emit("admin.setStatusMessage", { msg: msgText, scrolling: msgScrolling, scrollingDuration: msgScrollingDuration});
 }
 
 function clearStatusMessage() {

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 = '<div id="statusMessageScrolling" style="animation-duration: ' + dur + 's">' + msg + '</div>'
+        }
+        if ($('#statusMessage').html() !== msg) {
+            $('#statusMessageOuter').fadeIn();
+            $('#statusMessage').html(msg);
+        }
     } else {
         $('#statusMessageOuter').fadeOut();
         $('#statusMessage').text("");

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 = '<div id="statusMessageScrolling" style="animation-duration: ' + dur + 's">' + msg + '</div>'
+        }
+        if ($('#statusMessage').html() !== msg) {
+            $('#statusMessageOuter').fadeIn();
+            $('#statusMessage').html(msg);
+        }
     } else {
         $('#statusMessageOuter').fadeOut();
         $('#statusMessage').text("");

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 = '<div id="statusMessageScrolling" style="animation-duration: ' + dur + 's">' + msg + '</div>'
+        }
+        if ($('#statusMessage').html() !== msg) {
+            $('#statusMessageOuter').fadeIn();
+            $('#statusMessage').html(msg);
+        }
     } else {
         $('#statusMessageOuter').fadeOut();
         $('#statusMessage').text("");

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;

views/admin/dashboard.twig

@@ -115,6 +115,33 @@
                         <button class="ui small green button" onclick="setStatusMessage();">{{ t("actions.set") }}</button>
                         <button class="ui small red button" onclick="clearStatusMessage();">{{ t("actions.clear") }}</button>
                     </div>
+
+                    <div class="ui form">
+                        <div class="inline fields" style="gap: 1rem;">
+                            <!-- Toggle checkbox for scrolling -->
+                            <div class="field">
+                            <div class="ui mini toggle checkbox">
+                                <input type="checkbox" name="statusMessageScrolling" id="statusMessageScrolling">
+                                <label for="statusMessageScrolling" style="color: var(--label-color) !important;">
+                                {{ t("admin.dashboard.statusMessageScrolling") }}
+                                </label>
+                            </div>
+                            </div>
+                            <!-- Number inpu for scroll duration -->
+                            <div class="field">
+                            <label for="statusMessageScrollingDuration"
+                                style="color: var(--label-color) !important; line-height:3em; font-weight:normal; font-size:14px ">
+                                {{ t("admin.dashboard.statusMessageScrollingDuration") }}
+                            </label>
+                            <div class="ui mini input">
+                                <input type="number" 
+                                    id="statusMessageScrollingDuration" 
+                                    name="statusMessageScrollingDuration" 
+                                    min="1" max="99" value="15">
+                            </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>