fixes #8

.gitignore

@@ -65,6 +65,7 @@ typings/
 config.js
 tmp/*.png
 public/assets/
+data/template.json
 data/bundles/*
 !data/bundles/default
 !data/bundles/default/*

modules/admin.js

@@ -201,7 +201,7 @@ class admin {
                 self.updateDashboard(socket);
             });
 
-            // override
+            // announce
             socket.on('admin.override', function (data) {
                 try {
                     if (data.displayId === null) {
@@ -217,6 +217,19 @@ class admin {
                     cli.error("error, admin.override", err);
                 }
             });
+            // announce web
+            socket.on('admin.overrideWebPage', function (data) {
+                if (data.displayId === null) {
+                    if (data.duration == null || data.duration <= 5) {
+                        data.duration = 45;
+                    }
+                    dispatcher.emit("all.override", data);
+                } else {
+                    let view = self.getView();
+                    view.overrideSlide(data.json, data.png, data.duration, data.transition);
+                }
+
+            });
 
             socket.on('admin.setBundle', function (data) {
                 let view = self.getView();

modules/display.js

@@ -188,7 +188,9 @@ class display {
         if (this.serverOptions.loop) {
             this.clearTimers();
         }
+
         this.serverOptions.isAnnounce = false;
+        this.serverOptions.announceMeta = {};
 
         let bundle = this.getBundle();
         let slides = bundle.enabledSlides;
@@ -225,8 +227,10 @@ class display {
             }
         }
 
-        this.displayCurrentSlide();
-        this.serverOptions.loopIndex += 1;
+        if (!this.serverOptions.isStreaming) {
+            this.displayCurrentSlide();
+            this.serverOptions.loopIndex += 1;
+        }
     }
 
     overrideSlide(json, pngData, duration, transition) {
@@ -235,8 +239,11 @@ class display {
         this.serverOptions.transition = transition;
         this.serverOptions.loop = false;
         this.serverOptions.isAnnounce = true;
+        this.serverOptions.announceMeta = json;
         // save temporarily png data...
-        fs.writeFileSync("./tmp/display_" + this.serverOptions.displayId + ".png", pngData.replace(/^data:image\/png;base64,/, ""), "base64");
+        if (json.type === "image") {
+            fs.writeFileSync("./tmp/display_" + this.serverOptions.displayId + ".png", pngData.replace(/^data:image\/png;base64,/, ""), "base64");
+        }
         let that = this;
         if (duration && duration >= 5) {
             this.serverOptions.loop = true;

public/js/display.js

@@ -208,25 +208,39 @@ function nextSlide(data) {
     checkTimeDisplay();
 
     if (serverOptions.isAnnounce) {
-        $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
-        $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
-        setTimeout(function () {
-            clearIFrame(getWebLayer());
-            clearIFrame(getWebLayer(1));
-        }, 2500);
-        try {
-            var randomId = uuidv4();
-            getDataUri("/tmp/" + serverOptions.displayId + "/?randomId=" + randomId, randomId, function (imageId, dataUrl, image) {
-                image.id = imageId;
-                image.class = "temp";
-                window.f.images.push(image);
-                window.f.imageData.push(dataUrl);
-                $("#slider").show();
-                $("#helperLayer").addClass("announce");
-                window.f.showTempImage(imageId);
-            });
-        } catch (err) {
-            console.log(err);
+        if (serverOptions.announceMeta.type === "webPage") {
+            $("#slider").hide();
+            $("#" + getWebLayer()).css("transform", "scale(" + serverOptions.announceMeta.zoom + ")");
+            $("#" + getWebLayer()).addClass("fadeIn").removeClass("fadeOut");
+            if (serverOptions.announceMeta.displayTime) {
+                $('#time').removeClass('flipOutX').addClass("flipInX");
+            } else {
+                $('#time').addClass('flipOutX').removeClass("flipInX");
+            }
+            displayWebPage(serverOptions.announceMeta.webUrl);
+        }
+
+        if (serverOptions.announceMeta.type === "image") {
+            $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
+            $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+            setTimeout(function () {
+                clearIFrame(getWebLayer());
+                clearIFrame(getWebLayer(1));
+            }, 2500);
+            try {
+                var randomId = uuidv4();
+                getDataUri("/tmp/" + serverOptions.displayId + "/?randomId=" + randomId, randomId, function (imageId, dataUrl, image) {
+                    image.id = imageId;
+                    image.class = "temp";
+                    window.f.images.push(image);
+                    window.f.imageData.push(dataUrl);
+                    $("#slider").show();
+                    $("#helperLayer").addClass("announce");
+                    window.f.showTempImage(imageId);
+                });
+            } catch (err) {
+                console.log(err);
+            }
         }
     } else {
         $("#helperLayer").removeClass("announce");
@@ -445,6 +459,7 @@ function updateTimeout() {
 function displayWebPage(url) {
     $("#" + getWebLayer()).attr('src', url).addClass("fadeIn").removeClass("fadeOut");
     $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+    clearIFrame(getWebLayer(1));
     layer++;
     if (layer > 1) {
         layer = 0;

public/js/displayLite.js

@@ -157,19 +157,33 @@ function nextSlide(data) {
 
     var elem = document.getElementById("img" + layer);
     if (serverOptions.isAnnounce) {
-        $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
-        $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
-        setTimeout(function () {
-            clearIFrame(getWebLayer());
-            clearIFrame(getWebLayer(1));
-        }, 1500);
+        if (serverOptions.announceMeta.type === "webPage") {
+            $(elem).hide();
+            $("#" + getWebLayer()).css("transform", "scale(" + serverOptions.announceMeta.zoom + ")");
+            $("#" + getWebLayer()).addClass("fadeIn").removeClass("fadeOut");
+            if (serverOptions.announceMeta.displayTime) {
+                $('#time').removeClass('flipOutX').addClass("flipInX");
+            } else {
+                $('#time').addClass('flipOutX').removeClass("flipInX");
+            }
+            displayWebPage(serverOptions.announceMeta.webUrl);
+        }
+        if (serverOptions.announceMeta.type === "image") {
+            $(elem).show();
+            $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
+            $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+            setTimeout(function () {
+                clearIFrame(getWebLayer());
+                clearIFrame(getWebLayer(1));
+            }, 1500);
 
-        $("#helperLayer").addClass("announce");
-        try {
-            var randomId = uuidv4();
-            elem.src = "/tmp/" + serverOptions.displayId + "/?randomId=" + randomId;
-        } catch (err) {
-            console.log(err);
+            $("#helperLayer").addClass("announce");
+            try {
+                var randomId = uuidv4();
+                elem.src = "/tmp/" + serverOptions.displayId + "/?randomId=" + randomId;
+            } catch (err) {
+                console.log(err);
+            }
         }
     } else {
         $("#helperLayer").removeClass("announce");

public/js/edit.js

@@ -42,6 +42,7 @@ $(function () {
     });
 
     $('#dropdownSave').dropdown();
+    $('#dropdownAnnounce').dropdown();
 
     $('#order')
         .dropdown({
@@ -218,7 +219,6 @@ socket.on('callback.edit.updateFileList', function (data) {
 socket.on('callback.edit', function (data) {
     bundleData = data.bundleData;
     canvas.clear();
-    console.log(data);
 
     if (data.slideData.name != null) {
         slideName = data.slideData.name;
@@ -572,11 +572,11 @@ function cueSlide(id) {
         }
 
         let obj = {
-            json: canvas.toJSON(['id']),
+            json: {type: "image"},
             png: canvas.toDataURL('png'),
             displayId: id,
             duration: duration,
-            transition: transition
+            transition: transition,
         };
 
         socket.emit("admin.override", obj);

views/admin/editSlide.twig

@@ -74,20 +74,28 @@
                     </div>
                 </div>
 
-                <div class="ui buttons">
-                    {% if displayId != null %}
-                        <a href="#" onclick="cueSlide({{ displayId }})"
-                           class="ui basic teal button">{{ t("actions.announce") }}</a>
-                    {% endif %}
+                {% if displayId != null %}
+                    <div class="ui red basic buttons">
+                        <div onclick="cueSlide({{ displayId }})" class="ui button">{{ t("actions.announce") }}</div>
+                        <div class="ui floating dropdown icon button" id="dropdownAnnounce">
+                            <i class="dropdown icon"></i>
+                            <div class="menu">
+                                <div onclick="cueSlide(null)" class="item"><i
+                                            class="exclamation icon"></i> {{ t("actions.announceAll") }}</div>
+                            </div>
+                        </div>
+                    </div>
+                {% else %}
                     <a href="#" onclick="cueSlide(null)" class="ui red button">{{ t("actions.announceAll") }}</a>
-                    <a href="#" onclick="window.close()" class="ui button">{{ t("actions.cancel") }}</a>
-                </div>
-
-
+                {% endif %}
+            </div>
+            <div class="item">
+                <a href="#" onclick="window.close()" class="ui button">{{ t("actions.cancel") }}</a>
             </div>
         </div>
     </div>
 
+
     <div class="ui menu" style="margin: 0;">
         <div class="item">
             <div class="ui inverted buttons">

views/admin/link.twig

@@ -34,7 +34,18 @@
                     <label>{{ t("admin.addLink.displayTime") }}</label>
                 </div>
             </div>
-            <div class="ui basic button" onclick="save();">{{ t("actions.save") }}</div>
+            <div class="ui green button" onclick="save();">{{ t("actions.save") }}</div>
+
+            <div class="ui red basic buttons">
+                <div onclick="announce({{ displayId }})" class="ui button">{{ t("actions.announce") }}</div>
+                <div class="ui floating dropdown icon button" id="dropdownAnnounce">
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <div onclick="announce(null)" class="item"><i
+                                    class="exclamation icon"></i> {{ t("actions.announceAll") }}</div>
+                    </div>
+                </div>
+            </div>
             <div class="ui basic button" onclick="window.close()">{{ t("actions.cancel") }}</div>
         </form>
     </div>
@@ -43,9 +54,36 @@
 
         $(function () {
             $("#time").checkbox();
-
+            $("#dropdownAnnounce").dropdown();
         });
 
+        function announce(dispId) {
+            var duration = null;
+            var zoom = 1.0;
+            if ($.isNumeric($("#duration").val())) {
+                duration = parseInt($("#duration").val());
+
+            }
+            if ($.isNumeric($("#zoom").val())) {
+                zoom = parseFloat($("#zoom").val());
+            }
+
+            var obj = {
+                json: {
+                    type: "webPage",
+                    webUrl: $("#weburl").val(),
+                    zoom: zoom,
+                    displayTime: $("#displaytime").checkbox('is checked')
+                },
+                displayId: dispId,
+                duration: duration,
+                transition: null,
+                png: null,
+
+            };
+            socket.emit("admin.overrideWebPage", obj);
+        }
+
         function save() {
             var duration = null;
             var zoom = 1.0;
@@ -81,8 +119,8 @@
 
             $("#name").val(json.name);
             $("#weburl").val(json.webUrl);
-            $("#zoom").val(json.zoom+"");
-            $("#duration").val(json.duration+"");
+            $("#zoom").val(json.zoom + "");
+            $("#duration").val(json.duration + "");
             if (json.displayTime) {
                 $("#displaytime").checkbox('set checked', true);
             } else {