+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visu (https://forum.logicmachine.net/forumdisplay.php?fid=24)
+--- Thread: Thermostat (/showthread.php?tid=6273)
Thermostat - Tanish Gill - 26.01.2026
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'
)
})RE: Thermostat - admin - 26.01.2026
See this: https://forum.logicmachine.net/showthread.php?tid=6254&pid=40967#pid40967
RE: Thermostat - Tanish Gill - 26.01.2026
(26.01.2026, 08:53)admin Wrote: See this: https://forum.logicmachine.net/showthread.php?tid=6254&pid=40967#pid40967Hello, 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!
RE: Thermostat - admin - 26.01.2026
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.
RE: Thermostat - Tanish Gill - 26.01.2026
(26.01.2026, 11:32)admin Wrote: 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?
RE: Thermostat - admin - 26.01.2026
Wait for the next Visu version. It will be easier to implement it there.
RE: Thermostat - Tanish Gill - 27.01.2026
(26.01.2026, 13:22)admin Wrote: Wait for the next Visu version. It will be easier to implement it there.
Do you know date ?
RE: Thermostat - admin - 27.01.2026
Should be ready by the end of this week.
RE: Thermostat - admin - 29.01.2026
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')
})
}
})RE: Thermostat - stianj - 02.02.2026
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
RE: Thermostat - admin - 02.02.2026
What part of the spinner do you want to customize?
RE: Thermostat - stianj - 02.02.2026
Just the value-part, preferably both in compact mode and when opened - but most important the compact mode...
RE: Thermostat - admin - 03.02.2026
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')
})
}
})RE: Thermostat - stianj - 03.02.2026
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).
RE: Thermostat - admin - 03.02.2026
Replace getEl() with getCompactModeEl()
RE: Thermostat - stianj - 03.02.2026
Perfect, thank you! This gives so many possibilities!
RE: Thermostat - Tanish Gill - 10.02.2026
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)') }) } })RE: Thermostat - Daniel - 10.02.2026
You need seperate script for each widget.
RE: Thermostat - admin - 10.02.2026
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.