385 lines
11 KiB
HTML
385 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Booth Configuration Tools</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="/css/nav.css" rel="stylesheet">
|
|
<script src="hue-select.js"></script>
|
|
<style>
|
|
h1{
|
|
text-align: center;
|
|
margin: 0;
|
|
margin-bottom: 0;
|
|
font-size: larger;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #f0f0f0;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
min-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
.outer-container {
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4 20px 4 20px
|
|
}
|
|
.container {
|
|
border: 1px solid #ccc;
|
|
padding: 5px 20px 10px 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
width:90%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.center-text {
|
|
text-align: center;
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
margin-bottom: 10;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
.row > * {
|
|
flex: 1;
|
|
width: calc(50% - 20px);
|
|
margin-bottom: 8px;
|
|
}
|
|
input[type="number"], select {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
width: 50%;
|
|
}
|
|
button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar"></div>
|
|
<h1 name="h1element">System Setup</h1>
|
|
<div class="outer-container">
|
|
|
|
<div class="container">
|
|
<legend class="center-text" id="center-text">LED Strip #1 Settings</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>Control App:</label><br>
|
|
<select id="app-names-list" style="width: 80%;"></select>
|
|
</div>
|
|
<div>
|
|
<button onclick="OnSaveAllClick()">Save All</button>
|
|
</div>
|
|
<div>
|
|
<button onclick="OnReStartClick()">ReStart</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<legend class="center-text" id="center-text">LED Strip #1 Settings</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>Enabled</label><br>
|
|
<input type="checkbox" id="strip1-en">
|
|
</div>
|
|
<div>
|
|
<label for="inputLEDS">LED Count:</label><br>
|
|
<input type="number" id="strip1-led-count" min="1" max="200" step="1">
|
|
</div>
|
|
<div>
|
|
<label for=" ">Shift:</label><br>
|
|
<input type="number" id="strip1-shift" min="-199" max="199" step="1">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<label for=" ">Offset:</label><br>
|
|
<input type="number" id="strip1-offset" min="0" max="100" step="1">
|
|
</div>
|
|
<div>
|
|
<label>RGB Order:</label><br>
|
|
<select id="strip1-rgb">
|
|
<option> RGB</option>
|
|
<option> RBG</option>
|
|
<option> GRB</option>
|
|
<option> GBR</option>
|
|
<option> BRG</option>
|
|
<option> BGR</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Power:</label><br>
|
|
<select id="strip1-power">
|
|
<option> 100%</option>
|
|
<option> 50%</option>
|
|
<option> 25%</option>
|
|
<option> 12.5%</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
<legend class="center-text" id="center-text">Test Tool (Single LED)</legend>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<input type="radio" id="test-radio-strip1" name="strip" value="0" checked>
|
|
<label>Strip #1</label><br>
|
|
</div>
|
|
<div hidden>
|
|
<input type="radio" name="strip" value="1">
|
|
<label>Strip #2</label><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Pixel Index:</label><br>
|
|
<input type="number" id="test-pixel-index" min="-199" max="199" step="1" style="width: 80px;">
|
|
</div>
|
|
<div>
|
|
<hue-select id="test-hue"></hue-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<button onclick="OnSetPixelClick()">Set</button>
|
|
</div>
|
|
<div>
|
|
<button onclick="OnClearClick()">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
<legend class="center-text" id="center-text">Luma Stiks Found</legend>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik #1 SSID:</label><br>
|
|
<input type="checkbox" id="stick1-en">
|
|
<input id="stick1" >
|
|
</div>
|
|
<div>
|
|
<label>Stik #2 SSID:</label><br>
|
|
<input type="checkbox" id="stick2-en">
|
|
<input id="stick2" >
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik #3 SSID:</label><br>
|
|
<input type="checkbox" id="stick3-en">
|
|
<input id="stick3" >
|
|
</div>
|
|
<div>
|
|
<label>Stik #4 SSID:</label><br>
|
|
<input type="checkbox" id="stick4-en">
|
|
<input id="stick4" >
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik #5 SSID:</label><br>
|
|
<input type="checkbox" id="stick5-en">
|
|
<input id="stick5" >
|
|
</div>
|
|
<div>
|
|
<label>Stik #6 SSID:</label><br>
|
|
<input type="checkbox" id="stick6-en">
|
|
<input id="stick6" >
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik #7 SSID:</label><br>
|
|
<input type="checkbox" id="stick7-en">
|
|
<input id="stick7" >
|
|
</div>
|
|
<div>
|
|
<label>Stik #8 SSID:</label><br>
|
|
<input type="checkbox" id="stick8-en">
|
|
<input id="stick8" >
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" >
|
|
<div>
|
|
<button id="save-stiks">Scan</button>
|
|
</div>
|
|
<div>
|
|
<button id="save-stiks">Save</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
fetch('/www/navbar.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('navbar').innerHTML = data;
|
|
});
|
|
|
|
window.onload = function() { OnPageLoad(); };
|
|
|
|
const AppList = document.getElementById('app-names-list');
|
|
|
|
const Strip1Enabled = document.getElementById('strip1-en');
|
|
const Strip1LedCount = document.getElementById('strip1-led-count');
|
|
const Strip1Shift = document.getElementById('strip1-shift');
|
|
const Strip1Offset = document.getElementById('strip1-offset');
|
|
const Strip1RGB = document.getElementById('strip1-rgb');
|
|
const Strip1Power = document.getElementById('strip1-power');
|
|
|
|
const TestHue = document.getElementById('test-hue');
|
|
|
|
const PixelIndex = document.getElementById('test-pixel-index');
|
|
PixelIndex.value = 0;
|
|
|
|
function OnPageLoad(){
|
|
fetch_json_file('cfg/app-events.json').then(result =>{
|
|
jsAppEvents = result.data;
|
|
|
|
fetch_json_file('cfg/led-devices.json').then(result =>{
|
|
jsLedDevices = result.data;
|
|
|
|
FillControlAppList(jsAppEvents);
|
|
FillStripValues(jsLedDevices);
|
|
});
|
|
});
|
|
}
|
|
|
|
function FillStripValues(js){
|
|
Strip1Enabled.checked = js.strip1.en;
|
|
Strip1LedCount.value = js.strip1.size;
|
|
Strip1Shift.value = js.strip1.shift;
|
|
Strip1Offset.value = js.strip1.offset;
|
|
Strip1RGB.selectedIndex = js.strip1['rgb-order'];
|
|
Strip1Power.selectedIndex = js.strip1['power-div'];
|
|
SelectRgbByText(js.strip1['rgb-order'].toLowerCase());
|
|
}
|
|
|
|
function SelectRgbByText(rgbText){
|
|
let x = 0;
|
|
if(rgbText === "rgb"){x = 0;}
|
|
else if(rgbText === "rbg"){x = 0;}
|
|
else if(rgbText === "grb"){x = 0;}
|
|
else if(rgbText === "gbr"){x = 0;}
|
|
else if(rgbText === "brg"){x = 0;}
|
|
else if(rgbText === "bgr"){x = 0;}
|
|
Strip1RGB.selectedIndex = x;
|
|
}
|
|
|
|
function FillControlAppList(js){
|
|
jsApps = js.apps;
|
|
let x = 0;
|
|
jsApps.forEach(app => {
|
|
AddOptionToList(x, app.name);
|
|
x++;
|
|
});
|
|
|
|
AppList.selectedIndex = js.index;
|
|
}
|
|
|
|
function AddOptionToList(value, text){
|
|
const optionElement = document.createElement('option');
|
|
optionElement.value = value;
|
|
optionElement.textContent = text;
|
|
AppList.appendChild(optionElement);
|
|
}
|
|
|
|
function OnSetPixelClick(){
|
|
let jsPacket = {};
|
|
jsPacket.strip = 0;
|
|
i = PixelIndex.value;
|
|
if( i < -200){
|
|
PixelIndex.value = i;
|
|
return;
|
|
}
|
|
|
|
jsPacket.index = PixelIndex.value;
|
|
jsPacket.hue = TestHue.getSelectedHue();
|
|
SendJson(jsPacket, 'set-pixel');
|
|
}
|
|
|
|
function SendJson(js, type){
|
|
const params = new URLSearchParams();
|
|
params.append('type', type);
|
|
const url = '/post?' + params.toString();
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'text/plain'} ,
|
|
body: JSON.stringify(js)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) { throw new Error('Request failed'); }
|
|
})
|
|
.catch(error => { console.error(error); });
|
|
}
|
|
|
|
function OnClearClick(){
|
|
let jsPacket = {};
|
|
jsPacket.strip = 0;
|
|
SendJson(jsPacket, 'clear-strip');
|
|
}
|
|
|
|
function OnSaveAllClick(){
|
|
let jsPacket = {};
|
|
jsPacket.appindex = AppList.selectedIndex;
|
|
jsPacket.en1 = Strip1Enabled.checked;
|
|
jsPacket.count1 = Strip1LedCount.value;
|
|
jsPacket.shift1 = Strip1Shift.value;
|
|
jsPacket.offset1 = Strip1Offset.value;
|
|
jsPacket.rgb1 = Strip1RGB.value.toLowerCase();
|
|
jsPacket.power1 = Strip1Power.selectedIndex;
|
|
SendJson(jsPacket, 'setup-save');
|
|
}
|
|
|
|
function OnReStartClick(){
|
|
let jsPacket = {};
|
|
jsPacket.test = "restart";
|
|
SendJson(jsPacket, 'restart');
|
|
}
|
|
|
|
function fetch_json_file(filename){
|
|
return fetch(filename)
|
|
.then(response => {
|
|
if (response.ok) { return response.json(); }
|
|
else { throw new Error('fetching ' + fileName + ' failed'); }
|
|
})
|
|
.then(data => { return{data:data}; })
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |