124 lines
6.1 KiB
Vue
124 lines
6.1 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>
|