@rocketshow/designer 1.35.0 → 1.37.0

package/fesm2022/rocketshow-designer.mjs

@@ -119,18 +119,61 @@ class FixtureCapability {
             return;
         }
         this.type = FixtureCapabilityType[data.type];
-        this.angleStart = data.angleStart;
-        this.angleEnd = data.angleEnd;
         this.color = data.color;
         if (data.dmxRange) {
             this.dmxRange = data.dmxRange;
         }
         this.wheel = data.wheel;
         this.slotNumber = data.slotNumber;
+        this.comment = data.comment;
+        this.soundControlled = data.soundControlled;
+        this.shutterEffect = data.shutterEffect;
+        this.randomTiming = data.randomTiming;
+        this.angle = data.angle;
+        this.angleStart = data.angleStart;
+        this.angleEnd = data.angleEnd;
+        this.speed = data.speed;
+        this.speedStart = data.speedStart;
+        this.speedEnd = data.speedEnd;
         this.brightness = data.brightness;
         this.brightnessStart = data.brightnessStart;
         this.brightnessEnd = data.brightnessEnd;
-        this.comment = data.comment;
+        this.duration = data.duration;
+        this.durationStart = data.durationStart;
+        this.durationEnd = data.durationEnd;
+        this.colorTemperature = data.colorTemperature;
+        this.colorTemperatureStart = data.colorTemperatureStart;
+        this.colorTemperatureEnd = data.colorTemperatureEnd;
+        this.soundSensitivity = data.soundSensitivity;
+        this.soundSensitivityStart = data.soundSensitivityStart;
+        this.soundSensitivityEnd = data.soundSensitivityEnd;
+        this.horizontalAngle = data.horizontalAngle;
+        this.horizontalAngleStart = data.horizontalAngleStart;
+        this.horizontalAngleEnd = data.horizontalAngleEnd;
+        this.verticalAngle = data.verticalAngle;
+        this.verticalAngleStart = data.verticalAngleStart;
+        this.verticalAngleEnd = data.verticalAngleEnd;
+        this.distance = data.distance;
+        this.distanceStart = data.distanceStart;
+        this.distanceEnd = data.distanceEnd;
+        this.openPercent = data.openPercent;
+        this.openPercentStart = data.openPercentStart;
+        this.openPercentEnd = data.openPercentEnd;
+        this.frostIntensity = data.frostIntensity;
+        this.frostIntensityStart = data.frostIntensityStart;
+        this.frostIntensityEnd = data.frostIntensityEnd;
+        this.fogOutput = data.fogOutput;
+        this.fogOutputStart = data.fogOutputStart;
+        this.fogOutputEnd = data.fogOutputEnd;
+        this.time = data.time;
+        this.timeStart = data.timeStart;
+        this.timeEnd = data.timeEnd;
+        this.insertion = data.insertion;
+        this.insertionStart = data.insertionStart;
+        this.insertionEnd = data.insertionEnd;
+        this.colors = data.colors;
+        this.colorsStart = data.colorsStart;
+        this.colorsEnd = data.colorsEnd;
     }
 }
 
@@ -1029,9 +1072,21 @@ class FixtureService {
             }
         }
     }
