loupedeck-commander 1.0.0

package/ExampleDeviceHandler.mjs

@@ -0,0 +1,45 @@
+import pkg from 'loupedeck'
+import { BaseLoupeDeckHandler } from './common/BaseLoupeDeckHandler.mjs'
+const { HAPTIC } = pkg
+
+/**
+ * Our Special-Handler just used the Default - and adds Vibration after triggers through Button-Releases
+ */
+export class ExampleDeviceHandler extends BaseLoupeDeckHandler {
+  /**
+   * Handle different Vibration-Feedback on OK (true), and NOK (false)
+   * @param {*} ok
+   */
+  async vibrateHandler (ok) {
+    if (ok) { await this.device.vibrate(HAPTIC.REV_FASTEST) } else {
+      this.device.vibrate(HAPTIC.RUMBLE2)
+    }
+  }
+
+  /**
+   * Handle Button-Up Events with Vibration Handler
+   * @param {*} event
+   */
+  async onButtonUp (event) {
+    const res = await super.onButtonUp(event)
+    await this.vibrateHandler(res)
+  }
+
+  /**
+   * Handle Knob-Rotation Events with Vibration Handler
+   * @param {*} event
+   */
+  async onRotate (event) {
+    const res = await super.onRotate(event)
+    await this.vibrateHandler(res)
+  }
+
+  /**
+   * Handle Touch-End Events with Vibration Handler
+   * @param {*} event
+   */
+  async onTouchEnd (event) {
+    const res = await super.onTouchEnd(event)
+    await this.vibrateHandler(res)
+  }
+}

package/README.md

