624 lines
20 KiB
HTML
624 lines
20 KiB
HTML
{{NAVBAR}}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>App Control Configuration</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="global-style.css" rel="stylesheet">
|
|
<style>
|
|
#table{
|
|
overflow: auto;
|
|
}
|
|
#first_td_th {
|
|
width:325px;
|
|
}
|
|
#v2_td_th {
|
|
width:200px;
|
|
}
|
|
#color-picker{
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
background-color: transparent;
|
|
}
|
|
#select-anim {
|
|
width:175px;
|
|
}
|
|
input{
|
|
cursor:pointer;
|
|
}
|
|
#slide-density{
|
|
width: 70%;
|
|
}
|
|
#slide-speed{
|
|
accent-color: rgb(181, 53, 53);
|
|
width: 70%;
|
|
}
|
|
input::-webkit-slider-runnable-track {
|
|
width: 450px;
|
|
/*background: linear-gradient(to right, red, orange, yellow, lime, green, Turquoise, Cyan, Blue, Violet, Magenta, Crimson, red);*/
|
|
border: none;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>App Control Configuration</h1>
|
|
<!--<form action="/upload" method="POST" enctype="multipart/form-data"> -->
|
|
|
|
<fieldset>
|
|
<legend>Saved Animation Profiles</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<label for="selSavedAnimProfiles">Profiles:</label>
|
|
<select name= "selSavedAnimProfiles" id="selSaveddAnimProfiles" style="width:150px">
|
|
<option>(1)</option>
|
|
<option>(2)</option>
|
|
<option>(3)</option>
|
|
<option>(4)</option>
|
|
<option>(5)</option>
|
|
<option>(6)</option>
|
|
<option>(7)</option>
|
|
<option>(8)</option>
|
|
</select>
|
|
  
|
|
<label for="profileName">Name:</label>
|
|
<input type="text" name="inputProfileName" id="profileName">
|
|
   
|
|
<button id="saveProfile" onclick="sendProfilesToServer()">Save Profile</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<tr><td>
|
|
<div id="spacer-20"></div>
|
|
</td></tr>
|
|
|
|
<fieldset>
|
|
<legend id="legendLights">Countdown Animation ( White Fill )</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<label for="constlight">Light Min: (0-100)</label> <br>
|
|
<input type="range" name="constLightMin" id="constlight" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="constlight">Light Max:</label> <br>
|
|
<input type="range" name="constLightMax" id="constlight" min="0" max="100" value="90" step="1">
|
|
</td>
|
|
<td>
|
|
<!-- <button>Try</button> -->
|
|
</td>
|
|
</tr>
|
|
|
|
<tr><td>
|
|
<div id="spacer-10"></div>
|
|
</td></tr>
|
|
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<label for="Holdtime">Hold time(ms):</label><br>
|
|
<input type="number" name="holdTime" id="holdtime" min="0" max="5000" value="500">
|
|
</td>
|
|
<td>
|
|
<label for="Ramptime">Ramp down(ms):</label><br>
|
|
<input type="number" name="rampTime" id="Ramptime" min="0" max="5000" value="500">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim0">Event 1</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim0" id="select-anim0">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim0" id="color-picker" > 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim0" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density0" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed0" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(0)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim1">Event 2</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim1" id="select-anim1">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim1" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim1" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density1" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed1" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(1)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim2">Event 3</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim2" id="select-anim2">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim2" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim2" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density2" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed2" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(2)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim3">Event 4</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim3" id="select-anim3">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim3" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim3" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density3" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed3" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(3)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim4">Event 5</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim4" id="select-anim4">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim4" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim4" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density4" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed4" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(4)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim5">Event 6</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim5" id="select-anim5">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim5" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim5" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density5" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed5" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(5)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim6">Event 7</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim6" id="select-anim6">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim6" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim6" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density6" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed6" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(6)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend id="legendAnim7">Event 8</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim7" id="select-anim7">
|
|
<option>Animation 1</option>
|
|
<option>Animation 2</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Main:</label><br>
|
|
<input type="color" name="main-color-anim7" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Base:</label><br>
|
|
<input type="color" name="base-color-anim7" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="slide-density">Density:</label> <br>
|
|
<input type="range" name="slide-density7" id="slide-density" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<label for="slide-speed">Speed:</label> <br>
|
|
<input type="range" name="slide-speed7" id="slide-speed" min="0" max="100" value="25" step="1">
|
|
</td>
|
|
<td>
|
|
<button onclick="sendPlayAnim(7)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
<!--</form> -->
|
|
<script>
|
|
|
|
//const websocket = new WebSocket(`ws://${window.location.hostname}/wsdata`);
|
|
//const websocket = new WebSocket({{WEBSOCKET_ADDR}});
|
|
|
|
// Initialize Names
|
|
var animProf = [8];
|
|
var profilesJson;
|
|
const inputProfileName = document.getElementsByName('inputProfileName')[0];
|
|
const selSavedAnimProfiles = document.getElementsByName('selSavedAnimProfiles')[0];
|
|
const constLightMin = document.getElementsByName('constLightMin')[0];
|
|
const constLightMax = document.getElementsByName('constLightMax')[0];
|
|
const holdTime = document.getElementsByName('holdTime')[0];
|
|
const rampTime = document.getElementsByName('rampTime')[0];
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
animProf[i] = {
|
|
selAnim: document.getElementsByName('sel-anim' + i)[0],
|
|
colMain: document.getElementsByName('main-color-anim' + i)[0],
|
|
colBase: document.getElementsByName('base-color-anim' + i)[0],
|
|
density: document.getElementsByName('slide-density' + i)[0],
|
|
speed: document.getElementsByName('slide-speed' + i)[0]
|
|
};
|
|
}
|
|
|
|
// When new profile is selected
|
|
selSaveddAnimProfiles.addEventListener('change', function(event) {
|
|
const selectedValue = event.target.selectedIndex;
|
|
console.log('Selected value:', selectedValue);
|
|
setProfile(selectedValue);
|
|
});
|
|
|
|
// update the animation data
|
|
function setProfile(index){
|
|
// update profiles
|
|
inputProfileName.value = profilesJson.profiles[index].name;
|
|
//selSavedAnimProfiles.selectedIndex = index;
|
|
constLightMin.value = profilesJson.countdown.min;
|
|
constLightMax.value = profilesJson.countdown.max;
|
|
holdTime.value = profilesJson.countdown.hold;
|
|
rampTime.value = profilesJson.countdown.ramp;
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
animProf[i].selAnim.selectedIndex = profilesJson.profiles[index].anims[i].anim;
|
|
animProf[i].colMain.value = profilesJson.profiles[index].anims[i].colmain;
|
|
animProf[i].colBase.value = profilesJson.profiles[index].anims[i].colbase;
|
|
animProf[i].density.value = profilesJson.profiles[index].anims[i].density;
|
|
animProf[i].speed.value = profilesJson.profiles[index].anims[i].speed;
|
|
}
|
|
}
|
|
/*
|
|
// Send test animation for viewing
|
|
function sendPlayAnim(animIndex){
|
|
const type = 'try-anim';
|
|
console.log("try index= " + animIndex);
|
|
profileIndex = selSavedAnimProfiles.selectedIndex;
|
|
|
|
const playAnim = {
|
|
anim: animProf[animIndex].selAnim.selectedIndex,
|
|
colmain: animProf[animIndex].colMain.value,
|
|
colbase: animProf[animIndex].colBase.value,
|
|
density: animProf[animIndex].density.value,
|
|
speed: animProf[animIndex].speed.value
|
|
};
|
|
|
|
const payload = { type:"try-anim", data: JSON.stringify(playAnim) }
|
|
console.log(payload);
|
|
websocket.send( JSON.stringify(payload) );
|
|
}
|
|
|
|
// Send complete json to server
|
|
function sendProfilesToServer(event) {
|
|
//event.preventDefault();
|
|
|
|
var index = selSavedAnimProfiles.selectedIndex;
|
|
profilesJson.profiles[index].name = inputProfileName.value;
|
|
profilesJson.countdown = {
|
|
min: constLightMin.value,
|
|
max: constLightMax.value,
|
|
hold: holdTime.value,
|
|
ramp: rampTime.value
|
|
};
|
|
|
|
for(let i = 0; i < 8; i++){
|
|
profilesJson.profiles[index].anims[i] = {
|
|
anim: animProf[i].selAnim.selectedIndex,
|
|
colmain: animProf[i].colMain.value,
|
|
colbase: animProf[i].colBase.value,
|
|
density: animProf[i].density.value,
|
|
speed: animProf[i].speed.value
|
|
};
|
|
}
|
|
|
|
const payload = { type:"save-profiles", data: JSON.stringify(profilesJson) }
|
|
//console.log(profilesJson);
|
|
websocket.send( JSON.stringify(payload) );
|
|
};
|
|
|
|
// Receive profiles json
|
|
websocket.onmessage = (event) => {
|
|
try{
|
|
console.log('Received data:', event.data);
|
|
profilesJson = JSON.parse(event.data);
|
|
index = profilesJson.index;
|
|
|
|
inputProfileName.value = profilesJson.profiles[index].name;
|
|
//Upate profile list
|
|
for(let i = 0; i < 8; i++){
|
|
opText = selSavedAnimProfiles.options[i].textContent + ' - ' + profilesJson.profiles[i].name;
|
|
selSavedAnimProfiles.options[i].textContent = opText;
|
|
}
|
|
setProfile(index);
|
|
}
|
|
catch(error){
|
|
console.error('Error parsing received JSON data:', error);
|
|
}
|
|
};
|
|
|
|
// Get profiles json
|
|
websocket.onopen = () => {
|
|
const type = 'get-profiles';
|
|
const data = {};
|
|
|
|
const payload = { type: type, data: data }
|
|
websocket.send(JSON.stringify(payload));
|
|
};
|
|
|
|
websocket.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
|
|
function handleColorChange(event) {
|
|
const colorPicker = event.target;
|
|
const colorValue = colorPicker.value;
|
|
|
|
// Extract the hue and lightness values from the color value
|
|
const hue = colorValue.substring(1, 4);
|
|
const lightness = colorValue.substring(5, 7);
|
|
|
|
// Set the saturation value to a fixed value (e.g., 100%)
|
|
const lockedColorValue = `hsl(${hue}, 100%, ${lightness}%)`;
|
|
colorPicker.value = lockedColorValue;
|
|
}
|
|
*/
|
|
// save profilesJson
|
|
function postProfiles(){
|
|
fetch('/post', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'type': 'profiles'
|
|
} ,
|
|
body: JSON.stringify(jsonProfiles)
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
// Handle successful response
|
|
console.log('Request successful');
|
|
} else {
|
|
throw new Error('Request failed');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Handle any errors that occurred during the request
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
// send anim to test out
|
|
function postPlayAnim(animIndex){
|
|
fetch('/post', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'type': 'play-anim'
|
|
} ,
|
|
body: JSON.stringify(jsonProfiles.profiles[0])
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
// Handle successful response
|
|
console.log('Request successful');
|
|
} else {
|
|
throw new Error('Request failed');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Handle any errors that occurred during the request
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
// Get profiles
|
|
function getProfiles(){
|
|
fetch('/get',{
|
|
method: 'GET',
|
|
headers:{'type':'profiles'}
|
|
})
|
|
.then(response => {
|
|
const index = response.headers.get('index');
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error('Request failed');
|
|
}
|
|
})
|
|
.then(data => {
|
|
profilesJsaon = data;
|
|
console.log(data);
|
|
setProfile(index);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|