add custom color picker for lps

YeonV · Oct 5, 2024 · 84e42d0 · 84e42d0
1 parent 8cf6a79
commit 84e42d0
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 17 deletions.
diff --git a/src/components/Midi/LaunchpadButton.tsx b/src/components/Midi/LaunchpadButton.tsx
@@ -26,6 +26,7 @@ const LaunchpadButton = ({
     bgColor?: string
 }) => {
   const [open, setOpen] = useState(false)
+  const lpType = useStore((state) => state.lpType)
   const midiMapping = useStore((state) => state.midiMapping)
   const midiEvent = useStore((state) => state.midiEvent)
   const setMidiMapping = useStore((state) => state.setMidiMapping)
@@ -126,7 +127,7 @@ const LaunchpadButton = ({
                             <MenuItem value={'91'}>Flash</MenuItem>
                             <MenuItem value={'92'}>Pulse</MenuItem>
                             </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorSceneInactive || midiSceneInactiveColor)} onColorSelect={(color: string) => {
+                        <LpColorPicker defaultColor={getColorFromValue((currentMapping.colorSceneInactive || midiSceneInactiveColor), lpType)} onColorSelect={(color: string) => {
                             setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorSceneInactive: color}}})
                         }} />
                         </Stack>
@@ -141,7 +142,7 @@ const LaunchpadButton = ({
                             <MenuItem value={'91'}>Flash</MenuItem>
                             <MenuItem value={'92'}>Pulse</MenuItem>
                             </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorSceneActive || midiSceneActiveColor)} onColorSelect={(color: string) => {
+                        <LpColorPicker defaultColor={getColorFromValue((currentMapping.colorSceneActive || midiSceneActiveColor), lpType)} onColorSelect={(color: string) => {
                             setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorSceneActive: color}}})
                         }} />
                         </Stack>
