mirror of
https://github.com/overte-org/overte.git
synced 2025-05-02 02:08:30 +02:00
410 lines
14 KiB
HTML
410 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<!--//
|
|
// renderWithZonesManager.html
|
|
//
|
|
// Created by Alezia Kurdis on January 28th, 2024.
|
|
// Copyright 2024 Overte e.V.
|
|
//
|
|
// Web Ui for renderWithZonesManager.js module.
|
|
//
|
|
// 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" />
|
|
<title>RenderWithZones Manager</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: Raleway-Regular;
|
|
src: url(../../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */
|
|
url(../../../../fonts/Raleway-Regular.ttf), /* OSX production */
|
|
url(../../../../interface/resources/fonts/Raleway-Regular.ttf), /* Development, running script in /HiFi/examples */
|
|
url(../fonts/Raleway-Regular.ttf); /* Marketplace script */
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Raleway-Bold;
|
|
src: url(../../../../resources/fonts/Raleway-Bold.ttf),
|
|
url(../../../../fonts/Raleway-Bold.ttf),
|
|
url(../../../../interface/resources/fonts/Raleway-Bold.ttf),
|
|
url(../fonts/Raleway-Bold.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: HiFi-Glyphs;
|
|
src: url(../../../../resources/fonts/hifi-glyphs.ttf),
|
|
url(../../../../fonts/hifi-glyphs.ttf),
|
|
url(../../../../interface/resources/fonts/hifi-glyphs.ttf),
|
|
url(../fonts/hifi-glyphs.ttf);
|
|
}
|
|
|
|
body {
|
|
background-color:#000000;
|
|
color:#ffffff;
|
|
font-family: Raleway-Bold;
|
|
font-size: 11px;
|
|
width: 96%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#rwzmUI {
|
|
width: 100%;
|
|
padding: 6px;
|
|
}
|
|
h1 {
|
|
font-family: Raleway-Bold;
|
|
font-size: 22px;
|
|
}
|
|
h2 {
|
|
font-family: Raleway-Bold;
|
|
font-size: 16px;
|
|
}
|
|
table {
|
|
width: 98%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td.cells {
|
|
background-color: #222222;
|
|
border: 1px solid #FFFFFF;
|
|
vertical-align: top;
|
|
height: 23px;
|
|
}
|
|
td.highlightedCells {
|
|
background-color: #3bc7ff;
|
|
border: 1px solid #FFFFFF;
|
|
vertical-align: top;
|
|
height: 23px;
|
|
}
|
|
td.header {
|
|
background-color: #444444;
|
|
color: #DDDDDD;
|
|
}
|
|
|
|
td.line {
|
|
color: #FFFFFF;
|
|
}
|
|
td.errorline {
|
|
color: #ff5900;
|
|
}
|
|
td.lineInverted {
|
|
color: #000000;
|
|
}
|
|
div.warning {
|
|
color: #ff5900;
|
|
padding: 2px;
|
|
margin: 3px;
|
|
font-family: Raleway-Regular;
|
|
font-size: 12px;
|
|
}
|
|
a {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
a:link {
|
|
color: #00b3ff;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: #00b3ff;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #99e1ff;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:active {
|
|
color: #99e1ff;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
font.hifiGlyphs {
|
|
font-family: HiFi-Glyphs;
|
|
font-size: 12px;
|
|
}
|
|
span.delBtn {
|
|
color: #ad7171; font-size: 16px;
|
|
}
|
|
span.delBtn:hover {
|
|
color: #d65151;
|
|
}
|
|
button.addbtn {
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
border: 0px;
|
|
color: #ffffff;
|
|
font-family: Raleway-Bold;
|
|
font-size: 10px;
|
|
background-color: #57ad4f;
|
|
padding: 2px 6px 2px 6px;
|
|
text-decoration: none;
|
|
}
|
|
button.addbtn:hover {
|
|
background-color: #4fe63e;
|
|
text-decoration: none;
|
|
}
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
#rwzmAddZoneSelector, #rwzmReplaceZoneSelector {
|
|
position: absolute;
|
|
display: none;
|
|
width: 96%;
|
|
height: 100%;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
border-width: 0px;
|
|
background-color: #666666;
|
|
color: #ffffff;
|
|
padding: 0% 2% 0% 2%;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
div.zoneSelectorContainer {
|
|
marging: 3%;
|
|
width: 100%;
|
|
height: 500px;
|
|
background-color: #c0c0c0;
|
|
overflow-y: auto;
|
|
padding: 0px;
|
|
}
|
|
button.greyBtn {
|
|
margin: 4px;
|
|
border-radius: 4px;
|
|
border: 0px;
|
|
color: #dddddd;
|
|
font-family: Raleway-Bold;
|
|
font-size: 14px;
|
|
background-color: #404040;
|
|
padding: 4px 8px 4px 8px;
|
|
text-decoration: none;
|
|
}
|
|
button.greyBtn:hover {
|
|
background-color: #828282;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
button.small {
|
|
margin: 2px;
|
|
font-size: 10px;
|
|
padding: 2px 6px 2px 6px;
|
|
}
|
|
button.redBtn {
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
border: 0px;
|
|
color: #dddddd;
|
|
font-family: Raleway-Bold;
|
|
font-size: 10px;
|
|
background-color: #ba3d3d;
|
|
padding: 2px 6px 2px 6px;
|
|
text-decoration: none;
|
|
}
|
|
button.redBtn:hover {
|
|
background-color: #d60202;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
button.blueBtn {
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
border: 0px;
|
|
color: #dddddd;
|
|
font-family: Raleway-Bold;
|
|
font-size: 10px;
|
|
background-color: #426aad;
|
|
padding: 2px 6px 2px 6px;
|
|
text-decoration: none;
|
|
}
|
|
button.blueBtn:hover {
|
|
background-color: #1e5dc9;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
button.zoneSelectorButton {
|
|
margin: 0px;
|
|
width: 100%;
|
|
border: 0px;
|
|
color: #000000;
|
|
font-family: Raleway-Bold;
|
|
font-size: 12px;
|
|
background-color: #c0c0c0;
|
|
padding: 4px;
|
|
text-align: left;
|
|
}
|
|
button.zoneSelectorButton:hover {
|
|
background-color: #999999;
|
|
}
|
|
div.listContainer {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
height: 450px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="rwzmUI">
|
|
<div style='text-align: center; width: 100%;'>
|
|
<h1>
|
|
<br>
|
|
<br>
|
|
Analysis in progress...
|
|
</h1>
|
|
<br>
|
|
<img src='../assets/images/processing.gif'>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var enforceLocked = false;
|
|
var highlightedID = "";
|
|
var entitiesToAddTo = [];
|
|
var targetZoneID = "";
|
|
|
|
EventBridge.scriptEventReceived.connect(function (message) {
|
|
document.getElementById("rwzmUI").innerHTML = message;
|
|
});
|
|
|
|
function highlight(id) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "highlight",
|
|
"id": id,
|
|
"enforceLocked": document.getElementById("enforceLocked").checked
|
|
}));
|
|
}
|
|
|
|
function getIdsFromScope() {
|
|
var ids = [];
|
|
var i = 0;
|
|
var checkboxes = document.getElementsByName("entitiesScope");
|
|
for(i = 0; i < checkboxes.length; i++) {
|
|
if(checkboxes[i].checked) {
|
|
ids.push(checkboxes[i].value);
|
|
}
|
|
}
|
|
return ids;
|
|
}
|
|
|
|
function selectAllOrNone() {
|
|
var setTo = false;
|
|
if (document.getElementById("fullScope").checked) {
|
|
setTo = true;
|
|
}
|
|
var checkboxes = document.getElementsByName("entitiesScope");
|
|
for(i = 0; i < checkboxes.length; i++) {
|
|
checkboxes[i].checked = setTo;
|
|
}
|
|
}
|
|
|
|
function addZoneToEntity(ids){
|
|
if (ids.length === 0) {
|
|
return;
|
|
} else {
|
|
enforceLocked = document.getElementById("enforceLocked").checked;
|
|
highlightedID = document.getElementById("highlightedID").value;
|
|
entitiesToAddTo = ids;
|
|
document.body.style.overflow = "hidden";
|
|
document.getElementById("rwzmAddZoneSelector").style.display = "block";
|
|
}
|
|
}
|
|
|
|
function cancelZoneSelector() {
|
|
document.getElementById("rwzmAddZoneSelector").style.display = "none";
|
|
document.getElementById("rwzmReplaceZoneSelector").style.display = "none";
|
|
document.body.style.overflow = "auto";
|
|
}
|
|
|
|
function addThisZone(id) {
|
|
document.getElementById("rwzmAddZoneSelector").style.display = "none";
|
|
document.body.style.overflow = "auto";
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "addZoneToEntities",
|
|
"ids": entitiesToAddTo,
|
|
"zoneID": id,
|
|
"enforceLocked": enforceLocked,
|
|
"highlightedID": highlightedID
|
|
}));
|
|
}
|
|
|
|
function removeZoneFromRWZ(id, rwzId) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "removeZoneFromEntity",
|
|
"id": id,
|
|
"zoneID": rwzId,
|
|
"enforceLocked": document.getElementById("enforceLocked").checked,
|
|
"highlightedID": document.getElementById("highlightedID").value
|
|
}));
|
|
}
|
|
|
|
function replaceZoneOnAllEntities(id) {
|
|
var goProceed = false;
|
|
if (!document.getElementById("enforceLocked").checked) {
|
|
goProceed = confirm("Locked entities won't be modified unless you check the option 'Modify locked entities for me'\nAre you sure you want to do this?");
|
|
} else {
|
|
goProceed = true;
|
|
}
|
|
if (goProceed) {
|
|
enforceLocked = document.getElementById("enforceLocked").checked;
|
|
highlightedID = document.getElementById("highlightedID").value;
|
|
targetZoneID = id;
|
|
document.body.style.overflow = "hidden";
|
|
document.getElementById("rwzmReplaceZoneSelector").style.display = "block";
|
|
}
|
|
}
|
|
|
|
function replaceByThisZone(replacementZoneID){
|
|
document.getElementById("rwzmReplaceZoneSelector").style.display = "none";
|
|
document.body.style.overflow = "auto";
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "replaceZoneOnAllEntities",
|
|
"targetZoneID": targetZoneID,
|
|
"replacementZoneID": replacementZoneID,
|
|
"enforceLocked": enforceLocked,
|
|
"highlightedID": highlightedID
|
|
}));
|
|
}
|
|
|
|
function removeZoneOnAllEntities(id) {
|
|
var goProceed = false;
|
|
if (!document.getElementById("enforceLocked").checked) {
|
|
goProceed = confirm("Locked entities won't be modified unless you check the option 'Modify locked entities for me'\nAre you sure you want to do this?");
|
|
} else {
|
|
goProceed = true;
|
|
}
|
|
if (goProceed) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "removeZoneOnAllEntities",
|
|
"zoneID": id,
|
|
"enforceLocked": document.getElementById("enforceLocked").checked,
|
|
"highlightedID": document.getElementById("highlightedID").value
|
|
}));
|
|
}
|
|
}
|
|
|
|
function undo() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "undo",
|
|
"enforceLocked": document.getElementById("enforceLocked").checked,
|
|
"highlightedID": document.getElementById("highlightedID").value
|
|
}));
|
|
}
|
|
|
|
function refresh() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
"action": "refresh",
|
|
"enforceLocked": document.getElementById("enforceLocked").checked,
|
|
"highlightedID": document.getElementById("highlightedID").value
|
|
}));
|
|
}
|
|
</script>
|
|
</html>
|