wip

app/electron/main.js

@@ -25,8 +25,12 @@ const isDev = process.env.NODE_ENV === 'development'
 const port = 40992 // Hardcoded; needs to match webpack.development.js and package.json
 const selfHost = `http://localhost:${port}`
 
-const { autoDetect, ILaunchpad, RgbColor } = require('launchpad.js')
-const { colorFromRGB } = require('launchpad.js/dist/colorHelpers')
+const {
+  autoDetect,
+  ILaunchpad,
+  RgbColor,
+  colors: { colorFromRGB },
+} = require('launchpad.js')
 const { DMX, EnttecUSBDMXProDriver, UniverseData } = require('dmx-ts')
 
 let win
@@ -357,5 +361,10 @@ ipcMain.on('dmxUpdate', (event, universeData) => {
 })
 
 ipcMain.on('lpPadColor', (event, { button, color }) => {
-  lp.setButtonColor(parseInt(button), colorFromRGB(color))
+  console.log("COLOR => ", color)
+  try {
+    lp.setButtonColor(parseInt(button), colorFromRGB(color))
+  } catch (ex) {
+    console.log("EX => ", ex)
+  }
 })

app/src/components/Pad.tsx

@@ -1,7 +1,7 @@
-import { Paper, rgbToHex, styled } from '@material-ui/core'
+import { Paper, styled } from '@material-ui/core'
 import { CHANNELS } from 'Constants/ipc'
 import { changeColor, setPressed } from 'Redux/components/pad/padActions'
-import { ColorOff, randomRGB } from 'Utils/color'
+import { ColorOff, randomRGB, rgbToHex } from 'Utils/color'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -26,10 +26,13 @@ const Pad = ({ x, y }: Props) => {
 
   useEffect(() => {
     console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
-    if (isPressed) dispatch(changeColor(button, randomRGB()))
-    // if (!isPressed)
-    //   dispatch(changeColor(button, ColorOff))
-      // setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
+    if (isPressed) {
+      dispatch(changeColor(button, randomRGB()))
+      return
+    }
+    if (!isPressed) {
+      setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
+    }
   }, [isPressed])
 
   const onClick = () => {
@@ -48,6 +51,8 @@ const Pad = ({ x, y }: Props) => {
     dispatch(setPressed(button, false))
   }
 
+  // console.log("RGB=>", color)
+
   const Item = styled(Paper)(() => ({
     backgroundColor: color === ColorOff ? '#fff' : rgbToHex(color),
     padding: 10,

app/src/components/Receiver.tsx

@@ -4,17 +4,20 @@ import { setPressed } from 'Redux/components/pad/padActions'
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
+type Props = { event: string, button: number }
+
 const Receiver = () => {
   const dispatch = useDispatch()
 
   useEffect(() => console.log('Receiver listening!'), [])
 
-  // @ts-ignore
-  window.api.receive(CHANNELS.LP.PAD, ({ event, button }) => {
+  window.api.receive(CHANNELS.LP.PAD, ({ event, button }: Props) => {
+    // @ts-ignore
     dispatch(setPressed(button.nr, event === BUTTON_DOWN ?? false))
   })
 
   return <></>
 }
 
 export default Receiver
+

app/src/redux/components/pad/padReducer.ts

@@ -1,15 +1,17 @@
 import { createSlice } from '@reduxjs/toolkit'
-import { ColorOff } from 'Utils/color'
+import { ColorOff, randomRGB } from 'Utils/color'
 import { getAllButtons } from 'Utils/index'
 import { NAME } from './padTypes'
+import { RgbColor } from 'launchpad.js'
 
 const padReducer = createSlice({
   name: NAME,
   initialState: {
+    color: '',
     buttons: getAllButtons().reduce(
       (acc, value) => ({
         ...acc,
-        [value]: { color: ColorOff, isPressed: false },
+        [value]: { color: JSON.stringify(ColorOff), isPressed: false },
       }),
       {}
     ),
@@ -23,7 +25,6 @@ const padReducer = createSlice({
     setPressed(state: any, action) {
       const { button, pressed } = action.payload
       state.buttons[button].isPressed = pressed
-      console.log(state, action)
     },
   },
 })