Thermostat

[Tanish Gill]

Hello,
I have a problem with a thermostat. I want the circular slider to change color depending on the current mode (heating/cooling), but right now I have to send the status every time.
Is there a solution for this?

Code:

localbus.listen('object', '1/4/8', (value) => {
  const wrap = document.querySelector('.circularslider-fg')
  if (!wrap) return

  wrap.style.setProperty(
    '--visu-widget-active-color',
    value ? 'red' : 'blue'
  )
})

[admin]

See this: https://forum.logicmachine.net/showthrea...7#pid40967

[Tanish Gill]

See this: https://forum.logicmachine.net/showthrea...7#pid40967

Hello, I will explain in more detail what is happening.
I have a system with several thermostats. Each thermostat returns its current mode status, and I want each one (using its own return address) to change color depending on whether it is in heating or cooling mode.
I have implemented this using a custom widget, where I change the addresses using the group address replacement function.
There is also another issue: when I reload the page, it does not know whether the status is heating or cooling, so it does not change color until it receives this information again.
Is there any way to solve all this?
Thank you for your help!

[admin]

You need a separate script for each widget. You can't use "document.querySelector('.circularslider-fg')" because it will return only the first matching element at random.

[Tanish Gill]

You need a separate script for each widget. You can't use "document.querySelector('.circularslider-fg')" because it will return only the first matching element at random.

Could you give me the code for an example thermostat?

[admin]

Wait for the next Visu version. It will be easier to implement it there.

[Tanish Gill]

Wait for the next Visu version. It will be easier to implement it there.

Do you know date ?

[admin]

Should be ready by the end of this week.

[admin]

New Visu version has been published.

Custom JS example, change widget ID (39) and listening group address ('0/0/1') as needed:

Code:

Visu.on('widget-ready', 39, ({ widget }) => {
  const el = widget.getEl()
  if (el) {
    const fg = el.querySelector('.circularslider-fg')
    
    widget.listen('0/0/1', (value) => {
      fg.style.setProperty('--visu-widget-active-color', value ? 'red' : 'blue')
    })
  }
})

[stianj]

Sorry to hijack this thread - I'm trying to use this to change the color of a spinner in compact mode.

But whatever I use as "querySelector" I get "Uncaught (in promise) TypeError: can't access property "style", fg is null". I feel this is something I should figure out myself, but have already spent too much time on it with no progress, so here I am, begging for help

[admin]

What part of the spinner do you want to customize?

[stianj]

Just the value-part, preferably both in compact mode and when opened - but most important the compact mode...

[admin]

Use this:

Code:

Visu.on('widget-ready', 123, ({ widget }) => {
  const el = widget.getEl()
  if (el) {
    widget.listen('0/0/1', (value) => {
      el.style.setProperty('--visu-widget-color', value ? 'red' : 'blue')
    })
  }
})

[stianj]

Thanks! This works fine - but I was mostly looking for a way to change colour on the compact value, the one I click to open the spinner - not the necessarily the spinner itself (altough that's neat also).

[admin]

Replace getEl() with getCompactModeEl()

[stianj]

Perfect, thank you! This gives so many possibilities!

[Tanish Gill]

Hello, I have a question.
I have a custom thermostat widget, and using this code I can change its color depending on the state (heating/cooling). However, I use the same custom widget for different thermostats and replace the group addresses.
The problem is that the other thermostat depends on a different state address of (heating/cooling), and I’m not sure how to handle this properly with the same widget.
Do you have any solution or suggestion for this?

Code:

Visu.on('widget-ready', 894, ({ widget }) =>
  { const el = widget.getEl()
  if (el) { const fg = el.querySelector('.circularslider-fg')
  widget.listen('1/4/8', (value) =>
  { fg.style.setProperty('--visu-widget-active-color', value ? 'rgb(255, 0, 0)' : 'rgb(0, 0, 255)') }) } })

[Daniel]

You need seperate script for each widget.

[admin]

For widgets placed in a custom widget you must use a compound ID format: "widget_id-custom_widget_instance_id" (e.g. "12-43")
At this moment Visu.on does not use compound IDs when generating events. This will be fixed in the next version.