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

UPD: Move device bar to preview

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-24 01:48:52 +01:00
parent 4d7bd0f946
commit 1331df5b44
4 changed files with 48 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ProfileManager.vue
View File

@@ -13,18 +13,16 @@
</div>
</div>
<Separator />
<DeviceBar />
<SchemaTest />
</div>
</template>
<script>
import ScrambleReveal from '@/components/effects/ScrambleText.vue'
import SchemaTest from '@/components/SchemaTest.vue'
import DeviceBar from '@/components/device-gui/DeviceBar.vue'
import { Separator } from '@/components/ui/separator/index.js'
export default {
name: 'ProfileManager',
components: { Separator, DeviceBar: DeviceBar, SchemaTest, ScrambleText: ScrambleReveal },
components: { Separator, SchemaTest, ScrambleText: ScrambleReveal },
}
</script>

23
src/components/device-gui/DeviceBar.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import { ref, computed } from 'vue'
import { Input } from '@/components/ui/input'
const model = defineModel({ type: Number, default: 60 })
@@ -11,8 +10,6 @@ const count = ref(40)
const percent = ref(60)
const gap_width = ref(2)
const show_controls = ref(true)
const rect_width = computed(() => {
return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
})
@@ -38,10 +35,8 @@ function onMouseUp() {
</script>
<template>
<div class="flex-1 flex flex-col justify-center items-center my-2">
{{ current_pos }}
<span @mousedown="onMouseDown">
<svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
<svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="32">
<g>
<rect
v-for="(_, i) in count"
@@ -50,44 +45,38 @@ function onMouseUp() {
:width="rect_width"
:height="i===0 || i===count-1 ? 8 : 5"
:x="6+gap_width+i*(rect_width+gap_width)"
y="0" />
y="10" />
<g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
<rect
style="fill:#000"
:width="6"
height="13"
x="0"
y="0"
y="10"
/>
<rect
style="fill:#c66936"
:width="2"
height="11"
:x="2"
y="0"
y="10"
/>
<rect
style="fill:#c66936"
:width="2"
:height="2"
x="0"
y="11"
y="21"
/>
<rect
style="fill:#c66936"
:width="2"
:height="2"
:x="4"
y="11"
y="21"
/>
</g>
</g>
</svg>
</span>
<div v-if="show_controls ">
<Input v-model="percent" type="number" min="0" max="100" placeholder="Fill" class="m-2" />
<Input v-model="count" type="number" min="1" placeholder="Count" class="m-2" />
<Input v-model="width" type="number" min="4" placeholder="Width" class="m-2" />
</div>
</div>
</template>

46
src/components/device-gui/DevicePreview.vue
View File

@@ -1,12 +1,35 @@
<template>
<div>
<div>
<div class="p-4">
<div class="px-4 py-5">
<h1 class="text-lg">
<ScrambleReveal :text="$t('preview.title')" />
</h1>
</div>
<QuickPreview />
<div class="flex justify-center">
<div
class="flex bg-cover w-72 h-72 mb-7"
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
<div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
<div class="self-center w-8 mb-1 opacity-50">
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
</div>
<h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
{{ feedbackConfig.pos }}</h2>
<div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
<DeviceBar class="self-center"/>
<div id="scales" class="flex self-center text-xs py-0" />
<div
v-for="profileConfig in profiles"
:key="profileConfig"
class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
{{ profileConfig.profileDesc }}
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<h2>{{ $t('config_options.title') }}</h2>
@@ -14,12 +37,25 @@
</div>
</template>
<script>
import QuickPreview from '@/components/old/QuickPreview.vue'
import ScrambleReveal from '@/components/effects/ScrambleText.vue'
import ConfigSelect from '@/components/ConfigSelect.vue'
import axios from 'axios'
import DeviceBar from '@/components/device-gui/DeviceBar.vue'
export default {
name: 'DevicePreview',
components: { ConfigSelect, ScrambleReveal, QuickPreview },
components: { DeviceBar, ScrambleReveal },
data() {
return {
profiles: [],
}
},
async created() {
try {
const res = await axios.get('http://localhost:3001/profiles/5867')
this.profiles = res.data
} catch (e) {
console.error(e)
}
},
}
</script>

81
src/components/old/QuickPreview.vue
View File

@@ -1,81 +0,0 @@
<script setup>
</script>
<template>
<div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
<div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
<div class="self-center w-8 mb-1 opacity-50">
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo" />
</div>
<h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
{{ feedbackConfig.pos }}</h2>
<div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
<div id="scales" class="flex self-center text-xs py-0"></div>
<div
v-for="profileConfig in profiles"
:key="profileConfig"
class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
{{ profileConfig.profileDesc }}
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'NanoConfig',
props: ['id'],
data() {
return {
profiles: [],
}
},
async created() {
try {
const res = await axios.get('http://localhost:3001/profiles/5867')
this.profiles = res.data
} catch (e) {
console.error(e)
}
},
}
// var startPos = 0;
// var totalPos = 340;
// var currentPos = 156;
// var minRange = 0;
// var maxRange = 40;
// document.addEventListener("DOMContentLoaded", function(){
// //....
// // Quick Preview GUI indicator Render
// var scale = document.getElementById("scale");
// Number.prototype.map = function (in_min, in_max, out_min, out_max) {
// return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
// }
// var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
// for(var i = 0; i < 40; i=i+1){
// scale.innerHTML += "<div class='bg-white'></div>";
// if (i - 1 < guiCurrentPos) {
// scale.getElementsByTagName("div")[i].classList.add("active");
// if (i == guiCurrentPos) {
// scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
// }
// }
// }
// });
</script>