Added white channel for SpotVisualization

src/stage/visualization/fixtureVisualizations/DmxChannelSelector.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 }>();
 
 const options = computed(() => {
-    const options: { label: string; value: number }[] = [];
+    const options: { label: string; value: number }[] = [{ label: "None", value: -1 }];
     for (let i = 0; i < props.fixture.channelNames.length; i++) {
         options.push({
             label: props.fixture.channelNames[i],

src/stage/visualization/fixtureVisualizations/spot/SpotVisualizationSettings.vue

@@ -31,6 +31,9 @@
         <LabelledFormField label="DMX Channel Blue">
             <DmxChannelSelector v-model="config.colorChannels[2]" :fixture="props.visualization.fixture" />
         </LabelledFormField>
+        <LabelledFormField label="DMX Channel White">
+            <DmxChannelSelector v-model="config.colorChannels[3]" :fixture="props.visualization.fixture" />
+        </LabelledFormField>
     </div>
     <div>
         <Button outlined label="Apply" :disabled="!dirty" @click="save" />

src/stage/visualization/fixtureVisualizations/spot/spot.renderer.ts

@@ -79,10 +79,13 @@ export class SpotRenderer extends BaseRenderer<SpotVisualizationConfig, number[]
     }
 
     public override onFixtureValueUpdate(data: number[]): void {
-        const red = data[this.config.colorChannels[0]] ?? 0;
-        const green = data[this.config.colorChannels[1]] ?? 0;
-        const blue = data[this.config.colorChannels[2]] ?? 0;
+        const [redChannel, greenChannel, blueChannel, whiteChannel] = this.config.colorChannels;
+        const red = redChannel >= 0 ? data[this.config.colorChannels[0]] ?? 0 : 0;
+        const green = greenChannel >= 0 ? data[this.config.colorChannels[1]] ?? 0 : 0;
+        const blue = blueChannel >= 0 ? data[this.config.colorChannels[2]] ?? 0 : 0;
+        const white = whiteChannel >= 0 ? data[this.config.colorChannels[3]] ?? 0 : 0;
         const color = new THREE.Color(red / 255, green / 255, blue / 255);
+        color.addScalar(white / 255);
         this.volumeMaterial.uniforms.lightColor.value = color;
         this.spotlight.color = color;
     }

src/stage/visualization/fixtureVisualizations/spot/spot.visualization.ts

@@ -19,7 +19,7 @@ export class SpotVisualization extends BaseVisualization<DmxFixture, SpotVisuali
         super(fixture, {
             position: [0, 0, 0],
             target: [0, 0, 0],
-            colorChannels: [0, 0, 0],
+            colorChannels: [-1, -1, -1, -1],
         });
         void this.renderer.createFixtureRenderer(fixture.id, this.type, this.config);
     }

src/stage/visualization/fixtureVisualizations/spot/types.ts

@@ -1,5 +1,5 @@
 export interface SpotVisualizationConfig {
     position: [number, number, number];
     target: [number, number, number];
-    colorChannels: [number, number, number];
+    colorChannels: [number, number, number, number];
 }