loupedeck-commander 1.4.1 → 1.4.2

package/common/button.mjs

@@ -1,520 +1,533 @@
-
-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
-  #enforcedBlink = false
-  #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.#enforcedBlink = false
-
-    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
-  }
-
-  /**
-   * 
-   * @returns Group attribute of the current button
-   */
-  getGroup() {
-    return this.#params.group
-  }
-
-  /**
-   * 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 === true) || this.#enforcedBlink)  && 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 buttonStateChanged(buttonID, attribute, nodeid, val) {
-
-    //
-    if ((attribute == "nodeid" && nodeid == this.#params.nodeid)) {
-      this.#index = 0;
-      this.#enforcedIndex = 0;
-      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("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;
-      //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;      
-    }
-  }
-
-  /**
-   * 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 && params.brightness !== '') {
-      // If brightness is set, we emit a brightnessChanged event with the given params
-      // This is used to change the brightness of the device
-      profileEmitter.emit("brightnessChanged", params.brightness)
-    }
-
-    if (params.vibrate !== undefined && params.vibrate !== '' && params.vibrate !== false) {
-      // If vibrate is set, we emit a vibrate event with the given params
-      // This is used to trigger a vibration on the device
-      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
-  }
-}
+
+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
+  #enforcedBlink = false
+  #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.#enforcedBlink = false
+
+    // console.info(`  Button ${id.padEnd(10, ' ')} Size: ${width} x ${height}`)
+
+    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
+  }
+
+  /**
+   * 
+   * @returns Group attribute of the current button
+   */
+  getGroup() {
+    return this.#params.group
+  }
+
+  /**
+   * 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) {
+    let params = this.getParams(this.getCurrentElement())
+    let x = 0
+    let y = 0 
+
+    // Adjust for non-square buttons:
+    if (params.width > params.height) {
+      x += (2+column) * (params.width - params.height) / 2
+      params.width = params.height
+    }
+    
+    // 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   
+
+    
+    // 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 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:
+      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 += 12;
+          break;
+        case "right":
+          tx += this.#params.width - 12;
+          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 - 12;
+          ctx.textBaseline = "bottom";
+          break;
+      }
+      ctx.fillText(dynamicText, tx, ty)
+    }
+
+    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 buttonStateChanged(buttonID, attribute, nodeid, val) {
+
+    //
+    if ((attribute == "nodeid" && nodeid == this.#params.nodeid)) {
+      this.#index = 0;
+      this.#enforcedIndex = 0;
+      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("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;
+      //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;      
+    }
+  }
+
+  /**
+   * 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 && params.brightness !== '') {
+      // If brightness is set, we emit a brightnessChanged event with the given params
+      // This is used to change the brightness of the device
+      profileEmitter.emit("brightnessChanged", params.brightness)
+    }
+
+    if (params.vibrate !== undefined && params.vibrate !== '' && params.vibrate !== false) {
+      // If vibrate is set, we emit a vibrate event with the given params
+      // This is used to trigger a vibration on the device
+      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
+  }
+}