Kenton Killamix Mini Controller

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_123":-5,"_20":124,"_22":125,"_126":127,"_128":129,"_26":130,"_24":131,"_132":-5,"_133":134,"_135":48,"_136":137,"_138":73,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},"handle","all","name","killamix","branchName","main","version","path","main.tsx","project",{"_33":79,"_13":14,"_35":80,"_46":-5,"_81":73,"_49":82,"_83":82,"_84":-5,"_85":-5,"_86":87,"_88":60,"_89":73,"_90":-5,"_91":-5,"_92":93,"_52":53,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_47":48},"tree",[71],"file",{"_33":56,"_57":58,"_59":60,"_13":19,"_61":62,"_63":64,"_17":65,"_66":-5,"_35":67,"_68":41,"_69":-5,"_18":70},"contents",[],"upstream",{"_33":34,"_35":36,"_37":38,"_13":16,"_39":40,"_17":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":12,"_52":53,"_54":55},"pull","ahead","behind","id","b5a7ec2a-2795-11f0-9d52-569c3dd06744","createdAt",["D",1746218439974],"updatedAt",["D",1732224678364],"projectId","b5a7ae72-2795-11f0-9d52-569c3dd06744",6,"forkedBranchId","forkedBranchVersion","lockfileKey","1759795625992-esm.town_v_all_kentonthing@6-main","deletedAt","isOwned",false,"privacy","unlisted","userHandle","orgId","ac07f7d9-2f7b-4820-84f1-ee64e6f1c40c","projectName","kentonthing","ec6048f2-2795-11f0-9d52-569c3dd06744","branchId","ec3446a8-2795-11f0-9d52-569c3dd06744","fileId","ec400916-2795-11f0-9d52-569c3dd06744","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\n// Text prompt mappings for encoders\nconst encoderMappings = [\n // Encoder 1: Filter Cutoff\n Array.from({length: 128}, (_, i) => `${Math.round(20 + (i / 127) * 20000)} Hz`),\n // Encoder 2: Resonance\n Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`),\n // Encoder 3: LFO Rate\n Array.from({length: 128}, (_, i) => `${(0.1 + (i / 127) * 19.9).toFixed(1)} Hz`),\n // Encoder 4: LFO Depth\n Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`),\n // Encoder 5: Attack\n Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`),\n // Encoder 6: Decay\n Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`),\n // Encoder 7: Sustain\n Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`),\n // Encoder 8: Release\n Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`),\n // Encoder 9: Master Volume\n Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`),\n];\n\n// Components\nconst Encoder = ({ value, onChange, index }) => (\n

\n {[...Array(16)].map((_, i) => (\n

\n ))}\n

\n onChange(index, parseInt(e.target.value))}\n />\n {index + 1}\n

{encoderMappings[index][value]}

\n);\n\nconst Button = ({ pressed, onChange, index }) => (\n onChange(index, true)}\n onMouseUp={() => onChange(index, false)}\n onTouchStart={() => onChange(index, true)}\n onTouchEnd={() => onChange(index, false)}\n />\n);\n\nconst ChannelSelector = ({ channel, onChange }) => (\n \n);\n\nconst MappingControl = ({ mappings, onMapChange, onSave, onLoad }) => {\n const [name, setName] = useState('');\n\n return (\n

Custom Mappings

\n {Object.entries(mappings).map(([control, mapping]) => (\n

\n {control}: \n onMapChange(control, e.target.value)}\n placeholder=\"Enter CC or parameter\"\n />\n

\n ))}\n setName(e.target.value)}\n placeholder=\"Mapping name\"\n />\n \n \n

