loupedeck-commander 1.2.12 → 1.3.1

package/common/button.mjs

@@ -0,0 +1,499 @@
+
+import { loadImage } from 'canvas'
+//import { loadImage } from "https://deno.land/x/canvas/mod.ts";
+import { calcDelta, invertColor } from './utils.mjs'
+import format from 'string-template'
+
+import { shellinterface, httpinterface, opcuainterface, profileEmitter } from '../interfaces/interfaces.mjs'
+
+export const ButtonType = {
+  NONE: '',
+  TOGGLE: 'TOGGLE',
+  PUSH: 'PUSH'
+}
+
+
+
+export class Button {
+  #profile
+  #params
+  //#data
+  #index = 0
+  #enforcedIndex = -1
+  #event
+  #keys
+  #states
+  // Timestamp when button was pressed
+  timeStampPressed
+  // Timestamp when button was released
+  timeStampReleased
+  // Time actually hold the button in ms
+  timeHold
+  #counter = 0
+
+  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) {
+      let params = Object.keys(profile.parameters)
+      for (let i = 0; i < params.length; i++) {
+        const k = params[i]
+        this.#params[k] = profile.parameters[k]
+      }
+    }
+    // enforce key, so it's not oveerwritten somewhere else
+    this.#params.key = key
+
+    // New approach: Use all data from data.params:
+    if (data.params) {
+      this.#params = {
+        ...this.#params,
+        ...data.params
+      }
+
+      // Format the params:
+      this.#params.group = format(this.#params.group, this.getParams({}))
+      this.#params.nodeid = format(this.#params.nodeid, this.getParams({}))
+    }
+
+    if (data.states) {
+      this.#states = data.states
+      this.#keys = Object.keys(this.#states)
+
+      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)
+      }
+      this.#params.state = this.#keys[this.#index]
+    }
+
+    // Set the default value for the button:
+
+    // Legacy approach: Use data directly:
+    if (data.minPressed) {
+      console.warn("Legacy approach: minPressed is deprecated, use params.minPressed instead")
+      this.#params.minPressed = data.minPressed
+    }
+    if (data.text) {
+      console.warn("Legacy approach: text is deprecated, use params.text instead")
+      this.#params.text = data.text
+    }
+    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)
+    }
+    if (data.type) {
+      console.warn("Legacy approach: type is deprecated, use params.type instead")
+      this.#params.type = data.type
+    }
+
+    if (data.default) {
+      console.warn("Legacy approach: default is deprecated, use params.default instead")
+      this.#index = this.#keys.indexOf(data.default)
+    }
+
+    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) {
+    this.#index = index
+  }
+
+  /**
+   * 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 }
+
+    const r = parseInt(elem.color.slice(1, 3), 16)
+    const g = parseInt(elem.color.slice(3, 5), 16)
+    const b = parseInt(elem.color.slice(5, 7), 16)
+
+    try {
+      var idx = parseInt(id, 10);
+
+      const val = {
+        id: idx,
+        color: `rgba(${r}, ${g}, ${b})`
+      }
+      //      console.log(' Set Button Color',id, val.id,elem.color, val.color)
+      device.setButtonColor(val)
+    } catch (error) {
+      console.error(' Error', error)
+    }
+  }
+
+  /**
+   * 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
+
+    // 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.
+
+    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 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, 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) {
+    this.#profile = globalConfig
+    for (let i = 0; i < this.#keys.length; i++) {
+      const key = this.#keys[i]
+      const elem = this.#states[key]
+      const file = elem.image
+      if (file !== undefined && file !== '') {
+        try {
+          this.#states[key].imgBuffer = await loadImage(file)
+        } catch (e) {
+          console.error('No such image', file)
+          return false
+        }
+      }
+    }
+  }
+
+  getCurrentElement() {
+    const state = this.#keys[this.#index]
+    return this.#states[state]
+  }
+
+  /**
+   * 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)
+      this.#index = this.#enforcedIndex
+    }
+
+    // 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
+  }
+
+  /**
+   * 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()
+    this.timeHold = this.timeStampReleased - this.timeStampPressed
+
+    let bExecute = true
+    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)
+      bExecute = false
+    }
+
+    // Update the State according to the correctly pressed state
+    switch (this.#params.type) {
+      case ButtonType.TOGGLE:
+        // do nothing
+        break
+      default:
+        this.#index--
+        break
+    }
+
+    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
+    }
+
+    // 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()
+    return true
+  }
+
+  /**
+   * 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"
+    this.#params.value = calcDelta(this.#params.value, delta, this.#params.min, this.#params.max)
+    return this.runCommand()
+  }
+
+  /**
+   * 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
+    }
+
+    this.#index = 0;
+    this.#enforcedIndex = -1;
+    for (let i = 0; i < this.#keys.length; 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 (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;
+      }
+    }
+  }
+
+  /**
+   * 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) {
+      this.#params.moveRight = true
+      this.#params.moveLeft = false
+    } else if (x < this.#params.x) {
+      this.#params.moveRight = false
+      this.#params.moveLeft = true
+    }
+
+    if (y > this.#params.y) {
+      this.#params.moveDown = true
+      this.#params.moveUp = false
+      delta = -1
+    } else if (y < this.#params.y) {
+      this.#params.moveDown = false
+      this.#params.moveUp = true
+      delta = 1
+    }
+
+    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)
+
+    // console.log(`d: ${this.#params.moveDown}  r: ${this.#params.moveRight} `)
+    return false
+  }
+
+  getParams(elem) {
+    // Call an action - include dynamic parameters
+    // and also all attributes of elem + global config
+    const params = {
+      ...this.#profile.parameters,
+      ...this.#params,
+      ...elem,
+      id: this.id,
+      //key: this.key,
+      event: this.#event,
+      pressed: this.#event == "pressed",
+      released: this.#event == "released",
+      rotated: this.#event == "rotated",
+    }
+    return params
+  }
+
+  /**
+   * 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 (!params) {
+      return
+    }
+    // Filter for Event Type:
+    if (params.filter && params.filter != this.#event) {
+      return
+    }
+
+    if (params.profile !== undefined && params.profile !== '') {
+      profileEmitter.emit("profileChanged", params.profile)
+    }
+
+    if (params.brightness !== undefined) {
+      profileEmitter.emit("brightnessChanged", params.brightness)
+    }
+
+    if (params.vibrate !== undefined) {
+      profileEmitter.emit("vibrate", params.vibrate)
+    }
+
+    let res = ''
+    if ('cmd' in params && shellinterface) {
+        res = await shellinterface.call(params.cmd, params)
+    }
+    if ('http' in params && httpinterface) {
+        res = await httpinterface.call(params.http, params)
+    }
+    if ('opcua' in params && opcuainterface) {
+        res = await opcuainterface.call(params.opcua, params)
+    }
+
+    return res
+  }
+}

package/common/utils.mjs

@@ -1,17 +1,29 @@
 import { readFileSync, writeFileSync } from 'node:fs'
+import YAML from 'yaml'
 
 /**
- * Read a JSON File
+ * 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 readJSONFile (fileName) {
-  let data
+export function readConfigFile (fileName) {
+  let obj = undefined
   try {
-    data = readFileSync(fileName, 'utf8')
-    return JSON.parse(data)
+    //console.log("Reading File:", fileName)
+    let data = readFileSync(fileName, 'utf8')
+    // 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')) {
+      // If the file is a JSON file, parse it
+      obj = JSON.parse(data)
+      // automatically convert all json to yaml
+      writeYAMLFile(fileName.replace(".json",".yaml"), obj)
+    }
   } catch (error) {
-    console.info(`Error reading File: ${fileName}`)
-    return data
+    console.info(`Error reading File: ${fileName}`, error)
   }
+  return obj
 }
 
 /**
@@ -22,6 +34,15 @@ export function writeJSONFile (fileName, jsonObj) {
   writeFileSync(fileName, data)
 }
 
+/**
+ * Write a JSON File
+ */
+export function writeYAMLFile (fileName, jsonObj) {
+  const data = YAML.stringify(jsonObj)
+  writeFileSync(fileName, data)
+}
+
+
 /**
  * Calculate the delta of a value within a range between min and max with overflow
  * @param {*} data 

package/config.yaml

@@ -0,0 +1,6 @@
+application: Example
+profiles:
+  - name: profile-1
+    file: profile-1.yaml
+  - name: profile-2
+    file: profile-2.yaml

package/interfaces/baseif.mjs

@@ -57,7 +57,7 @@ export class BaseIf extends EventEmitter {
 
   LogDebug(...args){
     if (this.options && this.options.verbose){
-      let str = new String(args)
+      let str = args.join(' ')
       process.stdout.write(str.toString())
     }
   }

package/interfaces/interfaces.mjs

@@ -0,0 +1,34 @@
+import * as shellif from '../interfaces/shellif.mjs'
+import * as httpif from '../interfaces/httpif.mjs'
+import * as opcuaif from '../interfaces/opcuaif.mjs'
+import { EventEmitter } from 'node:events'
+
+export var opcuainterface = undefined
+export var httpinterface = undefined
+export var shellinterface = undefined
+export var profileEmitter = undefined
+
+export async function InitializeInterfaces(appConfig){
+  if (opcuainterface === undefined ){
+    opcuainterface = new opcuaif.OPCUAIf()
+  }
+  // the opcua interface needs the profile to register nodes with subscriptions:
+  opcuainterface.init(appConfig.parameters,appConfig)
+  if (httpinterface === undefined) 
+    httpinterface = new httpif.HTTPif()
+  if (shellinterface === undefined)
+    shellinterface = new shellif.SHELLif()
+  if (profileEmitter === undefined)
+    profileEmitter = new EventEmitter()
+}
+
+export async function StopInterfaces(){
+  if (opcuainterface !== undefined )
+    await opcuainterface.stop()
+  if (httpinterface !== undefined) 
+    await httpinterface.stop()
+  if (shellinterface !== undefined)
+    await shellinterface.stop()
+  
+  }
+