loupedeck-commander 1.0.1 → 1.2.0

package/common/touchbuttons.mjs

@@ -1,16 +1,37 @@
 import { loadImage } from 'canvas'
-import { sh } from './cmd-executer.mjs'
+
+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'
 
-const ButtonStyle = {
-  NONE: 0,
-  IMAGE: 1,
-  COLOR: 2,
-  TEXT: 3,
-  PHYSICAL: 3
+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,
@@ -29,35 +50,69 @@ const ButtonType = {
   PUSH: 'PUSH'
 }
 
-export class TouchButtonField {
-  #buttons = []
+export class ButtonField {
+  #buttons = {}
+  #screen
   width = 0
   height = 0
   #rows = 0
   #columns = 0
+  #keys = []
+  #type
   #name
-  constructor (name, rows, columns, width, height, data) {
-    console.info(`TouchButtonField ${name.padEnd(10, ' ')} Buttons: ${rows} x ${columns} , Pixels  ${width} x ${height}`)
+  #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
-    for (let i = 0; i < rows * columns; i++) {
-      const tb = new TouchButton(`touch-${i}`, width / columns, height / rows, data[i])
-      this.#buttons.push(tb)
+    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
   }
 
-  async draw (device) {
-    device.drawScreen(this.#name, ctx => {
-      for (let i = 0; i < this.#rows * this.#columns; i++) {
-        const row = Math.floor(i / device.columns)
-        const column = i % device.columns
+  //setProfileConfig (config) {
+//    this.#config = config
+//  }
 
-        this.#buttons[i].draw(row, column, ctx)
+  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) {
@@ -65,127 +120,103 @@ export class TouchButtonField {
   }
 
   async load () {
-    for (let i = 0; i < this.#rows * this.#columns; i++) {
-      await this.#buttons[i].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) {
-    // console.info(`pressed ${id}`)
-    await this.#buttons[id].pressed()
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].pressed()
+    if (!result) {
+      console.info(`pressed ${this.#type} ${id}`)
+    }
+    return result
   }
 
   async released (id) {
-    // console.info(`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.#rows * this.#columns; i++) {
-        if (id === i) { continue }
-        if (this.#buttons[i].group === this.#buttons[id].group) {
-          this.#buttons[i].setState(0)
+      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
   }
-}
 
-export class PhysicalButtonField {
-  #buttons = {}
-  #name
-  constructor (name, data) {
-    console.info(`PhysicalButtonField ${name.padEnd(10, ' ')} `)
-    this.#name = name
-    const keys = Object.keys(data)
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i]
-      const tb = new TouchButton(key, 1, 1, data[key])
-      this.#buttons[key] = tb
-    }
+  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 draw (device) {
-    const keys = Object.keys(this.#buttons)
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i]
-      this.#buttons[key].drawPhysical(device, key)
-    }
+  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 load () {
-    const keys = Object.keys(this.#buttons)
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i]
-      await this.#buttons[key].load()
-    }
+  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 TouchButton(id, 1, 1, id)
+      const tb = new Button(id, 1, 1, id)
       this.#buttons[id] = tb
     }
   }
-
-  setIntState (id, val) {
-    this.checkAndCreateButton(id)
-    this.#buttons[id].setIntState(val)
-  }
-
-  async pressed (id) {
-    // console.info(`pressed ${id}`)
-    this.checkAndCreateButton(id)
-    return await this.#buttons[id].pressed()
-  }
-
-  async released (id) {
-    // console.info(`released ${id}`)
-    this.checkAndCreateButton(id)
-    return await this.#buttons[id].released()
-  }
-
-  async rotated (id, delta) {
-    // console.info(`rotated ${id} ${delta}`)
-    this.checkAndCreateButton(id)
-    return await this.#buttons[id].rotated(delta)
-  }
 }
 
-export class TouchButton {
+export class Button {
+  #config
   width = 0
   height = 0
-  #style
-  #type
-  #index = 0
-  #states = []
+
+  #type = ButtonType.TOGGLE
+
   #min = 0
   #max = 100
   #value = 50
-  #data
   #name = undefined
+  #nodeid = ""
 
-  #images = {}
-  #colors = {
-    off: '#000000'
-    //    on: '#110011'
-  }
-
-  #rgbs = {
-    off: [0, 0, 0]
-    //    on: [0, 255, 0]
-  }
-
-  #commands = {
-    off: '',
-    on: ''
-  }
+  #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
@@ -194,35 +225,24 @@ export class TouchButton {
   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
-    this.#style = ButtonStyle.NONE
-    this.#type = ButtonType.TOGGLE
-    this.#states = Object.keys(this.#rgbs)
 
-    if (data) {
+    if (data && data.states) {
       this.group = data.group
-      this.#style = ButtonStyle.PHYSICAL
-      if (data.images && Object.keys(data.images).length > 0) {
-        this.#style = ButtonStyle.IMAGE
-        this.#states = Object.keys(data.images)
-      } else if (data.colors && Object.keys(data.colors).length > 0) {
-        this.#style = ButtonStyle.COLOR
-        this.#states = Object.keys(data.colors)
-      } else if (data.rgb && Object.keys(data.rgb).length > 0) {
-        this.#states = Object.keys(data.rgb)
-      }
-      if (data.commands) {
-        this.#commands = data.commands
-      }
 
+      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
       }
@@ -230,12 +250,15 @@ export class TouchButton {
       if (data.text) {
         this.text = data.text
       }
-      this.#data = data
     }
-  }
-
-  setButtonStyle (type) {
-    this.#style = type
+    if (this.#states === undefined) {
+      this.#states = {}
+      this.#keys = []
+    }
+    if (data.nodeid){
+      this.#nodeid = format(data.nodeid, params)
+    }
+    
   }
 
   setState (index = 0) {
@@ -243,174 +266,78 @@ export class TouchButton {
   }
 
   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,
-        color: this.getCurrentRGB()
+        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)
     }
   }
 
   async draw (row, column, ctx) {
     const x = column * this.width
     const y = row * this.height
-    switch (this.#style) {
-      case ButtonStyle.IMAGE:
-        ctx.drawImage(this.getCurrentStateImage(), x, y, this.width, this.height)
-        break
-      case ButtonStyle.COLOR:
-        // Draw a Colored Rectangle
-        ctx.fillStyle = this.getCurrentStateFill()
-        ctx.fillRect(x, y, this.width, this.height)
-        break
-      case ButtonStyle.NONE:
-        // Draw a Colored Rectangle
-        ctx.fillStyle = this.getCurrentStateFill(0)
-        ctx.fillRect(x, y, this.width, this.height)
-        break
-    }
 
-    ctx.fillStyle = '#000000'
-    ctx.font = this.font
-    ctx.fillText(this.text, x + 10, y - 10)
-  }
+    const elem = this.getCurrentElement()
 
-  async load () {
-    let bLoaded = false
-    while (!bLoaded) {
-      switch (this.#style) {
-        case ButtonStyle.IMAGE:
-          bLoaded = await this.loadAsImage()
-          break
-        case ButtonStyle.COLOR:
-          bLoaded = await this.loadAsColor()
-          break
-        case ButtonStyle.PHYSICAL:
-          bLoaded = await this.loadAsRGB()
-          break
-        default:
-          bLoaded = true
+    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)
       }
     }
-  }
 
-  async loadAsImage () {
-    this.#states = Object.keys(this.#data.images)
-    if (this.#states.length <= 0) {
-      this.#style = ButtonStyle.COLOR
-      return false
-    }
+    //    ctx.fillStyle = '#000000'
+    //    ctx.font = this.font
+    //    ctx.fillText(this.text, x + 10, y - 10)
+  }
 
-    for (let i = 0; i < this.#states.length; i++) {
-      const key = this.#states[i]
-      const file = this.#data.images[key]
+  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.#images[key] = await loadImage(file)
+          this.#states[key].imgBuffer = await loadImage(file)
         } catch (e) {
           console.error('No such image', file)
-          this.#style = ButtonStyle.COLOR
-          delete this.#images[key]
           return false
         }
-      } else {
-        // this is not an image type
       }
