loupedeck-commander 1.0.2 → 1.2.1

package/README.md

@@ -53,15 +53,26 @@ import { BaseLoupeDeckHandler } from 'loupedeck-commander'
 
 const handler = new BaseLoupeDeckHandler('config.json')
 
-const stopHandler = () => {
-  console.log('Receiving SIGINT => Stopping processes.')
-  handler.stop()
+/**
+ * Stop the handlers when a signal like SIGINT or SIGTERM arrive
+ * @param {*} signal 
+ */
+const stopHandler = async(signal) =>  {
+  console.log(`Receiving ${signal} => Stopping processes.`)
+  await handler.stop()
 }
 
-// Initiating a process
-process.on('SIGINT', stopHandler)
+// Initiating the signal handlers:
+// see https://www.tutorialspoint.com/unix/unix-signals-traps.htm
+process.on('SIGINT', async (signal) => { stopHandler(signal) })
+process.on('SIGTERM', async (signal) => { stopHandler(signal) })
 
+// Start it
 await handler.start()
+
+// Take care of running background processes and stop them accordingly:
+await new Promise((resolve) => process.once("SIGINT", resolve));
+
 ```
 
 Run the script using the following command:
@@ -72,8 +83,26 @@ node index.mjs
 
 If you end up with errors related to canvas module - please install the dependencies as mentioned below, and run `npm install -s` again
 
+## Thanks
+
+Big thanks go out to [foxxyz](https://github.com/foxxyz/loupedeck) and his team maintaining a great javascript loopdeck module 
+
 ## Hints
 
+### Cannot connect to Loupedeck device
+
+You may need to add your user to the `dialout` group to allow access to the LoupeDeck device, you could do su using the `usermod` as shown below
+
+```bash
+# ls -la /dev/ttyACM0 
+crw-rw---- 1 root dialout 166, 0 Nov 30 12:59 /dev/ttyACM0
+
+# add the current user to the dialout group:
+# sudo usermod -a -G dialout $USER
+```
+
+After modifying users group you need to logout and login again to activate this change
+
 ### CANVAS Module - additional effort needed
 
 The library is using [canvas](https://www.npmjs.com/package/canvas) to load images and render graphical content on the LoupeDeck devices.

package/common/ApplicationConfig.mjs

@@ -24,6 +24,7 @@ class Profile {
   touch = {}
   knobs = {}
   buttons = {}
+  parameters = {}
   #file = ''
   #loaded = false
   #error = false
@@ -48,6 +49,8 @@ class Profile {
       this.touch = new TouchConfig(config.touch)
       // Load the Configurations for Button-Areas
       this.buttons = config.buttons
+      // Load Parameters
+      this.parameters = config.parameters
     }
   }
 

package/common/BaseLoupeDeckHandler.mjs

@@ -1,7 +1,6 @@
-import pkg from 'loupedeck'
+import {discover, HAPTIC,LoupedeckDevice } from 'loupedeck'
 import { ApplicationConfig } from './ApplicationConfig.mjs'
-import { ButtonField } from './touchbuttons.mjs'
-const { discover, HAPTIC } = pkg
+import { ButtonField, StopInterfaces, InitializeInterfaces,opcuainterface} from './touchbuttons.mjs'
 
 export class BaseLoupeDeckHandler {
   device = undefined
@@ -11,25 +10,43 @@ export class BaseLoupeDeckHandler {
   screens = {}
   buttons = {}
   screenUpdate = {}
-
-  touchButtons = undefined
+  stopping = false
 
   constructor (config) {
     console.log(`INIT with config ${config}`)
     this.loadConfig(config)
   }
 
+  /**
+   * event handler - start
+   */
   async start () {
     console.info('Start')
-    while (!this.device) {
+    while (!this.device && !this.stopping) {
       try {
+        var list = await LoupedeckDevice.list()
+        if (list.length>0){
+          var element = list[0]
+          console.log("Connecting to device")
+          console.log("Path:         ", element.path)
+          console.log("vendorId:     ", element.vendorId, element.productId)
+          console.log("serialNumber: ", element.serialNumber)
+        }
+
         this.device = await discover()
+        
+        
+        
       } catch (e) {
         console.error(`${e}. Reattempting in 3 seconds...`)
-        await new Promise(res => setTimeout(res, 3000))
+        await new Promise(resolve => setTimeout(resolve, 3000))
+      }
+
+      if (this.stopping){
+        return
       }
     }
-    console.info(`✅ Connected to ${this.device.type}`)
+    console.info(`✅ Discovered Device ${this.device.type}`)
 
     const self = this
 
@@ -40,51 +57,89 @@ export class BaseLoupeDeckHandler {
     this.device.on('touchstart', (event) => { self.onTouchStart(event) })
     this.device.on('touchmove', (event) => { self.onTouchMove(event) })
     this.device.on('touchend', (event) => { self.onTouchEnd(event) })
+    this.device.on('disconnect', (event) => { self.disconnectDevice(event) })
+
+    console.info(`✅ Registered callbacks`)
+  }
 
-    // return await this.device.connect()
+  /**
+   * event handler - loupedeck device disconnected
+   */
+  async disconnectDevice (event) {
+    console.info("Device Disconnected")
+    this.device=undefined
   }
 
-  stop () {
+  /**
+   * stop handler - close the dipslay-connection and also stop all interface handlers
+   */
+  async stop () {
     console.info('Stopping Handler')
-    this.device.close()
+
+    try {
+      console.info(`Closing Device`)
+      this.stopping = true
+      if (this.device){
+        this.device.vibrate(HAPTIC.DESCEND_MED)
+        await new Promise(resolve => setTimeout(resolve, 250))
+      }
+      if (this.device){
+        this.device.setBrightness(0)
+        await new Promise(resolve => setTimeout(resolve, 250))
+      }
+      if (this.device){
+        this.device.reconnectInterval = 0
+        await this.device.close()
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        console.info(`Device Closed`)      
+      }
+
+      console.info(`Stopping interfaces`)
+      await StopInterfaces()
+      await new Promise(resolve => setTimeout(resolve, 500))
+    } catch (e) {}
+
+    process.exit()
+
   }
 
+  /**
+   * load Application config file from JSON
+   * @param filename
+   */
   loadConfig (fileName) {
     console.info(`Loading Config File ${fileName}`)
     this.appConfig = new ApplicationConfig()
     this.appConfig.loadFromFile(fileName)
   }
 
+  /**
+   * activate the profile with the givven ID
+   */
   async activateProfile (id) {
     // todo Profile-change implementation
+    var oldProfile = this.currentProfile
     if (this.appConfig.profiles.length >= id) {
       this.currentProfile = id
+    }else{
+      return
     }
-    await this.buttons.draw(this.device)
-  }
 
-  getCurrentProfile () {
-    return this.appConfig.profiles[this.currentProfile]
-  }
-
-  // Events:
-  async onConnected (address) {
-    console.info('Connected: ', address)
     const dLeft = this.device.displays.left
     const dRight = this.device.displays.right
     const dCenter = this.device.displays.center
     const dKnob = this.device.displays.knob
-
+    
     const profile = this.getCurrentProfile()
-    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)
+    this.screens.center = new ButtonField('center', this.device.rows, this.device.columns, dCenter.width, dCenter.height, profile.touch.center,profile)
+    this.screens.left = new ButtonField('left', 1, 1, dLeft.width, dLeft.height, profile.touch.left,profile)
+    this.screens.right = new ButtonField('right', 1, 1, dRight.width, dRight.height, profile.touch.right,profile)
     // knob Display is only available in the CT-version - not with live:
     if (dKnob) {
-      this.screens.knob = new ButtonField('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,profile)
     }
 
-    this.buttons = new ButtonField('buttons', 1, 1, 0, 0, profile.buttons)
+    this.buttons = new ButtonField('buttons', 1, 1, 0, 0, profile.buttons,profile)
 
     await this.screens.center.load()
     await this.screens.right.load()
@@ -98,15 +153,47 @@ export class BaseLoupeDeckHandler {
     if (dKnob) {
       await this.screens.knob.draw(this.device)
     }
-    await this.activateProfile(0)
+
+    this.buttons.setState(this.currentProfile+1,1)
+    this.buttons.setState(oldProfile+1,1)
+        
     await this.buttons.draw(this.device)
+  }
+
+  /**
+   * get the dictionary iwth the current profile settings
+   */
+  getCurrentProfile () {
+    return this.appConfig.profiles[this.currentProfile]
+  }
+
+  /**
+   * Triggered, when LoupeDeck Device is connected
+   * - Initialize the profile from config-file and 
+   * - start the interface handlers accordingly
+   */
+  async onConnected (address) {
+    console.info(`✅ Connected to ${this.device.type}, ${address}`)
+    
+    await this.activateProfile(0)
+
+    var profile = this.getCurrentProfile()
+    await InitializeInterfaces(profile,this.buttons.setState)
+
+    const self = this
+
+    // Register callback on monitored item change:
+    opcuainterface.myEmitter.on("monitored item changed",(buttonID,nodeid,val) => { self.buttonStateChanged(buttonID,nodeid,val) })
 
     this.device.setBrightness(1)
     this.device.vibrate(HAPTIC.ASCEND_MED)
 
-    console.info('Done initializing')
+    console.info('✅ Done initializing')
   }
 
+  /**
+   * Fore an update of all screens
+   */
   async updateScreens () {
     const keys = Object.keys(this.screenUpdate)
     for (let i = 0; i < keys.length; i++) {
@@ -116,6 +203,9 @@ export class BaseLoupeDeckHandler {
     this.screenUpdate = {}
   }
 
+  /**
+   * Button Down Handler - triggered through Event Button Down - connected to LoupeDeck Event
+   */
   async onButtonDown (event) {
     let ok = false
     const id = event.id
@@ -124,20 +214,33 @@ export class BaseLoupeDeckHandler {
     return ok
   }
 
+  /**
+   * Button Up Handler - triggered through Event Button Up - connected to LoupeDeck Event
+   */
   async onButtonUp (event) {
     let ok = false
     const id = event.id
     ok = await this.buttons.released(id)
     await this.buttons.draw(this.device)
+
+    /*if (this.currentProfile != id){
+      this.activateProfile(id-1)
+    }*/
     return ok
   }
 
+  /**
+   * Button Rotate Handler - triggered through Event Rotate available with knob-Buttons - connected to LoupeDeck Event
+   */
   async onRotate (event) {
     const id = event.id
     const delta = event.delta
     return await this.buttons.rotated(id, delta)
   }
 
+  /**
+   * TouchStart Handler - triggered through Event touch available on all touchbuttons on the loupedeck display - connected to LoupeDeck Event
+   */
   async onTouchStart (event) {
     let ok = false
     const changedTouches = event.changedTouches
@@ -154,6 +257,9 @@ export class BaseLoupeDeckHandler {
     return ok
   }
 
+  /**
+   * TouchMove Handler - triggered through Event touch available on all touchbuttons on the loupedeck display - connected to LoupeDeck Event
+   */
   async onTouchMove (event) {
     let ok = false
     const changedTouches = event.changedTouches
@@ -170,6 +276,9 @@ export class BaseLoupeDeckHandler {
     return ok
   }
 
+  /**
+   * TouchEnd Handler - triggered through Event touch available on all touchbuttons on the loupedeck display - connected to LoupeDeck Event
+   */
   async onTouchEnd (event) {
     let ok = false
     const changedTouches = event.changedTouches
@@ -186,4 +295,19 @@ export class BaseLoupeDeckHandler {
     await this.updateScreens()
     return ok
   }
+
+  /**
+   * Handler for StateChanged through OPC/UA Interface - only connected with touch-buttons on center field (yet)
+   */
+  async buttonStateChanged(buttonID,nodeid,val) {
+    let ok = false
+    this.screenUpdate["center"] = true
+
+    ok = await this.screens.center.changed(buttonID,nodeid,val)
+    
+    await this.updateScreens()
+    return ok
+  }
+
+  
 }

package/common/touchbuttons.mjs

@@ -1,8 +1,38 @@
 import { loadImage } from 'canvas'
-import { sh } from './cmd-executer.mjs'
+//import { loadImage } from "https://deno.land/x/canvas/mod.ts";
+
+import * as shellif from '../interfaces/shellif.mjs'
+import * as httpif from '../interfaces/httpif.mjs'
+import * as opcuaif from '../interfaces/opcuaif.mjs'
 import format from 'string-template'
 import { calcDelta } from './utils.mjs'
 
+export var opcuainterface = undefined
+var httpinterface = undefined
+var shellinterface = undefined
+
+export async function InitializeInterfaces(appConfig,callbackFunction){
+  if (opcuainterface === undefined ){
+    opcuainterface = new opcuaif.OPCUAIf()
+    opcuainterface.init(appConfig.parameters,appConfig,callbackFunction)
+  }
+  if (httpinterface === undefined) 
+    httpinterface = new httpif.HTTPif()
+  if (shellinterface === undefined)
+    shellinterface = new shellif.SHELLif()
+
+}
+
+export async function StopInterfaces(){
+  if (opcuainterface !== undefined )
+    await opcuainterface.stop()
+  if (httpinterface !== undefined) 
+    await httpinterface.stop()
+  if (shellinterface !== undefined)
+    await shellinterface.stop()
+  
+  }
+
 export const ButtonIndex = {
   BUTN_0: 0,
   BUTN_1: 1,
@@ -31,7 +61,9 @@ export class ButtonField {
   #keys = []
   #type
   #name
-  constructor (name, rows, columns, width, height, data) {
+  #config
+  
+  constructor (name, rows, columns, width, height, data, config) {
     console.info(`ButtonField ${name.padEnd(10, ' ')} Buttons: ${rows} x ${columns} , Pixels  ${width} x ${height}`)
     this.#name = name
     this.width = width
@@ -45,13 +77,18 @@ 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])
+      const tb = new Button(`${this.#type}-${key}`, width / columns, height / rows, data[key],key,config.parameters)
       this.#buttons[key] = tb
     }
 
     this.#keys = keys
+    this.#config = config
   }
 
