loupedeck-commander 1.4.1 → 1.4.2

package/common/ButtonField.mjs

@@ -1,166 +1,168 @@
-import {Button} from './button.mjs'
-
-export class ButtonField {
-  #buttons = {}
-  #screen
-  width = 0
-  height = 0
-  #keys = []
-  #type
-  #name
-  #profile
-  
-  constructor (name, rows, columns, width, height, data, profile) {
-    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'
-    this.#profile = profile
-    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,this.#profile)
-      this.#buttons[key] = tb
-    }
-
-    this.#keys = keys
-  }
-
-  
-  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.#profile)
-      } else {
-        const iVal = parseInt(key, 10)
-        await this.#buttons[iVal].load(this.#profile)
-      }
-    }
-  }
-
-  async pressed (id) {
-    this.checkAndCreateButton(id)
-    const result = await this.#buttons[id].pressed()
-    if (!result) {
-      console.info(`pressed ${this.#type} ${id}`)
-    }
-    return result
-  }
-
-  /**
-   * Button released event handler
-   * @param {*} id 
-   * @returns 
-   */
-  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) }
-        // Ignore for myself (active element of the group)
-        if (id === key) { continue }
-        let toggleGroup = this.#buttons[id].getGroup()
-        // Ignore empty groups
-        if (toggleGroup === undefined || toggleGroup == "" ) { continue }
-        // Switch all other elements of the same group off:
-        if (this.#buttons[key].getGroup() === toggleGroup) {
-          this.#buttons[key].setState(0)
-        }
-      }
-    }
-    if (!result) {
-      console.info(`released ${this.#type} ${id}`)
-    }
-    return result
-  }
-
-  /**
-   * Button changed event handler (after opcua value change)
-   * @param {*} buttonID 
-   * @param {*} nodeid 
-   * @param {*} val 
-   */
-  async buttonStateChanged(changedButtonID,attribute,nodeid,val){
-    // todo: filter for buttonID
-    for (let i = 0; i < this.#keys.length; i++) {
-      let buttonID = this.#keys[i]
-      if (changedButtonID == buttonID)
-        await this.#buttons[buttonID].buttonStateChanged(i,attribute,nodeid,val)
-    } 
-  }
-
-  /**
-   * Handle a rotation event for a knob
-   * @param {*} id : Knob ID (e.g. 'knobTL, 'knobTR', 'knobBL', 'knobBR') 
-   * @param {*} delta 
-   * @returns 
-   */
-  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
-  }
-
-  /**
-   * Handle a touchmove event for a touchbutton (available in left, center and right button fields)
-   * @param {*} id 
-   * @param {*} x 
-   * @param {*} y 
-   * @returns 
-   */
-  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
-    }
-  }
-}
-
+import {Button} from './button.mjs'
+
+export class ButtonField {
+  #buttons = {}
+  #screen
+  width = 0
+  height = 0
+  #rows = 0
+  #columns = 0
+  #keys = []
+  #type
+  #name
+  #profile
+  
+  constructor (name, rows, columns, width, height, data, profile) {
+    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'
+    this.#profile = profile
+    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,this.#profile)
+      this.#buttons[key] = tb
+    }
+
+    this.#keys = keys
+  }
+
+  
+  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.#profile)
+      } else {
+        const iVal = parseInt(key, 10)
+        await this.#buttons[iVal].load(this.#profile)
+      }
+    }
+  }
+
+  async pressed (id) {
+    this.checkAndCreateButton(id)
+    const result = await this.#buttons[id].pressed()
+    if (!result) {
+      console.info(`pressed ${this.#type} ${id}`)
+    }
+    return result
+  }
+
+  /**
+   * Button released event handler
+   * @param {*} id 
+   * @returns 
+   */
+  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) }
+        // Ignore for myself (active element of the group)
+        if (id === key) { continue }
+        let toggleGroup = this.#buttons[id].getGroup()
+        // Ignore empty groups
+        if (toggleGroup === undefined || toggleGroup == "" ) { continue }
+        // Switch all other elements of the same group off:
+        if (this.#buttons[key].getGroup() === toggleGroup) {
+          this.#buttons[key].setState(0)
+        }
+      }
+    }
+    if (!result) {
+      console.info(`released ${this.#type} ${id}`)
+    }
+    return result
+  }
+
+  /**
+   * Button changed event handler (after opcua value change)
+   * @param {*} buttonID 
+   * @param {*} nodeid 
+   * @param {*} val 
+   */
+  async buttonStateChanged(changedButtonID,attribute,nodeid,val){
+    // todo: filter for buttonID
+    for (let i = 0; i < this.#keys.length; i++) {
+      let buttonID = this.#keys[i]
+      if (changedButtonID == buttonID)
+        await this.#buttons[buttonID].buttonStateChanged(i,attribute,nodeid,val)
+    } 
+  }
+
+  /**
+   * Handle a rotation event for a knob
+   * @param {*} id : Knob ID (e.g. 'knobTL, 'knobTR', 'knobBL', 'knobBR') 
+   * @param {*} delta 
+   * @returns 
+   */
+  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
+  }
+
+  /**
+   * Handle a touchmove event for a touchbutton (available in left, center and right button fields)
+   * @param {*} id 
+   * @param {*} x 
+   * @param {*} y 
+   * @returns 
+   */
+  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
+    }
+  }
+}
+