+    fixtureUuidAndPixelKeyEquals(fixtureUuid1, fixtureUuid2, pixelKey1, pixelKey2) {
+        return fixtureUuid1 === fixtureUuid2 && ((pixelKey1 == null && pixelKey2 == null) || pixelKey1 === pixelKey2);
+    }
     getCachedFixtureByUuid(uuid, pixelKey) {
         for (const fixture of this.cachedFixtures) {
-            if (fixture.fixture.uuid === uuid && ((!fixture.pixelKey && !pixelKey) || fixture.pixelKey === pixelKey)) {
+            if (this.fixtureUuidAndPixelKeyEquals(fixture.fixture.uuid, uuid, fixture.pixelKey, pixelKey)) {
+                return fixture;
+            }
+        }
+        // not yet found -> try searching the fixture without pixelKey for the general channels
+        if (pixelKey) {
+            return undefined;
+        }
+        for (const fixture of this.cachedFixtures) {
+            if (!fixture.pixelKey && fixture.fixture.uuid === uuid) {
                 return fixture;
             }
         }
@@ -1250,9 +1305,12 @@ class FixtureService {
         }
         return undefined;
     }
+    getChannelNameWithPixelKey(templateChannelName, pixelKey) {
+        return templateChannelName.replace('$pixelKey', pixelKey);
+    }
     addCachedChannel(channels, channel, templateChannelName, pixelKey, profile) {
         const cachedFixtureChannel = new CachedFixtureChannel();
-        const channelName = templateChannelName.replace('$pixelKey', pixelKey);
+        const channelName = this.getChannelNameWithPixelKey(templateChannelName, pixelKey);
         cachedFixtureChannel.channel = channel;
         cachedFixtureChannel.name = channelName;
         cachedFixtureChannel.capabilities = this.getCapabilitiesByChannel(cachedFixtureChannel.channel, channelName, profile);
@@ -1267,6 +1325,26 @@ class FixtureService {
     alphanumericSort(a, b) {
         return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
     }
+    getAllPixelKeys(profile) {
+        let result = [];
+        for (let pixelKeyX of profile.matrix.pixelKeys) {
+            for (let pixelKeyY of pixelKeyX) {
+                for (let pixelKeyZ of pixelKeyY) {
+                    if (pixelKeyZ) {
+                        result.push(pixelKeyZ);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    getAllPixelGroups(profile) {
+        let result = [];
+        for (const property of Object.keys(profile.matrix.pixelGroups)) {
+            result.push(property);
+        }
+        return result;
+    }
     getPixelKeysInOrder(profile, repeatFor) {
         let result = [];
         // could contain just a single string (e.g. 'eachPixelABC') or
@@ -1274,6 +1352,9 @@ class FixtureService {
             // an array of pixel (groups)
             result = repeatFor;
         }
+        else if (repeatFor.length === 0) {
+            return result;
+        }
         else if (repeatFor[0] === 'eachPixelABC') {
             // Gets computed into an alphanumerically sorted list of all pixelKeys
             if (profile.matrix.pixelCount.length === 3) {
@@ -1286,23 +1367,13 @@ class FixtureService {
                 }
             }
             else {
-                for (let pixelKeyX of profile.matrix.pixelKeys) {
-                    for (let pixelKeyY of pixelKeyX) {
-                        for (let pixelKeyZ of pixelKeyY) {
-                            if (pixelKeyZ) {
-                                result.push(pixelKeyZ);
-                            }
-                        }
-                    }
-                }
+                result = result.concat(this.getAllPixelKeys(profile));
             }
             result.sort(this.alphanumericSort);
         }
         else if (repeatFor[0] === 'eachPixelGroup') {
             // Gets computed into an array of all pixel group keys, ordered by appearance in the JSON file
-            for (const property of Object.keys(profile.matrix.pixelGroups)) {
-                result.push(property);
-            }
+            result = result.concat(this.getAllPixelGroups(profile));
         }
         else if (repeatFor[0] === 'eachPixelXYZ') {
             for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
@@ -1426,13 +1497,27 @@ class FixtureService {
         for (const channel of mode.channels) {
             if (channel.name && !pixelKey) {
                 // direct reference to a channel
+                // don't check the fine channels. only add the coarse channel.
+                let channelFound = false;
                 for (const availableChannelName of Object.keys(profile.availableChannels)) {
-                    // don't check the fine channels. only add the coarse channel.
                     if (channel.name === availableChannelName) {
                         const availableChannel = profile.availableChannels[availableChannelName];
                         this.addCachedChannel(channels, availableChannel, availableChannelName, null, profile);
                     }
                 }
+                // check the template channels, if not found in the available channels
+                if (!channelFound) {
+                    for (const templateChannelName of Object.keys(profile.templateChannels)) {
+                        let existingPixelKeys = this.getAllPixelKeys(profile).concat(this.getAllPixelGroups(profile));
+                        for (const existingPixelKey of existingPixelKeys) {
+                            const channelName = this.getChannelNameWithPixelKey(templateChannelName, existingPixelKey);
+                            if (channel.name === channelName) {
+                                const templateChannel = profile.templateChannels[templateChannelName];
+                                this.addCachedChannel(channels, templateChannel, channelName, existingPixelKey, profile);
+                            }
+                        }
+                    }
+                }
             }
             else {
                 // reference a channel through a pixel matrix
@@ -1479,28 +1564,30 @@ class FixtureService {
         let mode = this.getModeByFixture(profile, fixture);
         // add the unique pixel keys
         for (let channel of mode.channels) {
-            this.getPixelKeysInOrder(profile, channel.repeatFor).forEach((str) => pixelKeys.add(str));
+            this.getPixelKeysInOrder(profile, channel.repeatFor).forEach((str) => {
+                pixelKeys.add(str);
+            });
         }
         return Array.from(pixelKeys);
     }
+    // does the fixture have a general channel without reference to specific pixel keys in the current mode?
+    fixtureHasGeneralChannel(fixture) {
+        let profile = this.getProfileByUuid(fixture.profileUuid);
+        let mode = this.getModeByFixture(profile, fixture);
+        // add the unique pixel keys
+        for (let channel of mode.channels) {
+            if (this.getPixelKeysInOrder(profile, channel.repeatFor).length === 0) {
+                return true;
+            }
+        }
+        return false;
+    }
     updateCachedFixtures() {
         // calculate some frequently used values as a cache to save cpu time
         // afterwards
         this.cachedFixtures = [];
         for (const fixture of this.projectService.project.fixtures) {
-            const pixelKeys = this.fixtureGetUniquePixelKeys(fixture);
-            if (pixelKeys.length > 0) {
-                for (let pixelKey of pixelKeys) {
-                    const cachedFixture = new CachedFixture();
-                    cachedFixture.fixture = fixture;
-                    cachedFixture.pixelKey = pixelKey;
-                    cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
-                    cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
-                    cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, pixelKey);
-                    this.cachedFixtures.push(cachedFixture);
-                }
-            }
-            else {
+            if (this.fixtureHasGeneralChannel(fixture)) {
                 const cachedFixture = new CachedFixture();
                 cachedFixture.fixture = fixture;
                 cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
@@ -1508,6 +1595,16 @@ class FixtureService {
                 cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, null);
                 this.cachedFixtures.push(cachedFixture);
             }
+            const pixelKeys = this.fixtureGetUniquePixelKeys(fixture);
+            for (let pixelKey of pixelKeys) {
+                const cachedFixture = new CachedFixture();
+                cachedFixture.fixture = fixture;
+                cachedFixture.pixelKey = pixelKey;
+                cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
+                cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
+                cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, pixelKey);
+                this.cachedFixtures.push(cachedFixture);
+            }
         }
     }
     capabilitiesMatch(type1, type2, color1, color2, wheel1, wheel2, profileUuid1, profileUuid2) {
@@ -1766,9 +1863,12 @@ class PresetService {
             }
         }
     }
+    fixtureUuidAndPixelKeyEquals(fixtureUuid1, fixtureUuid2, pixelKey1, pixelKey2) {
+        return fixtureUuid1 === fixtureUuid2 && ((!pixelKey1 && !pixelKey2) || pixelKey1 === pixelKey2);
+    }
     getPresetFixture(preset, fixtureUuid, pixelKey) {
         for (const fixture of preset.fixtures) {
-            if (fixture.fixtureUuid === fixtureUuid && ((!fixture.pixelKey && !pixelKey) || fixture.pixelKey === pixelKey)) {
+            if (this.fixtureUuidAndPixelKeyEquals(fixture.fixtureUuid, fixtureUuid, fixture.pixelKey, pixelKey)) {
                 return fixture;
             }
         }
@@ -1824,21 +1924,19 @@ class PresetService {
             return;
         }
         for (const fixture of this.projectService.project.fixtures) {
-            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-            if (pixelKeys.length > 0) {
-                for (const pixelKey of pixelKeys) {
-                    if (!this.fixtureIsSelected(fixture, pixelKey)) {
-                        const presetFixture = new PresetFixture();
-                        presetFixture.fixtureUuid = fixture.uuid;
-                        presetFixture.pixelKey = pixelKey;
-                        this.selectedPreset.fixtures.push(presetFixture);
-                    }
+            if (this.fixtureService.fixtureHasGeneralChannel(fixture)) {
+                if (!this.fixtureIsSelected(fixture, null)) {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixture.uuid;
+                    this.selectedPreset.fixtures.push(presetFixture);
                 }
             }
-            else {
-                if (!this.fixtureIsSelected(fixture, null)) {
+            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+            for (const pixelKey of pixelKeys) {
+                if (!this.fixtureIsSelected(fixture, pixelKey)) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixture.uuid;
+                    presetFixture.pixelKey = pixelKey;
                     this.selectedPreset.fixtures.push(presetFixture);
                 }
             }
@@ -1976,8 +2074,8 @@ class PresetService {
     }
     hasCapabilityType(type) {
         // there is at least one channel with at least one intensity capability
-        for (const projectFixture of this.selectedPreset.fixtures) {
-            const fixture = this.fixtureService.getCachedFixtureByUuid(projectFixture.fixtureUuid, projectFixture.pixelKey);
+        for (const presetFixture of this.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getCachedFixtureByUuid(presetFixture.fixtureUuid, presetFixture.pixelKey);
             for (const channel of fixture.channels) {
                 if (channel.channel) {
                     for (const capability of channel.capabilities) {
@@ -3037,6 +3135,14 @@ class PreviewService {
             // roughness: 0.5,
             // metalness: 0.5,
         });
+        this.fixtureMaterial = new THREE.MeshLambertMaterial({
+            color: 0x0d0d0d,
+            emissive: 0x0d0d0d,
+        });
+        this.fixtureSelectedMaterial = new THREE.MeshLambertMaterial({
+            color: 0xff00ff,
+            emissive: 0xff00ff,
+        });
     }
     getAlreadyCalculatedFixture(fixtures, fixtureIndex) {
         // Has this fixture already been calculated (same universe and dmx start address as a fixture before)
@@ -3120,29 +3226,34 @@ class PreviewService {
     getFixtureIndex(preset, fixtureUuid, pixelKey) {
         let index = 0;
         const countedFirstDmxChannelPixelKey = [];
+        if (!this.presetService.getPresetFixture(preset, fixtureUuid, pixelKey)) {
+            // fixture is not in preset
+            return undefined;
+        }
         // Loop over the global fixtures to retain the order
         for (const projectFixture of this.projectService.project.presetFixtures) {
-            const presetFixture = this.presetService.getPresetFixture(preset, fixtureUuid, pixelKey);
-            if (!presetFixture) {
-                // Not found in the preset
-                return undefined;
-            }
-            if (projectFixture.fixtureUuid === fixtureUuid && ((!projectFixture.pixelKey && !pixelKey) || projectFixture.pixelKey === pixelKey)) {
-                return index;
-            }
-            const fixture = this.fixtureService.getFixtureByUuid(projectFixture.fixtureUuid);
-            const firstDmxChannelAndFixtureUuid = {
-                firstDmxChannel: fixture.dmxFirstChannel,
-                pixelKey: projectFixture.pixelKey,
-            };
-            const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
-                ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
-            // don't count fixtures on the same channel as already counted ones
-            if (!exists) {
-                index++;
-                countedFirstDmxChannelPixelKey.push(firstDmxChannelAndFixtureUuid);
+            for (const presetFixture of preset.fixtures) {
+                if (this.presetService.fixtureUuidAndPixelKeyEquals(projectFixture.fixtureUuid, presetFixture.fixtureUuid, projectFixture.pixelKey, presetFixture.pixelKey)) {
+                    if (this.presetService.fixtureUuidAndPixelKeyEquals(projectFixture.fixtureUuid, fixtureUuid, projectFixture.pixelKey, pixelKey)) {
+                        return index;
+                    }
+                    const fixture = this.fixtureService.getFixtureByUuid(projectFixture.fixtureUuid);
+                    const firstDmxChannelAndFixtureUuid = {
+                        firstDmxChannel: fixture.dmxFirstChannel,
+                        pixelKey: projectFixture.pixelKey,
+                    };
+                    const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
+                        ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
+                    // don't count fixtures on the same channel as already counted ones
+                    if (!exists) {
+                        index++;
+                        countedFirstDmxChannelPixelKey.push(firstDmxChannelAndFixtureUuid);
+                    }
+                    break;
+                }
             }
         }
+        return undefined;
     }
     getPresetIntensity(preset, timeMillis) {
         // When fading is in progress (on preset or scene-level), the current preset does not
@@ -3375,43 +3486,6 @@ class PreviewService {
         }
         return calculatedFixtures;
     }
-    setUniverseValues(fixtures, masterDimmerValue) {
-        // TODO only, if monitoring is enabled
-        return;
-        // // Reset all DMX universes
-        // for (const universe of this.universeService.universes) {
-        //   universe.channelValues = [];
-        //   for (let i = 0; i < 512; i++) {
-        //     universe.channelValues.push(0);
-        //   }
-        // }
-        // // loop over each fixture
-        // fixtures.forEach((channelValues: FixtureChannelValue[], cachedFixture: CachedFixture) => {
-        //   // TODO Get the correct universe for this fixture
-        //   const universe: Universe = this.universeService.getUniverseByUuid(cachedFixture.fixture.dmxUniverseUuid);
-        //   // loop over each channel for this fixture
-        //   for (let channelIndex = 0; channelIndex < cachedFixture.mode.channels.length; channelIndex++) {
-        //     const channelObj = cachedFixture.mode.channels[channelIndex];
-        //     if (typeof channelObj === 'string') {
-        //       const channelName = channelObj;
-        //       // match this mode channel with a channel value
-        //       for (const channelValue of channelValues) {
-        //         const channel = this.fixtureService.getChannelByName(cachedFixture, channelName);
-        //         if (channel && channel.channel) {
-        //           const fineIndex = channel.channel.fineChannelAliases.indexOf(channelName);
-        //           if (channel.name === channelValue.channelName || fineIndex > -1) {
-        //             const universeChannel = cachedFixture.fixture.dmxFirstChannel + channelIndex;
-        //             const dmxValue =
-        //               Math.floor(channelValue.value / Math.pow(256, channel.channel.fineChannelAliases.length - (fineIndex + 1))) % 256;
-        //             // TODO
-        //             break;
-        //           }
-        //         }
-        //       }
-        //     }
-        //   }
-        // });
-    }
     fixtureIsSelected(uuid, pixelKey, presets) {
         for (const preset of presets) {
             if (this.presetService.getPresetFixture(preset.preset, uuid, pixelKey)) {
@@ -3492,6 +3566,10 @@ class PreviewService {
         this.scene.add(mesh);
         this.stageMeshes.push(mesh);
     }
+    ngOnDestroy() {
+        this.fixtureMaterial.dispose();
+        this.fixtureSelectedMaterial.dispose();
+    }
     static { this.ɵfac = function PreviewService_Factory(t) { return new (t || PreviewService)(i0.ɵɵinject(PresetService), i0.ɵɵinject(FixtureService), i0.ɵɵinject(SceneService), i0.ɵɵinject(TimelineService), i0.ɵɵinject(ProjectService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PreviewService, factory: PreviewService.ɵfac, providedIn: 'root' }); }
 }
@@ -3503,8 +3581,9 @@ class PreviewService {
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: SceneService }, { type: TimelineService }, { type: ProjectService }], null); })();
 
 class Fixture3d {
-    constructor(fixtureService, fixture, scene) {
+    constructor(fixtureService, previewService, fixture, scene, hasSpotLight = false) {
         this.fixtureService = fixtureService;
+        this.previewService = previewService;
         this.pointLightMaxIntensity = 2;
         this.spotLightLightMaxIntensity = 10;
         this.fixtureHasDimmer = false;
@@ -3513,13 +3592,10 @@ class Fixture3d {
         this.dimmer = 0;
         this.isSelected = false;
         this.isLoaded = false;
+        this.hasSpotLight = false;
         this.fixture = fixture;
         this.scene = scene;
-        // TODO Don't create it for each fixture but pass it from the preview service
-        this.selectedMaterial = new THREE.MeshLambertMaterial({
-            color: 0xff00ff,
-            emissive: 0xff00ff,
-        });
+        this.hasSpotLight = hasSpotLight;
         // evaluate, various capabilities of this fixture
         for (const cachedChannel of this.fixture.channels) {
             if (cachedChannel.channel) {
@@ -3539,28 +3615,88 @@ class Fixture3d {
             }
         }
     }
+    createSpotlightMaterial() {
+        const vertexShader = `
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+
+    void main(){
+      vNormal = normalize(normalMatrix * normal);
+
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+      vWorldPosition = worldPosition.xyz;
+
+      gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }`;
+        const fragmentShader = `
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+
+    uniform vec3 lightColor;
+    uniform float	opacity;
+    uniform vec3 spotPosition;
+    uniform float attenuation;
+    uniform float	anglePower;
+
+    void main(){
+      float intensity;
+
+      intensity	= distance(vWorldPosition, spotPosition) / attenuation;
+      intensity	= 1.0 - clamp(intensity, 0.0, 1.0);
+
+      vec3 normal	= vec3(vNormal.x, vNormal.y, abs(vNormal.z));
+      float angleIntensity	= pow(dot(normal, vec3(0.0, 0.0, 1.0)), anglePower);
+      intensity	= intensity * angleIntensity * opacity;
+
+      gl_FragColor	= vec4(lightColor, intensity);
+    }`;
+        this.spotlightMaterial = new THREE.ShaderMaterial({
+            uniforms: {
+                attenuation: {
+                    type: 'f',
+                    value: 800.0,
+                },
+                anglePower: {
+                    type: 'f',
+                    value: 2,
+                },
+                spotPosition: {
+                    type: 'v3',
+                    value: new THREE.Vector3(0, 0, 0),
+                },
+                lightColor: {
+                    type: 'c',
+                    value: new THREE.Color('white'),
+                },
+                opacity: {
+                    type: 'f',
+                    value: 1.0,
+                },
+            },
+            vertexShader,
+            fragmentShader,
+            transparent: true,
+            depthWrite: false,
+        });
+    }
     createObjects() {
-        // Add the spotlight
-        this.spotLight = new THREE.SpotLight(0xffffff, 50000);
-        this.spotLight.angle = 2;
-        this.spotLight.penumbra = 1;
-        this.spotLight.decay = 0.01;
-        this.spotLight.distance = 0;
-        this.spotLight.intensity = 1;
-        this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);
-        this.scene.add(this.spotLightHelper);
-        const spotLightTarget = new THREE.Object3D();
-        this.spotLight.target = spotLightTarget;
-        this.spotlightGroup = new THREE.Object3D();
-        this.spotlightGroup.add(this.spotLight);
-        this.spotlightGroup.add(spotLightTarget);
-        this.spotLight.position.set(0, -1.4, 0);
-        spotLightTarget.position.set(0, -10, 0);
-        this.createSpotLightBeam();
-        // Add the point light for the surrounding light
-        this.pointLight = new THREE.PointLight(0xffffff, 500, 0, 0.1);
-        this.spotlightGroup.add(this.pointLight);
-        this.pointLight.position.set(0, -1.4, 0);
+        if (this.hasSpotLight) {
+            this.createSpotlightMaterial();
+            this.spotLight = new THREE.SpotLight(0xffffff, 50000);
+            this.spotLight.angle = 2;
+            this.spotLight.penumbra = 1;
+            this.spotLight.decay = 0.01;
+            this.spotLight.distance = 0;
+            this.spotLight.intensity = 1;
+            const spotLightTarget = new THREE.Object3D();
+            this.spotLight.target = spotLightTarget;
+            this.spotlightGroup = new THREE.Object3D();
+            this.spotlightGroup.add(this.spotLight);
+            this.spotlightGroup.add(spotLightTarget);
+            this.spotLight.position.set(0, -1.4, 0);
+            spotLightTarget.position.set(0, -10, 0);
+            this.createSpotLightBeam();
+        }
     }
     getCapabilityInValue(channel, value) {
         for (const capability of channel.capabilities) {
@@ -3641,11 +3777,7 @@ class Fixture3d {
         // Take the color into account for the beam (don't show a black beam)
         const color = new THREE.Color('rgb(' + this.colorRed + ', ' + this.colorGreen + ', ' + this.colorBlue + ')');
         const intensityColor = Math.max(this.colorRed, this.colorGreen, this.colorBlue);
-        if (this.pointLight) {
-            this.pointLight.color = color;
-            this.pointLight.intensity = this.pointLightMaxIntensity * this.dimmer;
-        }
-        if (this.spotLight) {
+        if (this.hasSpotLight) {
             this.spotLight.color = color;
             this.spotLightBeam.material.uniforms.lightColor.value = color;
             this.spotLightBeam.material.uniforms.opacity.value = Math.min(intensityColor, this.dimmer);
@@ -3685,82 +3817,13 @@ class Fixture3d {
             }
         }
     }
-    atmosphereMat() {
-        const vertexShader = `
-      varying vec3 vNormal;
-      varying vec3 vWorldPosition;
-
-      void main(){
-        vNormal = normalize(normalMatrix * normal);
-
-        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-        vWorldPosition = worldPosition.xyz;
-
-        gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }`;
-        const fragmentShader = `
-      varying vec3 vNormal;
-      varying vec3 vWorldPosition;
-
-      uniform vec3 lightColor;
-      uniform float	opacity;
-      uniform vec3 spotPosition;
-      uniform float attenuation;
-      uniform float	anglePower;
-
-      void main(){
-        float intensity;
-
-        intensity	= distance(vWorldPosition, spotPosition) / attenuation;
-        intensity	= 1.0 - clamp(intensity, 0.0, 1.0);
-
-        vec3 normal	= vec3(vNormal.x, vNormal.y, abs(vNormal.z));
-        float angleIntensity	= pow(dot(normal, vec3(0.0, 0.0, 1.0)), anglePower);
-        intensity	= intensity * angleIntensity * opacity;
-
-        gl_FragColor	= vec4(lightColor, intensity);
-      }`;
-        const material = new THREE.ShaderMaterial({
-            uniforms: {
-                attenuation: {
-                    type: 'f',
-                    value: 800.0,
-                },
-                anglePower: {
-                    type: 'f',
-                    value: 2,
-                },
-                spotPosition: {
-                    type: 'v3',
-                    value: new THREE.Vector3(0, 0, 0),
-                },
-                lightColor: {
-                    type: 'c',
-                    value: new THREE.Color('white'),
-                },
-                opacity: {
-                    type: 'f',
-                    value: 1.0,
-                },
-            },
-            vertexShader,
-            fragmentShader,
-            transparent: true,
-            depthWrite: false,
-        });
-        return material;
-    }
     createSpotLightBeam() {
-        if (this.spotLightBeam) {
-            this.spotlightGroup.remove(this.spotLightBeam);
-        }
         // TODO set the correct angle from the profile
         const beamAngleDegrees = 14;
         const geometry = new THREE.CylinderGeometry(0.1, beamAngleDegrees * 1.2, 100, 64, 20, false);
         geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, -geometry.parameters.height / 2, 0));
         geometry.applyMatrix4(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
-        this.atmosphereMaterial = this.atmosphereMat();
-        this.spotLightBeam = new THREE.Mesh(geometry, this.atmosphereMaterial);
+        this.spotLightBeam = new THREE.Mesh(geometry, this.spotlightMaterial);
         this.spotLightBeam.position.set(0, -0.02, 0);
         this.spotLightBeam.receiveShadow = false;
         this.spotLightBeam.castShadow = false;
@@ -3768,30 +3831,17 @@ class Fixture3d {
         this.spotLightBeam.rotation.x = Math.PI / 2;
     }
     destroy() {
-        this.selectedMaterial.dispose();
-        this.atmosphereMaterial.dispose();
+        if (this.hasSpotLight) {
+            this.spotlightMaterial.dispose();
+        }
     }
 }
 
 class ColorChanger3d extends Fixture3d {
-    createObjects() {
-        super.createObjects();
-        this.material = new THREE.MeshLambertMaterial({
-            color: 0x0d0d0d,
-            emissive: 0x0d0d0d,
-        });
-        this.mesh.material = this.material;
-        this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);
-        // scene.add(this.spotLightHelper);
-        this.objectGroup.add(this.spotlightGroup);
-        this.objectGroup.add(this.mesh);
-        // A moving head has about 32 cm in width
-        this.objectGroup.scale.multiplyScalar(9);
-        this.scene.add(this.objectGroup);
-        this.isLoaded = true;
-    }
-    constructor(fixtureService, previewMeshService, fixture, scene) {
-        super(fixtureService, fixture, scene);
+    constructor(fixtureService, previewService, previewMeshService, fixture, scene) {
+        super(fixtureService, previewService, fixture, scene, true);
+        this.fixtureService = fixtureService;
+        this.previewService = previewService;
         this.objectGroup = new THREE.Object3D();
         forkJoin([previewMeshService.getMesh('color-changer')])
             .pipe(map(([colorChanger]) => {
@@ -3800,8 +3850,14 @@ class ColorChanger3d extends Fixture3d {
         }))
             .subscribe();
     }
-    getObject() {
-        return this.objectGroup;
+    createObjects() {
+        super.createObjects();
+        this.mesh.material = this.previewService.fixtureMaterial;
+        this.objectGroup.add(this.spotlightGroup);
+        this.objectGroup.add(this.mesh);
+        this.objectGroup.scale.multiplyScalar(9);
+        this.scene.add(this.objectGroup);
+        this.isLoaded = true;
     }
     updatePreview(channelValues, masterDimmerValue) {
         if (!this.isLoaded) {
@@ -3813,36 +3869,48 @@ class ColorChanger3d extends Fixture3d {
         if (this.lastSelected !== this.isSelected) {
             if (this.isSelected) {
                 for (const child of this.mesh.children) {
-                    child.material = this.selectedMaterial;
+                    child.material = this.previewService.fixtureSelectedMaterial;
                 }
             }
             else {
                 for (const child of this.mesh.children) {
-                    child.material = this.material;
+                    child.material = this.previewService.fixtureMaterial;
                 }
             }
             this.lastSelected = this.isSelected;
         }
-        // Update the light helpers
-        // this.spotLightHelper.update();
     }
     destroy() {
         this.scene.remove(this.objectGroup);
-        this.material.dispose();
-        this.spotLightHelper.dispose();
     }
 }
 
 class MovingHead3d extends Fixture3d {
+    constructor(fixtureService, previewService, previewMeshService, fixture, scene) {
+        super(fixtureService, previewService, fixture, scene, true);
+        this.fixtureService = fixtureService;
+        this.previewService = previewService;
+        this.headGroup = new THREE.Object3D();
+        this.armGroup = new THREE.Object3D();
+        this.objectGroup = new THREE.Object3D();
+        forkJoin([
+            previewMeshService.getMesh('moving_head_socket'),
+            previewMeshService.getMesh('moving_head_arm'),
+            previewMeshService.getMesh('moving_head_head'),
+        ])
+            .pipe(map(([socket, arm, head]) => {
+            this.socket = socket;
+            this.arm = arm;
+            this.head = head;
+            this.createObjects();
+        }))
+            .subscribe();
+    }
     createObjects() {
         super.createObjects();
-        this.material = new THREE.MeshLambertMaterial({
-            color: 0x0d0d0d,
-            emissive: 0x0d0d0d,
-        });
-        this.socket.material = this.material;
-        this.arm.material = this.material;
-        this.head.material = this.material;
+        this.socket.material = this.previewService.fixtureMaterial;
+        this.arm.material = this.previewService.fixtureMaterial;
+        this.head.material = this.previewService.fixtureMaterial;
         // Add the head
         this.head.scale.multiplyScalar(0.9);
         this.head.position.set(-0.1, 0, 0);
@@ -3863,32 +3931,12 @@ class MovingHead3d extends Fixture3d {
         this.scene.add(this.objectGroup);
         this.isLoaded = true;
     }
-    constructor(fixtureService, previewMeshService, fixture, scene) {
-        super(fixtureService, fixture, scene);
-        this.headGroup = new THREE.Object3D();
-        this.armGroup = new THREE.Object3D();
-        this.objectGroup = new THREE.Object3D();
-        forkJoin([
-            previewMeshService.getMesh('moving_head_socket'),
-            previewMeshService.getMesh('moving_head_arm'),
-            previewMeshService.getMesh('moving_head_head'),
-        ])
-            .pipe(map(([socket, arm, head]) => {
-            this.socket = socket;
-            this.arm = arm;
-            this.head = head;
-            this.createObjects();
-        }))
-            .subscribe();
-    }
-    getObject() {
-        return this.objectGroup;
-    }
     updatePreview(channelValues, masterDimmerValue) {
         if (!this.isLoaded) {
             return;
         }
         super.updatePreview(channelValues, masterDimmerValue);
+        this.updatePosition(this.objectGroup);
         // Apply default settings
         let panStart = 0;
         let panEnd = 255;
@@ -3917,38 +3965,33 @@ class MovingHead3d extends Fixture3d {
                 }
             }
         }
-        this.updatePosition(this.objectGroup);
         // calculate the y/x rotation in radiants based on pan/tilt (0-1) respecting the max pan/tilt
         this.armGroup.rotation.y = THREE.MathUtils.degToRad(panEnd * this.pan + panStart) - THREE.MathUtils.degToRad(panEnd / 2);
         this.headGroup.rotation.x = THREE.MathUtils.degToRad(tiltEnd * this.tilt + tiltStart) - THREE.MathUtils.degToRad(tiltEnd / 2);
-        // Update the angle (only on change, because it's expensive)
+        // Update the angle only on change, because it's expensive
         // TODO update the correct angle from the profile
         const beamAngleDregrees = 14;
         if (this.lastBeamAngleDegrees !== beamAngleDregrees) {
             this.spotLight.angle = THREE.MathUtils.degToRad(beamAngleDregrees);
-            this.createSpotLightBeam();
             this.lastBeamAngleDegrees = beamAngleDregrees;
         }
         // Update the material
         if (this.lastSelected !== this.isSelected) {
             if (this.isSelected) {
-                this.socket.material = this.selectedMaterial;
-                this.arm.material = this.selectedMaterial;
-                this.head.material = this.selectedMaterial;
+                this.socket.material = this.previewService.fixtureSelectedMaterial;
+                this.arm.material = this.previewService.fixtureSelectedMaterial;
+                this.head.material = this.previewService.fixtureSelectedMaterial;
             }
             else {
-                this.socket.material = this.material;
-                this.arm.material = this.material;
-                this.head.material = this.material;
+                this.socket.material = this.previewService.fixtureMaterial;
+                this.arm.material = this.previewService.fixtureMaterial;
+                this.head.material = this.previewService.fixtureMaterial;
             }
             this.lastSelected = this.isSelected;
         }
-        // this.spotLightHelper.update();
     }
     destroy() {
         this.scene.remove(this.objectGroup);
-        this.material.dispose();
-        this.spotLightHelper.dispose();
     }
 }
 
@@ -3981,13 +4024,13 @@ class PreviewComponent {
         for (const fixture of this.fixtureService.cachedFixtures) {
             switch (fixture.profile.categories[0]) {
                 case FixtureCategory['Moving Head']:
-                    this.fixtures3d.push(new MovingHead3d(this.fixtureService, this.previewMeshService, fixture, this.scene));
+                    this.fixtures3d.push(new MovingHead3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
                     break;
                 case FixtureCategory['Color Changer']:
-                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewMeshService, fixture, this.scene));
+                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
                     break;
                 case FixtureCategory['Blinder']:
-                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewMeshService, fixture, this.scene));
+                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
                     break;
             }
         }
@@ -4047,8 +4090,6 @@ class PreviewComponent {
                 fixture3d.isSelected = this.previewService.fixtureIsSelected(fixture3d.fixture.fixture.uuid, fixture3d.fixture.pixelKey, presets);
             }
         }
-        // TODO enable for monitoring the DMX universes
-        this.previewService.setUniverseValues(calculatedFixtures, this.projectService.project.masterDimmerValue);
         // Render the scene
         this.render();
         requestAnimationFrame(this.animate.bind(this));
@@ -4282,39 +4323,36 @@ class ProjectLoadService {
     }
     migrateToVersion2() {
         for (let fixture of this.projectService.project.fixtures) {
-            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-            if (pixelKeys.length > 0) {
-                for (let pixelKey of pixelKeys) {
-                    const projectFixture = new PresetFixture();
-                    projectFixture.fixtureUuid = fixture.uuid;
-                    projectFixture.pixelKey = pixelKey;
-                    this.projectService.project.presetFixtures.push(projectFixture);
-                }
+            if (this.fixtureService.fixtureHasGeneralChannel(fixture)) {
+                const projectFixture = new PresetFixture();
+                projectFixture.fixtureUuid = fixture.uuid;
+                this.projectService.project.presetFixtures.push(projectFixture);
             }
-            else {
+            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+            for (let pixelKey of pixelKeys) {
                 const projectFixture = new PresetFixture();
                 projectFixture.fixtureUuid = fixture.uuid;
+                projectFixture.pixelKey = pixelKey;
                 this.projectService.project.presetFixtures.push(projectFixture);
             }
         }
         for (let preset of this.projectService.project.presets) {
             for (let fixtureUuid of preset.fixtureUuids) {
                 const fixture = this.fixtureService.getFixtureByUuid(fixtureUuid);
-                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-                if (pixelKeys.length > 0) {
-                    for (let pixelKey of pixelKeys) {
-                        const presetFixture = new PresetFixture();
-                        presetFixture.fixtureUuid = fixtureUuid;
-                        presetFixture.pixelKey = pixelKey;
-                        preset.fixtures.push(presetFixture);
-                    }
+                if (this.fixtureService.fixtureHasGeneralChannel(fixture)) {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixtureUuid;
+                    preset.fixtures.push(presetFixture);
                 }
-                else {
+                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+                for (let pixelKey of pixelKeys) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixtureUuid;
+                    presetFixture.pixelKey = pixelKey;
                     preset.fixtures.push(presetFixture);
                 }
             }
+            preset.fixtureUuids = undefined;
         }
         this.projectService.project.version = 2;
     }
@@ -5578,18 +5616,16 @@ class FixturePoolComponent {
                 }
             }
             if (!found) {
-                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-                if (pixelKeys.length > 0) {
-                    for (let pixelKey of pixelKeys) {
-                        const presetFixture = new PresetFixture();
-                        presetFixture.fixtureUuid = fixture.uuid;
-                        presetFixture.pixelKey = pixelKey;
-                        this.projectService.project.presetFixtures.push(presetFixture);
-                    }
+                if (this.fixtureService.fixtureHasGeneralChannel(fixture)) {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixture.uuid;
+                    this.projectService.project.presetFixtures.push(presetFixture);
                 }
-                else {
+                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+                for (let pixelKey of pixelKeys) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixture.uuid;
+                    presetFixture.pixelKey = pixelKey;
                     this.projectService.project.presetFixtures.push(presetFixture);
                 }
             }
@@ -8201,13 +8237,13 @@ function FixtureCapabilityComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("h-100", ctx_r2.isChrome());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.presetService.hasCapabilityDimmer());
+    i0.ɵɵproperty("ngIf", ctx_r2.hasCapabilityDimmer);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.presetService.hasCapabilityColorOrColorWheel());
+    i0.ɵɵproperty("ngIf", ctx_r2.hasCapabilityColorOrColorWheel);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(4, 6, ctx_r2.colorWheelChannels));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.presetService.hasCapabilityPanTilt());
+    i0.ɵɵproperty("ngIf", ctx_r2.hasCapabilityPanTilt);
 } }
 function FixtureCapabilityComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10)(1, "p", 11);
@@ -8236,6 +8272,9 @@ class FixtureCapabilityComponent {
         this.introService = introService;
         // map containing the profile and the channel name containing the wheel
         this.colorWheelChannels = new Map();
+        this.hasCapabilityDimmer = false;
+        this.hasCapabilityColorOrColorWheel = false;
+        this.hasCapabilityPanTilt = false;
         this.fixtureSelectionChangedSubscription = this.presetService.fixtureSelectionChanged.subscribe(() => {
             this.update();
         });
@@ -8284,8 +8323,14 @@ class FixtureCapabilityComponent {
             }
         }
     }
+    updateCapabilities() {
+        this.hasCapabilityDimmer = this.presetService.hasCapabilityDimmer();
+        this.hasCapabilityColorOrColorWheel = this.presetService.hasCapabilityColorOrColorWheel();
+        this.hasCapabilityPanTilt = this.presetService.hasCapabilityPanTilt();
+    }
     update() {
         this.updateColorWheels();
+        this.updateCapabilities();
         this.changeDetectorRef.detectChanges();
     }
     isChrome() {
@@ -8311,7 +8356,7 @@ class FixtureCapabilityComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n      in Chrome during sliding -->\n      <div *ngIf=\"presetService.hasCapabilityDimmer()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      <div *ngIf=\"presetService.hasCapabilityColorOrColorWheel()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n\n      <!-- Color wheels -->\n      <div\n        *ngFor=\"let entry of colorWheelChannels | keyvalue; let i = index\"\n        class=\"col col-auto p-0 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem)\"\n      >\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n\n      <!-- Pan/Tilt -->\n      <div *ngIf=\"presetService.hasCapabilityPanTilt()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n      in Chrome during sliding -->\n      <div *ngIf=\"hasCapabilityDimmer\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      <div *ngIf=\"hasCapabilityColorOrColorWheel\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n\n      <!-- Color wheels -->\n      <div\n        *ngFor=\"let entry of colorWheelChannels | keyvalue; let i = index\"\n        class=\"col col-auto p-0 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem)\"\n      >\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n\n      <!-- Pan/Tilt -->\n      <div *ngIf=\"hasCapabilityPanTilt\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: i0.ChangeDetectorRef }, { type: ProjectService }, { type: IntroService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureCapabilityComponent, { className: "FixtureCapabilityComponent" }); })();
 
@@ -9958,11 +10003,49 @@ class MasterDimmerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MasterDimmerComponent, { className: "MasterDimmerComponent" }); })();
 
 const _c0$2 = ["sliderValue"];
-function FixtureCapabilityChannelComponent_div_9_div_1_span_6_Template(rf, ctx) { if (rf & 1) {
+function FixtureCapabilityChannelComponent_div_9_div_1_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const capability_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.getDescription(capability_r3), ")");
+} }
+function FixtureCapabilityChannelComponent_div_9_div_1_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 20);
+} if (rf & 2) {
+    const color_r4 = ctx.$implicit;
+    i0.ɵɵstyleProp("background-color", color_r4);
+} }
+function FixtureCapabilityChannelComponent_div_9_div_1_small_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "small");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const capability_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" (", ctx_r1.getDescriptionStart(capability_r3), " to ", ctx_r1.getDescriptionEnd(capability_r3), ")");
+} }
+function FixtureCapabilityChannelComponent_div_9_div_1_span_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, " - ");
     i0.ɵɵelementEnd();
 } }
+function FixtureCapabilityChannelComponent_div_9_div_1_i_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 21);
+    i0.ɵɵpipe(1, "translate");
+} if (rf & 2) {
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(1, 1, "designer.fixture.capability-sound-controlled"));
+} }
+function FixtureCapabilityChannelComponent_div_9_div_1_i_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 22);
+    i0.ɵɵpipe(1, "translate");
+} if (rf & 2) {
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(1, 1, "designer.fixture.capability-random-timing"));
+} }
 function FixtureCapabilityChannelComponent_div_9_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5)(1, "input", 14);
@@ -9972,31 +10055,44 @@ function FixtureCapabilityChannelComponent_div_9_div_1_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(2, "label", 15);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
-    i0.ɵɵelementStart(5, "small");
-    i0.ɵɵtemplate(6, FixtureCapabilityChannelComponent_div_9_div_1_span_6_Template, 2, 0, "span", 16);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(5, FixtureCapabilityChannelComponent_div_9_div_1_span_5_Template, 2, 1, "span", 16);
+    i0.ɵɵelementStart(6, "small");
+    i0.ɵɵtemplate(7, FixtureCapabilityChannelComponent_div_9_div_1_div_7_Template, 1, 2, "div", 17)(8, FixtureCapabilityChannelComponent_div_9_div_1_small_8_Template, 2, 2, "small", 16)(9, FixtureCapabilityChannelComponent_div_9_div_1_span_9_Template, 2, 0, "span", 16);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(11, FixtureCapabilityChannelComponent_div_9_div_1_i_11_Template, 2, 3, "i", 18)(12, FixtureCapabilityChannelComponent_div_9_div_1_i_12_Template, 2, 3, "i", 19);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const capability_r3 = ctx.$implicit;
-    const i_r4 = ctx.index;
+    const i_r5 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵpropertyInterpolate1("name", "capabilityGeneric", ctx_r1.capabilityIndex, "Option");
-    i0.ɵɵpropertyInterpolate2("id", "capabilityGeneric", ctx_r1.capabilityIndex, "Option", i_r4, "");
+    i0.ɵɵpropertyInterpolate2("id", "capabilityGeneric", ctx_r1.capabilityIndex, "Option", i_r5, "");
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedCapability);
     i0.ɵɵproperty("value", capability_r3);
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate2("for", "capabilityGeneric", ctx_r1.capabilityIndex, "Option", i_r4, "");
+    i0.ɵɵpropertyInterpolate2("for", "capabilityGeneric", ctx_r1.capabilityIndex, "Option", i_r5, "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 18, "designer.fixtureCapabilityType." + capability_r3.capability.type), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.getDescription(capability_r3));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", capability_r3.capability.colors);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.getDescriptionStart(capability_r3));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 13, "designer.fixtureCapabilityType." + capability_r3.capability.type), "");
-    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", capability_r3.capability.comment);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", capability_r3.capability.comment, "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", capability_r3.capability.soundControlled);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", capability_r3.capability.randomTiming);
 } }
 function FixtureCapabilityChannelComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵtemplate(1, FixtureCapabilityChannelComponent_div_9_div_1_Template, 8, 15, "div", 13);