+  //setProfileConfig (config) {
+//    this.#config = config
+//  }
+
   async draw (device) {
     if (!this.#screen) {
       // physical buttons:
@@ -75,6 +112,10 @@ export class ButtonField {
     }
   }
 
+  setState (id, val) {
+    this.#buttons[id].setState(val)
+  }
+
   setIntState (id, val) {
     this.#buttons[id].setIntState(val)
   }
@@ -83,10 +124,10 @@ export class ButtonField {
     for (let i = 0; i < this.#keys.length; i++) {
       const key = this.#keys[i]
       if (isNaN(key)) {
-        await this.#buttons[key].load()
+        await this.#buttons[key].load(this.#config)
       } else {
         const iVal = parseInt(key, 10)
-        await this.#buttons[iVal].load()
+        await this.#buttons[iVal].load(this.#config)
       }
     }
   }
@@ -119,6 +160,13 @@ export class ButtonField {
     return result
   }
 
+  async changed(buttonID,nodeid,val){
+    for (let i = 0; i < this.#keys.length; i++) {
+      let bID = this.#keys[i]
+      const result = await this.#buttons[bID].changed(i,nodeid,val)
+    } 
+  }
+
   async rotated (id, delta) {
     this.checkAndCreateButton(id)
     const result = await this.#buttons[id].rotated(delta)
@@ -142,6 +190,7 @@ export class ButtonField {
 }
 
 export class Button {
+  #config
   width = 0
   height = 0
 
@@ -151,8 +200,10 @@ export class Button {
   #max = 100
   #value = 50
   #name = undefined
+  #nodeid = ""
 
   #index = 0
+  #event
   #keys
   #states
 
@@ -176,9 +227,11 @@ export class Button {
   timeHold
   // Minimum ammount of time in ms to press a button:
   minPressed = 25
+  key = -1
 
-  constructor (id, width, height, data) {
+  constructor (id, width, height, data,key,params) {
     this.id = id
+    this.key = key
     this.width = width
     this.height = height
     this.#index = 0
@@ -204,6 +257,10 @@ export class Button {
       this.#states = {}
       this.#keys = []
     }
+    if (data.nodeid){
+      this.#nodeid = format(data.nodeid, params)
+    }
+    
   }
 
   setState (index = 0) {
@@ -219,13 +276,16 @@ export class Button {
     const b = parseInt(elem.color.slice(5, 7), 16)
 
     try {
+      var idx = parseInt(id, 10);
+
       const val = {
-        id,
+        id:idx,
         color: `rgba(${r}, ${g}, ${b})`
       }
+      //console.log(' Set Button Color',val.id, val.color)
       device.setButtonColor(val)
     } catch (error) {
-      //      console.log(' Error', error)
+      console.error(' Error', error)
     }
   }
 
@@ -250,7 +310,8 @@ export class Button {
     //    ctx.fillText(this.text, x + 10, y - 10)
   }
 
-  async load () {
+  async load (globalConfig) {
+    this.#config = globalConfig
     for (let i = 0; i < this.#keys.length; i++) {
       const key = this.#keys[i]
       const elem = this.#states[key]
@@ -263,6 +324,10 @@ export class Button {
           return false
         }
       }
+      //const uastate = elem.state
+      //if (uastate){
+      //  await opcuainterface.Subscribe(uastate)
+      //}
     }
   }
 
@@ -283,7 +348,7 @@ export class Button {
     this.timeStampPressed = Date.now()
 
     this.#index++
-    this.#index %= this.#keys.length
+    this.updateState(this.#index,"pressed")
     return true
   }
 
@@ -311,17 +376,65 @@ export class Button {
 
         break
     }
+
+    this.updateState(this.#index,"released")
+    
+    return true // this.runCommand()
+  }
+
+  updateState(index,eventType){
+    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.runCommand()
+    //console.log("TODO: expect newState", newState)
     return true // this.runCommand()
   }
 
   async rotated (delta) {
     if (!this.getCurrentElement()) { return false }
 
+    this.#event = "rotated"
     this.#value = calcDelta(this.#value, delta, this.#max)
     return this.runCommand()
   }
 
+  async changed(buttonID,nodeid,val){
+    // Only handle updates within the same group identified by nodeid
+    if (nodeid !== this.#nodeid){
+        return
+    }
+
+    this.#index = 0;
+    for (let i = 0; i < this.#keys.length; i++) {
+      let key = this.#keys[i]
+      // check if the state-name is same as the value we get from outside:
+      if (val == key){
+        this.#index = i;
+        break;
+      }
+
+      // check if the nodeid is the same and the value is one of the states
+        let state = this.#states[key]
+        if (!state.value)
+          continue
+
+        const params = {
+          id: buttonID,
+          key: buttonID,
+          ...state
+        }
+        let val1 = format(state.value,params)
+        if (val1 === val){
+          this.#index = i;
+          break;
+        }
+        break;
+    }
+  }
+
   async touchmove (x, y) {
     // if (!this.getCurrentElement()) { return false }
 
@@ -347,27 +460,54 @@ export class Button {
     return false
   }
 
-  runCommand () {
+  async runCommand () {
     const elem = this.getCurrentElement()
-    if (!elem || !elem.cmd) {
+    // Only continue, if we have an element, that contains some kind of command:
+    if (!elem || (!elem.cmd && !elem.http && !elem.opcua)) {
       return
     }
-    // Call an action
+    // Filter for Event Type:
+    if (elem.filter && elem.filter != this.#event){
+      return
+    }
+    // Call an action - include dynamic parameters
+    // and also all attributes of elem + global config
     const params = {
+      text: this.getCurrentText(),
+      ...this.#config.parameters,
+      ...elem,
       id: this.id,
+      key: this.key,
+      event: this.#event,
       state: this.#keys[this.#index],
       min: this.#min,
       max: this.#max,
-      value: this.#value,
-      text: this.getCurrentText()
+      value: this.#value
     }
-    /* const keys = Object.keys(this.#data.config)
-    keys.forEach(key => {
-      params[key] = this.#data.config[key]
-    }) */
 
-    const cmdFormatted = format(elem.cmd, params)
+    let res = ''
+    if ('cmd' in elem) {
+      if (shellinterface){
+        res = await shellinterface.call(elem.cmd, params)
+      }else{
+        console.warn("shellinterface not started")
+      }
+    }
+    if ('http' in elem) {
+      if (httpinterface){
+        res = await httpinterface.call(elem.http, params)
+      }else{
+        console.warn("httpinterface not started")
+      }
+    }
+    if ('opcua' in elem) {
+      if (opcuainterface){
+        res = await opcuainterface.call(elem.opcua, params)
+      }else{
+        console.warn("opcuainterface not started")
+      }
+    }
 
-    return sh(cmdFormatted)
+    return res
   }
 }

package/eslint.config.mjs

@@ -0,0 +1,9 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];