matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Device element selection

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-03 23:15:53 +01:00
parent 332984ba07
commit 4398cd2492
3 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/device/DevicePreview.vue
View File

@@ -24,7 +24,14 @@
</span>
</div>
</div>
<DeviceKeys class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto" />
<div
class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto"
:class="{'outline outline-white': selected==='ring',
'hover:outline outline-zinc-400': selected!=='ring'}"
@click="selected='ring'" />
<DeviceKeys
:selected="selected" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
@select="args => selected=args" />
</div>
</div>
</template>
@@ -34,11 +41,13 @@ import LogoMidi from '@/assets/logos/logoMidi.svg'
import DeviceBar from '@/components/device/DeviceBar.vue'
import { useStore } from '@/store'
import ScrambleText from '@/components/effects/ScrambleText.vue'
import { computed, onMounted, onUnmounted, ref } from '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 selected = ref('a')
const value = ref(69)
const barValue = computed(() => value.value / 127 * 100)