Show DMX graphs

src/components/DmxControl.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import {Icon} from '@iconify/vue'
-import Tq, {useAppConfigStore, useThemeStore} from 'tweeq'
+import Tq, {useAppConfigStore} from 'tweeq'
 
 import {useDmxStore} from '@/stores/dmx'
 import {useProjectStore} from '@/stores/project'
 
 const project = useProjectStore()
 const dmx = useDmxStore()
 const appConfig = useAppConfigStore()
-const theme = useThemeStore()
 const showAll = appConfig.ref('dmxControl.showAll', true)
 
 function getVisibility(index: number) {
@@ -27,10 +26,7 @@ function toggleVisibility(index: number) {
 }
 
 function getColor(index: number) {
-	return (
-		project.visibleProperties[`dmx${index + 1}`]?.color ??
-		theme.colorGrayOnBackground
-	)
+	return project.visibleProperties[`dmx${index + 1}`]?.color ?? 'white'
 }
 
 function setColor(index: number, color: string) {

src/components/Timeline/TimelineGraph.vue

@@ -5,6 +5,7 @@ import {Euler, Quaternion} from 'three'
 import {computed} from 'vue'
 
 import {useCameraStore} from '@/stores/camera'
+import {useDmxStore} from '@/stores/dmx'
 import {useProjectStore} from '@/stores/project'
 import {useTimerStore} from '@/stores/timer'
 import {useTrackerStore} from '@/stores/tracker'
@@ -15,6 +16,7 @@ const project = useProjectStore()
 const timer = useTimerStore()
 const camera = useCameraStore()
 const tracker = useTrackerStore()
+const dmx = useDmxStore()
 
 const positionMatrixInverse = computed(() => {
 	const m = mat4.clone(tracker.matrix)
@@ -225,6 +227,18 @@ const targetRolls = computed(() => {
 	return targetRotations.value.map(r => (r ? r[2] : null))
 })
 
+//------------------------------------------------------------------------------
+// DMX
+const dmxValues = computed<(number | null)[][]>(() => {
+	const visibleAddresses = range(16).filter(
+		i => project.visibleProperties[`dmx${i + 1}`]?.visible
+	)
+
+	return visibleAddresses.map(i => {
+		return project.previewKomas.map(koma => koma.shots[0]?.dmx?.at(i) ?? null)
+	})
+})
+
 //------------------------------------------------------------------------------
 // Utils
 
@@ -375,6 +389,17 @@ const viewBox = computed(() => {
 			style="--stroke-dasharray: 1 7"
 			transform="translate(0, 0.3) scale(1, 0.7)"
 		/>
+		<!-- DMX -->
+		<TimelineGraphPolyline
+			v-for="(values, i) in dmxValues"
+			:key="i"
+			:values="values"
+			:valueAtCaptureFrame="dmx.values[i].value"
+			:color="project.visibleProperties['dmx' + (i + 1)]?.color ?? 'white'"
+			:range="[0, 1]"
+			style="--stroke-width: 2px; --stroke-linecap: square"
+			transform="translate(0, 0.5) scale(1, 0.5)"
+		/>
 	</svg>
 </template>
 

src/components/Timeline/TimelineGraphPolyline.vue

@@ -10,9 +10,9 @@ interface Props {
 	referenceValues?: unknown[]
 	color: string
 	valueAtCaptureFrame?: unknown
+	range?: [min: number, max: number]
 	minRange?: number
 	maxRange?: number
-	startFrame?: number
 	filter?: (v: number) => number
 }
 
@@ -53,6 +53,8 @@ const realtimeValues = computed(() => {
 })
 
 const rangeComputed = computed<[min: number, max: number]>(() => {
+	if (props.range) return props.range
+
 	let [min, max] = capturedRange.value
 
 	if (max - min < props.minRange) {