@rocketshow/designer 1.36.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;
     }
 }
 
@@ -2031,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) {
@@ -3092,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)
@@ -3515,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' }); }
 }
@@ -3526,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;
@@ -3536,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) {
@@ -3562,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) {
@@ -3664,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);
@@ -3708,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;
@@ -3791,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]) => {
@@ -3823,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) {
@@ -3836,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);
@@ -3886,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;
@@ -3940,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();
     }
 }
 
@@ -4004,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;
             }
         }
@@ -8217,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);
@@ -8252,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();
         });
@@ -8300,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() {
@@ -8327,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" }); })();
 
@@ -9974,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);
@@ -9988,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();
@@ -10020,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) {
@@ -10042,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];
@@ -10054,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];
@@ -10090,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;
@@ -10102,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);
             }
@@ -10132,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) {
@@ -10145,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();
@@ -10153,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);
@@ -10167,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 }]