138 lines
7.2 KiB
HTML
138 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Config</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="description" content="Accueil">
|
|
<meta name="author" content="Tropicananass">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
|
|
<link rel="stylesheet" href="bootstrap-5.1.1-dist/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="index.css" type="text/css">
|
|
|
|
<script src="bootstrap-5.1.1-dist/js/bootstrap.min.js"></script>
|
|
<script src="iro.js"></script>
|
|
<script src="index_network_handler.js"></script>
|
|
<script src="index_ui_handler.js"></script>
|
|
</head>
|
|
|
|
<body class="bg-dark text-white">
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-black" id="reconnectBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="connectionLostLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="connectionLostLabel">Connection lost</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Try reconnecting in <span id="time-left">60s</span>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" onclick="{timeout=1;}">Reconnect now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row py-4 text-center" id="header">
|
|
<h1> Tropicananass Leds </h1>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<div class="col d-flex justify-content-center">
|
|
<form id="mode-input" class="btn-group" role="group" aria-label="Select mode">
|
|
<input type="radio" class="btn-check" name="mode-selection" id="test-mode" autocomplete="off" value="0" checked>
|
|
<input type="radio" class="btn-check" name="mode-selection" id="artnet-mode" autocomplete="off" value="1">
|
|
<input type="radio" class="btn-check" name="mode-selection" id="auto-mode" autocomplete="off" value="2">
|
|
<input type="radio" class="btn-check" name="mode-selection" id="manual-mode" autocomplete="off" value="3">
|
|
</form>
|
|
</div>
|
|
<div class="col d-flex justify-content-center">
|
|
<form id="pattern-input" class="btn-group" role="group" aria-label="Select pattern">
|
|
<input type="radio" class="btn-check" name="pattern-selection" id="pulse-pattern" autocomplete="off" value="0" checked>
|
|
<input type="radio" class="btn-check" name="pattern-selection" id="travel-pattern" autocomplete="off" value="1">
|
|
<input type="radio" class="btn-check" name="pattern-selection" id="strobe-pattern" autocomplete="off" value="2">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<legend class="col-12 col-sm-auto">Channel</legend>
|
|
<!-- <div class="col d-flex justify-content-center">
|
|
<form id="channelGlobal-input" class="btn-group" role="group" aria-label="Select channel">
|
|
<input type="radio" class="btn-check" name="channelGlobal-selection" id="all-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channelGlobal-selection" id="none-channel" autocomplete="off">
|
|
</form>
|
|
</div> -->
|
|
<div class="col d-flex justify-content-center">
|
|
<form id="channel-input" class="btn-group" role="group" aria-label="Select channel">
|
|
<!-- todo: Change to checkbox -->
|
|
<input type="radio" class="btn-check" name="channel-selection" id="all-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="0-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="1-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="2-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="3-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="4-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="5-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="6-channel" autocomplete="off" checked>
|
|
<input type="radio" class="btn-check" name="channel-selection" id="7-channel" autocomplete="off" checked>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Sensitivity</label>
|
|
<span class="col-3 col-sm-1 text-end">50</span>
|
|
<div class="col col-sm-9">
|
|
<input type="range" class="form-range" id="formControlRange" oninput="rangeCallback(this)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Gravity</label>
|
|
<span class="col-3 col-sm-1 text-end">50</span>
|
|
<div class="col col-sm-9">
|
|
<input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<div class="col">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="modulateColor" onclick="colorModulateCallback(this)">
|
|
<label class="form-check-label" for="modulateColor">Modulate color</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<div id="mainPicker" class="col d-flex justify-content-center"></div>
|
|
<div id="modulationPicker" class="col d-none d-flex justify-content-center"></div>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Modulation speed</label>
|
|
<span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
|
|
<div class="col col-sm-9">
|
|
<input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-2 gy-2">
|
|
<label class="form-label col-9 col-sm-2 text-sm-end" for="formControlRange">Freq</label>
|
|
<span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
|
|
<div class="col col-sm-9">
|
|
<input type="range" class="form-range col-auto" id="formControlRange" oninput="rangeCallback(this)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
<script src="index.js"></script> |