loupedeck-commander 1.0.1 → 1.0.2

package/README.md

@@ -5,6 +5,7 @@
 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
 - Tested with following LoupeDeck devices:
@@ -12,14 +13,17 @@ Features:
   - [LoupeDeck CT](https://loupedeck.com/products/loupedeck-ct/)
 
 Runs on:
+
 - Linux (Tested with Ubuntu 22.04 and Debian 11/12 on x64 & arm32/arm64)
 - Windows (Tested with Windows 10/11 on x64)
 
-Small footprint 
+Small footprint
+
 - Raspberry PI Zero is suitable to run this
 
 Please take care about the following:
- - LoupeDeck devices after `version 0.2.x` use a serial interface instead of WebSocket. 
+
+- LoupeDeck devices after `version 0.2.x` use a serial interface instead of WebSocket.
    When using this library please upgrade your firmware using the [LoupeDeck Software](https://loupedeck.com/downloads/)
    Tested with Firmware version [`version 0.2.5`](https://support.loupedeck.com/f-a-q-support#firmware-connectivity-issues)
 
@@ -27,7 +31,7 @@ Please take care about the following:
 
 Do the following steps:
 
-```
+```bash
 # init your new node package
 npm init
 
@@ -38,10 +42,11 @@ 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)
+- [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'
@@ -85,9 +90,9 @@ sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev l
 
 The buttons images shown on the different buttons should be prepared with specific resolutions:
 
- - Main/Center Touch-Area:        90px x 90px per Button
- - Left/Right Touch-Area:         90px x 270px per Button
- - LoupeDeck CT Knob Touch-Area:  240px x 240px Button 
+- Main/Center Touch-Area:        90px x 90px per Button
+- Left/Right Touch-Area:         90px x 270px per Button
+- LoupeDeck CT Knob Touch-Area:  240px x 240px Button
 
 if you already have suitable icons with the right aspect ratio, you could resize them with imagemagick/mogrify:
 

package/VERSION.md

@@ -0,0 +1,33 @@
+# Versions
+
+## 1.0.2
+
+1. Updated button rendering strategy:
+   - Render Background Color - per Button State
+   - Render Image on Top (if available), works well with transparent images
+
+2. Updated configuration strategy:
+   - Keep all state related attributes per button-state also in config:
+     example:
+
+     ```json
+     "states": {
+        "off": {
+            "color": "#aaaaaa",
+            "image": "icons/bulb.png",
+            "cmd": "echo \"{id} {state}\""
+        },
+        "on": {
+            "color": "#11ff11",
+            "image": "icons/bulb.png",
+            "cmd": "echo \"{id} {state}\""
+        }
+     ```
+
+## 1.0.1 
+
+bugfixes and documentation
+
+## 1.0.0
+
+first public release

package/common/BaseLoupeDeckHandler.mjs

@@ -1,6 +1,6 @@
 import pkg from 'loupedeck'
 import { ApplicationConfig } from './ApplicationConfig.mjs'
-import { TouchButtonField, PhysicalButtonField } from './touchbuttons.mjs'
+import { ButtonField } from './touchbuttons.mjs'
 const { discover, HAPTIC } = pkg
 
 export class BaseLoupeDeckHandler {
@@ -76,15 +76,15 @@ export class BaseLoupeDeckHandler {
     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)
+    this.screens.center = new ButtonField('center', this.device.rows, this.device.columns, dCenter.width, dCenter.height, profile.touch.center)
+    this.screens.left = new ButtonField('left', 1, 1, dLeft.width, dLeft.height, profile.touch.left)
+    this.screens.right = new ButtonField('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.screens.knob = new ButtonField('knob', 1, 1, dKnob.width, dKnob.height, profile.touch.knob)
     }
 
-    this.buttons = new PhysicalButtonField('bottom', profile.buttons)
+    this.buttons = new ButtonField('buttons', 1, 1, 0, 0, profile.buttons)
 
     await this.screens.center.load()
     await this.screens.right.load()
@@ -155,7 +155,7 @@ export class BaseLoupeDeckHandler {
   }
 
   async onTouchMove (event) {
-    const ok = false
+    let ok = false
     const changedTouches = event.changedTouches
     for (let i = 0; i < changedTouches.length; i++) {
       const x = changedTouches[i].x
@@ -165,7 +165,7 @@ export class BaseLoupeDeckHandler {
       if (id === undefined) {
         id = 0 // for left/right
       }
-      console.info('TouchMove : ', screen, id, x, y)
+      ok = await this.screens[screen].touchmove(id, x, y)
     }
     return ok
   }

package/common/touchbuttons.mjs

@@ -3,14 +3,6 @@ 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,
@@ -29,35 +21,58 @@ const ButtonType = {
   PUSH: 'PUSH'
 }
 
-export class TouchButtonField {
-  #buttons = []
+export class ButtonField {
+  #buttons = {}
+  #screen
   width = 0
   height = 0
   #rows = 0
   #columns = 0
+  #keys = []
+  #type
   #name
   constructor (name, rows, columns, width, height, data) {
-    console.info(`TouchButtonField ${name.padEnd(10, ' ')} Buttons: ${rows} x ${columns} , Pixels  ${width} x ${height}`)
+    console.info(`ButtonField ${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)
+    this.#screen = this.width > 0 && this.height > 0
+    this.#type = 'button'
+    if (this.#screen) { this.#type = 'touch' }
+
+    const keys = Object.keys(data)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      const tb = new Button(`${this.#type}-${key}`, width / columns, height / rows, data[key])
+      this.#buttons[key] = tb
     }
+
+    this.#keys = keys
   }
 
   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)
+    if (!this.#screen) {
+      // physical buttons:
+      for (let i = 0; i < this.#keys.length; i++) {
+        const key = this.#keys[i]
+        this.#buttons[key].drawPhysical(device, key)
       }
-    })
+    } else {
+      // screen:
+      device.drawScreen(this.#name, ctx => {
+        ctx.globalCompositeOperation = 'source-atop'
+        for (let i = 0; i < this.#keys.length; i++) {
+          const key = this.#keys[i]
+          const iValue = parseInt(key, 10)
+          const row = Math.floor(iValue / device.columns)
+          const column = iValue % device.columns
+
+          this.#buttons[key].draw(row, column, ctx)
+        }
+      })
+    }
   }
 
   setIntState (id, val) {
@@ -65,127 +80,94 @@ export class TouchButtonField {
   }
 
   async load () {
-    for (let i = 0; i < this.#rows * this.#columns; i++) {
-      await this.#buttons[i].load()
+    for (let i = 0; i < this.#keys.length; i++) {
+      const key = this.#keys[i]
+      if (isNaN(key)) {
+        await this.#buttons[key].load()
+      } else {
+        const iVal = parseInt(key, 10)
+        await this.#buttons[iVal].load()
+      }
     }
   }
 
   async pressed (id) {
-    // console.info(`pressed ${id}`)
-    await this.#buttons[id].pressed()
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].pressed()
+    if (!result) {
+      console.info(`pressed ${this.#type} ${id}`)
+    }
+    return result
   }
 
   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)
+      for (let i = 0; i < this.#keys.length; i++) {
+        let key = this.#keys[i]
+        if (!isNaN(key)) { key = parseInt(key, 10) }
+        if (id === key) { continue }
+        if (this.#buttons[key].group === this.#buttons[id].group) {
+          this.#buttons[key].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
+    if (!result) {
+      console.info(`released ${this.#type} ${id}`)
     }
+    return result
   }
 
-  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 rotated (id, delta) {
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].rotated(delta)
+    if (!result) { console.info(`rotated ${this.#type} ${id} ${delta}`) }
+    return result
   }
 
-  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()
-    }
+  async touchmove (id, x, y) {
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].touchmove(x, y)
+    if (!result) { console.info(`touchmove ${id} ${x} ${y}`) }
+    return result
   }
 
   checkAndCreateButton (id) {
     if (!(id in this.#buttons)) {
-      const tb = new TouchButton(id, 1, 1, id)
+      const tb = new Button(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 {
+export class Button {
   width = 0
   height = 0
-  #style
-  #type
-  #index = 0
-  #states = []
+
+  #type = ButtonType.TOGGLE
+
   #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: ''
-  }
+  #index = 0
+  #keys
+  #states
 
   group = ''
 
   text = ''
   font = '16px Arial'
 
+  #x
+  #y
+  #moveLeft
+  #moveRight
+  #moveUp
+  #moveDown
+
   // Timestamp when button was pressed
   timeStampPressed
   // Timestamp when button was released
@@ -200,29 +182,16 @@ export class TouchButton {
     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) {
+    if (data && data.states) {
       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
-      }
 
+      this.#states = data.states
+      this.#keys = Object.keys(this.#states)
       if (data.type) {
         this.#type = data.type.toUpperCase()
       }
+
       if (data.minPressed) {
         this.minPressed = data.minPressed
       }
@@ -230,12 +199,11 @@ export class TouchButton {
       if (data.text) {
         this.text = data.text
       }
-      this.#data = data
     }
-  }
-
-  setButtonStyle (type) {
-    this.#style = type
+    if (this.#states === undefined) {
+      this.#states = {}
+      this.#keys = []
+    }
   }
 
   setState (index = 0) {
@@ -243,10 +211,17 @@ export class TouchButton {
   }
 
   async drawPhysical (device, id) {
+    const elem = this.getCurrentElement()
+    if (!elem || !elem.color) { return }
+
+    const r = parseInt(elem.color.slice(1, 3), 16)
+    const g = parseInt(elem.color.slice(3, 5), 16)
+    const b = parseInt(elem.color.slice(5, 7), 16)
+
     try {
       const val = {
         id,
-        color: this.getCurrentRGB()
+        color: `rgba(${r}, ${g}, ${b})`
       }
       device.setButtonColor(val)
     } catch (error) {
@@ -257,160 +232,49 @@ export class TouchButton {
   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)
-  }
+    const elem = this.getCurrentElement()
 
-  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
+    if (elem) {
+      if (elem.color) {
+        ctx.fillStyle = elem.color
+        ctx.fillRect(x, y, this.width, this.height)
+      }
+      if (elem.imgBuffer) {
+        ctx.drawImage(elem.imgBuffer, x, y, this.width, this.height)
       }
     }
-  }
 
-  async loadAsImage () {
-    this.#states = Object.keys(this.#data.images)
-    if (this.#states.length <= 0) {
-      this.#style = ButtonStyle.COLOR
-      return false
-    }
+    //    ctx.fillStyle = '#000000'
+    //    ctx.font = this.font
+    //    ctx.fillText(this.text, x + 10, y - 10)
+  }
 
-    for (let i = 0; i < this.#states.length; i++) {
-      const key = this.#states[i]
-      const file = this.#data.images[key]
+  async load () {
+    for (let i = 0; i < this.#keys.length; i++) {
+      const key = this.#keys[i]
+      const elem = this.#states[key]
+      const file = elem.image
       if (file !== undefined && file !== '') {
         try {
-          this.#images[key] = await loadImage(file)
+          this.#states[key].imgBuffer = 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]})`
+  getCurrentElement () {
+    const key = this.#keys[this.#index]
+    return this.#states[key]
   }
 
   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
   }
@@ -418,27 +282,21 @@ export class TouchButton {
   pressed () {
     this.timeStampPressed = Date.now()
 
-    switch (this.#style) {
-      case ButtonStyle.NONE:
-        break
-      default:
-        this.#index++
-        this.#index %= this.#states.length
-    }
+    this.#index++
+    this.#index %= this.#keys.length
     return true
   }
 
   released () {
+    if (!this.getCurrentElement()) { return false }
     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 }
+      if (this.#index < 0) { this.#index = this.#keys.length - 1 }
       return false
     }
 
@@ -449,7 +307,7 @@ export class TouchButton {
         break
       default:
         this.#index--
-        if (this.#index < 0) { this.#index = this.#states.length - 1 }
+        if (this.#index < 0) { this.#index = this.#keys.length - 1 }
 
         break
     }
@@ -458,16 +316,58 @@ export class TouchButton {
   }
 
   async rotated (delta) {
+    if (!this.getCurrentElement()) { return false }
+
     this.#value = calcDelta(this.#value, delta, this.#max)
     return this.runCommand()
   }
 
-  runCommand () {
-    const cmd = this.getCurrentCommand()
-    if (cmd && cmd !== '') {
-      sh(cmd)
-      return true
+  async touchmove (x, y) {
+    // if (!this.getCurrentElement()) { return false }
+
+    if (x > this.#x) {
+      this.#moveRight = true
+      this.#moveLeft = false
+    } else if (x < this.#x) {
+      this.#moveRight = false
+      this.#moveLeft = true
     }
+
+    if (y > this.#y) {
+      this.#moveDown = true
+      this.#moveUp = false
+    } else if (y < this.#y) {
+      this.#moveDown = false
+      this.#moveUp = true
+    }
+
+    this.#x = x
+    this.#y = y
+    // console.log(`d: ${this.#moveDown}  r: ${this.#moveRight} `)
     return false
   }
+
+  runCommand () {
+    const elem = this.getCurrentElement()
+    if (!elem || !elem.cmd) {
+      return
+    }
+    // Call an action
+    const params = {
+      id: this.id,
+      state: this.#keys[this.#index],
+      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]
+    }) */
+
+    const cmdFormatted = format(elem.cmd, params)
+
+    return sh(cmdFormatted)
+  }
 }

package/{ExampleDeviceHandler.mjs → example/ExampleDeviceHandler.mjs}

@@ -1,5 +1,5 @@
 import pkg from 'loupedeck'
-import { BaseLoupeDeckHandler } from './common/BaseLoupeDeckHandler.mjs'
+import { BaseLoupeDeckHandler } from '../common/BaseLoupeDeckHandler.mjs'
 const { HAPTIC } = pkg
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loupedeck-commander",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A system to ease working with LoupeDeck devices using CMD-line interfaces",
   "main": "index.mjs",
   "scripts": {

package/profile-1.json

@@ -7,120 +7,57 @@
         "right": {},
         "center": {
             "0": {
-                "images": {
-                    "off": "icons/home.png",
-                    "on": "icons/home_filled.png"
-                },
-                "commands": {
-                    "off": "echo \"{id} {state}\"",
-                    "on": "echo \"{id} {state}\""
+                "states": {
+                    "off": {
+                        "color": "#aaaaaa",
+                        "image": "icons/home.png",
+                        "cmd": "echo \"{id} {state}\""
+                    },
+                    "on": {
+                        "color": "#11ff11",
+                        "image": "icons/home.png",
+                        "cmd": "echo \"{id} {state}\""
+                    }
                 },
                 "group": "kvm1"
             },
             "1": {
-                "images": {
-                    "off": "icons/user.png",
-                    "on": "icons/user_filled.png"
+                "states": {
+                    "off": {
+                        "color": "#aaaaaa",
+                        "image": "icons/bulb.png",
+                        "cmd": "echo \"{id} {state}\""
+                    },
+                    "on": {
+                        "color": "#11ff11",
+                        "image": "icons/bulb.png",
+                        "cmd": "echo \"{id} {state}\""
+                    }
                 },
                 "group": "kvm1"
-            },
-            "2": {
-                "type": "push",
-                "images": {
-                    "off": "icons/bulp.png",
-                    "on": "icons/bulp_filled.png"
-                }
-            },
-        },
-        "knob": {
-            "0": {
-                "images": {
-                    "default": "icons/mountain.png"
-                },
-                "commands": {
-                    "off": "echo \"knob {state}\""
-                }
             }
-        }
+        },
+        "knob": {}
     },
     "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": {
-            "commands": {
-                "off": "echo \"{id} {state}\"",
-                "on": "echo \"{id} {state}\"",
-                "intermediate": "echo \"{id} {state}\""
+            "states": {
+                "off": {
+                    "color": "#aaaaaa",
+                    "image": "icons/bulb.png",
+                    "cmd": "echo \"{id} {state}\""
+                },
+                "on": {
+                    "color": "#11ff11",
+                    "image": "icons/bulb.png",
+                    "cmd": "echo \"{id} {state}\""
+                }
             },
-            "rgb": {
-                "off": [
-                    0,
-                    0,
-                    0
-                ],
-                "on": [
-                    0,
-                    255,
-                    0
-                ],
-                "intermediate": [
-                    0,
-                    255,
-                    255
-                ]
-            }
-        },
-        "home": {
-            "rgb": {
-                "off": [
-                    0,
-                    0,
-                    0
-                ]
-            }
+            "group": "kvm1"
         }
     }
 }