@@ -0,0 +1,51 @@
+# loupedeck-commander
+
+## Getting started
+
+The loupedeck-commander is helping you using your Loupedeck device more easily, and connect it with custom commands you define with script files.
+
+Features:
+- Reference image files for every state of your button in the touch-display fields
+- Connect commands to your state transitions
+
+## Basic Usage
+
+Do the following steps:
+
+```
+# init your new node package
+npm init
+
+# install the loupedeck-commander dependency
+npm install -s loupedeck-commander 
+```
+
+Create a new configuration file with at least one profile or copy from here,
+and replace the image references with your own icons (90x90px size):
+
+ - [config.json](https://gitlab.com/keckxde/loupedeck-commander/-/blob/main/config.json)
+ - [profile-1.json](https://gitlab.com/keckxde/loupedeck-commander/-/blob/main/profile-1.json)
+
+Create a `index.mjs` file to open up your loupedeck connection:
+```javascript
+# save as index.mjs
+import { BaseLoupeDeckHandler } from 'loupedeck-commander'
+
+const handler = new BaseLoupeDeckHandler('config.json')
+
+const stopHandler = () => {
+  console.log('Receiving SIGINT => Stopping processes.')
+  handler.stop()
+}
+
+// Initiating a process
+process.on('SIGINT', stopHandler)
+
+await handler.start()
+```
+
+Run the script using the following command:
+
+```bash
+node index.mjs
+```

package/common/ApplicationConfig.mjs

@@ -0,0 +1,81 @@
+import { readJSONFile, writeJSONFile } from './utils.mjs'
+
+export class ApplicationConfig {
+  application = 'undefined'
+  profiles = []
+
+  loadFromFile (fileName) {
+    console.info(`ApplicationConfig: Loading Config File ${fileName}`)
+    const config = readJSONFile(fileName)
+
+    this.application = config.application
+    for (let i = 0; i < config.profiles.length; i++) {
+      const profile = new Profile(config.profiles[i])
+      this.profiles.push(profile)
+    }
+  }
+}
+
+class Profile {
+  name = ''
+  file = ''
+  description = ''
+
+  touch = {}
+  knobs = {}
+  buttons = {}
+  #file = ''
+  #loaded = false
+  #error = false
+
+  constructor (data) {
+    this.name = data.name
+    this.#file = data.file
+    this.loadFromFile(this.#file)
+    if (this.#error) { this.saveToFile(`profile-${this.name}-sav.json`) }
+  }
+
+  loadFromFile (fileName) {
+    console.info(`ProfileConfig: Loading Config File ${fileName}`)
+    const config = readJSONFile(fileName)
+    this.#error = (config === undefined)
+    this.#loaded = !this.#error
+    if (!this.#error && this.#loaded) {
+      this.profile = config.profile
+      this.description = config.description
+
+      // Load the Configurations for Touch-Displays
+      this.touch = new TouchConfig(config.touch)
+      // Load the Configurations for Button-Areas
+      this.buttons = config.buttons
+    }
+  }
+
+  saveToFile (fileName) {
+    fileName = fileName.toLowerCase()
+
+    console.info(`ProfileConfig: Save To Config File ${fileName}`)
+    writeJSONFile(fileName, this)
+  }
+}
+
+/**
+ * Class that handles the different configs for the touch displays of the device covering Loupedeck Live (without knob) and also CT (with knob)
+ */
+class TouchConfig {
+  center = {} // CENTER Display Config - Available in CT & LIVE
+  left = {} // LEFT Display Config - Available in CT & LIVE
+  right = {} // RIGHT Display Config - Available in CT & LIVE
+  knob = {} // KNOB Display Config - Available only in CT
+
+  constructor (data) {
+    this.loadFromJSON(data)
+  }
+
+  loadFromJSON (data) {
+    this.center = data.center
+    this.left = data.left
+    this.right = data.right
+    this.knob = data.knob
+  }
+}

package/common/BaseLoupeDeckHandler.mjs

@@ -0,0 +1,189 @@
+import pkg from 'loupedeck'
+import { ApplicationConfig } from './ApplicationConfig.mjs'
+import { TouchButtonField, PhysicalButtonField } from './touchbuttons.mjs'
+const { discover, HAPTIC } = pkg
+
+export class BaseLoupeDeckHandler {
+  device = undefined
+  appConfig = undefined
+  profileConfigs = []
+  currentProfile = 0
+  screens = {}
+  buttons = {}
+  screenUpdate = {}
+
+  touchButtons = undefined
+
+  constructor (config) {
+    console.log(`INIT with config ${config}`)
+    this.loadConfig(config)
+  }
+
+  async start () {
+    console.info('Start')
+    while (!this.device) {
+      try {
+        this.device = await discover()
+      } catch (e) {
+        console.error(`${e}. Reattempting in 3 seconds...`)
+        await new Promise(res => setTimeout(res, 3000))
+      }
+    }
+    console.info(`✅ Connected to ${this.device.type}`)
+
+    const self = this
+
+    this.device.on('connect', (address) => { self.onConnected(address) })
+    this.device.on('down', (event) => { self.onButtonDown(event) })
+    this.device.on('up', (event) => { self.onButtonUp(event) })
+    this.device.on('rotate', (event) => { self.onRotate(event) })
+    this.device.on('touchstart', (event) => { self.onTouchStart(event) })
+    this.device.on('touchmove', (event) => { self.onTouchMove(event) })
+    this.device.on('touchend', (event) => { self.onTouchEnd(event) })
+
+    // return await this.device.connect()
+  }
+
+  stop () {
+    console.info('Stopping Handler')
+    this.device.close()
+  }
+
+  loadConfig (fileName) {
+    console.info(`Loading Config File ${fileName}`)
+    this.appConfig = new ApplicationConfig()
+    this.appConfig.loadFromFile(fileName)
+  }
+
+  async activateProfile (id) {
+    // todo Profile-change implementation
+    if (this.appConfig.profiles.length >= id) {
+      this.currentProfile = id
+    }
+    await this.buttons.draw(this.device)
+  }
+
+  getCurrentProfile () {
+    return this.appConfig.profiles[this.currentProfile]
+  }
+
+  // Events:
+  async onConnected (address) {
+    console.info('Connected: ', address)
+    const dLeft = this.device.displays.left
+    const dRight = this.device.displays.right
+    const dCenter = this.device.displays.center
+    const dKnob = this.device.displays.knob
+
+    const profile = this.getCurrentProfile()
+    this.screens.center = new TouchButtonField('center', this.device.rows, this.device.columns, dCenter.width, dCenter.height, profile.touch.center)
+    this.screens.left = new TouchButtonField('left', 1, 1, dLeft.width, dLeft.height, profile.touch.left)
+    this.screens.right = new TouchButtonField('right', 1, 1, dRight.width, dRight.height, profile.touch.right)
+    // knob Display is only available in the CT-version - not with live:
+    if (dKnob) {
+      this.screens.knob = new TouchButtonField('knob', 1, 1, dKnob.width, dKnob.height, profile.touch.knob)
+    }
+
+    this.buttons = new PhysicalButtonField('bottom', profile.buttons)
+
+    await this.screens.center.load()
+    await this.screens.right.load()
+    await this.screens.left.load()
+    if (dKnob) {
+      await this.screens.knob.load()
+    }
+    await this.buttons.load()
+
+    await this.screens.center.draw(this.device)
+    if (dKnob) {
+      await this.screens.knob.draw(this.device)
+    }
+    await this.activateProfile(0)
+    await this.buttons.draw(this.device)
+
+    this.device.setBrightness(1)
+    this.device.vibrate(HAPTIC.ASCEND_MED)
+
+    console.info('Done initializing')
+  }
+
+  async updateScreens () {
+    const keys = Object.keys(this.screenUpdate)
+    for (let i = 0; i < keys.length; i++) {
+      const screen = keys[i]
+      await this.screens[screen].draw(this.device)
+    }
+    this.screenUpdate = {}
+  }
+
+  async onButtonDown (event) {
+    let ok = false
+    const id = event.id
+    ok = await this.buttons.pressed(id)
+    await this.buttons.draw(this.device)
+    return ok
+  }
+
+  async onButtonUp (event) {
+    let ok = false
+    const id = event.id
+    ok = await this.buttons.released(id)
+    await this.buttons.draw(this.device)
+    return ok
+  }
+
+  async onRotate (event) {
+    const id = event.id
+    const delta = event.delta
+    return await this.buttons.rotated(id, delta)
+  }
+
+  async onTouchStart (event) {
+    let ok = false
+    const changedTouches = event.changedTouches
+    for (let i = 0; i < changedTouches.length; i++) {
+      const screen = changedTouches[i].target.screen
+      let id = changedTouches[i].target.key
+      this.screenUpdate[screen] = true
+      if (id === undefined) {
+        id = 0
+      }
+      ok = await this.screens[screen].pressed(id)
+    }
+    await this.updateScreens()
+    return ok
+  }
+
+  async onTouchMove (event) {
+    const ok = false
+    const changedTouches = event.changedTouches
+    for (let i = 0; i < changedTouches.length; i++) {
+      const x = changedTouches[i].x
+      const y = changedTouches[i].y
+      const screen = changedTouches[i].target.screen
+      let id = changedTouches[i].target.key
+      if (id === undefined) {
+        id = 0 // for left/right
+      }
+      console.info('TouchMove : ', screen, id, x, y)
+    }
+    return ok
+  }
+
+  async onTouchEnd (event) {
+    let ok = false
+    const changedTouches = event.changedTouches
+    for (let i = 0; i < changedTouches.length; i++) {
+      const elem = changedTouches[i].target
+      let id = changedTouches[i].target.key
+      if (id === undefined) {
+        id = 0
+      }
+      this.screenUpdate[elem.screen] = true
+
+      ok = await this.screens[elem.screen].released(id)
+    }
+    await this.updateScreens()
+    return ok
+  }
+}

package/common/cmd-executer.mjs

@@ -0,0 +1,16 @@
+import { exec } from 'child_process'
+
+export async function sh (cmd) {
+  // console.log('TRIGGER -> ', cmd)
+
+  return new Promise(function (resolve, reject) {
+    exec(cmd, (err, stdout, stderr) => {
+      console.log('executed cmd, stdout:', stdout)
+      if (err) {
+        reject(err)
+      } else {
+        resolve({ stdout, stderr })
+      }
+    })
+  })
+}

package/common/index.mjs

@@ -0,0 +1,5 @@
+import { BaseLoupeDeckHandler } from './BaseLoupeDeckHandler.mjs'
+
+module.exports = {
+  BaseLoupeDeckHandler
+}

package/common/touchbuttons.mjs

@@ -0,0 +1,473 @@
+import { loadImage } from 'canvas'
+import { sh } from './cmd-executer.mjs'
+import format from 'string-template'
+import { calcDelta } from './utils.mjs'
+
+const ButtonStyle = {
+  NONE: 0,
+  IMAGE: 1,
+  COLOR: 2,
+  TEXT: 3,
+  PHYSICAL: 3
+}
+
+export const ButtonIndex = {
+  BUTN_0: 0,
+  BUTN_1: 1,
+  BUTN_2: 2,
+  BUTN_3: 3,
+  BUTN_4: 3,
+  BUTN_5: 5,
+  BUTN_6: 6,
+  BUTN_7: 7,
+  home: 'home'
+}
+
+const ButtonType = {
+  NONE: '',
+  TOGGLE: 'TOGGLE',
+  PUSH: 'PUSH'
+}
+
+export class TouchButtonField {
+  #buttons = []
+  width = 0
+  height = 0
+  #rows = 0
+  #columns = 0
+  #name
+  constructor (name, rows, columns, width, height, data) {
+    console.info(`TouchButtonField ${name.padEnd(10, ' ')} Buttons: ${rows} x ${columns} , Pixels  ${width} x ${height}`)
+    this.#name = name
+    this.width = width
+    this.height = height
+    this.#rows = rows
+    this.#columns = columns
+    for (let i = 0; i < rows * columns; i++) {
+      const tb = new TouchButton(`touch-${i}`, width / columns, height / rows, data[i])
+      this.#buttons.push(tb)
+    }
+  }
+
+  async draw (device) {
+    device.drawScreen(this.#name, ctx => {
+      for (let i = 0; i < this.#rows * this.#columns; i++) {
+        const row = Math.floor(i / device.columns)
+        const column = i % device.columns
+
+        this.#buttons[i].draw(row, column, ctx)
+      }
+    })
+  }
+
+  setIntState (id, val) {
+    this.#buttons[id].setIntState(val)
+  }
+
+  async load () {
+    for (let i = 0; i < this.#rows * this.#columns; i++) {
+      await this.#buttons[i].load()
+    }
+  }
+
+  async pressed (id) {
+    // console.info(`pressed ${id}`)
+    await this.#buttons[id].pressed()
+  }
+
+  async released (id) {
+    // console.info(`released ${id}`)
+    const result = await this.#buttons[id].released()
+    if (result) {
+      // disable all other buttons of the group, if this one had been activated:
+      for (let i = 0; i < this.#rows * this.#columns; i++) {
+        if (id === i) { continue }
+        if (this.#buttons[i].group === this.#buttons[id].group) {
+          this.#buttons[i].setState(0)
+        }
+      }
+    }
+    return result
+  }
+}
+
+export class PhysicalButtonField {
+  #buttons = {}
+  #name
+  constructor (name, data) {
+    console.info(`PhysicalButtonField ${name.padEnd(10, ' ')} `)
+    this.#name = name
+    const keys = Object.keys(data)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      const tb = new TouchButton(key, 1, 1, data[key])
+      this.#buttons[key] = tb
+    }
+  }
+
+  async draw (device) {
+    const keys = Object.keys(this.#buttons)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      this.#buttons[key].drawPhysical(device, key)
+    }
+  }
+
+  async load () {
+    const keys = Object.keys(this.#buttons)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      await this.#buttons[key].load()
+    }
+  }
+
+  checkAndCreateButton (id) {
+    if (!(id in this.#buttons)) {
+      const tb = new TouchButton(id, 1, 1, id)
+      this.#buttons[id] = tb
+    }
+  }
+
+  setIntState (id, val) {
+    this.checkAndCreateButton(id)
+    this.#buttons[id].setIntState(val)
+  }
+
+  async pressed (id) {
+    // console.info(`pressed ${id}`)
+    this.checkAndCreateButton(id)
+    return await this.#buttons[id].pressed()
+  }
+
+  async released (id) {
+    // console.info(`released ${id}`)
+    this.checkAndCreateButton(id)
+    return await this.#buttons[id].released()
+  }
+
+  async rotated (id, delta) {
+    // console.info(`rotated ${id} ${delta}`)
+    this.checkAndCreateButton(id)
+    return await this.#buttons[id].rotated(delta)
+  }
+}
+
+export class TouchButton {
+  width = 0
+  height = 0
+  #style
+  #type
+  #index = 0
+  #states = []
+  #min = 0
+  #max = 100
+  #value = 50
+  #data
+  #name = undefined
+
+  #images = {}
+  #colors = {
+    off: '#000000'
+    //    on: '#110011'
+  }
+
+  #rgbs = {
+    off: [0, 0, 0]
+    //    on: [0, 255, 0]
+  }
+
+  #commands = {
+    off: '',
+    on: ''
+  }
+
+  group = ''
+
+  text = ''
+  font = '16px Arial'
+
+  // Timestamp when button was pressed
+  timeStampPressed
+  // Timestamp when button was released
+  timeStampReleased
+  // Time actually hold the button in ms
+  timeHold
+  // Minimum ammount of time in ms to press a button:
+  minPressed = 25
+
+  constructor (id, width, height, data) {
+    this.id = id
+    this.width = width
+    this.height = height
+    this.#index = 0
+    this.#style = ButtonStyle.NONE
+    this.#type = ButtonType.TOGGLE
+    this.#states = Object.keys(this.#rgbs)
+
+    if (data) {
+      this.group = data.group
+      this.#style = ButtonStyle.PHYSICAL
+      if (data.images && Object.keys(data.images).length > 0) {
+        this.#style = ButtonStyle.IMAGE
+        this.#states = Object.keys(data.images)
+      } else if (data.colors && Object.keys(data.colors).length > 0) {
+        this.#style = ButtonStyle.COLOR
+        this.#states = Object.keys(data.colors)
+      } else if (data.rgb && Object.keys(data.rgb).length > 0) {
+        this.#states = Object.keys(data.rgb)
+      }
+      if (data.commands) {
+        this.#commands = data.commands
+      }
+
+      if (data.type) {
+        this.#type = data.type.toUpperCase()
+      }
+      if (data.minPressed) {
+        this.minPressed = data.minPressed
+      }
+
+      if (data.text) {
+        this.text = data.text
+      }
+      this.#data = data
+    }
+  }
+
+  setButtonStyle (type) {
+    this.#style = type
+  }
+
+  setState (index = 0) {
+    this.#index = index
+  }
+
+  async drawPhysical (device, id) {
+    try {
+      const val = {
+        id,
+        color: this.getCurrentRGB()
+      }
+      device.setButtonColor(val)
+    } catch (error) {
+      //      console.log(' Error', error)
+    }
+  }
+
+  async draw (row, column, ctx) {
+    const x = column * this.width
+    const y = row * this.height
+    switch (this.#style) {
+      case ButtonStyle.IMAGE:
+        ctx.drawImage(this.getCurrentStateImage(), x, y, this.width, this.height)
+        break
+      case ButtonStyle.COLOR:
+        // Draw a Colored Rectangle
+        ctx.fillStyle = this.getCurrentStateFill()
+        ctx.fillRect(x, y, this.width, this.height)
+        break
+      case ButtonStyle.NONE:
+        // Draw a Colored Rectangle
+        ctx.fillStyle = this.getCurrentStateFill(0)
+        ctx.fillRect(x, y, this.width, this.height)
+        break
+    }
+
+    ctx.fillStyle = '#000000'
+    ctx.font = this.font
+    ctx.fillText(this.text, x + 10, y - 10)
+  }
+
+  async load () {
+    let bLoaded = false
+    while (!bLoaded) {
+      switch (this.#style) {
+        case ButtonStyle.IMAGE:
+          bLoaded = await this.loadAsImage()
+          break
+        case ButtonStyle.COLOR:
+          bLoaded = await this.loadAsColor()
+          break
+        case ButtonStyle.PHYSICAL:
+          bLoaded = await this.loadAsRGB()
+          break
+        default:
+          bLoaded = true
+      }
+    }
+  }
+
+  async loadAsImage () {
+    this.#states = Object.keys(this.#data.images)
+    if (this.#states.length <= 0) {
+      this.#style = ButtonStyle.COLOR
+      return false
+    }
+
+    for (let i = 0; i < this.#states.length; i++) {
+      const key = this.#states[i]
+      const file = this.#data.images[key]
+      if (file !== undefined && file !== '') {
+        try {
+          this.#images[key] = await loadImage(file)
+        } catch (e) {
+          console.error('No such image', file)
+          this.#style = ButtonStyle.COLOR
+          delete this.#images[key]
+          return false
+        }
+      } else {
+        // this is not an image type
+      }
+    }
+    return true
+  }
+
+  async loadAsColor () {
+    if (this.#states.length <= 0) {
+      // use default colors
+      this.#states = Object.keys(this.#colors)
+      return true
+    }
+
+    for (let i = 0; i < this.#states.length; i++) {
+      const key = this.#states[i]
+      if (this.#data.colors && key in this.#data.colors) {
+        const color = this.#data.colors[key]
+        if (color !== undefined && color !== '') {
+          this.#colors[key] = color
+        }
+      }
+    }
+    return true
+  }
+
+  async loadAsRGB () {
+    if (this.#states.length <= 0) {
+      // use default colors
+      this.#states = Object.keys(this.#colors)
+      return true
+    }
+
+    if (this.#data.rgb) {
+      const keys = Object.keys(this.#data.rgb)
+      for (let i = 0; i < keys.length; i++) {
+        const key = this.#states[i]
+        const rgb = this.#data.rgb[key]
+        if (rgb !== undefined && rgb !== '') {
+          this.#rgbs[key] = rgb
+        }
+      }
+    }
+
+    return true
+  }
+
+  getCurrentStateImage () {
+    const key = this.#states[this.#index]
+    return this.#images[key]
+  }
+
+  getCurrentStateFill (forceIndex = -1) {
+    let key
+    if (forceIndex >= 0) {
+      key = this.#states[forceIndex]
+    } else {
+      key = this.#states[this.#index]
+    }
+    return this.#colors[key]
+  }
+
+  getCurrentRGB () {
+    const key = this.#states[this.#index]
+    const rgb = this.#rgbs[key]
+
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
+  }
+
+  getCurrentText () {
+    return this.text
+  }
+
+  getCurrentCommand () {
+    const key = this.#states[this.#index]
+    const cmd = this.#commands[key]
+
+    if (!cmd) { return '' }
+    // Call an action
+    const params = {
+      id: this.id,
+      state: key,
+      min: this.#min,
+      max: this.#max,
+      value: this.#value,
+      text: this.getCurrentText()
+    }
+    /* const keys = Object.keys(this.#data.config)
+    keys.forEach(key => {
+      params[key] = this.#data.config[key]
+    }) */
+
+    return format(cmd, params)
+  }
+
+  setIntState (val) {
+    this.#index = val
+  }
+
+  pressed () {
+    this.timeStampPressed = Date.now()
+
+    switch (this.#style) {
+      case ButtonStyle.NONE:
+        break
+      default:
+        this.#index++
+        this.#index %= this.#states.length
+    }
+    return true
+  }
+
+  released () {
+    this.timeStampReleased = Date.now()
+    this.timeHold = this.timeStampReleased - this.timeStampPressed
+
+    if (this.#style === ButtonStyle.NONE) { return }
+
+    if (this.timeHold < this.minPressed) {
+      // Update the State according to the not correct pressed state
+      console.log('Did not hold minimum time of ', this.minPressed, 'only', this.timeHold)
+      this.#index--
+      if (this.#index < 0) { this.#index = this.#states.length - 1 }
+      return false
+    }
+
+    // Update the State according to the correctly pressed state
+    switch (this.#type) {
+      case ButtonType.TOGGLE:
+        // do nothing
+        break
+      default:
+        this.#index--
+        if (this.#index < 0) { this.#index = this.#states.length - 1 }
+
+        break
+    }
+    this.runCommand()
+    return true // this.runCommand()
+  }
+
+  async rotated (delta) {
+    this.#value = calcDelta(this.#value, delta, this.#max)
+    return this.runCommand()
+  }
+
+  runCommand () {
+    const cmd = this.getCurrentCommand()
+    if (cmd && cmd !== '') {
+      sh(cmd)
+      return true
+    }
+    return false
+  }
+}

package/common/utils.mjs

@@ -0,0 +1,29 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+
+/**
+ * Read a JSON File
+ */
+export function readJSONFile (fileName) {
+  let data
+  try {
+    data = readFileSync(fileName, 'utf8')
+    return JSON.parse(data)
+  } catch (error) {
+    return data
+  }
+}
+
+/**
+ * Write a JSON File
+ */
+export function writeJSONFile (fileName, jsonObj) {
+  const data = JSON.stringify(jsonObj, null, 4)
+  writeFileSync(fileName, data)
+}
+
+export function calcDelta (data, delta, max = 100) {
+  data = data + delta
+  if (data > max) { data = max }
+  if (data < 0) { data = 0 }
+  return data
+}

package/config.json

@@ -0,0 +1,9 @@
+{
+    "application": "Example",
+    "profiles": [
+        {
+            "name": "profile1",
+            "file": "profile-1.json"
+        }
+    ]
+}

package/example.mjs

@@ -0,0 +1,13 @@
+import { ExampleDeviceHandler } from './ExampleDeviceHandler.mjs'
+
+const handler = new ExampleDeviceHandler('config.json')
+
+const stopHandler = () => {
+  console.log('Receiving SIGINT => Stopping processes.')
+  handler.stop()
+}
+
+// Initiating a process
+process.on('SIGINT', stopHandler)
+
+await handler.start()

package/index.mjs

@@ -0,0 +1,3 @@
+import { BaseLoupeDeckHandler } from './common/BaseLoupeDeckHandler.mjs'
+
+export { BaseLoupeDeckHandler }

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "loupedeck-commander",
+  "version": "1.0.0",
+  "description": "A system to ease working with LoupeDeck devices using CMD-line interfaces",
+  "main": "index.mjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "canvas": "^2.11.2",
+    "loupedeck": "^4.3.0",
+    "mkdirp": "^3.0.1",
+    "string-template": "^1.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.53.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-promise": "^6.1.1"
+  },
+  "author": "Thomas Schneider",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.com:keckxde/loupedeck-commander.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/keckxde/loupedeck-commander/-/issues"
+  }
+}

package/profile-1.json

@@ -0,0 +1,159 @@
+{
+    "profile": "KVM",
+    "description": "",
+    "config": {},
+    "touch": {
+        "left": {},
+        "right": {},
+        "center": {
+            "0": {
+                "images": {
+                    "off": "icons/Comp_E_n.png",
+                    "on": "icons/Comp_E_p.png"
+                },
+                "commands": {
+                    "off": "echo \"{id} {state}\"",
+                    "on": "echo \"{id} {state}\""
+                },
+                "group": "kvm1"
+            },
+            "1": {
+                "images": {
+                    "off": "icons/Comp_D_n.png",
+                    "on": "icons/Comp_D_p.png"
+                },
+                "group": "kvm1"
+            },
+            "2": {
+                "images": {
+                    "off": "icons/Comp_C_n.png",
+                    "on": "icons/Comp_C_p.png"
+                },
+                "group": "kvm1"
+            },
+            "3": {
+                "images": {
+                    "off": "icons/Comp_B_n.png",
+                    "on": "icons/Comp_B_p.png"
+                },
+                "group": "kvm1"
+            },
+            "4": {
+                "images": {
+                    "off": "icons/Comp_F_n.png",
+                    "on": "icons/Comp_F_p.png"
+                },
+                "group": "kvm1"
+            },
+            "5": {
+                "minPressed": 1000,
+                "type": "push",
+                "colors": {
+                    "off": "#000000",
+                    "on": "#ff0000"
+                }
+            },
+            "7": {
+                "images": {
+                    "off": "icons/Comp_A_n.png",
+                    "on": "icons/Comp_A_p.png"
+                },
+                "group": "kvm1"
+            }
+        },
+        "knob": {
+            "0": {
+                "images": {
+                    "off": "icons/cia.png",
+                    "on": "icons/saph.png"
+                },
+                "commands": {
+                    "off": "echo \"CIA {state}\"",
+                    "on": "echo \"CIA {state}\""
+                }
+            }
+        }
+    },
+    "knobs": {
+        "left": {},
+        "right": {}
+    },
+    "buttons": {
+        "knobTL": {
+            "commands": {
+                "off": "echo \"{id} {state} {value}\"",
+                "on": "echo \"{id} {state} {value}\""
+            }
+        },
+        "knobTR": {
+            "commands": {
+                "off": "echo \"{id} {state} {value}\"",
+                "on": "echo \"{id} {state} {value}\""
+            }
+        },
+        "knobCL": {
+            "commands": {
+                "off": "echo \"{id} {state} {value}\"",
+                "on": "echo \"{id} {state} {value}\""
+            }
+        },
+        "0": {
+            "commands": {
+                "off": "echo \"{id} {state}\"",
+                "on": "echo \"{id} {state}\""
+            },
+            "rgb": {
+                "off": [
+                    0,
+                    0,
+                    0
+                ],
+                "on": [
+                    0,
+                    255,
+                    0
+                ],
+                "intermediate": [
+                    0,
+                    255,
+                    255
+                ]
+            }
+        },
+        "1": {
+            "text": "PA",
+            "type": "toggle",
+            "commands": {
+                "off": "echo \"{id} {state}\"",
+                "on": "echo \"{id} {state}\"",
+                "intermediate": "echo \"{id} {state}\""
+            },
+            "rgb": {
+                "off": [
+                    0,
+                    0,
+                    0
+                ],
+                "on": [
+                    0,
+                    255,
+                    0
+                ],
+                "intermediate": [
+                    0,
+                    255,
+                    255
+                ]
+            }
+        },
+        "home": {
+            "rgb": {
+                "off": [
+                    0,
+                    0,
+                    0
+                ]
+            }
+        }
+    }
+}