83 lines
2.9 KiB
Vue
83 lines
2.9 KiB
Vue
<template>
|
|
<h1 class="text-white text-2xl w-full font-bold text-center my-24">Frankenstein Test</h1>
|
|
<div class="flex w-full justify-center gap-10">
|
|
<div class="bg-neutral-800 rounded-2xl p-5 h-min">
|
|
<h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Monster</h2>
|
|
<div class="flex flex-col items-center">
|
|
<color-input disable-alpha v-model="color" />
|
|
<div class="space-x-3">
|
|
<button @click="submitColor" class="px-5 py-2 bg-sky-400 rounded my-5">
|
|
Submit Color
|
|
</button>
|
|
<button class="px-3 py-2 bg-red-700 rounded my-5">
|
|
reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-neutral-800 rounded-2xl p-5 h-min">
|
|
<h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Hallway</h2>
|
|
<div class="flex flex-col items-center">
|
|
<input v-model="brightness" type="range" min="0" max="100" class="w-40">
|
|
<label class="text-white mt-2">BRIGHTNESS: {{ brightness }}% </label>
|
|
<button @click="submitBrightness" class="px-5 py-2 bg-sky-400 w-full rounded mt-4">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-neutral-800 rounded-2xl p-5">
|
|
<h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Electrons</h2>
|
|
<div class="flex flex-col items-center">
|
|
<color-input disable-alpha v-model="pixel.color" />
|
|
<div class="flex items-center mt-4">
|
|
<label class="text-white mr-2">Pixel: </label>
|
|
<input v-model="pixel.pixel" type="number" min="0" max="182" class="w-40">
|
|
</div>
|
|
<button @click="submitPixel" class="px-5 py-2 bg-sky-400 w-full rounded my-5">
|
|
Submit Color
|
|
</button>
|
|
<button @click="useLedTest(pixel.color.r, pixel.color.g, pixel.color.b)" class="px-5 py-2 bg-sky-400 w-full rounded mb-5">
|
|
Test
|
|
</button>
|
|
<button @click="resetStrip" class="px-5 py-2 bg-red-700 w-full rounded">
|
|
Turn Off
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue"
|
|
import { useSerial } from "../composables/useSerial"
|
|
import { useLedTest } from "../composables/useAnimations"
|
|
|
|
const color = ref({ r: 0, g: 128, b: 255, a: 1});
|
|
const brightness = ref(100);
|
|
const pixel = ref({ color: { r: 64, g: 255, b: 255, a: 1 }, pixel: 0 });
|
|
|
|
const submitColor = () => {
|
|
useSerial("SET_STRIP_COLOR:" + `${color.value.r},${color.value.g},${color.value.b}`);
|
|
}
|
|
|
|
const submitBrightness = () => {
|
|
useSerial("SET_LIGHT:" + brightness.value * 2.55);
|
|
}
|
|
|
|
const submitPixel = () => {
|
|
useSerial("SET_LED:" + `${pixel.value.pixel},${pixel.value.color.r},${pixel.value.color.g},${pixel.value.color.b}`);
|
|
}
|
|
|
|
const resetStrip = () => {
|
|
useSerial("SET_LED_OFF");
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.color-input.user .box {
|
|
/* make clickable box a 100x100 circle */
|
|
width: 100px;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|