feat(universe): Change channel value manually

In order to change DMX values manually it is now possible to use the UniverseManager to change the
values for each channel manually.

fix #127

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: true
     }))
   }
 
@@ -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

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/views/universe-view.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-element'
 import { PageViewElement } from './page-view-element.js'
 
-import '../components/universe-manager/index.js'
+import '../components/universe-manager/universe-manager.js'
 
 // These are the shared styles needed by this element.
 // import { SharedStyles } from './shared-styles.js'