Merge pull request #128 from NERDDISCO/next

Next

src/actions/index.js

@@ -104,6 +104,15 @@ export const resetUniverseAndFixtures = universeIndex => {
   }
 }
 
+/*
+ * Update the data of a universe
+ */
+export const setUniverse = (universeId, data) => ({
+  universeId,
+  data,
+  type: constants.SET_UNIVERSE
+})
+
 /*
  * Add a scene
  */

src/components/channel-grid/channel-grid.js

@@ -0,0 +1,94 @@
+import { LitElement, html } from 'lit-element'
+import { shared } from '../../styles/shared.js'
+
+/*
+ * Show DMX512 channels in a grid
+ */
+class ChannelGrid extends LitElement {
+  static get properties() {
+    return { 
+      channels: { type: Array },
+      refresh: { type: Boolean }
+    }
+  }
+
+  /**
+   * When the value of a speicifc channel is updated, we send out an event. 
+   * 
+   * @param {Object} e - The event that contains the channel and it's value
+   */
+  handleChange(e) {
+    const { value } = e.target
+    const { channelIndex } = e.target.dataset
+    const channelValue = parseInt(value, 10)
+
+    this.dispatchEvent(new CustomEvent('update-channel', {
+      detail: {
+        channelIndex,
+        channelValue
+      }
+    }))
+  }
+
+  shouldUpdate(changedProps) {
+    const { refresh } = this
+
+    // Make sure that when refresh is changed (especially to false) 
+    // that the component renders at least once so that something is visible for the user
+    if (changedProps.has('refresh')) {
+      return true
+    }
+
+    return refresh
+  }
+
+  render() {
+    const { channels } = this
+
+    return html`
+      ${shared}
+
+      <style>
+        .items {
+          counter-reset: universe;
+        }
+
+        .item {
+          flex: 0 0 3em;
+          position: relative;
+          padding: 0 .25em 0 1.75em;
+        }
+
+        .item:before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          counter-increment: universe;
+          content: counter(universe); 
+          font-size: 0.65em;
+          opacity: 0.7;
+        }
+      </style>
+
+      <div class="items">
+
+        ${channels.map((channel, index) => html`
+          <div class="item">
+            <input 
+              type="number" 
+              min=0 
+              max=255
+              .value="${channel}" 
+              data-channel-index="${index}"
+              @change="${e => this.handleChange(e)}"
+            />
+          </div>
+          `
+        )}
+      </div>
+    `
+  }
+
+}
+
+customElements.define('channel-grid', ChannelGrid)

src/components/universe-manager/index.js → src/components/universe-manager/universe-manager.js

@@ -3,9 +3,10 @@ import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import uuidv1 from 'uuid/v1.js'
-import { addUniverse, removeUniverse, resetUniverseAndFixtures } from '../../actions/index.js'
+import { addUniverse, removeUniverse, resetUniverseAndFixtures, setChannel, setUniverse } from '../../actions/index.js'
 import { getUniverses, getLive } from '../../selectors/index.js'
-import '../channel-grid/index.js'
+import '../channel-grid/channel-grid.js'
+import { addToBatch } from '../../utils/index.js'
 
 import '@polymer/paper-button/paper-button.js'
 import { buttons } from '../../styles/buttons.js'
@@ -31,7 +32,8 @@ class UniverseManager extends connect(store)(LitElement) {
     store.dispatch(addUniverse({ 
       id, 
       channels: [...Array(512)].map(() => 0), 
-      name: `${id}` 
+      name: `${id}`,
+      refresh: false
     }))
   }
 
@@ -44,6 +46,39 @@ class UniverseManager extends connect(store)(LitElement) {
     store.dispatch(resetUniverseAndFixtures(0))
   }
 
