296 lines
8.0 KiB
Vue
296 lines
8.0 KiB
Vue
<template>
|
|
<div class="bg-dark text-white">
|
|
<div class="container">
|
|
<div class="row py-4 text-center" id="header">
|
|
<h1>Tropicananass Leds</h1>
|
|
</div>
|
|
|
|
<Reconnect></Reconnect>
|
|
|
|
<ModeSelect mode_list="{Test, Artnet, Auto, Manual}"></ModeSelect>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<h1>Hello !!</h1>
|
|
<img alt="Vue logo" src="./assets/logo.png" />
|
|
<HelloWorld msg="Welcome to Your Vue.js App" />
|
|
</template>
|
|
|
|
<script>
|
|
import Reconnect from "./components/Reconnect.vue";
|
|
import ModeSelect from "./components/ModeSelect.vue";
|
|
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
Reconnect,
|
|
ModeSelect,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|