loupedeck-commander 1.2.11 → 1.3.0

package/common/ApplicationConfig.mjs

@@ -114,18 +114,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 +177,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,17 +1,21 @@
 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 = {}
   screenUpdate = {}
   stopping = false
+  IntervalID = undefined
 
   constructor (config) {
     console.log(`INIT with config ${config}`)
@@ -84,15 +88,15 @@ export class BaseLoupeDeckHandler {
       console.info(`Closing Device`)
       this.stopping = true
 
+      clearInterval(this.IntervalID)
+
 /*      if (this.device){
         this.device.vibrate(HAPTIC.DESCEND_MED)
         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()
@@ -122,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
    */
@@ -168,7 +191,7 @@ export class BaseLoupeDeckHandler {
     this.screenUpdate["center"] = true
     this.screenUpdate["left"] = true
     this.screenUpdate["right"] = true
-    await this.updateScreens()
+    //await this.updateScreens()
         
     await this.buttons.draw(this.device)
     // Initialize the Interfaces
@@ -193,26 +216,32 @@ 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
     this.screenUpdate["left"] = true
     this.screenUpdate["right"] = true
-    await this.updateScreens()
+    //await this.updateScreens()
+
+    this.IntervalID = setInterval(() => {
+      // runs every 500ms seconds
+      this.screenUpdate["center"] = true
+      self.updateScreens()
+    }, 500);
+    
 
     console.info('✅ Done initializing')
   }
@@ -224,6 +253,7 @@ export class BaseLoupeDeckHandler {
     const keys = Object.keys(this.screenUpdate)
     for (let i = 0; i < keys.length; i++) {
       const screen = keys[i]
+      //ok = await this.screens.center.updateAllButtons()
       await this.screens[screen].draw(this.device)
     }
     this.screenUpdate = {}
@@ -286,7 +316,7 @@ export class BaseLoupeDeckHandler {
       if (this.screens[screen])
         ok = await this.screens[screen].pressed(id)
     }
-    await this.updateScreens()
+    //await this.updateScreens()
     return ok
   }
 
@@ -327,7 +357,7 @@ export class BaseLoupeDeckHandler {
       if (this.screens[elem.screen])
         ok = await this.screens[elem.screen].released(id)
     }
-    await this.updateScreens()
+    //await this.updateScreens()
     return ok
   }
 
@@ -343,7 +373,7 @@ export class BaseLoupeDeckHandler {
     ok = await this.screens.center.changed(buttonID,nodeid,val)
     ok = await this.knobs.changed(buttonID,nodeid,val)
     
-    await this.updateScreens()
+    //await this.updateScreens()
     return ok
   }
 

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
+    }
+  }
+}
+