\n );\n};\n\nconst ConnectionInstructions = () => (\n

How to Connect Your Kenton Killamix Mini

Ensure your Killamix Mini is connected to your computer via USB.
Use a Web MIDI API compatible browser (Chrome, Edge, or Opera).
Click the \"Connect MIDI\" button in the app.
In the MIDI device selection popup, choose your Killamix Mini.
Once connected, the app will start responding to your Killamix Mini inputs.

\n);\n\nconst Console = ({ logs, isOpen, onToggle }) => {\n const consoleRef = useRef(null);\n\n useEffect(() => {\n if (consoleRef.current) {\n consoleRef.current.scrollTop = consoleRef.current.scrollHeight;\n }\n }, [logs]);\n\n return (\n

\n MIDI Console {isOpen ? '▼' : '▲'}\n

\n {isOpen && (\n

\n {logs.map((log, index) => (\n

\n {log}\n

\n ))}\n

\n )}\n

\n );\n};\n\n// Main App Component\nfunction App() {\n const [midiAccess, setMidiAccess] = useState(null);\n const [midiInput, setMidiInput] = useState(null);\n const [midiOutput, setMidiOutput] = useState(null);\n const [channel, setChannel] = useState(1);\n const [encoders, setEncoders] = useState(Array(9).fill(0));\n const [buttons, setButtons] = useState(Array(9).fill(false));\n const [mappings, setMappings] = useState({});\n const [consoleLogs, setConsoleLogs] = useState([]);\n const [isConsoleOpen, setIsConsoleOpen] = useState(false);\n\n const addConsoleLog = useCallback((log) => {\n setConsoleLogs(prev => [...prev, `[${new Date().toISOString()}] ${log}`]);\n }, []);\n\n const connectMIDI = useCallback(async () => {\n try {\n const access = await navigator.requestMIDIAccess();\n setMidiAccess(access);\n\n access.inputs.forEach((input) => {\n if (input.name.includes('Killamix Mini')) {\n setMidiInput(input);\n input.onmidimessage = handleMIDIMessage;\n addConsoleLog(`Connected to MIDI input: ${input.name}`);\n }\n });\n\n access.outputs.forEach((output) => {\n if (output.name.includes('Killamix Mini')) {\n setMidiOutput(output);\n addConsoleLog(`Connected to MIDI output: ${output.name}`);\n }\n });\n } catch (error) {\n console.error('MIDI access denied:', error);\n addConsoleLog(`MIDI access denied: ${error.message}`);\n }\n }, [addConsoleLog]);\n\n const handleMIDIMessage = useCallback((message) => {\n const [status, data1, data2] = message.data;\n const messageChannel = status & 0xF;\n const messageType = status & 0xF0;\n\n addConsoleLog(`Received MIDI message: [${status.toString(16)}, ${data1}, ${data2}]`);\n\n if (messageChannel === channel - 1) {\n if (messageType === 0xB0) { // Control Change\n if (data1 >= 1 && data1 <= 9) { // Encoders\n setEncoders(prev => {\n const newEncoders = [...prev];\n newEncoders[data1 - 1] = data2;\n return newEncoders;\n });\n addConsoleLog(`Encoder ${data1} changed to ${data2} (${encoderMappings[data1 - 1][data2]})`);\n } else if (data1 >= 10 && data1 <= 18) { // Buttons\n setButtons(prev => {\n const newButtons = [...prev];\n newButtons[data1 - 10] = data2 > 0;\n return newButtons;\n });\n addConsoleLog(`Button ${data1 - 9} ${data2 > 0 ? 'pressed' : 'released'}`);\n }\n }\n }\n }, [channel, addConsoleLog]);\n\n const sendMIDIMessage = useCallback((controlNumber, value) => {\n if (midiOutput) {\n midiOutput.send([0xB0 | (channel - 1), controlNumber, value]);\n addConsoleLog(`Sent MIDI message: [${(0xB0 | (channel - 1)).toString(16)}, ${controlNumber}, ${value}]`);\n }\n }, [midiOutput, channel, addConsoleLog]);\n\n const handleEncoderChange = useCallback((index, value) => {\n setEncoders(prev => {\n const newEncoders = [...prev];\n newEncoders[index] = value;\n return newEncoders;\n });\n sendMIDIMessage(index + 1, value);\n addConsoleLog(`Encoder ${index + 1} changed to ${value} (${encoderMappings[index][value]}) (UI interaction)`);\n }, [sendMIDIMessage, addConsoleLog]);\n\n const handleButtonChange = useCallback((index, pressed) => {\n setButtons(prev => {\n const newButtons = [...prev];\n newButtons[index] = pressed;\n return newButtons;\n });\n sendMIDIMessage(index + 10, pressed ? 127 : 0);\n addConsoleLog(`Button ${index + 1} ${pressed ? 'pressed' : 'released'} (UI interaction)`);\n }, [sendMIDIMessage, addConsoleLog]);\n\n const handleChannelChange = useCallback((newChannel) => {\n setChannel(newChannel);\n addConsoleLog(`MIDI channel changed to ${newChannel}`);\n }, [addConsoleLog]);\n\n const handleMapChange = useCallback((control, mapping) => {\n setMappings(prev => ({ ...prev, [control]: mapping }));\n addConsoleLog(`Mapping changed for control ${control}: ${mapping}`);\n }, [addConsoleLog]);\n\n const saveMapping = useCallback((name) => {\n localStorage.setItem(`mapping_${name}`, JSON.stringify(mappings));\n addConsoleLog(`Mapping saved: ${name}`);\n }, [mappings, addConsoleLog]);\n\n const loadMapping = useCallback(() => {\n const name = prompt('Enter mapping name to load:');\n if (name) {\n const savedMapping = localStorage.getItem(`mapping_${name}`);\n if (savedMapping) {\n setMappings(JSON.parse(savedMapping));\n addConsoleLog(`Mapping loaded: ${name}`);\n } else {\n alert('Mapping not found');\n addConsoleLog(`Failed to load mapping: ${name}`);\n }\n }\n }, [addConsoleLog]);\n\n useEffect(() => {\n connectMIDI();\n }, [connectMIDI]);\n\n return (\n

