loupedeck-commander 1.3.0 → 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)
+    }
   }
 }
 

package/common/button.mjs

@@ -22,7 +22,7 @@ export class Button {
   #enforcedIndex = -1
   #event
   #keys
-  #states 
+  #states
   // Timestamp when button was pressed
   timeStampPressed
   // Timestamp when button was released
@@ -31,48 +31,48 @@ export class Button {
   timeHold
   #counter = 0
 
-  constructor (id, width, height, data={},key,profile = {}) {
+  constructor(id, width, height, data = {}, key, profile = {}) {
     this.#states = {}
     this.#keys = []
-    
+
     this.id = id
     this.#index = 0
     this.#enforcedIndex = -1
 
     this.#profile = profile
     this.#params = {
-        "key" : key,
-        "state" : '',
-        "width" : width,
-        "height" : height,
-        "min" : 0,
-        "max" : 100,
-        "x" : 0,
-        "y" : 0,
-        "color" : '#000000',
-        "text" : '',
-        "textColor" : '#ffffff',
-        "textAlign" : 'center',
-        "textBaseline": 'top',
-        "font" :'16px Arial',
-        "value" : 50,
-        "minPressed": 25,
-        "moveLeft" : false,
-        "moveRight" : false,
-        "moveUp" : false,
-        "moveDown" : false,
-        "nodeid" : '',
-        "type" : ButtonType.TOGGLE,
-        "group" : key,
-        "filter" : "",
-        "blink" : false,
-        "vibrate" : false,
-        "profile" : "",
-        "brightness" : undefined,
-        "default" : "0"
-      }
-    
-    if (profile.parameters){
+      "key": key,
+      "state": '',
+      "width": width,
+      "height": height,
+      "min": 0,
+      "max": 100,
+      "x": 0,
+      "y": 0,
+      "color": '#000000',
+      "text": '',
+      "textColor": '#ffffff',
+      "textAlign": 'center',
+      "textBaseline": 'top',
+      "font": '16px Arial',
+      "value": 50,
+      "minPressed": 25,
+      "moveLeft": false,
+      "moveRight": false,
+      "moveUp": false,
+      "moveDown": false,
+      "nodeid": '',
+      "type": ButtonType.TOGGLE,
+      "group": key,
+      "filter": "",
+      "blink": false,
+      "vibrate": false,
+      "profile": "",
+      "brightness": undefined,
+      "default": "0"
+    }
+
+    if (profile.parameters) {
       let params = Object.keys(profile.parameters)
       for (let i = 0; i < params.length; i++) {
         const k = params[i]
@@ -83,7 +83,7 @@ export class Button {
     this.#params.key = key
 
     // New approach: Use all data from data.params:
-    if (data.params){
+    if (data.params) {
       this.#params = {
         ...this.#params,
         ...data.params
@@ -98,16 +98,16 @@ export class Button {
       this.#states = data.states
       this.#keys = Object.keys(this.#states)
 
-      var defaultIndex = this.#keys.indexOf(this.#params.default) 
+      var defaultIndex = this.#keys.indexOf(this.#params.default)
       if (defaultIndex >= 0) {
         this.#index = defaultIndex
       } else {
         this.#params.default = this.#keys[0]
-        console.info(`  button ${id} default set to ${this.#params.default}, available states`, this.#keys)
+        // console.info(`  button ${id} default set to ${this.#params.default}, available states`, this.#keys)
       }
       this.#params.state = this.#keys[this.#index]
     }
-    
+
     // Set the default value for the button:
 
     // Legacy approach: Use data directly:
@@ -119,11 +119,11 @@ export class Button {
       console.warn("Legacy approach: text is deprecated, use params.text instead")
       this.#params.text = data.text
     }
-    if (data.nodeid){
+    if (data.nodeid) {
       this.#params.nodeid = format(data.nodeid, this.getParams({}))
-      console.warn("Legacy approach: nodeid is deprecated, use params.nodeid instead",this.#params.nodeid)
+      console.warn("Legacy approach: nodeid is deprecated, use params.nodeid instead", this.#params.nodeid)
     }
-    if (data.type){
+    if (data.type) {
       console.warn("Legacy approach: type is deprecated, use params.type instead")
       this.#params.type = data.type
     }
@@ -133,18 +133,24 @@ export class Button {
       this.#index = this.#keys.indexOf(data.default)
     }
 
-    if (data.group){  
+    if (data.group) {
       console.warn("Legacy approach: group is deprecated, use params.group instead")
       this.#params.group = format(data.group, this.getParams({}))
     }
     // End Legacy approach
   }
 
-  setState (index = 0) {
+  setState(index = 0) {
     this.#index = index
   }
 
-  async drawPhysical (device, id) {
+  /**
+   * Draw a physical button (color in RGBA format) on a device
+   * @param {*} device 
+   * @param {*} id - id of the physical button
+   * @returns 
+   */
+  async drawPhysical(device, id) {
     const elem = this.getCurrentElement()
     if (!elem || !elem.color) { return }
 
@@ -156,52 +162,95 @@ export class Button {
       var idx = parseInt(id, 10);
 
       const val = {
-        id:idx,
+        id: idx,
         color: `rgba(${r}, ${g}, ${b})`
       }
-//      console.log(' Set Button Color',id, val.id,elem.color, val.color)
+      //      console.log(' Set Button Color',id, val.id,elem.color, val.color)
       device.setButtonColor(val)
     } catch (error) {
       console.error(' Error', error)
     }
   }
 
-  async draw (row, column, ctx) {
+  /**
+   * Draw the Touch-Screen Elementat the given row and column
+   * @param {*} row 
+   * @param {*} column 
+   * @param {*} ctx 
+   */
+  async draw(row, column, ctx) {
+    // Calculate the x/y position based on the row and column and the width/height properties of the button
     const x = column * this.#params.width
     const y = row * this.#params.height
 
-    const elem = this.getCurrentElement()
-    let params = this.getParams(elem)
-    
-    if (elem) {
-      if(elem.blink && this.#counter % 2 == 0) {
-        // If blink is set, we switch the color to inverted color
-        let oldColor = elem.color
-        elem.color = params.textColor
-        elem.textColor = oldColor
-        //console.log("Blinking Button",this.#index,elem.color) 
-      }
+    // Modifications in draw:
+    // - Support color and textColor settings also in params section which 
+    //   can be overwriten by button state property. This way color and textColor 
+    //   can be defined overall for all states without repeating them in every state.
+    // - Same for blink property.
 
-      ctx.fillStyle = params.color
-      ctx.fillRect(x, y, params.width, params.height)
-      
-      if (elem.imgBuffer) {
-        ctx.drawImage(elem.imgBuffer, x, y, params.width, params.height)
-      }
+    let params = this.getParams(this.getCurrentElement())
+
+    let color = params.color
+    let textColor = params.textColor
+
+    if (params.blink && this.#counter % 2 == 0) {
+      // If blink is set, we switch textcolor and background color:
+      color = params.textColor
+      textColor = params.color
+    }
+
+    // Apply the color as fillStyle:
+    ctx.fillStyle = color
+    // Draw the background of the button::
+    ctx.fillRect(x, y, params.width, params.height)
+
+    // if we have an icon/image draw it on top of the button
+    if (params.imgBuffer) {
+      ctx.drawImage(params.imgBuffer, x, y, params.width, params.height)
     }
-    if (params.text != undefined && params.text != '') {      
-      ctx.fillStyle = params.textColor
+    // if we have a text defined, draw it on top:
+    if (params.text != undefined && params.text != '') {
+      ctx.fillStyle = textColor
       ctx.font = params.font
       ctx.textBaseline = params.textBaseline;
       ctx.textAlign = params.textAlign;
-      let dynamicText = format(params.text, this.getParams(elem))
-      ctx.fillText(dynamicText,x+6,y+6)  
+      let dynamicText = format(params.text, params)
+      let tx = x
+      let ty = y
+      // Handle Text Horizontal Alignment
+      switch (params.textAlign) {
+        case "center":
+          tx += this.#params.width / 2;
+          break;
+        case "left":
+          tx += 6;
+          break;
+        case "right":
+          tx += this.#params.width - 6;
+          break;
+      }
+      // Handle Text Vertical Alignment
+      switch (params.textBaseline) {
+        case "middle":
+          ty += this.#params.height / 2;
+          break;
+        case "top":
+          ty += 6;
+          ctx.textBaseline = "top";
+          break;
+        case "bottom":
+          ty += this.#params.height - 6;
+          ctx.textBaseline = "bottom";
+          break;
+      }
+      ctx.fillText(dynamicText, x + 6, y + 6)
     }
 
     this.#counter = this.#counter + 1
   }
 
-  async load (globalConfig) {
+  async load(globalConfig) {
     this.#profile = globalConfig
     for (let i = 0; i < this.#keys.length; i++) {
       const key = this.#keys[i]
@@ -218,34 +267,41 @@ export class Button {
     }
   }
 
-  getCurrentElement () {
+  getCurrentElement() {
     const state = this.#keys[this.#index]
     return this.#states[state]
   }
 
-  getLastElement () {
-    let i=this.#index-1 
-    if (i < 0) { i = this.#keys.length - 1 }
-
-    const lastState = this.#keys[i]
-    return this.#states[lastState]
-  }
-
-  pressed () {
+  /**
+   * Triggered when either a physical button, touchscreen button or Knob Button was pressed
+   * Updates the timeStampPressed and timeHold, and checks if the button was hold long enough (minPressed attribute)
+   * If the button type was not TOGGLE, it will decrease the index to the previous state.
+   * @returns 
+   */
+  pressed() {
     this.timeStampPressed = Date.now()
-
+    this.updateState(this.#index, "pressed", true)
     this.#index++
 
-    if (this.#enforcedIndex>=0){
-      console.log("Enforced Index",this.#enforcedIndex )
+    if (this.#enforcedIndex >= 0) {
+      console.log("Enforced Index", this.#enforcedIndex)
       this.#index = this.#enforcedIndex
     }
 
-    this.updateState(this.#index,"pressed",true)
+    // Update the State according to the correctly pressed state
+    if (this.#index < 0) { this.#index = this.#keys.length - 1 }
+    this.#index %= this.#keys.length
+
     return true
   }
 
-  released () {
+  /**
+   * Triggered when either a physical button, touchscreen button or Knob Button was released
+   * Updates the timeStampReleased and timeHold, and checks if the button was hold long enough (minPressed attribute)
+   * If the button type was not TOGGLE, it will decrease the index to the previous state.
+   * @returns 
+   */
+  released() {
     let elem = this.getCurrentElement()
     if (!elem) { return false }
     this.timeStampReleased = Date.now()
@@ -255,7 +311,6 @@ export class Button {
     if (this.timeHold < this.#params.minPressed) {
       // Update the State according to the not correct pressed state
       console.log('Did not hold minimum time of ', this.#params.minPressed, 'only', this.timeHold)
-      //if (this.#index < 0) { this.#index = this.#keys.length - 1 }
       bExecute = false
     }
 
@@ -266,34 +321,41 @@ export class Button {
         break
       default:
         this.#index--
-        //if (this.#index < 0) { this.#index = this.#keys.length - 1 }
         break
     }
 
-    if (this.#enforcedIndex>=0){
-      console.log("Enforced Index",this.#enforcedIndex )
+    if (this.#enforcedIndex >= 0 && this.#enforcedIndex != this.#index) {
+      // If we have an enforced index, we set it to the enforced index:
+      console.log("Enforcing Index", this.#enforcedIndex, "instead of", this.#index)
       this.#index = this.#enforcedIndex
     }
-    
-    
-    this.updateState(this.#index,"released",bExecute)
-    
-    return true // this.runCommand()
-  }
 
-  updateState(index,eventType,bExecute){
-    this.#index = index
-    this.#event = eventType    
     // Update the State according to the correctly pressed state
     if (this.#index < 0) { this.#index = this.#keys.length - 1 }
     this.#index %= this.#keys.length
+
+
+    this.updateState(this.#index, "released", bExecute)
+
+    return true
+  }
+
+
+  updateState(index, eventType, bExecute) {
+    this.#index = index
+    this.#event = eventType
     if (bExecute)
       this.runCommand()
-    //console.log("TODO: expect newState", newState)
-    return true // this.runCommand()
+    return true
   }
 
-  async rotated (delta) {
+  /**
+   * Triggered when one of the physical KNOBS is rotated
+   * Calculates the new value based on the delta, and store it in the params.value
+   * @param {*} delta 
+   * @returns 
+   */
+  async rotated(delta) {
     if (!this.getCurrentElement()) { return false }
 
     this.#event = "rotated"
@@ -301,50 +363,47 @@ export class Button {
     return this.runCommand()
   }
 
-  async changed(buttonID,nodeid,val){
+  /**
+   * This function is called when the value of a button is changed from outside (e.g. coming from an opcua subscription)
+   * @param {*} buttonID: the ID of the button that caused the change 
+   * @param {*} nodeid: the nodeid that changed
+   * @param {*} val : the current value of the given nodeid
+   * @returns 
+   */
+  async changed(buttonID, nodeid, val) {
     // Only handle updates within the same group identified by nodeid
-    if (nodeid !== this.#params.nodeid){
-        return
+    if (nodeid !== this.#params.nodeid) {
+      return
     }
 
     this.#index = 0;
     this.#enforcedIndex = -1;
     for (let i = 0; i < this.#keys.length; i++) {
-      let key = this.#keys[i]
+      let stateStr = this.#keys[i].toString()
+      let valStr = val.toString()
       // check if the state-name is same as the value we get from outside:
-      if (val == key){
-        this.#index = i;
-        console.info("enforce index", buttonID,nodeid,val,i)
-        this.#enforcedIndex = this.#index;
+      if (valStr == stateStr) {
+        if (i !== this.#index) {
+          console.info("Changed index", this.id, nodeid, val, i)
+          this.#index = i;
+          console.info("enforce State index", this.id, nodeid, val, i)
+          this.#enforcedIndex = this.#index;
+        }
         break;
       }
-
-      // check if the nodeid is the same and the value is one of the states
-      // todo überarbeiten
-        let state = this.#states[key]
-        if (state.value === undefined)
-          continue
-
-        const params = {
-          id: buttonID,
-          key: buttonID,
-          state : key,
-          ...state
-        }
-        if (state && state.value !== undefined){
-          let strVal = state.value.toString()
-          let val1 = format(strVal,params)
-          if (val1 === val?.toString()){
-            this.#index = i;
-            break;
-          }
-        }
-        //break;
     }
   }
 
-  async touchmove (x, y) {
-    // if (!this.getCurrentElement()) { return false }
+  /**
+   * Handle a touchmove event on a touchscreen button
+   * This function calculates the new value based on the x and y coordinates of the touchmove event.
+   * It updates the moveLeft, moveRight, moveUp and moveDown parameters based on the x and y coordinates.
+   * It also calculates the delta for the value based on the y coordinate and updates the value parameter.
+   * @param {*} x 
+   * @param {*} y 
+   * @returns 
+   */
+  async touchmove(x, y) {
 
     let delta = 0
     if (x > this.#params.x) {
@@ -365,8 +424,8 @@ export class Button {
       delta = 1
     }
 
-    this.#params.x = (x%100) 
-    this.#params.y = (y%100)
+    this.#params.x = (x % 100)
+    this.#params.y = (y % 100)
 
     // Calculate delta for value no touchmove up/down
     this.#params.value = calcDelta(this.#params.value, delta, this.#params.min, this.#params.max)
@@ -375,7 +434,7 @@ export class Button {
     return false
   }
 
-  getParams(elem){
+  getParams(elem) {
     // Call an action - include dynamic parameters
     // and also all attributes of elem + global config
     const params = {
@@ -385,71 +444,54 @@ export class Button {
       id: this.id,
       //key: this.key,
       event: this.#event,
-      pressed : this.#event == "pressed",
-      released : this.#event == "released",
-      rotated : this.#event == "rotated",
-//      state: this.#keys[this.#index]
+      pressed: this.#event == "pressed",
+      released: this.#event == "released",
+      rotated: this.#event == "rotated",
     }
     return params
   }
 
-  async runCommand () {
-    const elem = this.getCurrentElement()
+  /**
+   * Run a command based on the current element's parameters.
+   * This function checks if the current element has a command, http request or opcua request defined.
+   * If so, it will execute the command using the respective interface (shell, http or opcua).
+   * It will also emit profile and brightness changes if defined in the parameters.
+   * @returns 
+   */
+  async runCommand() {
+    //const elem = this.getCurrentElement()
+    let params = this.getParams(this.getCurrentElement())
+
     // Only continue, if we have an element:    
-    if (!elem) {
+    if (!params) {
       return
     }
     // Filter for Event Type:
-    if (elem.filter && elem.filter != this.#event){
+    if (params.filter && params.filter != this.#event) {
       return
     }
 
-    if (elem.profile !== undefined) {
-      profileEmitter.emit("profileChanged", elem.profile)
+    if (params.profile !== undefined && params.profile !== '') {
+      profileEmitter.emit("profileChanged", params.profile)
     }
 
-    if (elem.brightness !== undefined) {
-      profileEmitter.emit("brightnessChanged", elem.brightness)
+    if (params.brightness !== undefined) {
+      profileEmitter.emit("brightnessChanged", params.brightness)
     }
 
-    if (elem.vibrate !== undefined) {
-      profileEmitter.emit("vibrate", elem.vibrate)
+    if (params.vibrate !== undefined) {
+      profileEmitter.emit("vibrate", params.vibrate)
     }
 
-    // Only continue, if we have an element, that contains some kind of command:    
-    if (!elem.cmd && !elem.http && !elem.opcua) {
-      return
-    }
-
-    let params = this.getParams(elem)
     let res = ''
-    if ('cmd' in elem) {
-      if (shellinterface){
-        res = await shellinterface.call(elem.cmd, params)
-      }else{
-        console.warn("shellinterface not started")
-      }
+    if ('cmd' in params && shellinterface) {
+        res = await shellinterface.call(params.cmd, params)
     }
-    if ('http' in elem) {
-      if (httpinterface){
-        res = await httpinterface.call(elem.http, params)
-      }else{
-        console.warn("httpinterface not started")
-      }
+    if ('http' in params && httpinterface) {
+        res = await httpinterface.call(params.http, params)
     }
-    if ('opcua' in elem) {
-      if (opcuainterface){
-        res = await opcuainterface.call(elem.opcua, params)
-
-        /** TODO: CHECK THIS - don't think it's ever used any more */
-        /*if (this.#data.statenodeid){
-          let stateParams = params
-          params.value = params.state
-          res = await opcuainterface.call(this.#data.statenodeid, params)
-        }*/
-      }else{
-        console.warn("opcuainterface not started")
-      }
+    if ('opcua' in params && opcuainterface) {
+        res = await opcuainterface.call(params.opcua, params)
     }
 
     return res