+      //const uastate = elem.state
+      //if (uastate){
+      //  await opcuainterface.Subscribe(uastate)
+      //}
     }
-    return true
   }
 
-  async loadAsColor () {
-    if (this.#states.length <= 0) {
-      // use default colors
-      this.#states = Object.keys(this.#colors)
-      return true
-    }
-
-    for (let i = 0; i < this.#states.length; i++) {
-      const key = this.#states[i]
-      if (this.#data.colors && key in this.#data.colors) {
-        const color = this.#data.colors[key]
-        if (color !== undefined && color !== '') {
-          this.#colors[key] = color
-        }
-      }
-    }
-    return true
-  }
-
-  async loadAsRGB () {
-    if (this.#states.length <= 0) {
-      // use default colors
-      this.#states = Object.keys(this.#colors)
-      return true
-    }
-
-    if (this.#data.rgb) {
-      const keys = Object.keys(this.#data.rgb)
-      for (let i = 0; i < keys.length; i++) {
-        const key = this.#states[i]
-        const rgb = this.#data.rgb[key]
-        if (rgb !== undefined && rgb !== '') {
-          this.#rgbs[key] = rgb
-        }
-      }
-    }
-
-    return true
-  }
-
-  getCurrentStateImage () {
-    const key = this.#states[this.#index]
-    return this.#images[key]
-  }
-
-  getCurrentStateFill (forceIndex = -1) {
-    let key
-    if (forceIndex >= 0) {
-      key = this.#states[forceIndex]
-    } else {
-      key = this.#states[this.#index]
-    }
-    return this.#colors[key]
-  }
-
-  getCurrentRGB () {
-    const key = this.#states[this.#index]
-    const rgb = this.#rgbs[key]
-
-    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
+  getCurrentElement () {
+    const key = this.#keys[this.#index]
+    return this.#states[key]
   }
 
   getCurrentText () {
     return this.text
   }
 
-  getCurrentCommand () {
-    const key = this.#states[this.#index]
-    const cmd = this.#commands[key]
-
-    if (!cmd) { return '' }
-    // Call an action
-    const params = {
-      id: this.id,
-      state: key,
-      min: this.#min,
-      max: this.#max,
-      value: this.#value,
-      text: this.getCurrentText()
-    }
-    /* const keys = Object.keys(this.#data.config)
-    keys.forEach(key => {
-      params[key] = this.#data.config[key]
-    }) */
-
-    return format(cmd, params)
-  }
-
   setIntState (val) {
     this.#index = val
   }
@@ -418,27 +345,21 @@ export class TouchButton {
   pressed () {
     this.timeStampPressed = Date.now()
 
-    switch (this.#style) {
-      case ButtonStyle.NONE:
-        break
-      default:
-        this.#index++
-        this.#index %= this.#states.length
-    }
+    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.#style === ButtonStyle.NONE) { return }
-
     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.#states.length - 1 }
+      if (this.#index < 0) { this.#index = this.#keys.length - 1 }
       return false
     }
 
@@ -449,25 +370,134 @@ export class TouchButton {
         break
       default:
         this.#index--
-        if (this.#index < 0) { this.#index = this.#states.length - 1 }
+        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()
   }
 
-  runCommand () {
-    const cmd = this.getCurrentCommand()
-    if (cmd && cmd !== '') {
-      sh(cmd)
-      return true
+  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
+  }
 }