loupedeck-commander 1.2.0 → 1.2.2

package/common/touchbuttons.mjs

@@ -1,503 +1,521 @@
-import { loadImage } from 'canvas'
-
-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,
-  BUTN_2: 2,
-  BUTN_3: 3,
-  BUTN_4: 3,
-  BUTN_5: 5,
-  BUTN_6: 6,
-  BUTN_7: 7,
-  home: 'home'
-}
-
-const ButtonType = {
-  NONE: '',
-  TOGGLE: 'TOGGLE',
-  PUSH: 'PUSH'
-}
-
-export class ButtonField {
-  #buttons = {}
-  #screen
-  width = 0
-  height = 0
-  #rows = 0
-  #columns = 0
-  #keys = []
-  #type
-  #name
-  #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
-    this.height = height
-    this.#rows = rows
-    this.#columns = columns
-    this.#screen = this.width > 0 && this.height > 0
-    this.#type = 'button'
-    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,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:
-      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.#config)
-      } else {
-        const iVal = parseInt(key, 10)
-        await this.#buttons[iVal].load(this.#config)
-      }
-    }
-  }
-
-  async pressed (id) {
-    this.checkAndCreateButton(id)
-    const result = await this.#buttons[id].pressed()
-    if (!result) {
-      console.info(`pressed ${this.#type} ${id}`)
-    }
-    return result
-  }
-
-  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
-  }
-
-  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)
-    if (!result) { console.info(`rotated ${this.#type} ${id} ${delta}`) }
-    return result
-  }
-
-  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
-    }
-  }
-}
-
-export class Button {
-  #config
-  width = 0
-  height = 0
-
-  #type = ButtonType.TOGGLE
-
-  #min = 0
-  #max = 100
-  #value = 50
-  #name = undefined
-  #nodeid = ""
-
-  #index = 0
-  #keys
-  #states
-
-  group = ''
-
-  text = ''
-  font = '16px Arial'
-
-  #x
-  #y
-  #moveLeft
-  #moveRight
-  #moveUp
-  #moveDown
-
-  // Timestamp when button was pressed
-  timeStampPressed
-  // Timestamp when button was released
-  timeStampReleased
-  // Time actually hold the button in ms
-  timeHold
-  // Minimum ammount of time in ms to press a button:
-  minPressed = 25
-  key = -1
-
-  constructor (id, width, height, data,key,params) {
-    this.id = id
-    this.key = key
-    this.width = width
-    this.height = height
-    this.#index = 0
-
-    if (data && data.states) {
-      this.group = data.group
-
-      this.#states = data.states
-      this.#keys = Object.keys(this.#states)
-      if (data.type) {
-        this.#type = data.type.toUpperCase()
-      }
-
-      if (data.minPressed) {
-        this.minPressed = data.minPressed
-      }
-
-      if (data.text) {
-        this.text = data.text
-      }
-    }
-    if (this.#states === undefined) {
-      this.#states = {}
-      this.#keys = []
-    }
-    if (data.nodeid){
-      this.#nodeid = format(data.nodeid, params)
-    }
-    
-  }
-
-  setState (index = 0) {
-    this.#index = index
-  }
-
-  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',val.id, val.color)
-      device.setButtonColor(val)
-    } catch (error) {
-      console.error(' Error', error)
-    }
-  }
-
-  async draw (row, column, ctx) {
-    const x = column * this.width
-    const y = row * this.height
-
-    const elem = this.getCurrentElement()
-
-    if (elem) {
-      if (elem.color) {
-        ctx.fillStyle = elem.color
-        ctx.fillRect(x, y, this.width, this.height)
-      }
-      if (elem.imgBuffer) {
-        ctx.drawImage(elem.imgBuffer, x, y, this.width, this.height)
-      }
-    }
-
-    //    ctx.fillStyle = '#000000'
-    //    ctx.font = this.font
-    //    ctx.fillText(this.text, x + 10, y - 10)
-  }
-
-  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]
-      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
-        }
-      }
-      //const uastate = elem.state
-      //if (uastate){
-      //  await opcuainterface.Subscribe(uastate)
-      //}
-    }
-  }
-
-  getCurrentElement () {
-    const key = this.#keys[this.#index]
-    return this.#states[key]
-  }
-
-  getCurrentText () {
-    return this.text
-  }
-
-  setIntState (val) {
-    this.#index = val
-  }
-
-  pressed () {
-    this.timeStampPressed = Date.now()
-
-    this.#index++
-    this.updateState(this.#index)
-    return true
-  }
-
-  released () {
-    if (!this.getCurrentElement()) { return false }
-    this.timeStampReleased = Date.now()
-    this.timeHold = this.timeStampReleased - this.timeStampPressed
-
-    if (this.timeHold < this.minPressed) {
-      // Update the State according to the not correct pressed state
-      console.log('Did not hold minimum time of ', this.minPressed, 'only', this.timeHold)
-      this.#index--
-      if (this.#index < 0) { this.#index = this.#keys.length - 1 }
-      return false
-    }
-
-    // Update the State according to the correctly pressed state
-    switch (this.#type) {
-      case ButtonType.TOGGLE:
-        // do nothing
-        break
-      default:
-        this.#index--
-        if (this.#index < 0) { this.#index = this.#keys.length - 1 }
-
-        break
-    }
-
-    this.updateState(this.#index)
-    
-    return true // this.runCommand()
-  }
-
-  updateState(index){
-    this.#index = index
-    // 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.#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 }
-
-    if (x > this.#x) {
-      this.#moveRight = true
-      this.#moveLeft = false
-    } else if (x < this.#x) {
-      this.#moveRight = false
-      this.#moveLeft = true
-    }
-
-    if (y > this.#y) {
-      this.#moveDown = true
-      this.#moveUp = false
-    } else if (y < this.#y) {
-      this.#moveDown = false
-      this.#moveUp = true
-    }
-
-    this.#x = x
-    this.#y = y
-    // console.log(`d: ${this.#moveDown}  r: ${this.#moveRight} `)
-    return false
-  }
-
-  async runCommand () {
-    const elem = this.getCurrentElement()
-    if (!elem || (!elem.cmd && !elem.http && !elem.opcua)) {
-      return
-    }
-    // Call an action - include dynamic parameters
-    // and also all attributes of elem + global config
-    const params = {
-      id: this.id,
-      key: this.key,
-      state: this.#keys[this.#index],
-      min: this.#min,
-      max: this.#max,
-      value: this.#value,
-      text: this.getCurrentText(),
-      ...this.#config.parameters,
-      ...elem
-    }
-
-    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 res
-  }
-}
+import { loadImage } from 'canvas'
+//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,
+  BUTN_2: 2,
+  BUTN_3: 3,
+  BUTN_4: 3,
+  BUTN_5: 5,
+  BUTN_6: 6,
+  BUTN_7: 7,
+  home: 'home'
+}
+
+const ButtonType = {
+  NONE: '',
+  TOGGLE: 'TOGGLE',
+  PUSH: 'PUSH'
+}
+
+export class ButtonField {
+  #buttons = {}
+  #screen
+  width = 0
+  height = 0
+  #rows = 0
+  #columns = 0
+  #keys = []
+  #type
+  #name
+  #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
+    this.height = height
+    this.#rows = rows
+    this.#columns = columns
+    this.#screen = this.width > 0 && this.height > 0
+    this.#type = 'button'
+    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,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:
+      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.#config)
+      } else {
+        const iVal = parseInt(key, 10)
+        await this.#buttons[iVal].load(this.#config)
+      }
+    }
+  }
+
+  async pressed (id) {
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].pressed()
+    if (!result) {
+      console.info(`pressed ${this.#type} ${id}`)
+    }
+    return result
+  }
+
+  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
+  }
+
+  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)
+    if (!result) { console.info(`rotated ${this.#type} ${id} ${delta}`) }
+    return result
+  }
+
+  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
+    }
+  }
+}
+
+export class Button {
+  #config
+  width = 0
+  height = 0
+
+  #type = ButtonType.TOGGLE
+
+  #min = 0
+  #max = 100
+  #value = 50
+  #name = undefined
+  #nodeid = ""
+
+  #index = 0
+  #event
+  #keys
+  #states
+
+  group = ''
+
+  text = ''
+  font = '16px Arial'
+
+  #x
+  #y
+  #moveLeft
+  #moveRight
+  #moveUp
+  #moveDown
+
+  // Timestamp when button was pressed
+  timeStampPressed
+  // Timestamp when button was released
+  timeStampReleased
+  // Time actually hold the button in ms
+  timeHold
+  // Minimum ammount of time in ms to press a button:
+  minPressed = 25
+  key = -1
+
+  constructor (id, width, height, data,key,params) {
+    this.id = id
+    this.key = key
+    this.width = width
+    this.height = height
+    this.#index = 0
+
+    if (data && data.states) {
+      this.group = data.group
+
+      this.#states = data.states
+      this.#keys = Object.keys(this.#states)
+      if (data.type) {
+        this.#type = data.type.toUpperCase()
+      }
+
+      if (data.minPressed) {
+        this.minPressed = data.minPressed
+      }
+
+      if (data.text) {
+        this.text = data.text
+      }
+    }
+    if (this.#states === undefined) {
+      this.#states = {}
+      this.#keys = []
+    }
+    if (data.nodeid){
+      this.#nodeid = format(data.nodeid, params)
+    }
+    
+  }
+
+  setState (index = 0) {
+    this.#index = index
+  }
+
+  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',val.id, val.color)
+      device.setButtonColor(val)
+    } catch (error) {
+      console.error(' Error', error)
+    }
+  }
+
+  async draw (row, column, ctx) {
+    const x = column * this.width
+    const y = row * this.height
+
+    const elem = this.getCurrentElement()
+
+    if (elem) {
+      if (elem.color) {
+        ctx.fillStyle = elem.color
+        ctx.fillRect(x, y, this.width, this.height)
+      }
+      if (elem.imgBuffer) {
+        ctx.drawImage(elem.imgBuffer, x, y, this.width, this.height)
+      }
+    }
+    if (this.text){
+      const lastElem = this.getLastElement()
+      ctx.fillStyle = lastElem.color
+      ctx.font = '20px Verdana'
+      ctx.textBaseline = 'top';
+      ctx.textAlign = 'left';
+      ctx.fillText(this.text,x+6,y+6)  
+    }
+  }
+
+  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]
+      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 key = this.#keys[this.#index]
+    return this.#states[key]
+  }
+
+  getLastElement () {
+    let i=this.#index-1 
+    if (i < 0) { i = this.#keys.length - 1 }
+
+    const key = this.#keys[i]
+    return this.#states[key]
+  }
+
+  getCurrentText () {
+    return this.text
+  }
+
+  setIntState (val) {
+    this.#index = val
+  }
+
+  pressed () {
+    this.timeStampPressed = Date.now()
+
+    this.#index++
+    this.updateState(this.#index,"pressed")
+    return true
+  }
+
+  released () {
+    if (!this.getCurrentElement()) { return false }
+    this.timeStampReleased = Date.now()
+    this.timeHold = this.timeStampReleased - this.timeStampPressed
+
+    if (this.timeHold < this.minPressed) {
+      // Update the State according to the not correct pressed state
+      console.log('Did not hold minimum time of ', this.minPressed, 'only', this.timeHold)
+      this.#index--
+      if (this.#index < 0) { this.#index = this.#keys.length - 1 }
+      return false
+    }
+
+    // Update the State according to the correctly pressed state
+    switch (this.#type) {
+      case ButtonType.TOGGLE:
+        // do nothing
+        break
+      default:
+        this.#index--
+        if (this.#index < 0) { this.#index = this.#keys.length - 1 }
+
+        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 }
+
+    if (x > this.#x) {
+      this.#moveRight = true
+      this.#moveLeft = false
+    } else if (x < this.#x) {
+      this.#moveRight = false
+      this.#moveLeft = true
+    }
+
+    if (y > this.#y) {
+      this.#moveDown = true
+      this.#moveUp = false
+    } else if (y < this.#y) {
+      this.#moveDown = false
+      this.#moveUp = true
+    }
+
+    this.#x = x
+    this.#y = y
+    // console.log(`d: ${this.#moveDown}  r: ${this.#moveRight} `)
+    return false
+  }
+
+  async runCommand () {
+    const elem = this.getCurrentElement()
+    // Only continue, if we have an element, that contains some kind of command:
+    if (!elem || (!elem.cmd && !elem.http && !elem.opcua)) {
+      return
+    }
+    // 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
+    }
+
+    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 res
+  }
+}