chartist to display nice pie...

[admin]

It should already be possible to do using HTML widget.

[stianj]

Ok, thanks. But in that case using CSS and not Chartist.js..?

---

Because I also have some of these:

Code:

// UPS Load
$(function() {
  grp.listen('35/0/6', function(obj, type) {
        var load = grp.getvalue('35/0/6');
    var planid = 17;
   
      var el = $('<progress id="p1" value="' + load + '" max="100"></progress>').css({
        position: 'absolute',
        top: '528px',
        left: '100px'
      }).appendTo('#plan-' + planid);

  }, true);
});

That I don't quite understand how to deal with now...

[admin]

Old JS examples won't work. New Visu does not use jQuery so the $ function won't work. localbus should be used instead of grp. Function reference: https://kb.logicmachine.net/misc/visu/

A major difference is that old visu rendered all plans and widgets once loaded but new Visu renders only the currently active plan.

[stianj]

This turned a bit off topic, but... I can use this:

Code:

localbus.listen('object', '35/0/6', (value) => {
  if (value)
    {
      document.getElementById("p1").value = value;
    }
})

and have this in a html-widget:

Code:

<progress id="p1" value="0" max="100"></progress>

and it works - after the first update of 35/0/6. Since the JS is run before the page is completely rendered, I have no way to have this value from start.

I'm sure there is a workaround I just don't understand..?

[domotiqa]

Ok, thanks. But in that case using CSS and not Chartist.js..?

---

Because I also have some of these:

Code:

// UPS Load
$(function() {
  grp.listen('35/0/6', function(obj, type) {
        var load = grp.getvalue('35/0/6');
    var planid = 17;
   
      var el = $('<progress id="p1" value="' + load + '" max="100"></progress>').css({
        position: 'absolute',
        top: '528px',
        left: '100px'
      }).appendTo('#plan-' + planid);

  }, true);
});

That I don't quite understand how to deal with now...

hello.

I wasn't aware of this change.

so it mean if we upgrade our customer building that use chartist, they will not have it working anymore ?

[admin]

@stianj, you need to listen to widget-ready and widget-hide events and only then execute localbus.listen / localbus.unlisten.

Or you can use slider in read-only mode without the handle to display a progress bar. Set Additional classes to slider-progress. You can adjust active / inactive color as needed.

Code:

.slider-progress {
  pointer-events: none;
}
.slider-progress .slider-handle {
  display: none;
}
.slider-progress .slider-track {
  background-color: var(--widget-inactive-color, var(--visu-widget-inactive-color));
}
.slider-progress .slider-track div {
  opacity: 1;
  background-color: var(--widget-active-color, var(--visu-widget-active-color));
}

---

@domotiqa, as mentioned before any Custom JS and CSS from old visu won't work with new Visu.

[stianj]

Thanks, using the slider widget is the right solution here (especially since I wasn't able to get any listen-events working). But this is much cleaner anyway. 

Code:

.slider-progress {
  pointer-events: none;
}

.slider-progress .slider-handle {
  display: none;
}

.slider-progress .slider-track {
  border-radius: 0.4em;
  border: solid 1px #242b35;
  background: linear-gradient(#191c23, #2d3341);
  height: 20px;
}

.slider-progress .slider-track div {
  opacity: 1;
  border-radius: 0.4em;
  background: linear-gradient(#357a38, transparent 85%), linear-gradient(90deg, #357a38, #4caf50)
}

But it's minimum width of 200px is a bit too much for me. 150 would be much better ?

And to get back on topic, would still really, really like a way to use Chartist.js or another similar library.

[stianj]

What exactly do you want to display in this chart? Maybe making a new widget for this is a better solution.

Maybe I've changed my mind. The trend widget is actually quite good. So if there would be a widget that resembles the Home Assistant history graph then I would be happy

   

(Of course, given identical size and time span/resolution, the x-axis must match the trend widget)

For me that would be incredibly useful! ?

[admin]

Here's a working example for HTML progress element.

HTML widget contents:

Code:

<progress max="100" class="w-100"></progress>

Custom JS, change widgetId and addr as needed:

Code:

const widgetId = 123
const addr = '1/2/3'
let progress

function onChange(value) {
  progress.value = value
}

Visu.on('widget-ready', widgetId, ({ widget }) => {
  progress = widget.getEl().querySelector('progress')
  localbus.listen('object', addr, onChange)
})

Visu.on('widget-hide', widgetId, () => {
  localbus.unlisten('object', addr, onChange)
})

---

Trends cannot be used to display on/off times for a binary object. Trends aggregate the data without storing changes as exact timestamps. 
For this you need something like Graph widget from old visu that uses data from object logs.

[stianj]

Really appreciate the example, it will for sure be useful for other things! Thank you!

And yes, I didn't mean that the Trends widget could or should be used for showing on/off states. But I was hoping you'd consider making a separate widget that does just this. It's an very convenient way of visualizing the object logs...