loupedeck-commander 1.0.1 → 1.2.0

package/README.md

@@ -5,6 +5,7 @@
 The loupedeck-commander is helping you using your Loupedeck device more easily, and connect it with custom commands you define with script files.
 
 Features:
+
 - Reference image files for every state of your button in the touch-display fields
 - Connect commands to your state transitions
 - Tested with following LoupeDeck devices:
@@ -12,14 +13,17 @@ Features:
   - [LoupeDeck CT](https://loupedeck.com/products/loupedeck-ct/)
 
 Runs on:
+
 - Linux (Tested with Ubuntu 22.04 and Debian 11/12 on x64 & arm32/arm64)
 - Windows (Tested with Windows 10/11 on x64)
 
-Small footprint 
+Small footprint
+
 - Raspberry PI Zero is suitable to run this
 
 Please take care about the following:
- - LoupeDeck devices after `version 0.2.x` use a serial interface instead of WebSocket. 
+
+- LoupeDeck devices after `version 0.2.x` use a serial interface instead of WebSocket.
    When using this library please upgrade your firmware using the [LoupeDeck Software](https://loupedeck.com/downloads/)
    Tested with Firmware version [`version 0.2.5`](https://support.loupedeck.com/f-a-q-support#firmware-connectivity-issues)
 
@@ -27,7 +31,7 @@ Please take care about the following:
 
 Do the following steps:
 
-```
+```bash
 # init your new node package
 npm init
 
@@ -38,10 +42,11 @@ 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.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)
 
 Create a `index.mjs` file to open up your loupedeck connection:
+
 ```javascript
 # save as index.mjs
 import { BaseLoupeDeckHandler } from 'loupedeck-commander'
@@ -67,8 +72,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.
@@ -85,9 +108,9 @@ sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev l
 
 The buttons images shown on the different buttons should be prepared with specific resolutions:
 
- - Main/Center Touch-Area:        90px x 90px per Button
- - Left/Right Touch-Area:         90px x 270px per Button
- - LoupeDeck CT Knob Touch-Area:  240px x 240px Button 
+- Main/Center Touch-Area:        90px x 90px per Button
+- Left/Right Touch-Area:         90px x 270px per Button
+- LoupeDeck CT Knob Touch-Area:  240px x 240px Button
 
 if you already have suitable icons with the right aspect ratio, you could resize them with imagemagick/mogrify:
 

package/VERSION.md

@@ -0,0 +1,33 @@
+# Versions
+
+## 1.0.2
+
+1. Updated button rendering strategy:
+   - Render Background Color - per Button State
+   - Render Image on Top (if available), works well with transparent images
+
+2. Updated configuration strategy:
+   - Keep all state related attributes per button-state also in config:
+     example:
+
+     ```json
+     "states": {
+        "off": {
+            "color": "#aaaaaa",
+            "image": "icons/bulb.png",
+            "cmd": "echo \"{id} {state}\""
+        },
+        "on": {
+            "color": "#11ff11",
+            "image": "icons/bulb.png",
+            "cmd": "echo \"{id} {state}\""
+        }
+     ```
+
+## 1.0.1 
+
+bugfixes and documentation
+
+## 1.0.0
+
+first public release

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 { TouchButtonField, PhysicalButtonField } from './touchbuttons.mjs'
-const { discover, HAPTIC } = pkg
+import { ButtonField, StopInterfaces, InitializeInterfaces,opcuainterface} from './touchbuttons.mjs'
 
 export class BaseLoupeDeckHandler {
   device = undefined
@@ -11,8 +10,9 @@ export class BaseLoupeDeckHandler {
   screens = {}
   buttons = {}
   screenUpdate = {}
+  stopping = false
 
-  touchButtons = undefined
+  //touchButtons = undefined
 
   constructor (config) {
     console.log(`INIT with config ${config}`)
@@ -21,15 +21,31 @@ export class BaseLoupeDeckHandler {
 
   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,13 +56,49 @@ 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) })
 
-    // return await this.device.connect()
+    console.info(`✅ Registered callbacks`)
   }
 
-  stop () {
+  async disconnectDevice (event) {
+    console.info("Device Disconnected",event)
+    this.device=undefined
+  }
+
+  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, 500))
+      }
+      if (this.device){
+        this.device.setBrightness(0)
+        await new Promise(resolve => setTimeout(resolve, 500))
+      }
+      if (this.device){
+        this.device.reconnectInterval = 0
+        await this.device.close()
+        await new Promise(resolve => setTimeout(resolve, 3000))
+        console.error(`Device Closed`)      
+      }
+
+      console.info(`Stopping interfaces`)
+      
+      await StopInterfaces()
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      
+      this.device = null
+    } catch (e) {
+      console.error(`${e}. Catched error in 3 seconds...`)
+    }
+
+    process.exit()
+
   }
 
   loadConfig (fileName) {
@@ -57,34 +109,28 @@ export class BaseLoupeDeckHandler {
 
   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 TouchButtonField('center', this.device.rows, this.device.columns, dCenter.width, dCenter.height, profile.touch.center)
-    this.screens.left = new TouchButtonField('left', 1, 1, dLeft.width, dLeft.height, profile.touch.left)
-    this.screens.right = new TouchButtonField('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 TouchButtonField('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 PhysicalButtonField('bottom', 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,8 +144,29 @@ 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)
+  }
+
+  getCurrentProfile () {
+    return this.appConfig.profiles[this.currentProfile]
+  }
+
+  // Events:
+  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
+
+    opcuainterface.myEmitter.on("monitored item changed",(buttonID,nodeid,val) => { self.buttonStateChanged(buttonID,nodeid,val) })
 
     this.device.setBrightness(1)
     this.device.vibrate(HAPTIC.ASCEND_MED)
@@ -129,6 +196,10 @@ export class BaseLoupeDeckHandler {
     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
   }
 
@@ -155,7 +226,7 @@ export class BaseLoupeDeckHandler {
   }
 
   async onTouchMove (event) {
-    const ok = false
+    let ok = false
     const changedTouches = event.changedTouches
     for (let i = 0; i < changedTouches.length; i++) {
       const x = changedTouches[i].x
@@ -165,7 +236,7 @@ export class BaseLoupeDeckHandler {
       if (id === undefined) {
         id = 0 // for left/right
       }
-      console.info('TouchMove : ', screen, id, x, y)
+      ok = await this.screens[screen].touchmove(id, x, y)
     }
     return ok
   }
@@ -186,4 +257,16 @@ export class BaseLoupeDeckHandler {
     await this.updateScreens()
     return ok
   }
+
+  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
+  }
+
+  
 }