KENTON

killamix™ mini

USB CONTROLLER

\n {encoders.map((value, index) => (\n

\n \n

\n ))}\n

\n \n \n \n setIsConsoleOpen(!isConsoleOpen)}\n />\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Kenton Killamix Mini Controller\n \n \n \n

\n \n \n View Source\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.app {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 800px;\n}\n\n.controller {\n width: 100%;\n height: 300px;\n background: linear-gradient(145deg, #e6e6e6, #f0f0f0);\n border-radius: 10px;\n box-shadow: 5px 5px 15px #d1d1d1, -5px -5px 15px #ffffff;\n padding: 20px;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n}\n\n.controller-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.logo {\n font-weight: bold;\n font-size: 24px;\n color: #333;\n}\n\n.product-name {\n font-size: 18px;\n color: #666;\n}\n\n.product-type {\n font-size: 14px;\n color: #999;\n}\n\n.controls {\n display: flex;\n justify-content: space-between;\n}\n\n.control-column {\n display: flex;\n gap: 20px;\n}\n\n.control-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n\n.encoder {\n width: 60px;\n height: 60px;\n position: relative;\n}\n\n.encoder-ring {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.dot {\n width: 4px;\n height: 4px;\n background-color: #999;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 50%;\n transform-origin: 0 30px;\n}\n\n.dot.active {\n background-color: #0f0;\n}\n\n.encoder-knob {\n width: 80%;\n height: 80%;\n background: linear-gradient(145deg, #f0f0f0, #e6e6e6);\n border-radius: 50%;\n position: absolute;\n top: 10%;\n left: 10%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff;\n}\n\n.indicator {\n width: 2px;\n height: 40%;\n background-color: #333;\n transform-origin: bottom center;\n}\n\n.encoder input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.encoder-label {\n position: absolute;\n bottom: -20px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 12px;\n color: #666;\n}\n\n.encoder-value {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n font-size: 10px;\n color: #333;\n white-space: nowrap;\n margin-top: 5px;\n}\n\n.button {\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 5px;\n background: linear-gradient(145deg, #f0f0f0, #e6e6e6);\n box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.button:active, .button.pressed {\n box-shadow: inset 2px 2px 5px #d1d1d1, inset -2px -2px 5px #ffffff;\n background: linear-gradient(145deg, #e6e6e6, #f0f0f0);\n}\n\nselect, button {\n margin: 10px 0;\n padding: 5px 10px;\n border: none;\n border-radius: 5px;\n background: linear-gradient(145deg, #f0f0f0, #e6e6e6);\n box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff;\n cursor: pointer;\n}\n\n.mapping-control {\n margin-top: 20px;\n padding: 20px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n width: 100%;\n}\n\n.mapping-control input {\n margin: 5px 0;\n padding: 5px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.connection-instructions {\n margin-top: 20px;\n padding: 20px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n width: 100%;\n}\n\n.connection-instructions h2 {\n margin-top: 0;\n color: #333;\n}\n\n.connection-instructions ol {\n padding-left: 20px;\n color: #666;\n}\n\na {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #0066cc;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n.console {\n width: 100%;\n margin-top: 20px;\n background-color: #1e1e1e;\n border-radius: 5px;\n overflow: hidden;\n font-family: 'Courier New', Courier, monospace;\n transition: all 0.3s ease;\n}\n\n.console-header {\n background-color: #333;\n color: #fff;\n padding: 10px;\n cursor: pointer;\n user-select: none;\n}\n\n.console-content {\n height: 50vh;\n overflow-y: auto;\n padding: 10px;\n}\n\n.console-line {\n color: #0f0;\n margin-bottom: 5px;\n font-size: 14px;\n white-space: pre-wrap;\n word-break: break-all;\n}\n\n.console.open {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 50vh;\n z-index: 1000;\n}\n\n.console:not(.open) .console-content {\n display: none;\n}\n`;","fileType","http",5,"parentId",["D",1732226601687],"branchVersion","label",[19],{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":74,"_17":65,"_63":64,"_61":-5,"_75":48,"_69":-5,"_76":77,"_18":78},"latest",true,["D",1732226601687],"deleted","children",[],[19],"ec30f250-2795-11f0-9d52-569c3dd06744",["D",1746218531466],"legacyEnvVars","public","httpPrivacy","description","imageUrl","userId","ade6ff6e-2082-407d-ac14-f95835477319","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_122":118},"org",{"_11":12,"_116":-5,"_117":118,"_86":87,"_119":120,"_121":48},"branch",{"_17":41,"_13":16,"_33":58,"_39":79,"_42":34,"_43":93,"_113":50,"_114":40,"_115":53,"_54":14,"_51":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":79,"_13":14,"_35":160,"_46":-5,"_81":73,"_49":82,"_83":82,"_84":-5,"_85":-5,"_86":87,"_88":60,"_89":73,"_90":-5,"_91":-5,"_92":93,"_52":53,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":161,"_109":162,"_111":163,"_47":48},[157],"files",[157],"counts",{"_147":93,"_148":93,"_149":93,"_150":151,"_152":153},[],{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":145,"_17":65,"_63":64,"_61":62,"_75":48,"_69":-5,"_18":146},"upstreamProject","upstreamBranch",{"_33":34,"_35":143,"_37":144,"_13":16,"_39":40,"_17":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":12,"_52":53,"_54":55},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746218439974],["D",1732224678364],["D",1732226601687],[19],"pulls","branches","forks","envVars",{"_154":93,"_156":93},"connections",{"_154":93,"_155":93},"count","unfilledCount","emptyCount",{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":74,"_17":65,"_63":64,"_61":-5,"_75":48,"_69":-5,"_76":158,"_18":159},[],[19],["D",1746218531466],{"_11":12,"_122":118},{"_11":12,"_116":-5,"_117":118,"_86":87,"_119":120,"_121":48},{"_17":41,"_13":16,"_33":58,"_39":79,"_42":34,"_43":93,"_113":50,"_114":40,"_115":53,"_54":14,"_51":12},"ctx",{"_107":-5,"_197":198,"_140":199,"_200":201,"_202":203,"_204":48,"_205":48,"_206":48,"_207":73,"_208":-5,"_209":-7,"_210":-7,"_211":93,"_212":48,"_213":48,"_214":-5},"ENV",{"_168":169,"_170":171,"_172":16,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","db46cea2d909ccbd011cfec0e4ddfe291f419728","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[215,216,217,218,219],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_220":244,"_69":245,"_223":246,"_84":247,"_226":73,"_227":73,"_228":229,"_230":73},{"_220":239,"_69":240,"_223":241,"_84":242,"_226":73,"_227":48,"_228":243,"_230":48},{"_220":235,"_69":236,"_223":237,"_84":238,"_226":73,"_227":73,"_228":229,"_230":48},{"_220":231,"_69":232,"_223":233,"_84":234,"_226":73,"_227":73,"_228":229,"_230":48},{"_220":221,"_69":222,"_223":224,"_84":225,"_226":73,"_227":73,"_228":229,"_230":48},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku","Claude Haiku 4.5","Haiku","Fastest; best for simple edits",200000,"deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]