From e33beb7d97b99d44a6da32053692649b3e193b18 Mon Sep 17 00:00:00 2001 From: YeonV Date: Thu, 10 Oct 2024 19:54:13 +0200 Subject: [PATCH] send raw MIDI messages via UI --- src/components/Midi/LaunchpadButtonMap.tsx | 39 ++++++++++++----- src/components/Midi/lpColors.ts | 32 ++++++++++---- src/store/ui/storeMidi.tsx | 49 ++++++++++++++++++++++ 3 files changed, 102 insertions(+), 18 deletions(-) diff --git a/src/components/Midi/LaunchpadButtonMap.tsx b/src/components/Midi/LaunchpadButtonMap.tsx index 68005128..f1c90a9e 100644 --- a/src/components/Midi/LaunchpadButtonMap.tsx +++ b/src/components/Midi/LaunchpadButtonMap.tsx @@ -1,5 +1,5 @@ -import { ArrowForwardIos, BrightnessHigh, Collections, Pause, PlayArrow, ViewSidebar, Menu as MenuIcon, Save, Delete, DeleteForever, Visibility, Autorenew, Fullscreen, FullscreenExit, BugReport } from '@mui/icons-material' -import { Box, Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Typography, useTheme } from '@mui/material' +import { ArrowForwardIos, BrightnessHigh, Collections, Pause, PlayArrow, ViewSidebar, Menu as MenuIcon, Save, Delete, DeleteForever, Visibility, Autorenew, Fullscreen, FullscreenExit, BugReport, Send } from '@mui/icons-material' +import { Box, Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Select, SelectChangeEvent, Stack, TextField, TextFieldProps, Typography, useTheme } from '@mui/material' import BladeIcon from '../Icons/BladeIcon/BladeIcon' import useStore from '../../store/useStore' import Assign from '../Gamepad/Assign' @@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react' import { WebMidi } from 'webmidi' import LaunchpadButton from './LaunchpadButton' import { getColorFromValue } from './lpColors' -import { defaultMapping, IMapping, LpMapping } from '../../store/ui/storeMidi' +import { defaultMapping, IMapping, Launchpad, LpMapping } from '../../store/ui/storeMidi' import LaunchpadColors from './LaunchpadColors' import { download } from '../../utils/helpers' @@ -15,6 +15,7 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre const theme = useTheme() const parentRef = useRef(null); const childRef = useRef(null); + const [midiMessageToSend, setMidiMessageToSend] = useState('') const [scale, setScale] = useState(1); const [midiLogs, setMidiLogs] = useState<{ name: string; @@ -365,13 +366,31 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen, fullScreen, setFullScre setMidiLogs([])}>Clear Logs - - {midiLogs.map((log, index) => - {log.name} - {log.note} - {log.button} - )} - + + + {midiLogs.map((log, index) => + {log.name} + {log.note} + {log.button} + )} + + + {Object.keys(Launchpad.X.command).length && } + setMidiMessageToSend(e.target.value)} /> + + + } ) diff --git a/src/components/Midi/lpColors.ts b/src/components/Midi/lpColors.ts index bf2cdc9b..1fd20fcc 100644 --- a/src/components/Midi/lpColors.ts +++ b/src/components/Midi/lpColors.ts @@ -43,16 +43,32 @@ 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 + // 'red': 0x0F, + // 'orange': 0x2F, + // 'lime': 0x3C, + // 'darkred': 0x0D, + // 'darkolivegreen': 0x1C, + // 'yellow': 0x3E, + // 'black': 0x0C, + // 'darkorange': 0x3F, + '#FF0000': 0x0F, + '#FFA500': 0x2F, + '#00FF00': 0x3C, + '#8B0000': 0x0D, + '#526F50': 0x1C, + '#FFFF00': 0x3E, + '#000000': 0x0C, + '#FF7F00': 0x3F, } export const lpColors = { + // 'red': 0x05, + // 'orange': 0x09, + // 'lime': 0x15, + // 'darkred': 0x07, + // 'darkolivegreen': 0x17, + // 'yellow': 0x0d, + // 'black': 0x00, + // 'darkorange': 0x3c, '#616161': 0x00, '#b3b3b3': 0x01, '#dddddd': 0x02, diff --git a/src/store/ui/storeMidi.tsx b/src/store/ui/storeMidi.tsx index f99cf21b..95fbcf04 100644 --- a/src/store/ui/storeMidi.tsx +++ b/src/store/ui/storeMidi.tsx @@ -1,5 +1,6 @@ import { produce } from 'immer' import type { IStore } from '../useStore' +import { lpColors, lpsColors } from '../../components/Midi/lpColors' export interface IMidiMapping { command?: string @@ -70,6 +71,54 @@ export const LpMapping = { [-1, -1, -1, -1, -1, -1, -1, -1, -1], ] } +export const Launchpad = { + X: { + buttonNumbers: [ + [11, 12, 13, 14, 15, 16, 17, 18, 19], + [21, 22, 23, 24, 25, 26, 27, 28, 29], + [31, 32, 33, 34, 35, 36, 37, 38, 39], + [41, 42, 43, 44, 45, 46, 47, 48, 49], + [51, 52, 53, 54, 55, 56, 57, 58, 59], + [61, 62, 63, 64, 65, 66, 67, 68, 69], + [71, 72, 73, 74, 75, 76, 77, 78, 79], + [81, 82, 83, 84, 85, 86, 87, 88, 89], + [91, 92, 93, 94, 95, 96, 97, 98, 99], + ], + colors: lpColors, + command: { + 'programmer': [0xF0, 0x00, 0x20, 0x29, 0x02, 0x0C, 0x0E, 0x01, 0xF7], + 'live': [0xF0, 0x00, 0x20, 0x29, 0x02, 0x0C, 0x0E, 0x00, 0xF7], + 'standalone': [0xF0, 0x00, 0x20, 0x29, 0x02, 0x0C, 0x10, 0x00, 0xF7], + 'daw': [0xF0, 0x00, 0x20, 0x29, 0x02, 0x0C, 0x10, 0x01, 0xF7], + 'ledOn': [0x90, "buttonNumber", "color"], + 'ledFlash': [0x91, "buttonNumber", "color"], + 'ledPulse': [0x92, "buttonNumber", "color"], + }, + sendCommand: { + 'ledOff': (buttonNumber: number) => [0x90, buttonNumber, 0x00], + 'ledOn': (buttonNumber: number, color: keyof typeof lpColors | number ) => [0x90, buttonNumber, typeof color === 'number' ? color : lpColors[color]], + 'ledFlash': (buttonNumber: number, color: keyof typeof lpColors | number ) => [0x91, buttonNumber, typeof color === 'number' ? color : lpColors[color]], + 'ledPulse': (buttonNumber: number, color: keyof typeof lpColors | number ) => [0x92, buttonNumber, typeof color === 'number' ? color : lpColors[color]], + } + }, + S: { + buttonNumbers: [ + [112, 113, 114, 115, 116, 117, 118, 119, 120], + [96, 97, 98, 99, 100, 101, 102, 103, 104], + [80, 81, 82, 83, 84, 85, 86, 87, 88], + [64, 65, 66, 67, 68, 69, 70, 71, 72], + [48, 49, 50, 51, 52, 53, 54, 55, 56], + [32, 33, 34, 35, 36, 37, 38, 39, 40], + [16, 17, 18, 19, 20, 21, 22, 23, 24], + [0, 1, 2, 3, 4, 5, 6, 7, 8], + [-1, -1, -1, -1, -1, -1, -1, -1, -1], + ], + colors: lpsColors, + sendCommand: { + 'ledOff': (buttonNumber: number) => [0x90, buttonNumber, 0x0C], + } + } +} export function getUiBtnNo(inputInt: number): number | null { for (let i = 0; i < LpMapping.LaunchpadS.length; i++) {