Release 2.0.105-b1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.104-b7",
+  "version": "2.0.105-b1",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,

src/components/Midi/LaunchpadButton.tsx

@@ -125,7 +125,7 @@ const LaunchpadButton = ({
     setMidiMapping({
       ...midiMapping,
       0: {
-        ...midiMapping,
+        ...midiMapping[0],
         [uiButtonNumber]: {
           ...currentMapping,
           [type]: color,

src/components/Midi/LaunchpadButtonMap.tsx

@@ -39,6 +39,12 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
     const setMidiSceneActiveColor = useStore((state) => state.setMidiSceneActiveColor)
     const setMidiSceneInactiveColor = useStore((state) => state.setMidiSceneInactiveColor)
     const setMidiCommandColor = useStore((state) => state.setMidiCommandColor)
+    const midiSceneActiveColor = useStore((state) => state.midiColors.sceneActiveColor)
+    const midiSceneInactiveColor = useStore((state) => state.midiColors.sceneInactiveColor)
+    const midiCommandColor = useStore((state) => state.midiColors.commandColor)
+    const setMidiSceneActiveType = useStore((state) => state.setMidiSceneActiveType)
+    const setMidiSceneInactiveType = useStore((state) => state.setMidiSceneInactiveType)
+    const setMidiCommandType = useStore((state) => state.setMidiCommandType)
     const pressedButtonColor = useStore((state) => state.midiColors.pressedButtonColor)
     const paused = useStore((state) => state.paused)
     const matrix = Array.from({ length: 9 }, () => Array.from({ length: 9 }, () => 0))
@@ -281,6 +287,9 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
                                                 setMidiSceneActiveColor(lp.globalColors.sceneActiveColor)
                                                 setMidiSceneInactiveColor(lp.globalColors.sceneInactiveColor)
                                                 setMidiCommandColor(lp.globalColors.commandColor)
+                                                setMidiSceneActiveType(lp.globalColors.sceneActiveType)
+                                                setMidiSceneInactiveType(lp.globalColors.sceneInactiveType)
+                                                setMidiCommandType(lp.globalColors.commandType)
                                                 initMidi()
                                             }} 
                                             value={model}>
@@ -315,33 +324,36 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre
                         {row.map((_button, buttonIndex) => {
                         const row = 9 - rowIndex
                         const column = buttonIndex + 1
-                        const buttonNumber = `${row}${column}`
-                        const btnNumberInt = parseInt(buttonNumber)
-                        const btn = midiMapping[0][btnNumberInt]
+                        const uiButtonNumber = `${row}${column}`
+                        const uiBtnNumberInt = parseInt(uiButtonNumber)
+                        const btn = midiMapping[0][uiBtnNumberInt]
+                        const buttonNumber = btn?.buttonNumber
 
-                        // Use the buttonNumber from the mapping for functional logic
-                        const functionalButtonNumber = btn?.buttonNumber
-                        const bgColor = functionalButtonNumber === -1 ? '#000' : (midiEvent.button === functionalButtonNumber)
+                        const sceneActiveColor = btn?.colorSceneActive || midiSceneActiveColor || lp.globalColors.sceneActiveColor
+                        const sceneInactiveColor = btn?.colorSceneInactive || midiSceneInactiveColor || lp.globalColors.sceneInactiveColor
+                        const commandColor = btn?.colorCommand || midiCommandColor || lp.globalColors.commandColor
+                        const command = btn?.command
+                        const sceneActive = btn?.payload?.scene === recentScenes[0]
+
+                        const clr = (color: string) => isRgb && color.startsWith('rgb') ? color : getColorFromValue(color) || '#000'                        
+
+                        const bgColor = buttonNumber === -1 ? '#000' : (midiEvent.button === buttonNumber)
                             ? ( pressedButtonColor || theme.palette.primary.main )
-                            : btn?.command && 
-                            btn?.command === 'scene' &&
-                            btn?.payload?.scene === recentScenes[0]
-                            ? (isRgb && btn?.colorSceneActive?.startsWith('rgb') ? btn?.colorSceneActive : getColorFromValue((btn?.colorSceneActive || '1E')) || '#0f0')
-                            : btn?.command && 
-                                btn?.command === 'scene' 
-                                ? (isRgb && btn?.colorSceneInactive?.startsWith('rgb') ? btn?.colorSceneInactive : getColorFromValue((btn?.colorSceneInactive || '07')) || '#f00')
-                                : btn?.command && 
-                                btn?.command !== 'none'  && rowIndex !== 0
-                                ? (isRgb && btn?.colorCommand?.startsWith('rgb') ? btn?.colorCommand : getColorFromValue((btn?.colorCommand || '63')) || '#ff0')
-                                : rowIndex === 0 || buttonIndex === 8
-                                    ? '#000' 
-                                    : '#ccc'
+                            : command && command === 'scene' && sceneActive
+                                ? clr(sceneActiveColor)
+                                : command && command === 'scene' 
+                                    ? clr(sceneInactiveColor)
+                                    : command && command !== 'none'  && rowIndex !== 0
+                                        ? clr(commandColor)
+                                        : rowIndex === 0 || buttonIndex === 8
+                                            ? '#000' 
+                                            : '#ccc'
 
                         return (
                             <LaunchpadButton
                                 showMidiLogs={showMidiLogs}
-                                hidden={functionalButtonNumber === -1}
-                                uiButtonNumber={btnNumberInt}
+                                hidden={buttonNumber === -1}
+                                uiButtonNumber={uiBtnNumberInt}
                                 active={!!(rowIndex === 0 && btn?.command && btn?.command !== 'none')}
                                 bgColor={bgColor}
                                 key={'button' + buttonIndex}

src/components/Midi/MidiListener.tsx

@@ -38,7 +38,8 @@ const MIDIListener = () => {
   const setMidiMapping = useStore((state) => state.setMidiMapping)  
 
   const sceneDialogOpen = useStore((state) => state.dialogs.addScene.sceneKey !== '')
-  const fn = MidiDevices[midiType][midiModel].fn
+  const lp = MidiDevices[midiType][midiModel]
+  const fn = lp.fn
 
   const setSystemSetting = (setting: string, value: any) => { setSystemConfig({ [setting]: value }) }
 
@@ -101,20 +102,22 @@ const MIDIListener = () => {
       if (buttonNumber === -1) return
 
       const sendMidiMessage = (color: string, typeCommand: string) => {
-        sendMidiMessageHelper(fn, output, buttonNumber, color, typeCommand, '', false)
+        // console.log(1,'color',color, typeCommand, lp.globalColors.commandType)
+        sendMidiMessageHelper(fn, output, buttonNumber, color, typeCommand, false)
       }
 
       try {
         if (value.command !== 'scene' && value.command && value.command !== 'none') {
           const color = value.colorCommand || commandColor
-          sendMidiMessage(color, value.typeCommand)
+          // console.log(1,'color',color, value.typeCommand, lp.globalColors.commandType)
+          sendMidiMessage(color, color.startsWith('rgb') ? 'rgb': value.typeCommand || lp.globalColors.commandType)
         } else if (value.command === 'scene') {
           const colorActive = value.colorSceneActive || midiSceneActiveColor
           const colorInactive = value.colorSceneInactive || midiSceneInactiveColor
           const isActiveScene = value.payload?.scene === recentScenes
           const color = isActiveScene ? colorActive : colorInactive
           const typeCommand = isActiveScene ? value.typeSceneActive : value.typeSceneInactive
-          sendMidiMessage(color, typeCommand)
+          sendMidiMessage(color, typeCommand || lp.globalColors.commandType)
         }
       } catch (error) {
         console.error('Error sending MIDI message:', error)
@@ -255,10 +258,9 @@ const MIDIListener = () => {
     }
 
     const sendSceneMidiMessage = (output: any, buttonNumber: number, value: any, isActive: boolean) => {
-      const color = isActive ? value.colorSceneActive : value.colorSceneInactive
-      const typeCommand = isActive ? value.typeSceneActive : value.typeSceneInactive
-      const defaultColor = isActive ? midiSceneActiveColor : midiSceneInactiveColor
-      sendMidiMessageHelper(fn, output, buttonNumber, color, typeCommand, defaultColor, isActive)
+      const color = isActive ? (value.colorSceneActive || midiSceneActiveColor || lp.globalColors.sceneActiveColor) : (value.colorSceneInactive || midiSceneInactiveColor || lp.globalColors.sceneInactiveColor)
+      const typeCommand = isActive ? (value.typeSceneActive || lp.globalColors.sceneActiveType) : (value.typeSceneInactive || lp.globalColors.sceneInactiveType)
+      sendMidiMessageHelper(fn, output, buttonNumber, color, typeCommand, isActive)
     }      
 
     enableWebMidi()

src/store/ui/storeMidi.tsx

@@ -221,6 +221,7 @@ const storeMidi = (set: any, get: any) => ({
           throw new Error('Input must be a 9x9 array')
         }
         const updatedMapping = { ...state.midiMapping }
+        updatedMapping[0] = { ...state.midiMapping[0] }
 
         for (let row = 0; row < 9; row++) {
           for (let col = 0; col < 9; col++) {

src/utils/MidiDevices/colorHelper.ts

@@ -59,18 +59,24 @@ export const rgbValues = (rgbString: string) => rgbString.match(/\d+/g)?.map(Num
 
 export const sendMidiMessageHelper = (
   fn: typeof MidiDevices[keyof typeof MidiDevices][keyof typeof MidiDevices[keyof typeof MidiDevices]]['fn'],
-  output: any, buttonNumber: number, color: string, typeCommand: string, defaultColor: string, isActive: boolean) => {  
+  output: any,
+  buttonNumber: number,
+  color: string,
+  typeCommand: string,
+  isActive: boolean
+) => {  
   if (!output || buttonNumber === -1 || Number.isNaN(buttonNumber)) {
     console.error('No MIDI output devices found')
     return
   }
-
-  const colorValue = parseInt(color || defaultColor || (isActive ? '1E' : '3C'), 16)
-
+  // console.log(1,'rgb' in fn , color?.startsWith('rgb') , typeCommand === 'rgb')  
   if ('rgb' in fn && fn.rgb && color?.startsWith('rgb') && typeCommand === 'rgb') {
     const [r, g, b] = rgbValues(color) || (isActive ? [0, 255, 0] : [255, 0, 0])
     output.send(fn.rgb(buttonNumber, r, g, b))
-  } else {
+    // console.log('rgb', buttonNumber, r, g, b)
+  } else {    
+    const colorValue = parseInt(color || (isActive ? '1E' : '3C'), 16)
+    // console.log(2, colorValue, color)
     if (typeCommand === '91' && 'ledFlash' in fn) {
       output.send(fn.ledFlash(buttonNumber, colorValue))
     } else if (typeCommand === '92' && 'ledPulse' in fn) {