loupedeck-commander 1.4.2 → 1.4.3

package/common/BaseLoupeDeckHandler.mjs

@@ -14,6 +14,7 @@ export class BaseLoupeDeckHandler {
   buttons = {}
   knobs = {}
   screenUpdate = {}
+  counter = 0
   stopping = false
   IntervalID = undefined
 
@@ -247,11 +248,11 @@ export class BaseLoupeDeckHandler {
     //await this.updateScreens()
 
     this.IntervalID = setInterval(() => {
-      // runs every 500ms seconds
+      // runs every 50ms seconds
       if (this.device.displays.center)
         this.screenUpdate["center"] = true
       self.updateScreens()
-    }, 500);
+    }, 50);
     
 
     console.info('✅ Done initializing')
@@ -261,12 +262,20 @@ export class BaseLoupeDeckHandler {
    * Fore an update of all screens
    */
   async updateScreens () {
+    this.counter = this.counter + 1
     const keys = Object.keys(this.screenUpdate)
     for (let i = 0; i < keys.length; i++) {
       const screen = keys[i]
       //ok = await this.screens.center.updateAllButtons()
-      if (this.screens[screen])
-        await this.screens[screen].draw(this.device)
+      if (this.screens[screen]){
+        if (this.counter % 5 == 0) { // Only check for blink every 5 times, to reduce the load on the device and avoid flickering
+          await this.screens[screen].draw(this.device)
+        }else{
+          await this.screens[screen].updateAllButtons(this.device)
+        }
+        
+      }
+        
     }
     this.screenUpdate = {}
   }

package/common/ButtonField.mjs

@@ -1,4 +1,4 @@
-import {Button} from './button.mjs'
+import { Button } from './button.mjs'
 
 export class ButtonField {
   #buttons = {}
@@ -11,8 +11,8 @@ export class ButtonField {
   #type
   #name
   #profile
-  
-  constructor (name, rows, columns, width, height, data, 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
@@ -27,15 +27,25 @@ export class ButtonField {
     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)
+      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) {
+  async updateAllButtons(device) {
+    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)
+    }
+  }
+
+  async draw(device) {
     if (!this.#screen) {
       // physical buttons:
       for (let i = 0; i < this.#keys.length; i++) {
@@ -58,7 +68,7 @@ export class ButtonField {
     }
   }
 
-  setState (id, val) {
+  setState(id, val) {
     this.#buttons[id].setState(val)
   }
 
@@ -66,7 +76,7 @@ export class ButtonField {
     this.#buttons[id].setIntState(val)
   }*/
 
-  async load () {
+  async load() {
     for (let i = 0; i < this.#keys.length; i++) {
       const key = this.#keys[i]
       if (isNaN(key)) {
@@ -78,7 +88,7 @@ export class ButtonField {
     }
   }
 
-  async pressed (id) {
+  async pressed(id) {
     this.checkAndCreateButton(id)
     const result = await this.#buttons[id].pressed()
     if (!result) {
@@ -92,7 +102,7 @@ export class ButtonField {
    * @param {*} id 
    * @returns 
    */
-  async released (id) {
+  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:
@@ -103,7 +113,7 @@ export class ButtonField {
         if (id === key) { continue }
         let toggleGroup = this.#buttons[id].getGroup()
         // Ignore empty groups
-        if (toggleGroup === undefined || toggleGroup == "" ) { continue }
+        if (toggleGroup === undefined || toggleGroup == "") { continue }
         // Switch all other elements of the same group off:
         if (this.#buttons[key].getGroup() === toggleGroup) {
           this.#buttons[key].setState(0)
@@ -122,13 +132,13 @@ export class ButtonField {
    * @param {*} nodeid 
    * @param {*} val 
    */
-  async buttonStateChanged(changedButtonID,attribute,nodeid,val){
+  async buttonStateChanged(changedButtonID, attribute, nodeid, val) {
     // todo: filter for buttonID
     for (let i = 0; i < this.#keys.length; i++) {
       let buttonID = this.#keys[i]
       if (changedButtonID == buttonID)
-        await this.#buttons[buttonID].buttonStateChanged(i,attribute,nodeid,val)
-    } 
+        await this.#buttons[buttonID].buttonStateChanged(i, attribute, nodeid, val)
+    }
   }
 
   /**
@@ -137,7 +147,7 @@ export class ButtonField {
    * @param {*} delta 
    * @returns 
    */
-  async rotated (id, delta) {
+  async rotated(id, delta) {
     this.checkAndCreateButton(id)
     const result = await this.#buttons[id].rotated(delta)
     if (!result) { console.info(`rotated ${this.#type} ${id} ${delta}`) }
@@ -151,14 +161,15 @@ export class ButtonField {
    * @param {*} y 
    * @returns 
    */
-  async touchmove (id, x, y) {
+  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
+    //if (!result) { 
+    //  console.info(`touchmove ${id} ${x} ${y}`) }
+    //return result
   }
 
-  checkAndCreateButton (id) {
+  checkAndCreateButton(id) {
     if (!(id in this.#buttons)) {
       const tb = new Button(id, 1, 1, id)
       this.#buttons[id] = tb

package/common/button.mjs

@@ -1,7 +1,7 @@
 
 import { loadImage } from 'canvas'
 //import { loadImage } from "https://deno.land/x/canvas/mod.ts";
-import { calcDelta, invertColor } from './utils.mjs'
+import { calcDelta, darkerColor } from './utils.mjs'
 import format from 'string-template'
 
 import { shellinterface, httpinterface, opcuainterface, profileEmitter } from '../interfaces/interfaces.mjs'
@@ -21,9 +21,12 @@ export class Button {
   #index = 0
   #enforcedIndex = -1
   #enforcedBlink = false
+  inversed = false
   #event
   #keys
   #states
+  // PressActive
+  pressActive = false
   // Timestamp when button was pressed
   timeStampPressed
   // Timestamp when button was released
@@ -37,9 +40,9 @@ export class Button {
     this.#keys = []
 
     this.id = id
-    this.#index = 0
-    this.#enforcedIndex = -1
-    this.#enforcedBlink = false
+    //this.#index = 0
+    //this.#enforcedIndex = -1
+    //this.#enforcedBlink = false
 
     // console.info(`  Button ${id.padEnd(10, ' ')} Size: ${width} x ${height}`)
 
@@ -193,19 +196,35 @@ export class Button {
   async draw(row, column, ctx) {
     let params = this.getParams(this.getCurrentElement())
     let x = 0
-    let y = 0 
+    let y = 0
 
     // Adjust for non-square buttons:
     if (params.width > params.height) {
-      x += (2+column) * (params.width - params.height) / 2
+      x += (2 + column) * (params.width - params.height) / 2
       params.width = params.height
     }
-    
+
+    // If we have a filter for the event type, we check if the current event matches the filter. If not, we do not execute the command:
+    if (this.pressActive && params.filter == "released") {
+      this.timeHold = Date.now() - this.timeStampPressed
+      let overTime = this.timeHold - params.minPressed
+      if (overTime > 0 && overTime < 100) {
+        // Update the State according to the not correct pressed state
+        console.log('Minimum time of ', this.#params.minPressed, 'reached:', this.timeHold)
+        profileEmitter.emit("vibrate", 0x01) // Vibrate with a short pulse to indicate the button is pressed long enough
+      }
+    }
+    this.#counter = this.#counter + 1
+    // Only render the screen every 500ms (all 5 counter increments
+    if (!ctx) { 
+      return
+    }
+
     // Calculate the x/y position based on the row and column and the width/height properties of the button
     x += column * params.width
-    y += row * params.height   
+    y += row * params.height
+
 
-    
     // 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 
@@ -214,15 +233,24 @@ export class Button {
 
 
 
+    if (((params.blink === true) || this.#enforcedBlink)) {
+      this.inversed = !this.inversed
+    }
+
     let color = params.color
     let textColor = params.textColor
 
-    if (((params.blink === true) || this.#enforcedBlink)  && this.#counter % 2 == 0) {
-      // If blink is set, we switch textcolor and background color:
+    if (this.inversed) {  // If blink is set, we switch textcolor and background color:
       color = params.textColor
       textColor = params.color
     }
 
+    if (this.pressActive) {
+      // If the button is currently pressed, we apply a darken effect to the color:
+      color = darkerColor(color, 0.5)
+    }
+
+
     // Apply the color as fillStyle:
     ctx.fillStyle = color
     // Draw the background of the button::
@@ -269,8 +297,6 @@ export class Button {
       }
       ctx.fillText(dynamicText, tx, ty)
     }
-
-    this.#counter = this.#counter + 1
   }
 
   async load(globalConfig) {
@@ -278,7 +304,11 @@ export class Button {
     for (let i = 0; i < this.#keys.length; i++) {
       const key = this.#keys[i]
       const elem = this.#states[key]
-      const file = elem.image
+      let file = elem.image
+      if (file === undefined && this.#params.image) {
+        // If we do not have an image defined on state level, but we have an image defined on params level, we use the image from params:
+        file = this.#params.image
+      }
       if (file !== undefined && file !== '') {
         try {
           this.#states[key].imgBuffer = await loadImage(file)
@@ -302,11 +332,12 @@ export class Button {
    * @returns 
    */
   pressed() {
+    this.pressActive = true
     this.timeStampPressed = Date.now()
     this.updateState(this.#index, "pressed", true)
     this.#index++
 
-    if (this.#enforcedIndex >= 0) {
+    if (this.#enforcedIndex >= 0 && this.#index != this.#enforcedIndex) {
       console.log("Enforced Index", this.#enforcedIndex)
       this.#index = this.#enforcedIndex
     }
@@ -325,6 +356,8 @@ export class Button {
    * @returns 
    */
   released() {
+    this.pressActive = false
+    this.inversed = false; // reset inversed state on release, so that blink starts from the defined color again on next press
     let elem = this.getCurrentElement()
     if (!elem) { return false }
     this.timeStampReleased = Date.now()
@@ -405,22 +438,24 @@ export class Button {
         // check if the state-name is same as the value we get from outside:
         if (valStr == stateStr) {
           //if (i !== this.#index) {
-            //console.info("enforce State index", this.id, nodeid, val, i)
-            this.#enforcedIndex = i;
+          //console.info("enforce State index", this.id, nodeid, val, i)
+          this.#enforcedIndex = i;
           //}
           break;
         }
       }
       //console.info("Changed index", this.id, nodeid, val, this.#enforcedIndex)
       this.#index = this.#enforcedIndex;
+      this.inversed = false
+      this.pressActive = false
       //console.info("enforce State index", this.id, nodeid, val, i)
       //this.#enforcedIndex = this.#index;
     }
-    
+
 
     if (attribute == "blink") {
-          console.info("Changed blink", buttonID, nodeid, val)
-        this.#enforcedBlink = val;      
+      console.info("Changed blink", buttonID, nodeid, val)
+      this.#enforcedBlink = val;
     }
   }
 
@@ -458,7 +493,7 @@ export class Button {
     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)
+    this.#params.touchvalue = calcDelta(this.#params.touchvalue, delta, this.#params.min, this.#params.max)
 
     // console.log(`d: ${this.#params.moveDown}  r: ${this.#params.moveRight} `)
     return false

package/common/utils.mjs

@@ -1,12 +1,13 @@
 import { readFileSync, writeFileSync } from 'node:fs'
 import YAML from 'yaml'
+import JSON5 from 'json5'
 
 /**
  * Read a Config file in either JSON or YAML Fileformat
  * @param {string} fileName - The name of the file to read
  * @returns {object} - The parsed object from the file
  */
-export function readConfigFile (fileName) {
+export function readConfigFile(fileName) {
   let obj = undefined
   try {
     //console.log("Reading File:", fileName)
@@ -14,14 +15,18 @@ export function readConfigFile (fileName) {
     // If the file is a YAML file, parse it
     if (fileName.endsWith('.yaml') || fileName.endsWith('.yml')) {
       obj = YAML.parse(data)
-    } else if (fileName.endsWith('.json')) {
+    } else if (fileName.endsWith('.json') || fileName.endsWith('.json5')) {
       // If the file is a JSON file, parse it
-      obj = JSON.parse(data)
+      obj = JSON5.parse(data)
       // automatically convert all json to yaml
-      writeYAMLFile(fileName.replace(".json",".yaml"), obj)
+      writeYAMLFile(fileName.replace(".json", ".yaml"), obj)
+    }
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      console.error(`Error reading file: File ${fileName} not found.`);
+    } else {
+      console.error(`Unexpected error: ${err.message}`);
     }
-  } catch (error) {
-    console.info(`Error reading File: ${fileName}`, error)
   }
   return obj
 }
@@ -30,12 +35,12 @@ export function readConfigFile (fileName) {
  * Write a JSON File
  */
 export function writeJSONFile (fileName, jsonObj) {
-  const data = JSON.stringify(jsonObj, null, 4)
+  const data = JSON5.stringify(jsonObj, null, 4)
   writeFileSync(fileName, data)
 }
 
 /**
- * Write a JSON File
+ * Write a YAML File
  */
 export function writeYAMLFile (fileName, jsonObj) {
   const data = YAML.stringify(jsonObj)
@@ -68,12 +73,25 @@ export function invertColor(colorAsHex){
   for (var i = 0; i < rgb.length; i++) {
     rgb[i] = (i === 3 ? 1 : 255) - rgb[i];
   }
-  let invertedColor = `#${rgb[0].toString(16)}${rgb[1].toString(16)}${rgb[2].toString(16)})`
-  //let invertedColor = `#${rgb[0].toString(16).padStart(2, '0')}${rgb[1].toString(16).padStart(2, '0')}${rgb[2].toString(16).padStart(2, '0')})`
+  let invertedColor = `#${ rgb[0].toString(16) }${ rgb[1].toString(16) }${ rgb[2].toString(16) })`
+  //let invertedColor = `#${ rgb[0].toString(16).padStart(2, '0') }${ rgb[1].toString(16).padStart(2, '0') }${ rgb[2].toString(16).padStart(2, '0') })`
   //console.log("invert", colorAsHex,"=>",invertedColor)
   return invertedColor
 }
 
+/**
+ * Invert a color in hex format (#RRGGBB) to its inverted color
+ * @param {*} colorAsHex 
+ * @returns 
+ */
+export function darkerColor(colorAsHex, factor = 0.5){
+  let rgb = colorToRGB(colorAsHex)
+  for (var i = 0; i < rgb.length; i++) {
+    rgb[i] = factor* rgb[i];
+  }
+  return `#${ rgb[0].toString(16) }${ rgb[1].toString(16) }${ rgb[2].toString(16) })`
+}
+
 /**
  * Convert a color in hex format (#RRGGBB) to RGB array
  * @param {*} colorAsHex 

package/interfaces/opcuaif.mjs

@@ -87,7 +87,7 @@ export class OPCUAIf extends BaseIf {
 
                                 let monitoredItemId = await this.Subscribe(nodeID, options, attribute)
                                 if (monitoredItemId) {
-                                    console.log("Register nodeid", nodeID, monitoredItemId, buttonID, attribute,)
+                                    console.log(`Register nodeid: ${nodeID}, monitoredItemId: ${monitoredItemId}, buttonID: ${buttonID}, attribute: ${attribute}`)
                                     if (this.buttons[monitoredItemId] == undefined)
                                         this.buttons[monitoredItemId] = []
                                     this.buttons[monitoredItemId].push({
@@ -167,6 +167,8 @@ export class OPCUAIf extends BaseIf {
                     return value.toString();
                 return value
             case DataType.Boolean:
+                if (typeof value == "boolean" )
+                    return value
                 if (typeof value == "number" && value === 1)
                     return true
                 if (typeof value == "string") {
@@ -211,7 +213,7 @@ export class OPCUAIf extends BaseIf {
             value = super.formatString(options.value, options)
 
         var convertedValue = this.convert(value, type)
-        this.LogInfo(`OPCUAIf: write ${nodeId} => ${value}\n`)
+        //this.LogInfo(`OPCUAIf: write ${nodeId} => ${value}\n`)
         await this.Write(nodeId, convertedValue, type)
 
         var NewState = "waiting"
@@ -280,7 +282,7 @@ export class OPCUAIf extends BaseIf {
         this.#client = OPCUAClient.create({
             applicationName: "NodeOPCUA-Client",
             endpointMustExist: true,
-            // keepSessionAlive: true,
+            //keepSessionAlive: true,
             requestedSessionTimeout: 60 * 1000,
             securityMode: MessageSecurityMode.None,
             securityPolicy: SecurityPolicy.None,
@@ -289,7 +291,7 @@ export class OPCUAIf extends BaseIf {
                 maxDelay: 5000,
                 initialDelay: 2500
             },
-
+            keepPendingSessionsOnDisconnect: true,
             defaultSecureTokenLifetime: 20000,
             tokenRenewalInterval: 1000
         });
@@ -424,11 +426,13 @@ export class OPCUAIf extends BaseIf {
             self.types[nodeId] = dataValue.value.dataType
             // publish the value to subscribers:
             let buttons = self.buttons[this.monitoredItemId]
+            let list = []
             for (var i = 0; i < buttons.length; i++) {
                 var buttonInfo = buttons[i]
-                self.LogInfo(`OPCUAIf: monitored item changed: ${buttonInfo.buttonID} ${buttonInfo.attribute} ${nodeId} => ${dataValue.value.value}\n`);
+                list.push(`${buttonInfo.buttonID}:${buttonInfo.attribute}`)
                 self.emit('monitored item changed', buttonInfo.buttonID, buttonInfo.attribute, nodeId, dataValue.value.value)
             }
+            self.LogInfo(`OPCUAIf: monitored item ${nodeId} changed value: ${dataValue.value.value} - push to buttons: ${list.join(', ')}\n`);
         });
 
         return monitoredItem.monitoredItemId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loupedeck-commander",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A system to ease working with LoupeDeck devices using CMD-line, OPC/UA or HTTP-client interfaces",
   "main": "index.mjs",
   "scripts": {
@@ -11,9 +11,10 @@
   },
   "dependencies": {
     "canvas": "^3.2.1",
+    "json5": "^2.2.3",
     "loupedeck": "^7.0.3",
     "mkdirp": "^3.0.1",
-    "node-opcua": "^2.160.0",
+    "node-opcua": "^2.163.1",
     "string-template": "^1.0.0",
     "yaml": "^2.8.2"
   },