Kenton Killamix Mini Controller

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Text prompt mappings for encoders const encoderMappings = [ // Encoder 1: Filter Cutoff Array.from({length: 128}, (_, i) => `${Math.round(20 + (i / 127) * 20000)} Hz`), // Encoder 2: Resonance Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`), // Encoder 3: LFO Rate Array.from({length: 128}, (_, i) => `${(0.1 + (i / 127) * 19.9).toFixed(1)} Hz`), // Encoder 4: LFO Depth Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`), // Encoder 5: Attack Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`), // Encoder 6: Decay Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`), // Encoder 7: Sustain Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`), // Encoder 8: Release Array.from({length: 128}, (_, i) => `${(i / 127 * 5000).toFixed(0)} ms`), // Encoder 9: Master Volume Array.from({length: 128}, (_, i) => `${Math.round((i / 127) * 100)}%`), ]; // Components const Encoder = ({ value, onChange, index }) => (

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

))}

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

{encoderMappings[index][value]}

); const Button = ({ pressed, onChange, index }) => (

); }; const ConnectionInstructions = () => (

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.

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

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

{isOpen && (

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

{log}

))}

)}

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

KENTON

killamix™ mini

USB CONTROLLER

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

))}

setIsConsoleOpen(!isConsoleOpen)} />

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

View Source `, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .app { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; } .controller { width: 100%; height: 300px; background: linear-gradient(145deg, #e6e6e6, #f0f0f0); border-radius: 10px; box-shadow: 5px 5px 15px #d1d1d1, -5px -5px 15px #ffffff; padding: 20px; display: flex; flex-direction: column; margin-bottom: 20px; } .controller-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .logo { font-weight: bold; font-size: 24px; color: #333; } .product-name { font-size: 18px; color: #666; } .product-type { font-size: 14px; color: #999; } .controls { display: flex; justify-content: space-between; } .control-column { display: flex; gap: 20px; } .control-group { display: flex; flex-direction: column; align-items: center; gap: 10px; } .encoder { width: 60px; height: 60px; position: relative; } .encoder-ring { width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; } .dot { width: 4px; height: 4px; background-color: #999; border-radius: 50%; position: absolute; top: 0; left: 50%; transform-origin: 0 30px; } .dot.active { background-color: #0f0; } .encoder-knob { width: 80%; height: 80%; background: linear-gradient(145deg, #f0f0f0, #e6e6e6); border-radius: 50%; position: absolute; top: 10%; left: 10%; display: flex; justify-content: center; align-items: flex-start; box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff; } .indicator { width: 2px; height: 40%; background-color: #333; transform-origin: bottom center; } .encoder input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .encoder-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #666; } .encoder-value { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: #333; white-space: nowrap; margin-top: 5px; } .button { width: 40px; height: 40px; border: none; border-radius: 5px; background: linear-gradient(145deg, #f0f0f0, #e6e6e6); box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff; cursor: pointer; transition: all 0.2s ease; } .button:active, .button.pressed { box-shadow: inset 2px 2px 5px #d1d1d1, inset -2px -2px 5px #ffffff; background: linear-gradient(145deg, #e6e6e6, #f0f0f0); } select, button { margin: 10px 0; padding: 5px 10px; border: none; border-radius: 5px; background: linear-gradient(145deg, #f0f0f0, #e6e6e6); box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff; cursor: pointer; } .mapping-control { margin-top: 20px; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 100%; } .mapping-control input { margin: 5px 0; padding: 5px; border: 1px solid #ddd; border-radius: 5px; } .connection-instructions { margin-top: 20px; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 100%; } .connection-instructions h2 { margin-top: 0; color: #333; } .connection-instructions ol { padding-left: 20px; color: #666; } a { display: block; text-align: center; margin-top: 20px; color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } .console { width: 100%; margin-top: 20px; background-color: #1e1e1e; border-radius: 5px; overflow: hidden; font-family: 'Courier New', Courier, monospace; transition: all 0.3s ease; } .console-header { background-color: #333; color: #fff; padding: 10px; cursor: pointer; user-select: none; } .console-content { height: 50vh; overflow-y: auto; padding: 10px; } .console-line { color: #0f0; margin-bottom: 5px; font-size: 14px; white-space: pre-wrap; word-break: break-all; } .console.open { position: fixed; bottom: 0; left: 0; width: 100%; height: 50vh; z-index: 1000; } .console:not(.open) .console-content { display: none; } `;

Custom Mappings

How to Connect Your Kenton Killamix Mini

killamix

Version 5