Updates from pi
This commit is contained in:
@ -1,123 +1,295 @@
|
||||
<template>
|
||||
<div class="bg-dark text-white">
|
||||
<div class="bg-dark text-white">
|
||||
<div class="container">
|
||||
<div class="row py-4 text-center" id="header">
|
||||
<h1> Tropicananass Leds </h1>
|
||||
<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>
|
||||
|
||||
<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 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">
|
||||
<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 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 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 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 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">
|
||||
<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 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 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"/>
|
||||
<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'
|
||||
import Reconnect from "./components/Reconnect.vue";
|
||||
import ModeSelect from "./components/ModeSelect.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
components: {
|
||||
Reconnect,
|
||||
ModeSelect
|
||||
}
|
||||
}
|
||||
Reconnect,
|
||||
ModeSelect,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user