mirror of
https://github.com/UiO-Gaming/infoscreen3.git
synced 2026-11-05 13:56:52 +01:00
adding feature: timed slides!
This commit is contained in:
Reaby committed
1 parent
cc3fb8b1cc
commit
9a036b8e05
9 files changed
+366
-247
No files matched your search
@@ -7,7 +7,9 @@
|
||||
"displayTime": null,
|
||||
"type": "slide",
|
||||
"index": 0,
|
||||
"transition": null
|
||||
"transition": null,
|
||||
"epochStart": -1,
|
||||
"epochEnd": -1
|
||||
},
|
||||
{
|
||||
"uuid": "03191688-bb93-4376-a3ab-53ed790b2155",
|
||||
@@ -17,7 +19,9 @@
|
||||
"displayTime": null,
|
||||
"type": "slide",
|
||||
"transition": null,
|
||||
"index": 1
|
||||
"index": 1,
|
||||
"epochStart": -1,
|
||||
"epochEnd": -1
|
||||
},
|
||||
{
|
||||
"uuid": "6a298b8c-9246-411f-b364-2d73c7e292d0",
|
||||
@@ -27,6 +31,8 @@
|
||||
"displayTime": null,
|
||||
"transition": null,
|
||||
"type": "slide",
|
||||
"index": 2
|
||||
"index": 2,
|
||||
"epochStart": -1,
|
||||
"epochEnd": -1
|
||||
}
|
||||
]
|
||||
@@ -97,7 +97,9 @@
|
||||
"centerVertical": "Center Vertical",
|
||||
"copy": "Copy element",
|
||||
"paste": "Paste element",
|
||||
"remove": "Remove element"
|
||||
"remove": "Remove element",
|
||||
"slideStart": "Start Time",
|
||||
"slideEnd": "End Time"
|
||||
},
|
||||
"addLink": {
|
||||
"name": "Name",
|
||||
|
||||
@@ -92,7 +92,9 @@
|
||||
"sendToFront": "Tuo päällimmäiseksi",
|
||||
"moveForward": "Siirrä eteenpäin",
|
||||
"moveBackward": "Siirrä taaksepäin",
|
||||
"sendToBack": "Vie alimmaikseksi"
|
||||
"sendToBack": "Vie alimmaikseksi",
|
||||
"slideStart": "Aloitus aika",
|
||||
"slideEnd": "Päättymis aika"
|
||||
},
|
||||
"addLink": {
|
||||
"name": "Nimi",
|
||||
|
||||
@@ -539,6 +539,8 @@ export default class admin {
|
||||
type: "slide",
|
||||
index: bundle.allSlides.length,
|
||||
transition: transition,
|
||||
epochStart: data.epochStart,
|
||||
epochEnd: data.epochEnd
|
||||
};
|
||||
|
||||
let obj = bundle.findSlideByUuid(filename);
|
||||
@@ -549,6 +551,8 @@ export default class admin {
|
||||
obj.duration = duration;
|
||||
obj.displayTime = data.displayTime;
|
||||
obj.transition = transition;
|
||||
obj.epochStart = data.epochStart,
|
||||
obj.epochEnd = data.epochEnd;
|
||||
}
|
||||
|
||||
bundle.save();
|
||||
|
||||
@@ -159,11 +159,34 @@ export default class bundleClass {
|
||||
}
|
||||
}
|
||||
|
||||
getEnabledSlides() {
|
||||
this.sync();
|
||||
return this.enabledSlides;
|
||||
}
|
||||
|
||||
|
||||
sync() {
|
||||
this.enabledSlides = [];
|
||||
this.disabledSlides = [];
|
||||
this.allSlides.sort(sortByProperty('index'));
|
||||
let time = Date.parse(new Date().toISOString());
|
||||
for (let slide of this.allSlides) {
|
||||
|
||||
if (slide.epochEnd != -1 && time >= slide.epochEnd) {
|
||||
slide.enabled = false;
|
||||
this.disabledSlides.push(slide.uuid.replace(".json", ""));
|
||||
continue;
|
||||
}
|
||||
|
||||
if (slide.epochStart != -1) {
|
||||
slide.enabled = false;
|
||||
if (time >= slide.epochStart) {
|
||||
slide.enabled = true;
|
||||
this.enabledSlides.push(slide.uuid.replace(".json", ""));
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (slide.enabled) {
|
||||
this.enabledSlides.push(slide.uuid.replace(".json", ""));
|
||||
} else {
|
||||
|
||||
+2
-2
@@ -205,7 +205,7 @@ export default class display {
|
||||
this.serverOptions.announceMeta = {};
|
||||
|
||||
let bundle = this.getBundle();
|
||||
let slides = bundle.enabledSlides;
|
||||
let slides = bundle.getEnabledSlides();
|
||||
|
||||
if (slides.length >= 0) {
|
||||
let lIndex = this.serverOptions.loopIndex;
|
||||
@@ -214,7 +214,7 @@ export default class display {
|
||||
this.serverOptions.loopIndex = idx;
|
||||
this.serverOptions.currentFile = slides[idx];
|
||||
this.serverOptions.slideDuration = bundle.findSlideByUuid(slides[idx]).duration || bundle.getBundleData().duration;
|
||||
this.serverOptions.currentId = bundle.enabledSlides.indexOf(this.serverOptions.currentFile);
|
||||
this.serverOptions.currentId = slides.indexOf(this.serverOptions.currentFile);
|
||||
this.serverOptions.currentMeta = bundle.findSlideByUuid(slides[idx]);
|
||||
this.serverOptions.displayTime = bundle.bundleData.displayTime;
|
||||
}
|
||||
|
||||
+54
-36
@@ -1,7 +1,7 @@
|
||||
var serverOptions;
|
||||
var bundleSettings;
|
||||
var bundleDirs = [];
|
||||
var displayList;
|
||||
let serverOptions;
|
||||
let bundleSettings;
|
||||
let bundleDirs = [];
|
||||
let displayList;
|
||||
|
||||
|
||||
socket.on('connect', function () {
|
||||
@@ -15,6 +15,7 @@ socket.on("callback.update", function (data) {
|
||||
$('#bundleSlides').children().css("border", "1px solid black");
|
||||
$('#' + serverOptions.currentFile).css("border", "1px solid #1ebc30");
|
||||
updateControls(data.serverOptions);
|
||||
updateSlides(data.slides);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -30,8 +31,8 @@ socket.on("callback.dashboard.sync", function (data) {
|
||||
updateControls(data.serverOptions);
|
||||
|
||||
// update dropdown at menu with bundles
|
||||
var valueArray = [];
|
||||
for (var dir of bundleDirs) {
|
||||
let valueArray = [];
|
||||
for (let dir of bundleDirs) {
|
||||
valueArray.push({ name: dir.name, value: dir.dir });
|
||||
}
|
||||
|
||||
@@ -50,8 +51,8 @@ socket.on("callback.dashboard.sync", function (data) {
|
||||
$('#statusMessageAdmin').val(serverOptions.statusMessage);
|
||||
// update dropdown at menu with bundles
|
||||
valueArray = [];
|
||||
var x = 0;
|
||||
for (var display of data.displays) {
|
||||
let x = 0;
|
||||
for (let display of data.displays) {
|
||||
valueArray.push({ name: display.name, value: x });
|
||||
x++;
|
||||
}
|
||||
@@ -71,11 +72,11 @@ socket.on("callback.dashboard.sync", function (data) {
|
||||
|
||||
$('.currentDisplay').text(displayList[displayId].name);
|
||||
|
||||
var transitionArray = [];
|
||||
// var values = ["bars", "blinds", "blinds3d", "zip", "blocks", "blocks2", "concentric", "warp", "cube", "tiles3d", "tiles3dprev", "slide", "swipe", "dissolve"];
|
||||
let transitionArray = [];
|
||||
// let values = ["bars", "blinds", "blinds3d", "zip", "blocks", "blocks2", "concentric", "warp", "cube", "tiles3d", "tiles3dprev", "slide", "swipe", "dissolve"];
|
||||
|
||||
transitionArray.push({ name: "random", value: null });
|
||||
for (var i in SupportedTransitions) {
|
||||
for (let i in SupportedTransitions) {
|
||||
transitionArray.push({ name: SupportedTransitions[i], value: SupportedTransitions[i] });
|
||||
}
|
||||
|
||||
@@ -95,7 +96,7 @@ socket.on("callback.dashboard.sync", function (data) {
|
||||
|
||||
$('#currentTransition').text(serverOptions.transition || "random");
|
||||
|
||||
// var preview = document.getElementById('preview');
|
||||
// let preview = document.getElementById('preview');
|
||||
// preview.src = "/admin/preview?displayId=" + displayId + "&socket=" + encodeURIComponent(socket.id);
|
||||
updateBundleData(bundleDirs);
|
||||
});
|
||||
@@ -103,7 +104,7 @@ socket.on("callback.dashboard.sync", function (data) {
|
||||
socket.on("callback.dashboard.updateSlides", function (data) {
|
||||
if (serverOptions.currentBundle === data.bundleName) {
|
||||
bundleSettings = data.bundleSettings;
|
||||
updateSlides(data.bundleSettings);
|
||||
updateSlides(data.bundleSettings.allSlides);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -120,7 +121,7 @@ socket.on("callback.dashboard.update", function (data) {
|
||||
bundleSettings = data.bundleSettings;
|
||||
serverOptions = data.serverOptions;
|
||||
updateControls(data.serverOptions);
|
||||
updateSlides(bundleSettings);
|
||||
updateSlides(bundleSettings.allSlides);
|
||||
|
||||
$('#allBundles').children().css("border", "1px solid black");
|
||||
$('#bundle_' + simpleHash(serverOptions.currentBundle)).css("border", "1px solid #1ebc30");
|
||||
@@ -130,7 +131,7 @@ socket.on("callback.dashboard.update", function (data) {
|
||||
$('#currentTransition').text(serverOptions.transition || "random");
|
||||
|
||||
$('.editable').editable(function (value, settings) {
|
||||
var uuid = $(this).parent().parent().attr("id");
|
||||
let uuid = $(this).parent().parent().attr("id");
|
||||
emit("admin.renameSlide", { uuid: uuid, name: value, bundleName: serverOptions.currentBundle });
|
||||
return (value);
|
||||
}, {
|
||||
@@ -147,7 +148,7 @@ $(function () {
|
||||
fixPreview();
|
||||
$(".sortable").sortable({
|
||||
beforeStop: function (event, element) {
|
||||
var sortedIDs = $(".sortable").sortable("toArray");
|
||||
let sortedIDs = $(".sortable").sortable("toArray");
|
||||
emit("admin.reorderSlides", { bundleName: serverOptions.currentBundle, sortedIDs: sortedIDs });
|
||||
}
|
||||
}).disableSelection();
|
||||
@@ -179,7 +180,7 @@ function updateBundleData(bundleDirs) {
|
||||
|
||||
|
||||
function fixPreview() {
|
||||
var con = $("#programContainer"),
|
||||
let con = $("#programContainer"),
|
||||
aspect = (0.9 / 1.6),
|
||||
width = con.innerWidth(),
|
||||
height = Math.floor(width * aspect);
|
||||
@@ -230,7 +231,7 @@ function playYoutubeVideo() {
|
||||
}
|
||||
|
||||
if (videoId !== "") {
|
||||
var obj = {
|
||||
let obj = {
|
||||
json: {
|
||||
type: "webPage",
|
||||
webUrl: `https://www.youtube.com/embed/${videoId}?autoplay=1&origin=${serverUrl}&rel=0&modestbranding=0`,
|
||||
@@ -314,37 +315,54 @@ function updateControls(serverOptions) {
|
||||
|
||||
}
|
||||
|
||||
function updateSlides(settings) {
|
||||
var slides = settings.allSlides;
|
||||
|
||||
var output = "";
|
||||
var index = 0;
|
||||
var currentIndex = 0;
|
||||
for (slide of slides) {
|
||||
var status = "on";
|
||||
var color = "green";
|
||||
function updateSlides(slides) {
|
||||
let output = "";
|
||||
let index = 0;
|
||||
let currentIndex = 0;
|
||||
for (let slide of slides) {
|
||||
let status = "on";
|
||||
let color = "green";
|
||||
if (!slide.enabled) {
|
||||
status = "off";
|
||||
color = "red";
|
||||
}
|
||||
var iconStatus = "play";
|
||||
let iconStatus = "play";
|
||||
if (serverOptions.currentFile === slide.uuid) {
|
||||
iconStatus = "play";
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
let statusHtml = ``;
|
||||
if (slide.epochStart != -1) {
|
||||
let d = new Date(slide.epochStart);
|
||||
let isoStr = d.toLocaleDateString() + " " + d.toLocaleTimeString();
|
||||
statusHtml = `<i class="check icon"></i> ${isoStr}`;
|
||||
}
|
||||
if (slide.epochEnd != -1) {
|
||||
let d = new Date(slide.epochEnd);
|
||||
let isoStr = d.toLocaleDateString() + " " + d.toLocaleTimeString();
|
||||
statusHtml += ` <i class="delete icon"></i> ${isoStr}`;
|
||||
}
|
||||
|
||||
let toggleButton = `<i class="large toggle ${status} icon" onclick="emit('controls.toggle', {fileName: '${slide.uuid}'} );"></i>`;
|
||||
if (slide.epochEnd != -1 && slide.epochStart != -1) {
|
||||
toggleButton = `<i class="large icon"></i>`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
output += `
|
||||
<div class="ui ${color} message item" id="${slide.uuid}">
|
||||
<div class="right floated content">
|
||||
<button class="ui small basic inverted icon button" onclick="editSlide('${slide.uuid}', '${slide.type}');"><i class="edit outline icon"></i></button>
|
||||
<button class="ui small basic inverted icon button" onclick="emit('controls.skipTo', {fileName: '${slide.uuid}'} );"><i class="step forward icon"></i></button>
|
||||
<!-- <button class="ui small basic inverted icon button" onclick="remove('${slide.uuid}');"><i class="delete icon"></i></button> -->
|
||||
<i class="large toggle ${status} icon" onclick="emit('controls.toggle', {fileName: '${slide.uuid}'} );"></i>
|
||||
${toggleButton}
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="editable">${slide.name}</span><br>
|
||||
<i class="check icon"></i>
|
||||
|
||||
${statusHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -356,7 +374,7 @@ function updateSlides(settings) {
|
||||
$('#bundleSlides').children().css("border", "1px solid black");
|
||||
$('#' + serverOptions.currentFile).css("border", "1px solid #1ebc30");
|
||||
$('.editable').editable(function (value, settings) {
|
||||
var uuid = $(this).parent().parent().attr("id");
|
||||
let uuid = $(this).parent().parent().attr("id");
|
||||
emit("admin.renameSlide", { uuid: uuid, name: value, bundleName: serverOptions.currentBundle });
|
||||
return (value);
|
||||
}, {
|
||||
@@ -385,7 +403,7 @@ function changeBundle(name) {
|
||||
}
|
||||
|
||||
function remove(uuid) {
|
||||
var obj = { bundleName: serverOptions.currentBundle, uuid: uuid };
|
||||
let obj = { bundleName: serverOptions.currentBundle, uuid: uuid };
|
||||
|
||||
if (confirm("Really delete slide?")) {
|
||||
emit('admin.removeSlide', obj);
|
||||
@@ -407,12 +425,12 @@ function sortByName(a, b) {
|
||||
}
|
||||
|
||||
function simpleHash(string) {
|
||||
var hash = 0;
|
||||
let hash = 0;
|
||||
if (string.length == 0) {
|
||||
return hash;
|
||||
}
|
||||
for (var i = 0; i < string.length; i++) {
|
||||
var char = string.charCodeAt(i);
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
let char = string.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + char;
|
||||
hash = hash & hash; // Convert to 32bit integer
|
||||
}
|
||||
|
||||
+20
-1
@@ -1,5 +1,6 @@
|
||||
let canvas;
|
||||
let bundleData;
|
||||
let slideData;
|
||||
|
||||
const grid = 1920 / 32;
|
||||
|
||||
@@ -9,6 +10,7 @@ let undoData = [];
|
||||
let undoActive = false;
|
||||
let templates = {};
|
||||
|
||||
|
||||
bundleData = {
|
||||
background: "",
|
||||
duration: 10,
|
||||
@@ -344,6 +346,7 @@ socket.on('callback.edit.updateFileList', function (data) {
|
||||
|
||||
socket.on('callback.edit', function (data) {
|
||||
bundleData = data.bundleData;
|
||||
slideData = data.slideData;
|
||||
templates = data.templates;
|
||||
canvas.clear();
|
||||
|
||||
@@ -390,6 +393,18 @@ socket.on('callback.edit', function (data) {
|
||||
|
||||
$("#duration").val(data.slideData.duration || "");
|
||||
|
||||
if (slideData.epochStart != -1) {
|
||||
let d = new Date(slideData.epochStart);
|
||||
let isoStr = (new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString()).slice(0, -1);
|
||||
$("#enableStart").val(isoStr);
|
||||
}
|
||||
|
||||
if (slideData.epochEnd != -1) {
|
||||
let d = new Date(slideData.epochEnd);
|
||||
let isoStr = (new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString()).slice(0, -1);
|
||||
$("#enableEnd").val(isoStr);
|
||||
}
|
||||
|
||||
if (data.slideData.displayTime !== null) {
|
||||
$("#override").checkbox('set checked');
|
||||
if (data.slideData.displayTime) {
|
||||
@@ -828,6 +843,8 @@ function save() {
|
||||
var transition = $("#transitions").dropdown("get value");
|
||||
if (transition === "null") transition = "";
|
||||
|
||||
let epochStart = Date.parse($("#enableStart").val()) || -1;
|
||||
let epochEnd = Date.parse($("#enableEnd").val()) || -1;
|
||||
|
||||
var obj = {
|
||||
bundleName: bundle,
|
||||
@@ -837,7 +854,9 @@ function save() {
|
||||
json: canvas.toJSON(['id', 'fontSize']),
|
||||
png: canvas.toDataURL('png'),
|
||||
displayTime: checked,
|
||||
transition: transition
|
||||
transition: transition,
|
||||
epochStart: epochStart,
|
||||
epochEnd: epochEnd
|
||||
};
|
||||
|
||||
socket.emit("edit.save", obj);
|
||||
|
||||
+248
-203
@@ -32,224 +32,268 @@
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="ui primary pointing menu" style="margin: 0;">
|
||||
<div class="item">
|
||||
<div class="ui input">
|
||||
<label for="duration"></label>
|
||||
<input type="number" id="duration" placeholder="{{ t("navs.duration") }}" min="5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div id="override" class="ui checkbox">
|
||||
<input id="lbl2" type="checkbox" />
|
||||
<label for="lbl2">{{ t("navs.override") }} </label>
|
||||
</div>
|
||||
<div class="ui small primary pointing menu" style="margin: 0;">
|
||||
<div class="item">
|
||||
<div class="ui labeled input">
|
||||
<label class="ui right pointing label" for="slideName">{{ t("navs.slideName") }}</label>
|
||||
<input class="ui input" name="slideName" type="text" id="slideName" value="untitled"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="displaytime" class="ui toggle checkbox">
|
||||
<input id="lbl" type="checkbox" />
|
||||
<label for="lbl">{{ t("navs.time") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="transitions" class="ui scrolling dropdown item">
|
||||
<div class="ui small breadcrumb">
|
||||
<span class="section">{{ t("navs.transition") }}</span>
|
||||
<i class="right chevron icon divider"></i>
|
||||
<span id="currentTransition" class="section"></span>
|
||||
</div>
|
||||
<i class="dropdown icon"></i>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui labeled input">
|
||||
<label class="ui right pointing label" for="slide_name">{{ t("navs.slideName") }}</label>
|
||||
<input class="ui input" name="slideName" type="text" id="slideName" value="untitled" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui green buttons">
|
||||
<div onclick="save()" class="ui button">{{ t("actions.save") }}</div>
|
||||
<div class="ui floating dropdown icon button" id="dropdownSave">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div onclick="saveTemplate()" class="item"><i class="save icon"></i>
|
||||
{{ t("actions.savetemplate") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="templates" class="ui teal basic icon button dropdown">
|
||||
{{ t('actions.loadTemplate') }}
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui labeled input">
|
||||
<label class="ui right pointing label" for="enableStart">{{ t("admin.editSlide.slideStart") }}</label>
|
||||
<input type="datetime-local" id="enableStart"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui labeled input">
|
||||
<label class="ui right pointing label" for="enableEnd">{{ t("admin.editSlide.slideEnd") }}</label>
|
||||
<input type="datetime-local" id="enableEnd"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui labeled input">
|
||||
<label for="duration" class="ui right pointing label">{{ t("navs.duration") }}</label>
|
||||
<input type="number" id="duration" min="5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui small primary pointing menu" style="margin: 0;">
|
||||
|
||||
<div class="item">
|
||||
<div id="override" class="ui checkbox">
|
||||
<input id="lbl2" type="checkbox"/>
|
||||
<label for="lbl2">{{ t("navs.override") }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="displaytime" class="ui toggle checkbox">
|
||||
<input id="lbl" type="checkbox"/>
|
||||
<label for="lbl">{{ t("navs.time") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="transitions" class="ui scrolling dropdown item">
|
||||
<div class="ui small breadcrumb">
|
||||
<span class="section">{{ t("navs.transition") }}</span>
|
||||
<i class="right chevron icon divider"></i>
|
||||
<span id="currentTransition" class="section"></span>
|
||||
</div>
|
||||
<i class="dropdown icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui green buttons">
|
||||
<div onclick="save()" class="ui button">{{ t("actions.save") }}</div>
|
||||
<div class="ui floating dropdown icon button" id="dropdownSave">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div onclick="saveTemplate()" class="item">
|
||||
<i class="save icon"></i>
|
||||
{{ t("actions.savetemplate") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="templates" class="ui teal basic icon button dropdown">
|
||||
{{ t('actions.loadTemplate') }}
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
|
||||
|
||||
{% 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>
|
||||
{% endif %}
|
||||
<a href="#" onclick="window.close()" class="ui small basic button">{{ t("actions.cancel") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
<a href="#" onclick="window.close()" class="ui small basic button">{{ t("actions.cancel") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui menu" style="margin: 0;">
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="addHeader('header')" class="ui basic icon button" data-content="{{ t("admin.tooltip.header")}}">
|
||||
<i class="ui heading icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="addText('paragraph text')" class="ui basic icon button" data-content="{{t("admin.tooltip.paragraph")}}">
|
||||
<i class="ui paragraph icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="openImageBrowser()" class="ui basic icon button" data-content="{{t("admin.tooltip.image")}}">
|
||||
<i class="ui image icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a class="ui basic icon button" onclick="setZindex('bringToFront');" data-content="{{t("admin.tooltip.bringToFront")}}">
|
||||
<i class="ui level up icon"></i>
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('bringForward');" data-content="{{t("admin.tooltip.bringForward")}}">
|
||||
<i class="ui arrow up icon"></i>
|
||||
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('sendBackwards>');" data-content="{{t("admin.tooltip.sendBackward")}}">
|
||||
<i class="ui arrow down icon"></i>
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('sendToBack');" data-content="{{t("admin.tooltip.sendToBack")}}">
|
||||
<i class="ui level down icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui menu" style="margin: 0;">
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="addHeader('header')" class="ui basic icon button" data-content="{{ t("admin.tooltip.header")}}"><i class="ui heading icon"></i></a>
|
||||
<a href="#" onclick="addText('paragraph text')" class="ui basic icon button" data-content="{{t("admin.tooltip.paragraph")}}"><i class="ui paragraph icon"></i></a>
|
||||
<a href="#" onclick="openImageBrowser()" class="ui basic icon button" data-content="{{t("admin.tooltip.image")}}"><i class="ui image icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a class="ui basic icon button" onclick="setZindex('bringToFront');" data-content="{{t("admin.tooltip.bringToFront")}}">
|
||||
<i class="ui level up icon"></i>
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('bringForward');" data-content="{{t("admin.tooltip.bringForward")}}">
|
||||
<i class="ui arrow up icon"></i>
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="setAlign('left')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignLeft")}}">
|
||||
<i class="ui align left icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="setAlign('center')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignCenter")}}">
|
||||
<i class="ui align center icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="setAlign('right')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignRight")}}">
|
||||
<i class="ui align right icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="setAlign('justify')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignJustify")}}">
|
||||
<i class="ui align justify icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div onclick="fontSize(1);" class="ui basic icon button" data-content="{{t("admin.tooltip.fontPlus")}}">
|
||||
<i class="icons">
|
||||
<i class="plus icon"></i>
|
||||
<i class="corner font icon"></i>
|
||||
</i>
|
||||
</div>
|
||||
<div onclick="fontSize(-1);" class="ui basic icon button" data-content="{{t("admin.tooltip.fontMinus")}}">
|
||||
<i class="icons">
|
||||
<i class="minus icon"></i>
|
||||
<i class="corner font icon"></i>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div id="colorPicker" class="ui basic button">{{ t("admin.editSlide.changeColor") }}
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('sendBackwards>');" data-content="{{t("admin.tooltip.sendBackward")}}">
|
||||
<i class="ui arrow down icon"></i>
|
||||
</a>
|
||||
<a class="ui basic icon button" onclick="setZindex('sendToBack');" data-content="{{t("admin.tooltip.sendToBack")}}">
|
||||
<i class="ui level down icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui popup" style="display: none; min-width: 500px;">
|
||||
<div onclick="changeColor(this);" class="ui white basic icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui grey icon button"></div>
|
||||
<div onclick="changeColor(this);" style="background:black;" class="ui black icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui red icon icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui orange icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui yellow icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui olive icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui green icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui teal icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui blue icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui violet icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui purple icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui pink icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui brown icon button"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui basic icon button" onclick="setCenter('h')" data-content="{{t("admin.tooltip.centerHorizontal")}}">
|
||||
<i class="arrows alternate horizontal icon"></i>
|
||||
</div>
|
||||
<div class="ui basic icon button" onclick="setCenter('v')" data-content="{{t("admin.tooltip.centerVertical")}}">
|
||||
<i class="arrows alternate vertical icon"></i>
|
||||
</div>
|
||||
<div class="ui basic icon button" onclick="alignObject('left')" data-content="{{t("admin.tooltip.alignLeft")}}">
|
||||
<i class="arrow alternate circle left outline icon"></i>
|
||||
</div>
|
||||
<div class="ui basic icon button" onclick="alignObject('right')" data-content="{{t("admin.tooltip.alignRight")}}">
|
||||
<i class="arrow alternate circle right outline icon"></i>
|
||||
</div>
|
||||
<div class="ui basic icon button" onclick="alignObject('top')" data-content="{{t("admin.tooltip.alignUp")}}">
|
||||
<i class="arrow alternate circle up outline icon"></i>
|
||||
</div>
|
||||
<div class="ui basic icon button" onclick="alignObject('bottom')" data-content="{{t("admin.tooltip.alignDown")}}">
|
||||
<i class="arrow alternate circle down outline icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="setAlign('left')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignLeft")}}"><i class="ui align left icon"></i></a>
|
||||
<a href="#" onclick="setAlign('center')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignCenter")}}"><i
|
||||
class="ui align center icon"></i></a>
|
||||
<a href="#" onclick="setAlign('right')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignRight")}}"><i class="ui align right icon"></i></a>
|
||||
<a href="#" onclick="setAlign('justify')" class="ui basic icon button" data-content="{{t("admin.tooltip.alignJustify")}}"><i
|
||||
class="ui align justify icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div onclick="fontSize(1);" class="ui basic icon button" data-content="{{t("admin.tooltip.fontPlus")}}">
|
||||
<i class="icons">
|
||||
<i class="plus icon"></i>
|
||||
<i class="corner font icon"></i>
|
||||
</i>
|
||||
</div>
|
||||
<div onclick="fontSize(-1);" class="ui basic icon button" data-content="{{t("admin.tooltip.fontMinus")}}">
|
||||
<i class="icons">
|
||||
<i class="minus icon"></i>
|
||||
<i class="corner font icon"></i>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div id="colorPicker" class="ui basic button">{{ t("admin.editSlide.changeColor") }} </div>
|
||||
</div>
|
||||
|
||||
<div class="ui popup" style="display: none; min-width: 500px;">
|
||||
<div onclick="changeColor(this);" class="ui white basic icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui grey icon button"></div>
|
||||
<div onclick="changeColor(this);" style="background:black;" class="ui black icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui red icon icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui orange icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui yellow icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui olive icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui green icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui teal icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui blue icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui violet icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui purple icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui pink icon button"></div>
|
||||
<div onclick="changeColor(this);" class="ui brown icon button"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="ui basic icon button" onclick="setCenter('h')" data-content="{{t("admin.tooltip.centerHorizontal")}}"><i class="arrows alternate horizontal icon"></i></div>
|
||||
<div class="ui basic icon button" onclick="setCenter('v')" data-content="{{t("admin.tooltip.centerVertical")}}"><i class="arrows alternate vertical icon"></i></div>
|
||||
<div class="ui basic icon button" onclick="alignObject('left')" data-content="{{t("admin.tooltip.alignLeft")}}"><i class="arrow alternate circle left outline icon"></i></div>
|
||||
<div class="ui basic icon button" onclick="alignObject('right')" data-content="{{t("admin.tooltip.alignRight")}}"><i class="arrow alternate circle right outline icon"></i></div>
|
||||
<div class="ui basic icon button" onclick="alignObject('top')" data-content="{{t("admin.tooltip.alignUp")}}"><i class="arrow alternate circle up outline icon"></i></div>
|
||||
<div class="ui basic icon button" onclick="alignObject('bottom')" data-content="{{t("admin.tooltip.alignDown")}}"><i class="arrow alternate circle down outline icon"></i></div>
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="undo()" class="ui basic icon button" data-content="{{ t("admin.tooltip.undo") }}">
|
||||
<i class="ui undo icon"></i>
|
||||
{{ t("admin.tooltip.undo") }}</a>
|
||||
<a href="#" onclick="copyObject()" class="ui basic icon button" data-content="{{t("admin.tooltip.copy")}}">
|
||||
<i class="ui copy icon"></i>
|
||||
</a>
|
||||
<a href="#" onclick="pasteObject()" class="ui basic icon button">
|
||||
<i class="ui paste icon" data-content="{{t("admin.tooltip.paste")}}"></i>
|
||||
</a>
|
||||
<a href="#" onclick="removeSelectedObjects()" class="ui basic icon button" data-content="{{t("admin.tooltip.remove")}}">
|
||||
<i class="ui remove icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="matchsize" style="margin:0; padding:0; position: absolute;">
|
||||
<canvas id="edit" width="1920" height="1080" style="position: absolute; z-index:10;"></canvas>
|
||||
<div id="bg">
|
||||
<img id="bgimg" class="fsimage" src=""/>
|
||||
</div>
|
||||
<video muted loop autoplay id="bgvid2" poster=""></video>
|
||||
<div id="time2" class="noselect delay animated">00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<div class="ui inverted buttons">
|
||||
<a href="#" onclick="undo()" class="ui basic icon button" data-content="{{ t("admin.tooltip.undo") }}"><i
|
||||
class="ui undo icon"></i> {{ t("admin.tooltip.undo") }}</a>
|
||||
<a href="#" onclick="copyObject()" class="ui basic icon button" data-content="{{t("admin.tooltip.copy")}}"><i
|
||||
class="ui copy icon"></i></a>
|
||||
<a href="#" onclick="pasteObject()" class="ui basic icon button"><i class="ui paste icon" data-content="{{t("admin.tooltip.paste")}}"></i></a>
|
||||
<a href="#" onclick="removeSelectedObjects()" class="ui basic icon button" data-content="{{t("admin.tooltip.remove")}}"><i
|
||||
class="ui remove icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contextmenu" class="ui small vertical menu" style="display: none; position: absolute; z-index: 1000;">
|
||||
<a class="item" data-action="copy">
|
||||
{{ t("actions.copy") }}
|
||||
</a>
|
||||
<a class="item" data-action="paste">
|
||||
{{ t("actions.paste") }}
|
||||
</a>
|
||||
<div class="ui dropdown item">
|
||||
<i class="dropdown icon"></i>
|
||||
{{ t("admin.editSlide.order") }}
|
||||
<div class="menu">
|
||||
<div class="item" data-action="bringToFront">{{ t("admin.editSlide.sendToFront") }}</div>
|
||||
<div class="item" data-action="bringForward">{{ t("admin.editSlide.moveForward") }}</div>
|
||||
<div class="item" data-action="sendBackwards">{{ t("admin.editSlide.moveBackward") }}</div>
|
||||
<div class="item" data-action="sendToBack">{{ t("admin.editSlide.sendToBack") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item" data-action="delete">
|
||||
{{ t("actions.delete") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="matchsize" style="margin:0; padding:0; position: absolute;">
|
||||
<canvas id="edit" width="1920" height="1080" style="position: absolute; z-index:10;"></canvas>
|
||||
<div id="bg">
|
||||
<img id="bgimg" class="fsimage" src="" />
|
||||
</div>
|
||||
<video muted loop autoplay id="bgvid2" poster="">
|
||||
</video>
|
||||
<div id="time2" class="noselect delay animated">00:00</div>
|
||||
</div>
|
||||
<div id="imageLayer" class="ui modal">
|
||||
<div class="header">{{ t("admin.editSlide.insertImage") }}</div>
|
||||
<div id="dropzone" class="scrolling content">
|
||||
<div class="ui info message">{{ t("admin.editSlide.dropToUpload") }}</div>
|
||||
<div id="imageList" class="ui three stackable cards"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">{{ t("actions.cancel") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contextmenu" class="ui small vertical menu" style="display: none; position: absolute; z-index: 1000;">
|
||||
<a class="item" data-action="copy">
|
||||
{{ t("actions.copy") }}
|
||||
</a>
|
||||
<a class="item" data-action="paste">
|
||||
{{ t("actions.paste") }}
|
||||
</a>
|
||||
<div class="ui dropdown item">
|
||||
<i class="dropdown icon"></i>
|
||||
{{ t("admin.editSlide.order") }}
|
||||
<div class="menu">
|
||||
<div class="item" data-action="bringToFront">{{ t("admin.editSlide.sendToFront") }}</div>
|
||||
<div class="item" data-action="bringForward">{{ t("admin.editSlide.moveForward") }}</div>
|
||||
<div class="item" data-action="sendBackwards">{{ t("admin.editSlide.moveBackward") }}</div>
|
||||
<div class="item" data-action="sendToBack">{{ t("admin.editSlide.sendToBack") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item" data-action="delete">
|
||||
{{ t("actions.delete") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="imageLayer" class="ui modal">
|
||||
<div class="header">{{ t("admin.editSlide.insertImage") }}</div>
|
||||
<div id="dropzone" class="scrolling content">
|
||||
<div class="ui info message">{{ t("admin.editSlide.dropToUpload") }}</div>
|
||||
<div id="imageList" class="ui three stackable cards">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">{{ t("actions.cancel") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="tempCanvas" width="1920" height="1080" style="display: none"></canvas>
|
||||
<canvas id="tempCanvas" width="1920" height="1080" style="display: none"></canvas>
|
||||
|
||||
<script>
|
||||
var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin-" + displayId);
|
||||
@@ -263,6 +307,7 @@
|
||||
},
|
||||
position: "bottom left"
|
||||
});
|
||||
|
||||
$(function () {
|
||||
|
||||
var opts = {
|
||||
@@ -434,4 +479,4 @@
|
||||
}
|
||||
</script>
|
||||
<script src="/js/edit.js"></script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in new issue
Block a user