HTML Widget

[Fahd]

Hello,

I am using an HTML widget in Visui to build a custom table layout
using pure HTML + CSS.

Example (simplified):

<div class="rc-row rc-head">
  <div class="rc-cell">Room</div>
  <div class="rc-cell">Ambient Temp</div>
  <div class="rc-cell">Current Temp</div>
  <div class="rc-cell">HVAC Mode</div>
</div>

Rows are static HTML, used only as a layout grid.

I would like to display and control KNX group objects inside specific
cells of this HTML table.

Is it possible to bind KNX group objects directly inside an HTML widget?

[admin]

At the moment you can use this code. Modify widgetId, address and query selector as needed. Later on we'll add a more convenient way of listening to group address changes for a particular widget.

Code:

const widgetId = 28
const address = '0/0/21'
const values = {}
let widgetEl

function updateWidget() {
  if (widgetEl) {
    widgetEl.querySelector('.value').textContent = values[address]
  }  
}

localbus.listen('object', address, (value) => {
  values[address] = value
  updateWidget()
})

Visu.on('widget-ready', widgetId, ({ widget }) => {
  widgetEl = widget.getEl()
  updateWidget()
})

Visu.on('widget-hide', widgetId, () => widgetEl = null)