feat(Param Transforms): Adds the ability to transform parameter value…

…s based on the value of another parameter.

The use case here is to dim a 3 channel RGB light using the dimmer param, but it could be applied to a lot of other potential transforms.

src/components/timeline/timeline-manager.js

@@ -112,32 +112,35 @@ class TimelineManager extends connect(store)(LitElement) {
     if (this.isPlaying) {
       const now = new Date()
       this.progress = now.getTime()
-
+      
       // Start all scenes that are not started yet
       for (let i = 0; i < this.timelineScenes.length; i++) {
         const scene = this.timelineScenes[i];
 
         // Start the scene if it wasn't started yet
         if (scene.started === undefined) {
           const { sceneId, timelineSceneId } = scene
-
+          
           store.dispatch(setSceneOnTimeline({
             sceneId,
             timelineSceneId,
             started: new Date().getTime()
           }))
         }
       }
-
       for (const fixtureId in fixtureBatch) {
         const interpolatedProperties = fixtureBatch[fixtureId].properties
         const fixture = this.timelineFixtures[fixtureId]
-
         for (const propertyName in interpolatedProperties) {
+          // Allow the fixture to transform the property based on other properties
+          const passThrough = function passThrough(value) { 
+            return value 
+          }
+          const transform = fixture[`${propertyName}Transform`] || passThrough
           // @TODO: only set properties that the fixture understands
-          fixture[propertyName] = interpolatedProperties[propertyName]
+          fixture[propertyName] = transform(interpolatedProperties[propertyName])
         }
-
+        
         // Overwrite the color of every fixture when a connection to modV was established
         // & the "modvColor" property is actually set on the fixture within an active scene
         if (this.modvConnected && interpolatedProperties.hasOwnProperty('modvColor')) {
@@ -153,7 +156,6 @@ class TimelineManager extends connect(store)(LitElement) {
           }
         }
       }
-
       // Update the channels of universe 0 with the batch of values collected for the fixtures
       store.dispatch(setChannels(0, [...batch]))
 
@@ -165,7 +167,7 @@ class TimelineManager extends connect(store)(LitElement) {
 
       // Send the universe to the FivetwelveManager
       window.dispatchEvent(new CustomEvent('send-universe-to-fivetwelve', { detail: { now } }))
-
+      
       this.timeoutId = setTimeout(() => {
         // Get the next frame
         requestAnimationFrame(this.loop.bind(this))

src/utils/dmx/BasicColor.js

@@ -7,7 +7,8 @@ export default class BasicColor extends DmxDevice {
   constructor(options) {
     super(Object.assign({}, options, {
       params: {
-        color: new RgbParam([1, 2, 3])
+        color: new RgbParam([1, 2, 3]),
+        dimmer: new RangeParam(1, { min: 0, max: 255 })
       }
     }))
 
@@ -17,5 +18,10 @@ export default class BasicColor extends DmxDevice {
 
     this.channels = 3
     this.weight = 0
+
+    this.colorTransform = this.colorTransform.bind(this)
+  }
+  colorTransform(input) {
+    return input.map(value => Math.round(value * this.dimmer / 255))
   }
 }