loupedeck-commander 1.2.12 → 1.3.1

package/README.md

@@ -42,8 +42,8 @@ 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.yaml](https://gitlab.com/keckxde/loupedeck-commander/-/blob/main/config.yaml)
+- [profile-1.yaml](https://gitlab.com/keckxde/loupedeck-commander/-/blob/main/profile-1.yaml)
 
 Create a `index.mjs` file to open up your loupedeck connection:
 
@@ -51,7 +51,7 @@ Create a `index.mjs` file to open up your loupedeck connection:
 # save as index.mjs
 import { BaseLoupeDeckHandler } from 'loupedeck-commander'
 
-const handler = new BaseLoupeDeckHandler('config.json')
+const handler = new BaseLoupeDeckHandler('config.yaml')
 
 /**
  * Stop the handlers when a signal like SIGINT or SIGTERM arrive

package/common/ApplicationConfig.mjs

@@ -1,4 +1,4 @@
-import { readJSONFile, writeJSONFile,syncParams } from './utils.mjs'
+import { readConfigFile as readConfigFile, writeJSONFile,syncParams, writeYAMLFile } from './utils.mjs'
 
 export class ApplicationConfig {
   application = 'undefined'
@@ -7,7 +7,8 @@ export class ApplicationConfig {
 
   loadFromFile (fileName) {
     console.info(`ApplicationConfig: Loading Config File ${fileName}`)
-    const config = readJSONFile(fileName)
+    const config = readConfigFile(fileName)
+
 
     if (!config){
       console.info(`ApplicationConfig: Could not read/parse Config File ${fileName} - breaking here`)
@@ -66,7 +67,7 @@ class Profile {
 
   loadFromFile (fileName) {
     console.info(`ProfileConfig: Loading Profile  File ${fileName}, Index ${this.#index}`)
-    const config = readJSONFile(fileName)
+    const config = readConfigFile(fileName)
     if (config === undefined) {
       console.warn(`ProfileConfig: Cannot parse/load Profile File ${fileName}`)
       return false
@@ -105,7 +106,13 @@ class Profile {
     fileName = fileName.toLowerCase()
 
     console.info(`ProfileConfig: Save To Config File ${fileName}`)
-    writeJSONFile(fileName, this)
+    if(fileName.endsWith('.json')) {
+      writeJSONFile(fileName, this)
+      writeYAMLFile(fileName.replace('.json','.yaml'), this)
+    }else if(fileName.endsWith('.yaml')) {
+      writeYAMLFile(fileName, this)
+      writeJSONFile(fileName.replace('.yaml','.json'), this)
+    }
   }
 }
 
@@ -114,18 +121,18 @@ class Profile {
  */
 class TouchConfig {
   center = {
-    "0" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "1" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "2" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "3" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "4" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "5" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "6" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "7" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "8" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "9" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "10" : { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
-    "11" : { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } }, group : "" },
+    "0" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "1" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "2" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "3" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "4" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "5" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "6" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "7" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "8" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "9" :  { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "10" : { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
+    "11" : { "states" : { "off" : { "color": "#000099", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" }, "on" : { "color": "#00ff00", "image": "icons/home.png","cmd": "echo \"{id} {state}\"" } } },
   } // CENTER Display Config - Available in CT & LIVE
   left = {
     "0" :  { "states" : { "on" : { "color": "#000000", "cmd": "echo \"{id} {state}\"" } }, group : "" },
@@ -177,14 +184,14 @@ class TouchConfig {
 class ButtonConfig {
   buttons = {}
   defaultButtons = {
-    "0" :  {"states" : { "off" : { "filter": "pressed", "color": "#000000", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed","color": "#ff0000", "cmd": "echo \"{id} {state}\"" } }, group : "onoff" },
-    "1" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 0, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "2" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 1, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "3" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 2, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "4" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 3, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "5" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 4, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "6" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 5, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
-    "7" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055", "cmd": "echo \"{id} {state}\"" }, "on" : { "filter": "pressed", "profile": 6, "color": "#00ff00", "cmd": "echo \"{id} {state}\"" } }, group : "profiles" },
+    "0" :  {"states" : { "off" : { "filter": "pressed", "color": "#005500", "brightness" : 0 }, "half" : { "filter": "pressed", "brightness" : 0.5, "vibrate": 0x58, "color": "#00aa00" } , "on" : { "filter": "pressed", "brightness" : 1, "color": "#00ff00" } }, params: { group : "brightness"} },
+    "1" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 0,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "2" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 1,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "3" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 2,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "4" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 3,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "5" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 4,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "6" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 5,     "color": "#00ff00" } }, params: { group : "profiles"} },
+    "7" :  {"states" : { "off" : { "filter": "pressed", "color": "#000055",                  }, "on" : { "filter": "pressed", "profile": 6,     "color": "#00ff00" } }, params: { group : "profiles"} }
   } 
 
   constructor (data,profileCount,index) {

package/common/BaseLoupeDeckHandler.mjs

@@ -1,12 +1,15 @@
 import {discover, HAPTIC,LoupedeckDevice } from 'loupedeck'
 import { ApplicationConfig } from './ApplicationConfig.mjs'
-import { ButtonField, StopInterfaces, InitializeInterfaces,opcuainterface,profileEmitter} from './touchbuttons.mjs'
+import { ButtonField } from './ButtonField.mjs'
+
+import { InitializeInterfaces, StopInterfaces, opcuainterface, profileEmitter } from '../interfaces/interfaces.mjs'
 
 export class BaseLoupeDeckHandler {
   device = undefined
   appConfig = undefined
   profileConfigs = []
   currentProfile = 0
+  brightness = 1
   screens = {}
   buttons = {}
   knobs = {}
@@ -92,10 +95,8 @@ export class BaseLoupeDeckHandler {
         await new Promise(resolve => setTimeout(resolve, 250))
       }
 */
-      if (this.device){
-        this.device.setBrightness(0)
+        this.changeBrightness(0)
         await new Promise(resolve => setTimeout(resolve, 250))
-      }
       if (this.device){
         this.device.reconnectInterval = 0
         await this.device.close()
@@ -125,6 +126,25 @@ export class BaseLoupeDeckHandler {
     return this.appConfig.loadFromFile(fileName)
   }
 
+  vibrate (pattern) {
+    console.info(`Vibrate with pattern ${pattern}`)
+    if (this.device) {
+      this.device.vibrate(pattern)
+    } else {
+      console.warn("No Device connected, cannot vibrate")
+    }
+  }
+
+  changeBrightness (brightness) {
+    console.info(`Change Brightness to ${brightness}`)
+    this.brightness = brightness
+    if (this.device) {
+      this.device.setBrightness(brightness)
+    } else {
+      console.warn("No Device connected, cannot change brightness")
+    }
+  }
+
   /**
    * activate the profile with the givven ID
    */
@@ -196,20 +216,19 @@ export class BaseLoupeDeckHandler {
     
     await this.activateProfile(0)
 
-    // move into activate profile function to call init with every profile change
-    // var profile = this.getCurrentProfile()
-    //await InitializeInterfaces(profile)
-
     const self = this
 
     // Register callback on monitored item change:
     opcuainterface.on("monitored item changed",(buttonID,nodeid,val) => { self.buttonStateChanged(buttonID,nodeid,val) })
     profileEmitter.on("profileChanged",(profileID) => { self.activateProfile(profileID) })
+    profileEmitter.on("brightnessChanged",(brightness) => { self.changeBrightness(brightness) })
+    profileEmitter.on("vibrate",(pattern) => { self.vibrate(pattern) })
+    
     
 
-    this.device.setBrightness(1)
-    this.device.vibrate(HAPTIC.ASCEND_MED)
-
+    this.changeBrightness(1)
+    this.vibrate(HAPTIC.ASCEND_MED)
+    
     // Fore update of all screens
     console.info('✅ Force Screen update')
     this.screenUpdate["center"] = true

package/common/ButtonField.mjs

@@ -0,0 +1,159 @@
+import {Button} from './button.mjs'
+
+export class ButtonField {
+  #buttons = {}
+  #screen
+  width = 0
+  height = 0
+  #keys = []
+  #type
+  #name
+  #profile
+  
+  constructor (name, rows, columns, width, height, data, profile) {
+    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
+    this.#screen = this.width > 0 && this.height > 0
+    this.#type = 'button'
+    this.#profile = profile
+    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],key,this.#profile)
+      this.#buttons[key] = tb
+    }
+
+    this.#keys = keys
+  }
+
+  
+  async draw (device) {
+    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)
+        }
+      })
+    }
+  }
+
+  setState (id, val) {
+    this.#buttons[id].setState(val)
+  }
+
+  /*setIntState (id, val) {
+    this.#buttons[id].setIntState(val)
+  }*/
+
+  async load () {
+    for (let i = 0; i < this.#keys.length; i++) {
+      const key = this.#keys[i]
+      if (isNaN(key)) {
+        await this.#buttons[key].load(this.#profile)
+      } else {
+        const iVal = parseInt(key, 10)
+        await this.#buttons[iVal].load(this.#profile)
+      }
+    }
+  }
+
+  async pressed (id) {
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].pressed()
+    if (!result) {
+      console.info(`pressed ${this.#type} ${id}`)
+    }
+    return result
+  }
+
+  /**
+   * Button released event handler
+   * @param {*} id 
+   * @returns 
+   */
+  async 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.#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)
+        }
+      }
+    }
+    if (!result) {
+      console.info(`released ${this.#type} ${id}`)
+    }
+    return result
+  }
+
+  /**
+   * Button changed event handler (after opcua value change)
+   * @param {*} buttonID 
+   * @param {*} nodeid 
+   * @param {*} val 
+   */
+  async changed(buttonID,nodeid,val){
+    for (let i = 0; i < this.#keys.length; i++) {
+      let bID = this.#keys[i]
+      await this.#buttons[bID].changed(i,nodeid,val)
+    } 
+  }
+
+  /**
+   * Handle a rotation event for a knob
+   * @param {*} id : Knob ID (e.g. 'knobTL, 'knobTR', 'knobBL', 'knobBR') 
+   * @param {*} delta 
+   * @returns 
+   */
+  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
+  }
+
+  /**
+   * Handle a touchmove event for a touchbutton (available in left, center and right button fields)
+   * @param {*} id 
+   * @param {*} x 
+   * @param {*} y 
+   * @returns 
+   */
+  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 Button(id, 1, 1, id)
+      this.#buttons[id] = tb
+    }
+  }
+}
+