386 lines
14 KiB
JavaScript
386 lines
14 KiB
JavaScript
import { Emitter as EventEmitter } from 'strict-event-emitter'
|
|
import rgba from 'color-rgba'
|
|
|
|
let SerialConnection, WSConnection
|
|
// Only import when in a browser environment
|
|
if (typeof navigator !== 'undefined' && navigator.serial || import.meta.env?.PROD) {
|
|
SerialConnection = (await import('./connections/web-serial.js')).default
|
|
} else {
|
|
SerialConnection = (await import('./connections/serial.js')).default
|
|
WSConnection = (await import('./connections/ws.js')).default
|
|
}
|
|
|
|
let canvasModule
|
|
try {
|
|
canvasModule = await import('canvas')
|
|
// eslint-disable-next-line
|
|
} catch (e) {
|
|
// No canvas is ok, do check in `drawCanvas`
|
|
}
|
|
|
|
import {
|
|
BUTTONS,
|
|
COMMANDS,
|
|
DEFAULT_RECONNECT_INTERVAL,
|
|
HAPTIC,
|
|
MAX_BRIGHTNESS,
|
|
} from './constants.js'
|
|
|
|
import { rgba2rgb565 } from './util.js'
|
|
|
|
export class LoupedeckDevice extends EventEmitter {
|
|
static async list({ ignoreSerial = false, ignoreWebsocket = false } = {}) {
|
|
const ps = []
|
|
|
|
if (!ignoreSerial) ps.push(SerialConnection.discover())
|
|
if (!ignoreWebsocket && WSConnection) ps.push(WSConnection.discover())
|
|
|
|
// Run them in parallel
|
|
const rawDevices = await Promise.all(ps)
|
|
|
|
return rawDevices.flat()
|
|
}
|
|
keySize = 90
|
|
constructor({ host, path, autoConnect = true, reconnectInterval = DEFAULT_RECONNECT_INTERVAL } = {}) {
|
|
super()
|
|
this.transactionID = 0
|
|
this.touches = {}
|
|
this.handlers = {
|
|
[COMMANDS.BUTTON_PRESS]: this.onButton.bind(this),
|
|
[COMMANDS.KNOB_ROTATE]: this.onRotate.bind(this),
|
|
[COMMANDS.SERIAL]: buff => buff.toString().trim(),
|
|
[COMMANDS.TICK]: () => {},
|
|
[COMMANDS.TOUCH]: this.onTouch.bind(this, 'touchmove'),
|
|
[COMMANDS.TOUCH_END]: this.onTouch.bind(this, 'touchend'),
|
|
[COMMANDS.VERSION]: buff => `${buff[0]}.${buff[1]}.${buff[2]}`,
|
|
[COMMANDS.TOUCH_CT]: this.onTouch.bind(this, 'touchmove'),
|
|
[COMMANDS.TOUCH_END_CT]: this.onTouch.bind(this, 'touchend'),
|
|
}
|
|
// Track pending transactions
|
|
this.pendingTransactions = {}
|
|
// How long between reconnect attempts
|
|
this.reconnectInterval = reconnectInterval
|
|
// Host for websocket connections
|
|
this.host = host
|
|
// Path for serial connections
|
|
this.path = path
|
|
// Automatically connect?
|
|
if (autoConnect) this._connectBlind()
|
|
}
|
|
close() {
|
|
if (!this.connection) return
|
|
return this.connection.close()
|
|
}
|
|
async connect() {
|
|
// Explicitly asked for a serial connection (V0.2.X)
|
|
if (this.path) this.connection = new SerialConnection({ path: this.path })
|
|
// Explicitly asked for a websocket connection (V0.1.X)
|
|
else if (this.host) this.connection = new WSConnection({ host: this.host })
|
|
// Autodiscover
|
|
else {
|
|
const devices = await this.constructor.list()
|
|
if (devices.length > 0) {
|
|
const { connectionType, ...args } = devices[0]
|
|
this.connection = new connectionType(args)
|
|
}
|
|
if (!this.connection) {
|
|
return Promise.reject(this.onDisconnect(new Error('No devices found')))
|
|
}
|
|
}
|
|
|
|
this.connection.on('connect', this.onConnect.bind(this))
|
|
this.connection.on('message', this.onReceive.bind(this))
|
|
this.connection.on('disconnect', this.onDisconnect.bind(this))
|
|
return this.connection.connect()
|
|
}
|
|
_connectBlind() {
|
|
return this.connect().catch(() => {})
|
|
}
|
|
// Draw an arbitrary buffer to the device
|
|
// Buffer format must be 16bit 5-6-5 (LE, except BE for the Loupedeck CT Knob screen)
|
|
async drawBuffer({ id, width, height, x = 0, y = 0, autoRefresh = true }, buffer) {
|
|
const displayInfo = this.displays[id]
|
|
if (!displayInfo) throw new Error(`Display '${id}' is not available on this device!`)
|
|
if (!width) width = displayInfo.width
|
|
if (!height) height = displayInfo.height
|
|
if (displayInfo.offset) {
|
|
x += displayInfo.offset[0]
|
|
y += displayInfo.offset[1]
|
|
}
|
|
|
|
const pixelCount = width * height * 2
|
|
if (buffer.length !== pixelCount) {
|
|
throw new Error(`Expected buffer length of ${pixelCount}, got ${buffer.length}!`)
|
|
}
|
|
|
|
// Header with x/y/w/h and display ID
|
|
const header = Buffer.alloc(8)
|
|
header.writeUInt16BE(x, 0)
|
|
header.writeUInt16BE(y, 2)
|
|
header.writeUInt16BE(width, 4)
|
|
header.writeUInt16BE(height, 6)
|
|
|
|
// Write to frame buffer
|
|
await this.send(COMMANDS.FRAMEBUFF, Buffer.concat([displayInfo.id, header, buffer]))
|
|
|
|
// Draw to display
|
|
if (autoRefresh) await this.refresh(id)
|
|
}
|
|
// Create a canvas with correct dimensions and pass back for drawing
|
|
drawCanvas({ id, width, height, ...args }, cb) {
|
|
const displayInfo = this.displays[id]
|
|
if (!displayInfo) throw new Error(`Display '${id}' is not available on this device!`)
|
|
if (!width) width = displayInfo.width
|
|
if (!height) height = displayInfo.height
|
|
if (!canvasModule || !canvasModule.createCanvas) {
|
|
throw new Error('Using callbacks requires the `canvas` library to be installed. Install it using `npm install canvas`.')
|
|
}
|
|
|
|
const canvas = canvasModule.createCanvas(width, height)
|
|
const ctx = canvas.getContext('2d', { pixelFormat: 'RGB16_565' }) // Loupedeck uses 16-bit (5-6-5) LE RGB colors
|
|
cb(ctx, width, height)
|
|
let buffer
|
|
// If using NodeJS canvas package
|
|
if (canvas.toBuffer) {
|
|
buffer = canvas.toBuffer('raw')
|
|
// If using browser canvas API
|
|
} else {
|
|
const imageData = ctx.getImageData(0, 0, width, height)
|
|
const rgba = imageData.data
|
|
// Convert from RGBA to RGB16_565
|
|
buffer = rgba2rgb565(rgba, width * height)
|
|
}
|
|
// Swap endianness depending on display
|
|
if (displayInfo.endianness === 'be') buffer.swap16()
|
|
return this.drawBuffer({ id, width, height, ...args }, buffer)
|
|
}
|
|
// Draw to a specific key index (0-11 on Live, 0-14 on Live S)
|
|
drawKey(index, cb) {
|
|
// Get offset x/y for key index
|
|
if (index < 0 || index >= this.columns * this.rows) throw new Error(`Key ${index} is not a valid key`)
|
|
const width = this.keySize
|
|
const height = this.keySize
|
|
const x = this.visibleX[0] + index % this.columns * width
|
|
const y = Math.floor(index / this.columns) * height
|
|
return this[cb instanceof Buffer ? 'drawBuffer' : 'drawCanvas']({ id: 'center', x, y, width, height }, cb)
|
|
}
|
|
// Draw to a specific screen
|
|
drawScreen(id, cb) {
|
|
return this[cb instanceof Buffer ? 'drawBuffer' : 'drawCanvas']({ id }, cb)
|
|
}
|
|
async getInfo() {
|
|
if (!this.connection || !this.connection.isReady()) throw new Error('Not connected!')
|
|
return {
|
|
serial: await this.send(COMMANDS.SERIAL),
|
|
version: await this.send(COMMANDS.VERSION)
|
|
}
|
|
}
|
|
onButton(buff) {
|
|
if (buff.length < 2) return
|
|
const id = BUTTONS[buff[0]]
|
|
const event = buff[1] === 0x00 ? 'down' : 'up'
|
|
this.emit(event, { id })
|
|
}
|
|
onConnect(info) {
|
|
this.emit('connect', info)
|
|
}
|
|
onDisconnect(error) {
|
|
this.emit('disconnect', error)
|
|
clearTimeout(this._reconnectTimer)
|
|
this.connection = null
|
|
// Normal disconnect, do not reconnect
|
|
if (!error) return
|
|
// Reconnect if desired
|
|
if (this.reconnectInterval) {
|
|
this._reconnectTimer = setTimeout(this._connectBlind.bind(this), this.reconnectInterval)
|
|
}
|
|
return error.message
|
|
}
|
|
onReceive(buff) {
|
|
const msgLength = buff[0]
|
|
const handler = this.handlers[buff[1]]
|
|
const transactionID = buff[2]
|
|
const response = handler ? handler(buff.slice(3, msgLength)) : buff
|
|
const resolver = this.pendingTransactions[transactionID]
|
|
if (resolver) resolver(response)
|
|
return response
|
|
}
|
|
onRotate(buff) {
|
|
const id = BUTTONS[buff[0]]
|
|
const delta = buff.readInt8(1)
|
|
this.emit('rotate', { id, delta })
|
|
}
|
|
onTouch(event, buff) {
|
|
const x = buff.readUInt16BE(1)
|
|
const y = buff.readUInt16BE(3)
|
|
const id = buff[5]
|
|
|
|
// Create touch
|
|
const touch = { x, y, id, target: this.getTarget(x, y, id) }
|
|
|
|
// End touch, remove from local cache
|
|
if (event === 'touchend') {
|
|
delete this.touches[touch.id]
|
|
} else {
|
|
// First time seeing this touch, emit touchstart instead of touchmove
|
|
if (!this.touches[touch.id]) event = 'touchstart'
|
|
this.touches[touch.id] = touch
|
|
}
|
|
|
|
this.emit(event, { touches: Object.values(this.touches), changedTouches: [touch] })
|
|
}
|
|
// Display the current framebuffer
|
|
refresh(id) {
|
|
const displayInfo = this.displays[id]
|
|
return this.send(COMMANDS.DRAW, displayInfo.id)
|
|
}
|
|
send(command, data = Buffer.alloc(0)) {
|
|
if (!this.connection || !this.connection.isReady()) return
|
|
this.transactionID = (this.transactionID + 1) % 256
|
|
// Skip transaction ID's of zero since the device seems to ignore them
|
|
if (this.transactionID === 0) this.transactionID++
|
|
const header = Buffer.alloc(3)
|
|
header[0] = Math.min(3 + data.length, 0xff)
|
|
header[1] = command
|
|
header[2] = this.transactionID
|
|
const packet = Buffer.concat([header, data])
|
|
this.connection.send(packet)
|
|
return new Promise(res => {
|
|
this.pendingTransactions[this.transactionID] = res
|
|
})
|
|
}
|
|
setBrightness(value) {
|
|
const byte = Math.max(0, Math.min(MAX_BRIGHTNESS, Math.round(value * MAX_BRIGHTNESS)))
|
|
return this.send(COMMANDS.SET_BRIGHTNESS, Buffer.from([byte]))
|
|
}
|
|
setButtonColor({ id, color }) {
|
|
const key = Object.keys(BUTTONS).find(k => BUTTONS[k] === id)
|
|
if (!key) throw new Error(`Invalid button ID: ${id}`)
|
|
const [r, g, b] = rgba(color)
|
|
const data = Buffer.from([key, r, g, b])
|
|
return this.send(COMMANDS.SET_COLOR, data)
|
|
}
|
|
vibrate(pattern = HAPTIC.SHORT) {
|
|
return this.send(COMMANDS.SET_VIBRATION, Buffer.from([pattern]))
|
|
}
|
|
}
|
|
|
|
export class LoupedeckLive extends LoupedeckDevice {
|
|
static productId = 0x0004
|
|
static vendorId = 0x2ec2
|
|
buttons = [0, 1, 2, 3, 4, 5, 6, 7]
|
|
knobs = ['knobCL', 'knobCR', 'knobTL', 'knobTR', 'knobBL', 'knobBR']
|
|
columns = 4
|
|
// All displays are addressed as the same screen
|
|
// So we add offsets
|
|
displays = {
|
|
center: { id: Buffer.from('\x00M'), width: 360, height: 270, offset: [60, 0] },
|
|
left: { id: Buffer.from('\x00M'), width: 60, height: 270 },
|
|
right: { id: Buffer.from('\x00M'), width: 60, height: 270, offset: [420, 0] },
|
|
}
|
|
rows = 3
|
|
type = 'Loupedeck Live'
|
|
visibleX = [0, 480]
|
|
// Determine touch target based on x/y position
|
|
getTarget(x, y) {
|
|
if (x < this.displays.left.width) return { screen: 'left' }
|
|
if (x >= this.displays.left.width + this.displays.center.width) return { screen: 'right' }
|
|
const column = Math.floor((x - this.displays.left.width) / this.keySize)
|
|
const row = Math.floor(y / this.keySize)
|
|
const key = row * this.columns + column
|
|
return {
|
|
screen: 'center',
|
|
key
|
|
}
|
|
}
|
|
}
|
|
|
|
export class LoupedeckCT extends LoupedeckLive {
|
|
static productId = 0x0003
|
|
buttons = [0, 1, 2, 3, 4, 5, 6, 7, 'home', 'enter', 'undo', 'save', 'keyboard', 'fnL', 'a', 'b', 'c', 'd', 'fnR', 'e']
|
|
displays = {
|
|
center: { id: Buffer.from('\x00A'), width: 360, height: 270 }, // "A"
|
|
left: { id: Buffer.from('\x00L'), width: 60, height: 270 }, // "L"
|
|
right: { id: Buffer.from('\x00R'), width: 60, height: 270 }, // "R"
|
|
knob: { id: Buffer.from('\x00W'), width: 240, height: 240, endianness: 'be' }, // "W"
|
|
}
|
|
type = 'Loupedeck CT'
|
|
// Determine touch target based on x/y position
|
|
getTarget(x, y, id) {
|
|
if (id === 0) return { screen: 'knob' }
|
|
return super.getTarget(x, y)
|
|
}
|
|
}
|
|
|
|
export class LoupedeckLiveS extends LoupedeckDevice {
|
|
static productId = 0x0006
|
|
static vendorId = 0x2ec2
|
|
buttons = [0, 1, 2, 3]
|
|
knobs = ['knobCL', 'knobTL']
|
|
columns = 5
|
|
displays = {
|
|
center: { id: Buffer.from('\x00M'), width: 480, height: 270 },
|
|
}
|
|
rows = 3
|
|
type = 'Loupedeck Live S'
|
|
visibleX = [15, 465]
|
|
// Determine touch target based on x/y position
|
|
getTarget(x, y) {
|
|
if (x < this.visibleX[0] || x >= this.visibleX[1]) return {}
|
|
const column = Math.floor((x - this.visibleX[0]) / this.keySize)
|
|
const row = Math.floor(y / this.keySize)
|
|
const key = row * this.columns + column
|
|
return {
|
|
screen: 'center',
|
|
key
|
|
}
|
|
}
|
|
}
|
|
|
|
export class RazerStreamController extends LoupedeckLive {
|
|
static productId = 0x0d06
|
|
static vendorId = 0x1532
|
|
type = 'Razer Stream Controller'
|
|
}
|
|
|
|
export class RazerStreamControllerX extends LoupedeckDevice {
|
|
static productId = 0x0d09
|
|
static vendorId = 0x1532
|
|
type = 'Razer Stream Controller X'
|
|
buttons = []
|
|
columns = 5
|
|
displays = {
|
|
center: { id: Buffer.from('\x00M'), width: 480, height: 288 },
|
|
}
|
|
rows = 3
|
|
visibleX = [0, 480]
|
|
keySize = 96
|
|
// Emit an extra touchstart event since we are touching keys
|
|
onButton(buff) {
|
|
super.onButton(buff)
|
|
const event = buff[1] === 0x00 ? 'touchstart' : 'touchend'
|
|
const key = BUTTONS[buff[0]]
|
|
const row = Math.floor(key / this.columns)
|
|
const col = key % this.columns
|
|
const touch = {
|
|
id: 0,
|
|
// Add half so touch is in the center of the key
|
|
x: (col + 0.5) * this.keySize,
|
|
y: (row + 0.5) * this.keySize,
|
|
target: { key }
|
|
}
|
|
this.emit(event, {
|
|
touches: event === 'touchstart' ? [touch] : [],
|
|
changedTouches: [touch],
|
|
})
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this
|
|
setButtonColor() {
|
|
throw new Error('Setting key color not available on this device!')
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this
|
|
vibrate() {
|
|
throw new Error('Vibration not available on this device!')
|
|
}
|
|
}
|