[Under New Management] Interactive history explorer custom card

Thanks, i already did play a bit with infopanel settings, but i must be doing something wrong, because nothing works no matter what i put there…
i entered this info into lovelace -->raw configuration editor:

infoPanel:
  uiColors:
    gridlines: blue
    labels: yellow
    buttons: red
    selector: lime
    closeButton: cyan

Colors are deliberately wild to see any effect, but there’s none… there is effect in “normal” history card, though. Just in infopanel no…

Should i put infoPanel elsewehere…? Infopanel is not mentioned on github page at all…

EDIT: yessss! Found it…
i must place this in some history card, not under root of that lovelace! I have a separate lovelace just for history and i placed it there and…voila, it works on all my lovelace boards.
I guess it must be placed in the card you enable infopanel on…correct?

thanks for your help, color names were a mistery to me…

You may also want to force dark mode. It looks like your theme is not doing this. That will fix some colors on its own, you might not have to customize all of them:

infoPanel:
  uimode: dark

It can be any history explorer card. In the end it is all stored in the local storage of your browser. But in order to get there, a history explorer card (any) needs to copy the YAML to your browser.

There’s a link in the github to a post on this thread where I (briefly) explain this. I really need to add some more complete info on the override to the readme.

1 Like

Thanks a lot! Now that i know where to put it dark mode also works, yes.
I tried all possible variables in my theme, but i didin’t find correct one for this - it seems that it’s not defined, so default is used (as you figured it out). As a “proof” for that is if i set HA default theme same grey color is used for labels.

I’m not sure how themes can set the dark flag. Lots of custom dark themes do not set it, in fact from all themes I tried, I think only the built-in HA dark theme does. That’s why I added the uimode override to force it if necessary. However, a theme having dark colors but not registering as ‘dark’ with HA could potentially create other color related problems on the HA UI and/or other custom cards.

I see…
well, the reason i chose Amoled Blue (and tweaked it a bit) is that i want totally black background, while HA’s default dark has grey background, which makes ugly cards - each card has a visible “border”, because card background is, as it seems, not same grey as lovelace blank background. I like my lovelace cards to be nicely there, without borders shown between them.
HA dark:


my theme:

Is there a way to add one band similar to timeline states but for events, especially automation triggering (e.g. for a configured list of automation entities)?

I’m not sure I understand ? Could you provide an example ?

Let’s take for example the image from post New interactive history explorer custom card - #548 by HeyImAlex.

There are two timelines and a graph.
What I meant is to have a similar (third) timeline but not with the state changes of a e.g. climate but with the triggering of a configured list of automations (automationA triggered at 12:37PM, automationB triggered at 14:11PM, etc.) within the same timeline bar.

Is that possible somehow? Going through the posts and the github page of the card I couldn’t figured it out.

You would have to create a template sensor that represents this data as aggregate state changes and graph that as a timeline. For example, the trigger of automation A would set the state of this sensor to automation A, the trigger of automation B would set it to automation B etc.

This is more a question about HA templating and Jinja, so I would suggest opening a separate thread on that and have the more Jinja capable people help you with that. Once you have that sensor running, graphing it as a timeline is no problem.

Thanks for your quick reply, indeed having a template or rather an input_text that is set by the selected automations would do the job. I should have thought about it.

V 1.0.44 is up !

  • Interactive Y axis with panning, zooming and locking ! Hold the SHIFT key while dragging the mouse or scrolling the wheel. Works on line and bar graphs. See Y Axis scaling in the readme for detailed usage.
    image

  • Pressing the Alt (or Option) key will show individual samples in a graph (this replaced the undocumented use of the shift key previously). This behavior can be made permanent for individual graphs with the new showSamples option. This also works for the more info panel. See Displaying individual samples in the readme.
    image

  • Line and bar graph height can now be adjusted per graph. See all the way down in the Changing the UI layout paragraph.

  • And thanks to PawelTolo for contributing a Polish translation !

4 Likes

Hi,

I am using this great history explorer not so much for it‘s interactivity, but the awesome vast amount of configurabilty/customizabilty.
So I switched off the header and device selector altogether, and just want a graph to be shown for the past 8h (back from now). This works great, however the timeline doesn‘t advance automatically unless I do a complete refresh. I‘ve set refresh mode to automatic, but this doesn‘t seem to advance the timeline automatically…probably I am just doing sth. wrong, but what‘s the catch to make the timelime progress while being displayed (it‘s shown on a wall mounted dashboard….) and always show data from the past n hours?

Thanks, habitoti

Auto refresh will update the graph (or timeline) contents when a sensor changes, but it won’t actually move the graph by itself. Adding this is problematic. Not technically (that’s easy), but in a way that it wouldn’t completely negate the interactive features of the card, like scrolling. Imagine you are looking at some data a day before, then a new sensor update comes in and the card jumps to the end. Not good.

Yeah, true. But what if it would be a specific optional mode that would kick in while the rightmost date is „now“? Like when using a real-time logging feature, which will scroll continously until you choose to scroll up manually. It then stops auto-updating (…the timeline…) until you scroll back down to the very end…

And past the very end… the thing is, there is no hard limit on scrolling past the now time. Actually a lot of people do this intentionally because they like seeing the empty area fill with data rather than having the card scroll. So the problem exists in both directions, you wouldn’t want to have the card auto jump in either situation.

I guess you could use the date selector field. Right now you jump to the now time when you click it. That could trigger auto follow at the same time. But that would be a hidden mode enabled by an unrelated function and that’s typically one of the big sins in UX design. And then what do we do for people who disabled the date button…

Some more opinions on this would be good.

Wouldn‘t be too weird if the data fills up until rightmost future point in time would become „now“, and then timelime continues to scroll. As it‘s just an option, it was chosen to behave like this. If you don‘t want that, keep the default behaviour…

It would make the standard regular history graph even more obsolete in favor of the graph explorer…right now it‘s the only left feature over the explorer —- the standard history graph shows the rolling changes. If you would add that as an additional option there would be finally no point in using standard graph whatsoever…

That’s an interesting idea. I can see that being pretty intuitive and it absolutely makes sense. Would you mind.opening a feature request on github to keep this organized.

Sure, will do…

Just wondering… is there any option for new y scaling on touch devices? Like tablet, touch-screen laptop…? i can’t press shift or ctrl there… (like i said, i’m just wondering if i miss anything).

Not yet, but you can use the lock icon to freeze the autoscale.

1 Like