mirror of
https://github.com/AleziaKurdis/Overte-community-apps.git
synced 2025-04-06 01:53:45 +02:00
319 lines
11 KiB
HTML
319 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
audioZones.html
|
|
|
|
Created by Alezia Kurdis based on a concept from Silverfish, February 18th 2023.
|
|
Copyright 2023 Overte e.V.
|
|
|
|
This is a tool to help to create audio zones
|
|
and provide the necessary configuration for the Domain Server.
|
|
|
|
Distributed under the Apache License, Version 2.0.
|
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src='jquery.min.js'></script>
|
|
<script>
|
|
var channel = "overte.application.more.audioZones";
|
|
|
|
var thisPageName = "audioZones.html";
|
|
var currentPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
var ROOTPATH = currentPath.replace(thisPageName, "");
|
|
|
|
function findGetParameter(parameterName) {
|
|
var result = null,
|
|
tmp = [];
|
|
var items = location.search.substr(1).split("&");
|
|
for (var index = 0; index < items.length; index++) {
|
|
tmp = items[index].split("=");
|
|
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
|
|
var parameter = findGetParameter("radius");
|
|
if(parameter === null){parameter = "300";}
|
|
var radius = parseInt(parameter, 10);
|
|
|
|
EventBridge.scriptEventReceived.connect(function(message){
|
|
messageObj = JSON.parse(message);
|
|
if (messageObj.channel === channel) {
|
|
if (messageObj.action === "AUDIO_ZONES_DATA") {
|
|
document.getElementById("outputData").value = messageObj.data;
|
|
if (messageObj.rotationIssue) {
|
|
document.getElementById("error").innerHTML = "ATTENTION! We fixed rotation issues for you. Please review your Audio Zones.";
|
|
setAudioZoneVisibility(true, "sys");
|
|
} else {
|
|
document.getElementById("error").innerHTML = " ";
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: FiraSans-SemiBold;
|
|
src: url(fonts/FiraSans-SemiBold.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: FiraSans-Regular;
|
|
src: url(fonts/FiraSans-Regular.ttf);
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #454545;
|
|
font-family: FiraSans-Regular;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#radius {
|
|
width: 60px;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 12px;
|
|
background-color: #000000;
|
|
color: #bbbbbb;
|
|
}
|
|
|
|
#radius:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#uninstall {
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #222222;
|
|
font-size: 9px;
|
|
color: #cccccc;
|
|
border-radius: 3px;
|
|
border: 0px solid #000000;
|
|
transition-duration: 0.2s;
|
|
width: 100px;
|
|
padding: 3px;
|
|
}
|
|
|
|
#uninstall:hover {
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#uninstall:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.btn {
|
|
font-family: FiraSans-SemiBold;
|
|
background-color: #222222;
|
|
font-size: 11px;
|
|
color: #cccccc;
|
|
border-radius: 3px;
|
|
border: 0px solid #000000;
|
|
transition-duration: 0.2s;
|
|
width: 70px;
|
|
padding: 4px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.btn:disabled {
|
|
background-color: #383838;
|
|
color: #666666;
|
|
}
|
|
|
|
font.subtitle {
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
font.instructions {
|
|
font-family: FiraSans-Regular;
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
}
|
|
|
|
#outputData {
|
|
width: 98%;
|
|
height: 410px;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 11px;
|
|
resize: none;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
background-color: #000000;
|
|
color: #bbbbbb;
|
|
}
|
|
|
|
#outputData:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#newAudioZoneName {
|
|
width: 350px;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 12px;
|
|
background-color: #000000;
|
|
color: #bbbbbb;
|
|
}
|
|
|
|
#newAudioZoneName:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#error {
|
|
width: 100%;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 12px;
|
|
color: #ff9500;
|
|
padding: 4px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="text-align: center; width:100%;"><h1>AUDIO ZONES HELPER</h1></div>
|
|
<div style="width:100%; display: flex;">
|
|
<div style="text-align: left; width:100%;">
|
|
<button id="showAudioZones" class="btn" onClick = "setAudioZoneVisibility(true, 'ui');">SHOW</button>
|
|
<button id="hideAudioZones" class="btn" onClick = "setAudioZoneVisibility(false, 'ui');">HIDE</button>
|
|
</div>
|
|
<div style="text-align: right; width:100%;">
|
|
Radius: <input type = "text" id="radius" value = "" onkeyup="setRadius();">
|
|
</div>
|
|
</div>
|
|
<div id="error"></div>
|
|
<div style="text-align: right; width:100%;">
|
|
<button id="copy" class="btn" onclick="copyToClipboard(document.getElementById('outputData').value);">Copy</button>
|
|
</div>
|
|
<textarea id = "outputData" readonly></textarea>
|
|
<hr>
|
|
<font class="subtitle">CREATE A NEW AUDIO ZONE:</font><br>
|
|
<input type = "text" id="newAudioZoneName" maxlength="64" value = "AudioZone-name" onkeyup="checkName();">
|
|
<button id="createAudioZones" class="btn" onClick = "createAudioZone(document.getElementById('newAudioZoneName').value);">Create</button><br>
|
|
<font class="instructions">- Once created, use the "Create" application to position and resize your audio zone.<br>
|
|
- Do not "rotate" the audio zones. (if you do, the rotation zero will be enforced.)<br>
|
|
</font>
|
|
<br><br>
|
|
<hr>
|
|
<div style="text-align: right; width:100%;">
|
|
<button id="uninstall" onClick = "uninstall();">Uninstall this app</button>
|
|
</div>
|
|
<script>
|
|
function setAudioZoneVisibility(isVisible, calltype) {
|
|
var action = "";
|
|
if (calltype === "ui") {
|
|
if (!isVisible) {
|
|
action = "HIDE_AUDIO_ZONES";
|
|
} else {
|
|
action = "SHOW_AUDIO_ZONES";
|
|
}
|
|
} else {
|
|
if (!isVisible) {
|
|
action = "SYS_HIDE_AUDIO_ZONES";
|
|
} else {
|
|
action = "SYS_SHOW_AUDIO_ZONES";
|
|
}
|
|
}
|
|
var message = {
|
|
"channel": channel,
|
|
"action": action
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
function createAudioZone(name) {
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "CREATE_AN_AUDIO_ZONE",
|
|
"name": name
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
function checkName() {
|
|
var buttonElement = document.getElementById("createAudioZones");
|
|
var name = getAcceptedName(document.getElementById("newAudioZoneName").value);
|
|
document.getElementById("newAudioZoneName").value = name;
|
|
if( name === "") {
|
|
buttonElement.disabled = true;
|
|
} else {
|
|
buttonElement.disabled = false;
|
|
}
|
|
}
|
|
|
|
function getAcceptedName(str) {
|
|
var accepted = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-";
|
|
var cleanedName = "";
|
|
for (var i = 0; i < str.length; i++) {
|
|
if (accepted.indexOf(str.charAt(i)) !== -1) {
|
|
cleanedName = cleanedName + str.charAt(i);
|
|
}
|
|
}
|
|
return cleanedName;
|
|
}
|
|
|
|
function uninstall() {
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "SELF_UNINSTALL"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
function copyToClipboard(data) {
|
|
var $temp = $("<textarea>");
|
|
$("body").append($temp);
|
|
$temp.val(data).select();
|
|
document.execCommand("copy");
|
|
$temp.remove();
|
|
}
|
|
|
|
function getAudioZoneData() {
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "COMPUTE_AUDIO_ZONES"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
function setRadius() {
|
|
var newRadius = parseInt(document.getElementById("radius").value, 10);
|
|
if (isNaN(newRadius)) {
|
|
newRadius = 0;
|
|
}
|
|
radius = newRadius;
|
|
document.getElementById("radius").value = radius;
|
|
var message = {
|
|
"channel": channel,
|
|
"action": "SET_RADIUS",
|
|
"radius": radius
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
|
|
document.getElementById("radius").value = radius;
|
|
getAudioZoneData();
|
|
</script>
|
|
</body>
|
|
</html>
|