148 lines
4.9 KiB
Vue
148 lines
4.9 KiB
Vue
<template>
|
|
<div class="aspect-[800/1100]">
|
|
<div
|
|
class="bg-contain bg-top bg-no-repeat h-full w-full relative"
|
|
:style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}">
|
|
<Transition name="fade">
|
|
<div v-if="store.connected" class="px-10 h-12 flex justify-between items-center">
|
|
<h2>
|
|
<ScrambleText :delay="100" scramble-on-mount :fill-interval="50" :replace-interval="50" text="Nano_D++" />
|
|
</h2>
|
|
<div class="font-mono text-sm">
|
|
<span class="text-muted-foreground">Firmware: </span>
|
|
<ScrambleText :delay="100" scramble-on-mount :fill-interval="50" :replace-interval="50" text="v1.3.2a" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<Transition name="fade-delayed">
|
|
<DeviceLEDRing
|
|
v-if="store.connected" :value="barValue"
|
|
class="absolute h-[66%] top-[12.5%] left-0 right-0 mx-auto" />
|
|
</Transition>
|
|
|
|
<div
|
|
class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden"
|
|
style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)">
|
|
<div
|
|
v-if="store.connected"
|
|
class="absolute flex flex-col items-center text-center pb-2 mix-blend-screen">
|
|
<img :src="LogoMidi" alt="midi-logo" class="opacity-50 h-4">
|
|
<h2 class="font-pixellg text-5xl">{{ parseInt(value) }}</h2>
|
|
<div class="font-pixelsm text-md">HIGH PASS</div>
|
|
<DeviceBar v-model="barValue" :count="30" :width="120" />
|
|
<span class="w-36 font-pixelsm text-[7pt] text-muted-foreground uppercase">
|
|
KORG MINILOGUE HIGH PASS FILTER 0-127
|
|
</span>
|
|
</div>
|
|
<div v-else class="flex flex-col items-center text-center mix-blend-screen">
|
|
<ScrambleText
|
|
:text="offlineText"
|
|
character-set="_()*=0011"
|
|
scramble-on-mount
|
|
:fill-interval="50"
|
|
:replace-interval="50"
|
|
class="uppercase font-pixelsm text-[7pt] text-muted-foreground"
|
|
@finish="nextOfflineText" />
|
|
</div>
|
|
</div>
|
|
<Transition name="fade-delayed">
|
|
<button
|
|
v-if="store.connected"
|
|
class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
|
|
:class="{'outline outline-white': store.selectedFeature==='knob',
|
|
'hover:outline outline-zinc-400': store.selectedFeature!=='knob'}"
|
|
@click="store.selectConfigFeature('knob')" />
|
|
</Transition>
|
|
<Transition name="fade-delayed">
|
|
<DeviceKeys
|
|
v-if="store.connected"
|
|
class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
|
|
:selected="store.selectedFeature === 'key' ? store.selectedKey : ''"
|
|
@select="store.selectKey" />
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import RenderNano from '@/assets/images/renderNano.png'
|
|
import LogoMidi from '@/assets/logos/logoMidi.svg'
|
|
import DeviceBar from '@/components/device/DeviceBar.vue'
|
|
import { useStore } from '@/store'
|
|
import ScrambleText from '@/components/common/ScrambleText.vue'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
|
|
import gsap from 'gsap'
|
|
import DeviceKeys from '@/components/device/DeviceKeys.vue'
|
|
|
|
const value = ref(69)
|
|
|
|
const barValue = computed(() => value.value / 127 * 100)
|
|
|
|
const store = useStore()
|
|
|
|
const targetValue = ref(69)
|
|
const animateValue = () => {
|
|
targetValue.value = Math.floor(Math.random() * 127)
|
|
gsap.to(value, { duration: 1, value: targetValue.value, ease: 'power2.inOut' })
|
|
setTimeout(animateValue, 1500 + Math.random() * 2000)
|
|
}
|
|
|
|
const offlineText = ref('NO DEVICE CONNECTED')
|
|
const offlineTexts = [
|
|
'AWAITING CONNECTION',
|
|
'ARE YOU STILL THERE?',
|
|
'DEVICE OFFLINE',
|
|
'AWAITING CONNECTION',
|
|
'I MISS YOU',
|
|
'AWAITING CONNECTION',
|
|
'NO DEVICE CONNECTED',
|
|
'IS ANYONE THERE?',
|
|
'AWAITING CONNECTION',
|
|
'DEVICE OFFLINE',
|
|
'NAP TIME',
|
|
'NO DEVICE CONNECTED',
|
|
]
|
|
|
|
let offlineTextIndex = 0
|
|
const nextOfflineText = () => {
|
|
if (offlineText.value === '') {
|
|
offlineText.value = offlineTexts[offlineTextIndex]
|
|
offlineTextIndex = (offlineTextIndex + 1) % offlineTexts.length
|
|
} else {
|
|
setTimeout(() => {
|
|
offlineText.value = ''
|
|
}, 3500)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
animateValue()
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 500ms ease;
|
|
}
|
|
|
|
.fade-slow-enter-active,
|
|
.fade-slow-leave-active,
|
|
.fade-delayed-enter-active,
|
|
.fade-delayed-leave-active {
|
|
transition: opacity 1000ms ease;
|
|
}
|
|
|
|
.fade-delayed-enter-active,
|
|
.fade-slow-enter-active {
|
|
transition-delay: 150ms;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to,
|
|
.fade-slow-enter-from,
|
|
.fade-slow-leave-to,
|
|
.fade-delayed-enter-from,
|
|
.fade-delayed-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style> |