+    i0.ɵɵtemplate(1, FixtureCapabilityChannelComponent_div_9_div_1_Template, 13, 20, "div", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -10004,20 +10100,30 @@ function FixtureCapabilityChannelComponent_div_9_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("ngForOf", ctx_r1._channel.capabilities);
 } }
 function FixtureCapabilityChannelComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "input", 19, 0);
-    i0.ɵɵlistener("ngModelChange", function FixtureCapabilityChannelComponent_div_10_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setValue($event)); });
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "input", 25, 0);
+    i0.ɵɵlistener("ngModelChange", function FixtureCapabilityChannelComponent_div_10_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setValue($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 26);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 27)(7, "mv-slider", 28, 1);
+    i0.ɵɵlistener("change", function FixtureCapabilityChannelComponent_div_10_Template_mv_slider_change_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setValue($event.newValue)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 29);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 20)(5, "mv-slider", 21, 1);
-    i0.ɵɵlistener("change", function FixtureCapabilityChannelComponent_div_10_Template_mv_slider_change_5_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setValue($event.newValue)); });
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("pl-0", (ctx_r1._channel.capabilities == null ? null : ctx_r1._channel.capabilities.length) > 1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngModel", ctx_r1.templateValue);
     i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.descriptionEnd);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("value", ctx_r1.templateValue)("orientation", "vertical")("reversed", true)("tooltip", "hide")("min", ctx_r1.rangeMin)("max", ctx_r1.rangeMax)("step", 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.descriptionStart);
 } }
 class FixtureCapabilityChannelComponent {
     set channel(value) {
@@ -10026,11 +10132,12 @@ class FixtureCapabilityChannelComponent {
     }
     constructor(presetService) {
         this.presetService = presetService;
-        this.rangeMin = 0;
-        this.rangeMax = 0;
         this.defaultValue = 0;
         this.value = 0;
         this.templateValue = 0;
+        this.hasRange = false;
+        this.rangeMin = 0;
+        this.rangeMax = 0;
     }
     updateChannel() {
         this.selectedCapability = this._channel.capabilities[0];
@@ -10038,25 +10145,107 @@ class FixtureCapabilityChannelComponent {
         this.calculateTemplateValue();
         if (this.value >= 0) {
             for (const capability of this._channel.capabilities) {
-                if (capability.capability.dmxRange.length > 0 && capability.centerValue === this.value) {
+                if (capability.capability.dmxRange.length > 0 &&
+                    capability.capability.dmxRange[0] <= this.value &&
+                    this.value <= capability.capability.dmxRange[1]) {
                     this.selectedCapability = capability;
                     break;
                 }
             }
         }
+        this.defaultValue = this.getDefaultValue();
+        this.description = this.getDescription(this.selectedCapability);
+        this.hasRange = this.capabilityHasRange();
         this.rangeMin = this.getRangeMin();
         this.rangeMax = this.getRangeMax();
-        this.defaultValue = this.getDefaultValue();
+        this.descriptionStart = this.getDescriptionStart(this.selectedCapability);
+        this.descriptionEnd = this.getDescriptionEnd(this.selectedCapability);
     }
     capabilityHasRange() {
-        if (this._channel.capabilities && this._channel.capabilities.length === 1) {
+        if (this._channel?.capabilities?.length === 1) {
+            // TODO does this work in all cases? if we have no option, it's always a range?
             return true;
         }
-        if (this.selectedCapability && this.selectedCapability.capability.angleStart) {
+        if (this.selectedCapability?.capability.angleStart ||
+            this.selectedCapability?.capability.speedStart ||
+            this.selectedCapability?.capability.brightnessStart ||
+            this.selectedCapability?.capability.durationStart ||
+            this.selectedCapability?.capability.colorTemperatureStart ||
+            this.selectedCapability?.capability.soundSensitivityStart ||
+            this.selectedCapability?.capability.horizontalAngleStart ||
+            this.selectedCapability?.capability.verticalAngleStart ||
+            this.selectedCapability?.capability.distanceStart ||
+            this.selectedCapability?.capability.openPercentStart ||
+            this.selectedCapability?.capability.frostIntensityStart ||
+            this.selectedCapability?.capability.fogOutputStart ||
+            this.selectedCapability?.capability.timeStart ||
+            this.selectedCapability?.capability.insertionStart ||
+            this.selectedCapability?.capability.colorsStart) {
             return true;
         }
         return false;
     }
+    getDescriptionStart(capability) {
+        if (!capability || !capability.capability) {
+            return '';
+        }
+        return (capability.capability.angleStart ||
+            capability.capability.speedStart ||
+            capability.capability.brightnessStart ||
+            capability.capability.durationStart ||
+            capability.capability.colorTemperatureStart ||
+            capability.capability.soundSensitivityStart ||
+            capability.capability.horizontalAngleStart ||
+            capability.capability.verticalAngleStart ||
+            capability.capability.distanceStart ||
+            capability.capability.openPercentStart ||
+            capability.capability.frostIntensityStart ||
+            capability.capability.fogOutputStart ||
+            capability.capability.timeStart ||
+            capability.capability.insertionStart ||
+            capability.capability.colorsStart)?.toString();
+    }
+    getDescriptionEnd(capability) {
+        if (!capability || !capability.capability) {
+            return '';
+        }
+        return (capability.capability.angleEnd ||
+            capability.capability.speedEnd ||
+            capability.capability.brightnessEnd ||
+            capability.capability.durationEnd ||
+            capability.capability.colorTemperatureEnd ||
+            capability.capability.soundSensitivityEnd ||
+            capability.capability.horizontalAngleEnd ||
+            capability.capability.verticalAngleEnd ||
+            capability.capability.distanceEnd ||
+            capability.capability.openPercentEnd ||
+            capability.capability.frostIntensityEnd ||
+            capability.capability.fogOutputEnd ||
+            capability.capability.timeEnd ||
+            capability.capability.insertionEnd ||
+            capability.capability.colorsEnd)?.toString();
+    }
+    getDescription(capability) {
+        if (!capability || !capability.capability) {
+            return '';
+        }
+        return (capability.capability.slotNumber ||
+            capability.capability.shutterEffect ||
+            capability.capability.angle ||
+            capability.capability.speed ||
+            capability.capability.brightness ||
+            capability.capability.duration ||
+            capability.capability.colorTemperature ||
+            capability.capability.soundSensitivity ||
+            capability.capability.horizontalAngle ||
+            capability.capability.verticalAngle ||
+            capability.capability.distance ||
+            capability.capability.openPercent ||
+            capability.capability.frostIntensity ||
+            capability.capability.fogOutput ||
+            capability.capability.time ||
+            capability.capability.insertion)?.toString();
+    }
     getRangeMin() {
         if (this.selectedCapability.capability.dmxRange.length > 0) {
             return this.selectedCapability.capability.dmxRange[0];
@@ -10074,7 +10263,7 @@ class FixtureCapabilityChannelComponent {
         if (isNaN(value)) {
             return;
         }
-        if (!ignoreCapabilityRange && (value < this.getRangeMin() || value > this.getRangeMax())) {
+        if (!ignoreCapabilityRange && (value < this.rangeMin || value > this.rangeMax)) {
             return;
         }
         this.value = value;
@@ -10086,7 +10275,9 @@ class FixtureCapabilityChannelComponent {
             // TODO use the same technique in the dimmer/pan/tilt/color sliders
             if (!this.valueSetTimer) {
                 this.valueSetTimer = setTimeout(() => {
-                    this.sliderValue.nativeElement.value = this.value;
+                    if (this.sliderValue) {
+                        this.sliderValue.nativeElement.value = this.value;
+                    }
                     this.valueSetTimer = undefined;
                 }, 30);
             }
@@ -10116,12 +10307,13 @@ class FixtureCapabilityChannelComponent {
     }
     capabilitySelected() {
         // select the center value of the selected capability
-        if (this.capabilityHasRange) {
+        if (this.capabilityHasRange()) {
             this.setValue(this.selectedCapability.capability.dmxRange[0], true);
         }
         else {
             this.setValue(this.selectedCapability.centerValue, true);
         }
+        this.updateChannel();
     }
     static { this.ɵfac = function FixtureCapabilityChannelComponent_Factory(t) { return new (t || FixtureCapabilityChannelComponent)(i0.ɵɵdirectiveInject(PresetService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixtureCapabilityChannelComponent, selectors: [["lib-app-fixture-capability-channel"]], viewQuery: function FixtureCapabilityChannelComponent_Query(rf, ctx) { if (rf & 1) {
@@ -10129,7 +10321,7 @@ class FixtureCapabilityChannelComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sliderValue = _t.first);
-        } }, inputs: { profile: "profile", channel: "channel", capabilityIndex: "capabilityIndex" }, decls: 11, vars: 10, consts: [["sliderValue", ""], ["slider", ""], [1, "card", "border-secondary", "h-100", 2, "min-height", "200px"], [1, "card-header"], [1, "my-auto"], [1, "form-check"], ["type", "checkbox", 1, "form-check-input", 3, "ngModelChange", "id", "ngModel"], [1, "form-check-label", 3, "for"], [1, "card-body", "h-100", "d-flex", 2, "flex-direction", "column", "overflow", "hidden"], [1, "row", "h-100"], ["class", "col mr-3", "style", "overflow-y: auto", 4, "ngIf"], ["class", "col col-auto d-flex mx-auto", "style", "flex-direction: column", 3, "pl-0", 4, "ngIf"], [1, "col", "mr-3", 2, "overflow-y", "auto"], ["class", "form-check", 4, "ngFor", "ngForOf"], ["type", "radio", 1, "form-check-input", 3, "ngModelChange", "change", "ngModel", "name", "id", "value"], [1, "form-check-label", 2, "max-width", "200px", 3, "for"], [4, "ngIf"], [1, "col", "col-auto", "d-flex", "mx-auto", 2, "flex-direction", "column"], [1, "mb-4", "w-100", "d-flex"], ["type", "text", 1, "mx-auto", 2, "width", "45px", "height", "20px", "text-align", "center", "font-size", "12px", "font-family", "monospace", 3, "ngModelChange", "ngModel"], [1, "h-100", "w-100", "d-flex"], [1, "mx-auto", 2, "height", "100%", 3, "change", "value", "orientation", "reversed", "tooltip", "min", "max", "step"]], template: function FixtureCapabilityChannelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { profile: "profile", channel: "channel", capabilityIndex: "capabilityIndex" }, decls: 11, vars: 10, consts: [["sliderValue", ""], ["slider", ""], [1, "card", "border-secondary", "h-100", 2, "min-height", "200px"], [1, "card-header"], [1, "my-auto"], [1, "form-check"], ["type", "checkbox", 1, "form-check-input", 3, "ngModelChange", "id", "ngModel"], [1, "form-check-label", 3, "for"], [1, "card-body", "h-100", "d-flex", 2, "flex-direction", "column", "overflow", "hidden"], [1, "row", "h-100"], ["class", "col mr-3", "style", "overflow-y: auto", 4, "ngIf"], ["class", "col col-auto d-flex mx-auto", "style", "flex-direction: column", 3, "pl-0", 4, "ngIf"], [1, "col", "mr-3", 2, "overflow-y", "auto"], ["class", "form-check", 4, "ngFor", "ngForOf"], ["type", "radio", 1, "form-check-input", 3, "ngModelChange", "change", "ngModel", "name", "id", "value"], [1, "form-check-label", 2, "max-width", "200px", 3, "for"], [4, "ngIf"], ["class", "color", 3, "background-color", 4, "ngFor", "ngForOf"], ["class", "fa fa-microphone pl-1", "container", "body", "placement", "top", "triggers", "mouseenter:mouseleave", "aria-hidden", "true", 3, "popover", 4, "ngIf"], ["class", "fa fa-random pl-1", "container", "body", "placement", "top", "triggers", "mouseenter:mouseleave", "aria-hidden", "true", 3, "popover", 4, "ngIf"], [1, "color"], ["container", "body", "placement", "top", "triggers", "mouseenter:mouseleave", "aria-hidden", "true", 1, "fa", "fa-microphone", "pl-1", 3, "popover"], ["container", "body", "placement", "top", "triggers", "mouseenter:mouseleave", "aria-hidden", "true", 1, "fa", "fa-random", "pl-1", 3, "popover"], [1, "col", "col-auto", "d-flex", "mx-auto", 2, "flex-direction", "column"], [1, "mb-2", "w-100", "d-flex"], ["type", "text", 1, "mx-auto", 2, "width", "45px", "height", "20px", "text-align", "center", "font-size", "12px", "font-family", "monospace", 3, "ngModelChange", "ngModel"], [1, "mx-auto", "mb-2"], [1, "h-100", "w-100", "d-flex"], [1, "mx-auto", 2, "height", "100%", 3, "change", "value", "orientation", "reversed", "tooltip", "min", "max", "step"], [1, "mx-auto", "mt-2"]], template: function FixtureCapabilityChannelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "input", 6);
             i0.ɵɵlistener("ngModelChange", function FixtureCapabilityChannelComponent_Template_input_ngModelChange_4_listener($event) { return ctx.changeActive($event); });
             i0.ɵɵelementEnd();
@@ -10137,7 +10329,7 @@ class FixtureCapabilityChannelComponent {
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(7, "div", 8)(8, "div", 9);
-            i0.ɵɵtemplate(9, FixtureCapabilityChannelComponent_div_9_Template, 2, 1, "div", 10)(10, FixtureCapabilityChannelComponent_div_10_Template, 7, 10, "div", 11);
+            i0.ɵɵtemplate(9, FixtureCapabilityChannelComponent_div_9_Template, 2, 1, "div", 10)(10, FixtureCapabilityChannelComponent_div_10_Template, 11, 12, "div", 11);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("capability-deactivated", ctx.value == undefined);
@@ -10151,12 +10343,12 @@ class FixtureCapabilityChannelComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", (ctx._channel.capabilities == null ? null : ctx._channel.capabilities.length) > 1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.capabilityHasRange());
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i2.TranslatePipe], changeDetection: 0 }); }
+            i0.ɵɵproperty("ngIf", ctx.hasRange);
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i12.PopoverDirective, i2.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{display:inline-block;margin-left:5px;border-radius:50%;width:12px;height:12px;border:1px white solid;vertical-align:middle}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityChannelComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability-channel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"value == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityGeneric{{ capabilityIndex }}Active\"\n          [ngModel]=\"value != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Active\">\n          {{ _channel?.name }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 d-flex\" style=\"flex-direction: column; overflow: hidden\">\n    <div class=\"row h-100\">\n      <!-- display all options, if there is more than one -->\n      <div *ngIf=\"_channel.capabilities?.length > 1\" class=\"col mr-3\" style=\"overflow-y: auto\">\n        <div *ngFor=\"let capability of _channel.capabilities; let i = index\" class=\"form-check\">\n          <input\n            [(ngModel)]=\"selectedCapability\"\n            (change)=\"capabilitySelected()\"\n            class=\"form-check-input\"\n            type=\"radio\"\n            name=\"capabilityGeneric{{ capabilityIndex }}Option\"\n            id=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\"\n            [value]=\"capability\"\n          />\n          <label style=\"max-width: 200px\" class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\">\n            {{ 'designer.fixtureCapabilityType.' + capability.capability.type | translate\n            }}<small><span *ngIf=\"capability.capability.comment\"> - </span> {{ capability.capability.comment }}</small>\n          </label>\n        </div>\n      </div>\n\n      <!-- display a slider to select the value for the currently selected capability, if it has a range -->\n      <div\n        *ngIf=\"capabilityHasRange()\"\n        class=\"col col-auto d-flex mx-auto\"\n        [class.pl-0]=\"_channel.capabilities?.length > 1\"\n        style=\"flex-direction: column\"\n      >\n        <div class=\"mb-4 w-100 d-flex\">\n          <input\n            #sliderValue\n            class=\"mx-auto\"\n            type=\"text\"\n            [ngModel]=\"templateValue\"\n            (ngModelChange)=\"setValue($event)\"\n            style=\"width: 45px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n          />\n        </div>\n\n        <div class=\"h-100 w-100 d-flex\">\n          <mv-slider\n            #slider\n            class=\"mx-auto\"\n            [value]=\"templateValue\"\n            (change)=\"setValue($event.newValue)\"\n            [orientation]=\"'vertical'\"\n            [reversed]=\"true\"\n            style=\"height: 100%\"\n            [tooltip]=\"'hide'\"\n            [min]=\"rangeMin\"\n            [max]=\"rangeMax\"\n            [step]=\"1\"\n          ></mv-slider>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-capability-channel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"value == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityGeneric{{ capabilityIndex }}Active\"\n          [ngModel]=\"value != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Active\">\n          {{ _channel?.name }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 d-flex\" style=\"flex-direction: column; overflow: hidden\">\n    <div class=\"row h-100\">\n      <!-- display all options, if there is more than one -->\n      <div *ngIf=\"_channel.capabilities?.length > 1\" class=\"col mr-3\" style=\"overflow-y: auto\">\n        <div *ngFor=\"let capability of _channel.capabilities; let i = index\" class=\"form-check\">\n          <input\n            [(ngModel)]=\"selectedCapability\"\n            (change)=\"capabilitySelected()\"\n            class=\"form-check-input\"\n            type=\"radio\"\n            name=\"capabilityGeneric{{ capabilityIndex }}Option\"\n            id=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\"\n            [value]=\"capability\"\n          />\n          <label style=\"max-width: 200px\" class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\">\n            {{ 'designer.fixtureCapabilityType.' + capability.capability.type | translate\n            }}<span *ngIf=\"getDescription(capability)\"> ({{ getDescription(capability) }})</span\n            ><small\n              ><div *ngFor=\"let color of capability.capability.colors\" class=\"color\" [style.background-color]=\"color\"></div>\n              <small *ngIf=\"getDescriptionStart(capability)\">\n                ({{ getDescriptionStart(capability) }} to {{ getDescriptionEnd(capability) }})</small\n              >\n              <span *ngIf=\"capability.capability.comment\"> - </span> {{ capability.capability.comment }}</small\n            >\n            <i\n              *ngIf=\"capability.capability.soundControlled\"\n              class=\"fa fa-microphone pl-1\"\n              popover=\"{{ 'designer.fixture.capability-sound-controlled' | translate }}\"\n              container=\"body\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n              aria-hidden=\"true\"\n            ></i>\n            <i\n              *ngIf=\"capability.capability.randomTiming\"\n              class=\"fa fa-random pl-1\"\n              popover=\"{{ 'designer.fixture.capability-random-timing' | translate }}\"\n              container=\"body\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n              aria-hidden=\"true\"\n            ></i>\n          </label>\n        </div>\n      </div>\n\n      <!-- display a slider to select the value for the currently selected capability, if it has a range -->\n      <div\n        *ngIf=\"hasRange\"\n        class=\"col col-auto d-flex mx-auto\"\n        [class.pl-0]=\"_channel.capabilities?.length > 1\"\n        style=\"flex-direction: column\"\n      >\n        <div class=\"mb-2 w-100 d-flex\">\n          <input\n            #sliderValue\n            class=\"mx-auto\"\n            type=\"text\"\n            [ngModel]=\"templateValue\"\n            (ngModelChange)=\"setValue($event)\"\n            style=\"width: 45px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n          />\n        </div>\n\n        <div class=\"mx-auto mb-2\">{{ descriptionEnd }}</div>\n\n        <div class=\"h-100 w-100 d-flex\">\n          <mv-slider\n            #slider\n            class=\"mx-auto\"\n            [value]=\"templateValue\"\n            (change)=\"setValue($event.newValue)\"\n            [orientation]=\"'vertical'\"\n            [reversed]=\"true\"\n            style=\"height: 100%\"\n            [tooltip]=\"'hide'\"\n            [min]=\"rangeMin\"\n            [max]=\"rangeMax\"\n            [step]=\"1\"\n          ></mv-slider>\n        </div>\n\n        <div class=\"mx-auto mt-2\">{{ descriptionStart }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".color{display:inline-block;margin-left:5px;border-radius:50%;width:12px;height:12px;border:1px white solid;vertical-align:middle}\n"] }]
     }], () => [{ type: PresetService }], { sliderValue: [{
             type: ViewChild,
             args: ['sliderValue', { static: false }]