756 lines
28 KiB
HTML
756 lines
28 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:300px;
|
|
}
|
|
#v2_td_th {
|
|
width:180px;
|
|
}
|
|
#color-picker{
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
background-color: transparent;
|
|
}
|
|
#select-anim {
|
|
width:175px;
|
|
}
|
|
select{
|
|
width:150px;
|
|
}
|
|
#slide-density{
|
|
width: 70%;
|
|
}
|
|
#slide-speed{
|
|
accent-color: rgb(181, 53, 53);
|
|
width: 70%;
|
|
}
|
|
input::-webkit-slider-runnable-track {
|
|
width: 450px;
|
|
border: none;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 name="h1element">App Control Configuration</h1>
|
|
|
|
<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" onchange="OnSavedAnimProfilesChanged(this)">
|
|
<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">Rename:</label>
|
|
<input type="text" name="inputProfileName" id="profileName" style="width:140px">
|
|
   
|
|
<button id="saveProfile" onclick="SaveProfilesToServer()">Save</button>
|
|
</td>
|
|
</tr>
|
|
<div ></div>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<tr><td>
|
|
<div id="spacer-20"></div>
|
|
</td></tr>
|
|
|
|
<fieldset>
|
|
<legend id="legendLights">Countdown ( Constant Light )</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<label id="constLightMin-label" for="constlightMin">Light Min:</label> <br>
|
|
<input type="range" name="constLightMin" id="constlightMin" min="0" max="99" value="25" step="1" onchange="updateLabel('Light Min: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="constLightMax-label" for="constlightMax">Light Max:</label> <br>
|
|
<input type="range" name="constLightMax" id="constlightMax" min="1" max="100" value="90" step="1" onchange="updateLabel('Light Max: ', this)">
|
|
</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 dn(ms):</label><br>
|
|
<input type="number" name="rampTime" id="Ramptime" min="0" max="5000" value="500">
|
|
</td>
|
|
<tr><td>
|
|
<div id="spacer-10"></div>
|
|
</td></tr>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset0">
|
|
<legend name="legendAnim0">Event0</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">White Fill Animation: </label> <br>
|
|
<select name="sel-anim0" id="select-anim0"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim0" id="color-picker" > 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim0" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density0-label" for="slide-density0">Density:</label> <br>
|
|
<input type="range" name="slide-density0" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed0-label" for="slide-speed0">Speed:</label> <br>
|
|
<input type="range" name="slide-speed0" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(0)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset1">
|
|
<legend name="legendAnim1">Event1</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim1" id="select-anim1"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim1" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim1" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density1-label" for="slide-density1">Density:</label> <br>
|
|
<input type="range" name="slide-density1" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed1-label" for="slide-speed1">Speed:</label> <br>
|
|
<input type="range" name="slide-speed1" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(1)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset2">
|
|
<legend name="legendAnim2">Event2</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim2" id="select-anim2"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim2" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim2" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density2-label" for="slide-density2">Density:</label> <br>
|
|
<input type="range" name="slide-density2" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed2-label" for="slide-speed2">Speed:</label> <br>
|
|
<input type="range" name="slide-speed2" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(2)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset3">
|
|
<legend name="legendAnim3">Event3</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim3" id="select-anim3"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim3" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim3" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density3-label" for="slide-density3">Density:</label> <br>
|
|
<input type="range" name="slide-density3" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed3-label" for="slide-speed3">Speed:</label> <br>
|
|
<input type="range" name="slide-speed3" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(3)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset4">
|
|
<legend name="legendAnim4">Event4</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim4" id="select-anim4"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim4" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim4" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density4-label" for="slide-density4">Density:</label> <br>
|
|
<input type="range" name="slide-density4" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed4-label" for="slide-speed4">Speed:</label> <br>
|
|
<input type="range" name="slide-speed4" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(4)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset5">
|
|
<legend name="legendAnim5">Event5</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim5" id="select-anim5"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim5" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim5" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density5-label" for="slide-density5">Density:</label> <br>
|
|
<input type="range" name="slide-density5" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed5-label" for="slide-speed5">Speed:</label> <br>
|
|
<input type="range" name="slide-speed5" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(5)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset6">
|
|
<legend name="legendAnim6">Event6</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim6" id="select-anim6"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim6" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim6" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density6-label" for="slide-density6">Density:</label> <br>
|
|
<input type="range" name="slide-density6" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed6-label" for="slide-speed6">Speed:</label> <br>
|
|
<input type="range" name="slide-speed6" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(6)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset7">
|
|
<legend name="legendAnim7">Event7</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim7" id="select-anim7"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim7" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim7" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density7-label" for="slide-density7">Density:</label> <br>
|
|
<input type="range" name="slide-density7" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed7-label" for="slide-speed7">Speed:</label> <br>
|
|
<input type="range" name="slide-speed7" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(7)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset8">
|
|
<legend name="legendAnim8">Event8</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim8" id="select-anim8"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim8" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim8" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density8-label" for="slide-density8">Density:</label> <br>
|
|
<input type="range" name="slide-density8" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed8-label" for="slide-speed8">Speed:</label> <br>
|
|
<input type="range" name="slide-speed8" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(8)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset9">
|
|
<legend name="legendAnim9">Event9</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim9" id="select-anim9"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim9" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim9" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density9-label" for="slide-density9">Density:</label> <br>
|
|
<input type="range" name="slide-density9" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed9-label" for="slide-speed9">Speed:</label> <br>
|
|
<input type="range" name="slide-speed9" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(9)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset10">
|
|
<legend name="legendAnim10">Event10</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim10" id="select-anim10"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim10" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim10" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density10-label" for="slide-density10">Density:</label> <br>
|
|
<input type="range" name="slide-density10" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed10-label" for="slide-speed10">Speed:</label> <br>
|
|
<input type="range" name="slide-speed10" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(10)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset name="event-fieldset11">
|
|
<legend name="legendAnim11">Event11</legend>
|
|
<table>
|
|
<tr>
|
|
<td id="v2_td_th">
|
|
<label for="sel-count-anim">Animation: </label> <br>
|
|
<select name="sel-anim11" id="select-anim11"></select>
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col1:</label><br>
|
|
<input type="color" name="col1-color-anim11" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label for="color-picker">Col2:</label><br>
|
|
<input type="color" name="col2-color-anim11" id="color-picker"> 
|
|
</td>
|
|
<td>
|
|
<label id="slide-density11-label" for="slide-density11">Density:</label> <br>
|
|
<input type="range" name="slide-density11" id="slide-density" min="0" max="100" value="25" step="1" onchange="updateLabel('Density: ', this)">
|
|
</td>
|
|
<td>
|
|
<label id="slide-speed11-label" for="slide-speed11">Speed:</label> <br>
|
|
<input type="range" name="slide-speed11" id="slide-speed" min="0" max="100" value="25" step="1" onchange="updateLabel('Speed: ', this)">
|
|
</td>
|
|
<td>
|
|
<button onclick="postPlayAnim(11)">Try</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<script>
|
|
window.onload = function() { getProfilesAndEvents(); };
|
|
|
|
// Initialize Names
|
|
const EVENTCOUNT = 12;
|
|
const PROFILECOUNT = 8;
|
|
var animEvent = [EVENTCOUNT];
|
|
var profilesJson;
|
|
var eventsJson;
|
|
var animListJson;
|
|
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];
|
|
var eventFieldset = [EVENTCOUNT];
|
|
var eventLegend = [EVENTCOUNT];
|
|
var lastAnimProfileIndex = 0;
|
|
var h1element = document.getElementsByName("h1element")[0];
|
|
|
|
// set event names by app type and if they are visible
|
|
for (let i = 0; i < EVENTCOUNT; i++) {
|
|
eventFieldset[i] = document.getElementsByName("event-fieldset" + i)[0];
|
|
eventLegend[i] = document.getElementsByName("legendAnim" + i)[0];
|
|
}
|
|
|
|
for (let i = 0; i < EVENTCOUNT; i++) {
|
|
animEvent[i] = {
|
|
anim: document.getElementsByName('sel-anim' + i)[0],
|
|
col1: document.getElementsByName('col1-color-anim' + i)[0],
|
|
col2: document.getElementsByName('col2-color-anim' + i)[0],
|
|
density: document.getElementsByName('slide-density' + i)[0],
|
|
speed: document.getElementsByName('slide-speed' + i)[0]
|
|
};
|
|
}
|
|
|
|
// update the form with animation data when profile list item selected
|
|
function setProfile(index){
|
|
var changeEvent = new Event("change");
|
|
|
|
// update profiles
|
|
inputProfileName.value = "";
|
|
constLightMin.value = profilesJson.countdown.min;
|
|
constLightMin.dispatchEvent(changeEvent);
|
|
constLightMax.value = profilesJson.countdown.max;
|
|
constLightMax.dispatchEvent(changeEvent);
|
|
holdTime.value = profilesJson.countdown.hold;
|
|
rampTime.value = profilesJson.countdown.ramp;
|
|
|
|
// Update Events
|
|
for (let i = 0; i < EVENTCOUNT; i++) {
|
|
animEvent[i].anim.selectedIndex = profilesJson.profiles[index].events[i].anim;
|
|
animEvent[i].col1.value = profilesJson.profiles[index].events[i].col1;
|
|
animEvent[i].col2.value = profilesJson.profiles[index].events[i].col2;
|
|
animEvent[i].density.value = profilesJson.profiles[index].events[i].density;
|
|
animEvent[i].density.dispatchEvent(changeEvent);
|
|
animEvent[i].speed.value = profilesJson.profiles[index].events[i].speed;
|
|
animEvent[i].speed.dispatchEvent(changeEvent);
|
|
}
|
|
}
|
|
|
|
// When new profile is selected
|
|
function OnSavedAnimProfilesChanged( event ){
|
|
console.log('Anim Profile Selected index:', event.selectedIndex);
|
|
console.log('Anim Profile Updated index:', lastAnimProfileIndex);
|
|
updateProfilesJson(lastAnimProfileIndex); // save current setting in ram but on in server yet
|
|
setProfile(event.selectedIndex);
|
|
lastAnimProfileIndex = event.selectedIndex;
|
|
}
|
|
|
|
//Update the profilesJson obj with updated values
|
|
function updateProfilesJson(index){
|
|
|
|
//let index = selSavedAnimProfiles.selectedIndex;
|
|
if(inputProfileName.value != ""){
|
|
profilesJson.profiles[index].name = inputProfileName.value;
|
|
selSavedAnimProfiles.options[index].text = '(' + (index + 1) + ') ' + inputProfileName.value;
|
|
selSavedAnimProfiles.options[index].value = inputProfileName.value;
|
|
}
|
|
profilesJson.countdown.min = constLightMin.value;
|
|
profilesJson.countdown.max = constLightMax.value;
|
|
profilesJson.countdown.hold = holdTime.value;
|
|
profilesJson.countdown.ramp = rampTime.value;
|
|
|
|
// Update Events
|
|
for (let i = 0; i < EVENTCOUNT; i++) {
|
|
profilesJson.profiles[index].events[i].anim = animEvent[i].anim.selectedIndex;
|
|
profilesJson.profiles[index].events[i].col1 = animEvent[i].col1.value;
|
|
profilesJson.profiles[index].events[i].col2 = animEvent[i].col2.value;
|
|
profilesJson.profiles[index].events[i].density = animEvent[i].density.value;
|
|
profilesJson.profiles[index].events[i].speed = animEvent[i].speed.value;
|
|
}
|
|
}
|
|
|
|
// save profilesJson
|
|
function SaveProfilesToServer(){
|
|
// update profilesJson obj with current settings before posting
|
|
updateProfilesJson(selSavedAnimProfiles.selectedIndex);
|
|
profilesJson["profile-index"] = selSavedAnimProfiles.selectedIndex; // Set at active profile
|
|
|
|
const params = new URLSearchParams();
|
|
params.append('type', 'anim-profiles');
|
|
const url = '/post?' + params.toString();
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'text/plain' } ,
|
|
body: JSON.stringify(profilesJson) // convert to string
|
|
})
|
|
.then(response => {
|
|
if (response.ok) { console.log('Request successful');}
|
|
else { throw new Error('Request failed');}
|
|
})
|
|
.catch(error => { console.error(error);});
|
|
}
|
|
|
|
// send anim event to test out
|
|
function postPlayAnim(eventIndex){
|
|
let tempAnimProps = {};
|
|
tempAnimProps.event = eventIndex;
|
|
tempAnimProps.anim = animEvent[eventIndex].anim.selectedIndex;
|
|
tempAnimProps.col1 = animEvent[eventIndex].col1.value
|
|
tempAnimProps.col2 = animEvent[eventIndex].col2.value
|
|
tempAnimProps.density = animEvent[eventIndex].density.value;
|
|
tempAnimProps.speed = animEvent[eventIndex].speed.value;
|
|
|
|
const params = new URLSearchParams();
|
|
params.append('type', 'play-anim');
|
|
const url = '/post?' + params.toString();
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'text/plain'} ,
|
|
body: JSON.stringify(tempAnimProps)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) { throw new Error('Request failed'); }
|
|
})
|
|
.catch(error => { console.error(error); });
|
|
}
|
|
|
|
// Get profiles
|
|
function getProfilesAndEvents(){
|
|
try{
|
|
fetch_json_file('anim-profiles').then(result =>{
|
|
profilesJson = result.data;
|
|
//console.log({profilesJson});
|
|
|
|
fetch_json_file('app-events').then(result =>{
|
|
eventsJson = result.data.apps[result.data.index]
|
|
//console.log({evetnsJson});
|
|
|
|
fetch_json_file('anim-list').then(result =>{
|
|
animListJson = result.data;
|
|
//console.log({animListJson});
|
|
|
|
FillWhitefilList(animListJson.whitefills);
|
|
FillAnimationsList(animListJson.animations);
|
|
FillProfilesList(profilesJson);
|
|
selSavedAnimProfiles.selectedIndex = profilesJson['profile-index'];
|
|
lastAnimProfileIndex = selSavedAnimProfiles.selectedIndex;
|
|
setProfile(selSavedAnimProfiles.selectedIndex);
|
|
NameAndHideEvents();
|
|
});
|
|
});
|
|
});
|
|
}catch (error){
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function fetch_json_file(fileName){
|
|
const params = new URLSearchParams();
|
|
params.append('type', fileName);
|
|
const url = '/get?' + params.toString();
|
|
|
|
return fetch(url, {
|
|
method: 'GET'
|
|
})
|
|
.then(response => {
|
|
if (response.ok) { return response.json(); }
|
|
else { throw new Error('fetching ' + fileName + ' failed'); }
|
|
})
|
|
.then(data => { return{data:data}; })
|
|
}
|
|
|
|
// Rename legends and or hide unused events property boxes
|
|
function NameAndHideEvents(){
|
|
h1element.textContent = eventsJson.name;
|
|
for(let i = 0; i < EVENTCOUNT; i++){
|
|
eventLegend[i].textContent = eventsJson.events[i];
|
|
if(eventsJson.events[i] === ''){
|
|
eventFieldset[i].style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fill Profiles List
|
|
function FillProfilesList(profJson){
|
|
for(let i = 0; i < PROFILECOUNT; i++){
|
|
selSavedAnimProfiles.options[i].text = '(' + (i + 1) + ') ' + profJson.profiles[i].name;
|
|
selSavedAnimProfiles.options[i].value = profJson.profiles[i].name;
|
|
}
|
|
}
|
|
|
|
function FillWhitefilList(whiteJson){
|
|
for(let x = 0; x < whiteJson.length; x++){
|
|
var op = document.createElement("option");
|
|
op.text = whiteJson[x];
|
|
animEvent[0].anim.appendChild(op);
|
|
}
|
|
}
|
|
|
|
// Fill Animations drop down lists
|
|
function FillAnimationsList(animJson){
|
|
for(let x = 0; x < animJson.length; x++){
|
|
if(animJson[x] == ""){break;}// stop if blank
|
|
for(let i = 1; i < EVENTCOUNT; i++){
|
|
var op = document.createElement("option");
|
|
op.text = animJson[x];
|
|
op.value = animJson[x];
|
|
animEvent[i].anim.appendChild(op);
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateLabel(labelText, slider) {
|
|
try{
|
|
let label = document.getElementById(slider.name + "-label");
|
|
label.innerHTML = labelText + slider.value;
|
|
}catch(e){
|
|
debugger;
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|