@@ -155,7 +156,7 @@ const LaunchpadButton = ({
                         <MenuItem value={'91'}>Flash</MenuItem>
                         <MenuItem value={'92'}>Pulse</MenuItem>
                         </Select>
-                        <LpColorPicker defaultColor={getColorFromValue(currentMapping.colorCommand || midiCommandColor)} onColorSelect={(color: string) => {
+                        <LpColorPicker defaultColor={getColorFromValue((currentMapping.colorCommand || midiCommandColor), lpType)} onColorSelect={(color: string) => {
                             setMidiMapping({...midiMapping, 0: {...midiMapping[0], [buttonNumber]: {...currentMapping, colorCommand: color}}})
                         }} />
                 </Stack>}

diff --git a/src/components/Midi/LaunchpadButtonMap.tsx b/src/components/Midi/LaunchpadButtonMap.tsx
@@ -16,6 +16,8 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
     const [showMapping, setShowMapping] = useState(false)
     const setMidiMappingButtonNumbers = useStore((state) => state.setMidiMappingButtonNumbers)
     const initMidi = useStore((state) => state.initMidi)
+    const lpType = useStore((state) => state.lpType)
+    const setLpType = useStore((state) => state.setLpType)
     const midiEvent = useStore((state) => state.midiEvent)
     const midiOutput = useStore((state) => state.midiOutput)
     const recentScenes = useStore((state) => state.recentScenes)
@@ -189,13 +191,15 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
                 <MenuItem onClick={() => {
                     setMidiMappingButtonNumbers(LpMapping.LaunchpadX)
                     initMidi()
+                    setLpType('LPX')
                 }}>
                     <ListItemIcon><BladeIcon name='launchpad' /></ListItemIcon>
                     <ListItemText primary="Launchpad X" />
                 </MenuItem>
                 <MenuItem onClick={() => {
                     setMidiMappingButtonNumbers(LpMapping.LaunchpadS)
                     initMidi()
+                    setLpType('LPS')
                 }}>
                     <ListItemIcon><BladeIcon name='launchpad' /></ListItemIcon>
                     <ListItemText primary="Launchpad S" />
@@ -241,13 +245,13 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
             : btn?.command && 
               btn?.command === 'scene' &&
               btn?.payload?.scene === recentScenes[0]
-              ? getColorFromValue(btn?.colorSceneActive || '1E') || '#0f0'
+              ? getColorFromValue((btn?.colorSceneActive || '1E'), lpType) || '#0f0'
               : btn?.command && 
                 btn?.command === 'scene' 
-                ? getColorFromValue(btn?.colorSceneInactive || '07') || '#f00'
+                ? getColorFromValue((btn?.colorSceneInactive || '07'), lpType) || '#f00'
                 : btn?.command && 
                   btn?.command !== 'none'  && rowIndex !== 0
-                  ? getColorFromValue(btn?.colorCommand || '63') || '#ff0'
+                  ? getColorFromValue((btn?.colorCommand || '63'), lpType) || '#ff0'
                   : rowIndex === 0 || buttonIndex === 8
                     ? '#000' 
                     : '#ccc'

diff --git a/src/components/Midi/LaunchpadColors.tsx b/src/components/Midi/LaunchpadColors.tsx
@@ -15,6 +15,7 @@ const LaunchpadColors = ({component = 'Button'}:{component?: 'Button' | 'MenuIte
   const classes = useStyles()
   const [open, setOpen] = useState(false)
   const theme = useTheme()
+  const lpType = useStore((state) => state.lpType)
   const midiSceneInactiveColor = useStore((state) => state.midiColors.sceneInactiveColor)
   const midiSceneActiveColor = useStore((state) => state.midiColors.sceneActiveColor)
   const midiCommandColor = useStore((state) => state.midiColors.commandColor)
@@ -62,19 +63,19 @@ const LaunchpadColors = ({component = 'Button'}:{component?: 'Button' | 'MenuIte
             <Stack direction={'column'} spacing={1} mt={1}>
                 <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
                     <Typography>Scene inactive</Typography>
-                    <LpColorPicker defaultColor={getColorFromValue(midiSceneInactiveColor)} onColorSelect={(color: string) => {
+                    <LpColorPicker defaultColor={getColorFromValue(midiSceneInactiveColor, lpType)} onColorSelect={(color: string) => {
                         setMidiSceneInactiveColor(color)
                     }} />
                 </Stack>
                 <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
                     <Typography>Scene active</Typography>
-                    <LpColorPicker defaultColor={getColorFromValue(midiSceneActiveColor)} onColorSelect={(color: string) => {
+                    <LpColorPicker defaultColor={getColorFromValue(midiSceneActiveColor, lpType)} onColorSelect={(color: string) => {
                         setMidiSceneActiveColor(color)
                     }} />
                 </Stack>
                 <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
                     <Typography>Command</Typography>
-                    <LpColorPicker defaultColor={getColorFromValue(midiCommandColor)} onColorSelect={(color: string) => {
+                    <LpColorPicker defaultColor={getColorFromValue(midiCommandColor, lpType)} onColorSelect={(color: string) => {
                         setMidiCommandColor(color)
                     }} />
                 </Stack>

diff --git a/src/components/Midi/LpColorPicker.tsx b/src/components/Midi/LpColorPicker.tsx
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import { Box, Grid, Paper, Typography, Popover, Button, useTheme } from '@mui/material'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { darken } from '@mui/material/styles'
-import { IColor, lpColors, sortColorsByHSL, zeroPadHex } from './lpColors'
+import { IColor, lpColors, lpsColors, sortColorsByHSL, zeroPadHex } from './lpColors'
+import useStore from '../../store/useStore'
 
 interface LpColorPickerProps {
   onColorSelect?: (color: string) => void
@@ -13,6 +14,7 @@ const LpColorPicker = ({ onColorSelect, defaultColor }: LpColorPickerProps) => {
   const [selectedColor, setSelectedColor] = useState<IColor | null>(null)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const theme = useTheme()
+  const lpType = useStore((state) => state.lpType)
 
   useEffect(() => {
     if (defaultColor && lpColors[defaultColor as IColor]) {
@@ -23,7 +25,11 @@ const LpColorPicker = ({ onColorSelect, defaultColor }: LpColorPickerProps) => {
   const handleColorClick = (color: IColor) => {
     setSelectedColor(color)
     if (onColorSelect) {
-      onColorSelect(zeroPadHex(lpColors[color]))
+      if (lpType === 'LPX') {
+        onColorSelect(zeroPadHex(lpColors[color]))
+      } else {
+        onColorSelect(zeroPadHex((lpsColors as any)[color]))
+      }
     }
     setAnchorEl(null)
   }
@@ -35,8 +41,7 @@ const LpColorPicker = ({ onColorSelect, defaultColor }: LpColorPickerProps) => {
   const handleClose = () => {
     setAnchorEl(null)
   }
-
-  const sortedColors = sortColorsByHSL(Object.keys(lpColors) as IColor[])
+  const sortedColors = sortColorsByHSL(Object.keys(lpType === 'LPX' ? lpColors : lpsColors ) as IColor[])
   const open = Boolean(anchorEl)
   const id = open ? 'color-popover' : undefined
 
@@ -57,7 +62,7 @@ const LpColorPicker = ({ onColorSelect, defaultColor }: LpColorPickerProps) => {
           },
         }}
       >
-        {selectedColor ? zeroPadHex(lpColors[selectedColor]) : ''}
+        {selectedColor ? zeroPadHex(lpType === 'LPX' ? lpColors[selectedColor] : (lpsColors as any)[selectedColor]) : ''}
       </Button>
       <Popover
         id={id}
@@ -86,7 +91,7 @@ const LpColorPicker = ({ onColorSelect, defaultColor }: LpColorPickerProps) => {
                   onClick={() => handleColorClick(color)}
                 >
                   <Typography variant="caption" sx={{ color: theme.palette.getContrastText(color as string) }}>
-                    {zeroPadHex(lpColors[color])}
+                    {zeroPadHex(lpType === 'LPX' ? lpColors[color] : (lpsColors as any)[color])}
                   </Typography>
                 </Paper>
               </Grid>

diff --git a/src/components/Midi/lpColors.ts b/src/components/Midi/lpColors.ts
@@ -42,6 +42,16 @@ export const sortColorsByHSL = (colors: IColor[]) => {
   })
 }
 
+export const lpsColors = {
+  '#FF0000': 0x0F, // full red
+  '#FFA500': 0x2F, // full orange
+  '#00FF00': 0x3C, // full green
+  '#8B0000': 0x0D, // dim red
+  '#526F50': 0x1C, // dim green
+  '#FFFF00': 0x3E, // full yellow
+  '#000000': 0x0C, // off
+  '#FF7F00': 0x3F, // full amber
+}
 export const lpColors = {
     '#616161': 0x00,
     '#b3b3b3': 0x01,
@@ -173,10 +183,11 @@ export const lpColors = {
     '#c27661': 0x7f,
 }
 
-export const getColorFromValue = (value: string) => {
+export const getColorFromValue = (value: string, mode: 'LPX' | 'LPS' = 'LPX' ) => {
   if (value === 'undefined') return undefined;
+  const colors = mode === 'LPX' ? lpColors : lpsColors;
   const numericValue = parseInt(value, 16);
-  return Object.keys(lpColors).find(key => lpColors[key as IColor] === numericValue) || undefined;
+  return Object.keys(colors).find(key => colors[key as keyof typeof colors] === numericValue) || undefined;
 }
 
 export type IColor = keyof typeof lpColors
diff --git a/src/store/ui/storeMidi.tsx b/src/store/ui/storeMidi.tsx
@@ -73,6 +73,15 @@ export const LpMapping = {
 
 
 const storeMidi = (set: any) => ({
+  lpType: 'LPX' as 'LPX' | 'LPS',
+  setLpType: (type: 'LPX' | 'LPS') =>
+    set(
+      produce((state: IStore) => {
+        state.lpType = type
+      }),
+      false,
+      'setLpType'
+    ),
   midiInputs: [] as string[],
   setMidiInputs: (inputs: string[]) =>
     set(