+  /**
+   * Update a specific channel. 
+   * 
+   * @param {Object} e - The event that contains the channel and the value
+   */
+  updateChannel(e) {
+    const { channelIndex, channelValue } = e.detail
+
+    store.dispatch(setChannel(0, channelIndex, channelValue))
+
+    addToBatch(channelIndex, channelValue)
+
+    const now = new Date()
+
+    // Send the universe to the UsbDmxManager
+    window.dispatchEvent(new CustomEvent('send-universe-to-usb-dmx-controller', { detail: { now } }))
+
+    // Send the universe to the FivetwelveManager
+    window.dispatchEvent(new CustomEvent('send-universe-to-fivetwelve', { detail: { now } }))
+  }
+
+  /**
+   * Value of refresh was updated
+   * 
+   * @param {Object} e - The event
+   */
+  handleRefreshChange(e) {
+    const { universeId } = e.target
+    const refresh = e.target.checked
+
+    store.dispatch(setUniverse(universeId, { refresh }))
+  }
+
   render() {
     const { universes, live } = this
 
@@ -70,8 +105,20 @@ class UniverseManager extends connect(store)(LitElement) {
 
           <paper-button @click="${e => this.resetUniverse(e)}" .universeId="${universe.id}">Reset</paper-button>
 
+          <label for="refresh">Auto-Refresh</label>
+          <input 
+            name="refresh" 
+            type="checkbox" 
+            .checked="${universe.refresh}"
+            .universeId="${universe.id}"
+            @click="${e => this.handleRefreshChange(e)}" />
+
           <div>
-            <channel-grid .channels="${universe.channels}"></channel-grid>
+            <channel-grid 
+              .channels="${universe.channels}"
+              @update-channel="${e => this.updateChannel(e)}"
+              .refresh="${universe.refresh}"
+            ></channel-grid>
           </div>
 
         </div>

src/constants/index.js

@@ -73,6 +73,7 @@ export const ADD_VENUE_SLOT = uuidv1()
 export const SET_VENUE_SLOT = uuidv1()
 export const REMOVE_VENUE_SLOT = uuidv1()
 export const SET_LUMINAVE_SERVER = uuidv1()
+export const SET_UNIVERSE = uuidv1()
 
 /*
  * localStorage
@@ -91,7 +92,8 @@ export const FIXTURE_TYPES = ['EuroliteTMH8', 'FunGenerationSeParQuadLedRgbUv',
   'RobeRobin300LEDWash', 'BasicRGBW', 'BasicRGBDimmer', 'OppskPar', 'SolarStar2', 'BasicColorDimmableTransform',
   'StairvilleWildWashPro648Rgb', 'DunarniaLedPar', 'LaserworldCs1000RgbMk2', 'BasicColorCMY',
   'InvolightLedParSlim', 'InvolightLedPar64', 'BasicDimmerStrobe', 'InvolightLedPar170',
-  'CameoMovoBeamZ100', 'CameoMovoBeam100', 'CameoHydrabeam100RGBW'
+  'CameoMovoBeamZ100', 'CameoMovoBeam100', 'CameoHydrabeam100RGBW', 'ShowtecHelixQ4000', 'ShowtecPerformer2000',
+  'InvolightSlimPar784', 'BasicLedBar', 'InvolightMovingBar1808'
 ]
 
 export const FIXTURE_PROPERTIES = ['color', 'dimmer', 'strobe', 'white',
@@ -106,7 +108,7 @@ export const FIXTURE_PROPERTIES = ['color', 'dimmer', 'strobe', 'white',
   'colorWheel', 'gobo1', 'gobo1Rotation', 'gobo2', 'gobo2Rotation', 'gobo3', 'gobo3Rotation',
   'beamIris', 'focusTime', 'colorTime', 'beamTime', 'goboTime', 'control', 'shutter', 'auraShutter',
   'auraDimmer', 'auraColor', 'beamColor', 'beamDimmer', 'beamShutter', 'circle', 'manualPosition', 'horizontal',
-  'patternConstruction', 'colorSelection', 'amber'
+  'patternConstruction', 'colorSelection', 'amber', 'lime', 'dimmerSpeed', 'tiltSpeed'
 ]
 
 export const MIDI_TYPE_BUTTON = 'Button'

src/reducers/index.js

@@ -98,7 +98,7 @@ export const connectionManager = (
 /*
  * Handle the DMX512 universes
  */
-export const universeManager = (state = [], { type, universe, universeIndex, universeId, channelIndex, value, channels }) => {
+export const universeManager = (state = [], { type, universe, universeIndex, universeId, channelIndex, value, channels, data }) => {
 
   if (universeId !== undefined) {
     universeIndex = state.findIndex(universe => universe.id === universeId)
@@ -125,6 +125,10 @@ export const universeManager = (state = [], { type, universe, universeIndex, uni
       // }
     case constants.GET_CHANNEL:
       return state
+
+    case constants.SET_UNIVERSE:
+      return update(state, { [universeIndex]: { $merge: { ...data } } })
+
     default:
       return state
   }

src/utils/dmx-fixtures.js

@@ -39,4 +39,8 @@ export { default as InvolightLedPar170 } from './dmx/InvolightLedPar170.js'
 export { default as CameoMovoBeamZ100 } from './dmx/CameoMovoBeamZ100.js'
 export { default as CameoMovoBeam100 } from './dmx/CameoMovoBeam100.js'
 export { default as CameoHydrabeam100RGBW } from './dmx/CameoHydrabeam100RGBW.js'
-
+export { default as ShowtecHelixQ4000 } from './dmx/ShowtecHelixQ4000.js'
+export { default as ShowtecPerformer2000 } from './dmx/ShowtecPerformer2000.js'
+export { default as InvolightSlimPar784 } from './dmx/InvolightSlimPar784.js'
+export { default as InvolightMovingBar1808 } from './dmx/InvolightMovingBar1808.js'
+export { default as BasicLedBar } from './dmx/BasicLedBar.js'

src/utils/dmx/BasicDimmerStrobe.js

@@ -7,7 +7,7 @@ export default class BasicDimmerStrobe extends DmxDevice {
     super(Object.assign({}, options, {
       params: {
         dimmer: new RangeParam(1, { min: 0, max: 255 }),
-        strobe: new RangeParam(1, { min: 0, max: 255 })
+        strobe: new RangeParam(2, { min: 0, max: 255 })
       }
     }))
 

src/utils/dmx/BasicLedBar.js

@@ -0,0 +1,24 @@
+import RgbParam from './param/RgbParam.js'
+import RangeParam from 'fivetwelve/lib/param/RangeParam.js'
+
+import DmxDevice from './DmxDevice.js'
+
+export default class BasicLedBar extends DmxDevice {
+  constructor(options) {
+    super(Object.assign({}, options, {
+      params: {
+        color: new RgbParam([1, 2, 3]),
+        white: new RangeParam(4, { min: 0, max: 255 }),
+        dimmer: new RangeParam(5, { min: 0, max: 255 }),
+        strobe: new RangeParam(6, { min: 0, max: 255 })
+      }
+    }))
+
+    this.layout = {}
+    this.layout.width = 1
+    this.layout.height = 1
+
+    this.channels = 6
+    this.weight = 0
+  }
+}

src/utils/dmx/InvolightMovingBar1808.js

@@ -0,0 +1,28 @@
+import RgbParam from './param/RgbParam.js'
+import RangeParam from 'fivetwelve/lib/param/RangeParam.js'
+
+import DmxDevice from './DmxDevice.js'
+
+export default class InvolightMovingBar1808 extends DmxDevice {
+  constructor(options) {
+    super(Object.assign({}, options, {
+      params: {
+        tilt: new RangeParam(1, { min: 0, max: 255 }),
+        tiltSpeed: new RangeParam(2, { min: 0, max: 255 }),
+        // 3: Program
+        // 4: Program Speed
+        dimmer: new RangeParam(5, { min: 0, max: 255 }),
+        strobe: new RangeParam(6, { min: 0, max: 255 }),
+        color: new RgbParam([7, 8, 9]),
+        white: new RangeParam(10, { min: 0, max: 255 })
+      }
+    }))
+
+    this.layout = {}
+    this.layout.width = 1
+    this.layout.height = 1
+
+    this.channels = 10
+    this.weight = 1.2
+  }
+}

src/utils/dmx/InvolightSlimPar784.js

@@ -0,0 +1,24 @@
+import RgbParam from './param/RgbParam.js'
+import RangeParam from 'fivetwelve/lib/param/RangeParam.js'
+
+import DmxDevice from './DmxDevice.js'
+
+export default class InvolightSlimPar784 extends DmxDevice {
+  constructor(options) {
+    super(Object.assign({}, options, {
+      params: {
+        color: new RgbParam([1, 2, 3]),
+        white: new RangeParam(4, { min: 0, max: 255 }),
+        dimmer: new RangeParam(5, { min: 0, max: 255 }),
+        strobe: new RangeParam(6, { min: 0, max: 255 })
+      }
+    }))
+
+    this.layout = {}
+    this.layout.width = 1
+    this.layout.height = 1
+
+    this.channels = 6
+    this.weight = 1.2
+  }
+}

src/utils/dmx/ShowtecHelixQ4000.js

@@ -0,0 +1,22 @@
+import RgbParam from './param/RgbParam.js'
+import RangeParam from 'fivetwelve/lib/param/RangeParam.js'
+
+import DmxDevice from './DmxDevice.js'
+
+export default class ShowtecHelixQ4000 extends DmxDevice {
+  constructor(options) {
+    super(Object.assign({}, options, {
+      params: {
+        color: new RgbParam([1, 2, 3]),
+        white: new RangeParam(4, { min: 0, max: 255 })
+      }
+    }))
+
+    this.layout = {}
+    this.layout.width = 1
+    this.layout.height = 1
+
+    this.channels = 4
+    this.weight = 0
+  }
+}