Thanks, but at 2 days the timeline is unreadable. Again, is there a way of reducing the marked hours, without eliminating them altogether?
Not at this time. Are you viewing this on a phone in portrait mode ?
Do you see something like in different zoom levels here?
1 Like
On a laptop, three columns filling the whole screen. At two columns still barely legible. Comparison with basic history card. (I’m not sure whether the image will come through.
Ah I see the problem. It looks like this is mostly happening with the 2 day range ? The other ranges are less affected. The 48h one is a little unbalanced on the tick distance right now, it should be 4 hours between ticks, not 2. But it’s true that the main intended use case for this card is/was as a full screen panel. That said, I’m going to rebalance the 48h range.
@arganto, your issue is something different (and considerably more complicated), since it affects even wide screen sizes. Now what I can do, and this would help with both your case and the small card issue @Gnat54 is facing, is to add a general tick density control to the YAML. Something like low/med/high or maybe a numeric multiplier to make it more or less dense. It can’t be a direct hour distance though, because that changes depending on the active time range.
Thanks, HeyImAlex!!
V1.0.22 is out. Small bugfix and feature release. Adds dynamic time tick adjustments, so it will look less crowded on small screens. You can now optionally invert the zoom button behavior, if you prefer it that way. And explicit 12h / 24h modes are now supported.
@Gnat54 @arganto
Could you guys try out V1.0.22 with respect to your issues with time tick labels ? By default, the tick density will now auto adjust to your screen size. You can also manually limit the density to a general lower level if you prefer:
type: custom:history-explorer-card
timeTickDensity: high # high, medium or low. high is the default.
Tried it this morning. Rebooted, etc. I now show a fairly low density timeline, but no change visible between low, medium & high-density.
Tested as well. Much better than before. Gut feeling: even with high a little bit too low now. Esp. as I see no differences to medium and low, neither.
So if current behavior would be low and there would be a medium and high with some more ticks, I think I would use medium. And high would go into last behavior.
But I for me, I can live with the current status as well. Great stuff.
That’s expected behavior. Since your card is so narrow, it will already have selected the low preset automatically.
It’s dependent on the width of your card. The YAML switch doesn’t force a certain mode, it limits the autoselection to a maximal level. So if your card’s width auto selected the medium setting, for example, then you could further limit it to low. But you wouldn’t see a difference between medium and high. Depending on the zoom level, you may not see differences between low and medium modes, they share some ranges depending on the zoom.
Not sure, if I get you. A played around a lot. Different zoom levels of chart, different card widths, … I didn’t see any other ticks if I have chosen low, medium or high.
The card will autoselect the levels based on width. The thresholds are purely empirical to make it look visually nice and consistent. The low preset is selected when your card width is below 650 pixels. Then between that and 1100 pixels, it’s medium. Anything above that, it’s high. If you slowly resize your browser window you’ll see ticks being added as you increase the size, so to keep an approximate equal spacing between them.
For example, given a 24h zoom range, if the card is narrow, the preset is low with a tick every 6 hours:
When I grow the size and it reaches the next threshold, the ticks will switch to medium with a spacing of 4 hours:
Same for high at the next width threshold. Notice how the spacing between the labels stays approximately constant, but the time resolution increases as the card gets more width.
The YAML setting will simply limit the maximum selected preset.
1 Like
Aah. Then I get it and see different behavior. But then you have no choice, if you use it in a normal layout, because you are always below 650. In this case, I would suggest to set then default medium, so one can set low if you want it as now, but see more, if you see more.
And I struggled first because you said that high is default. Therefor I thought it is always and not different per width.
Maybe a min and max density then (current setting is basically a max). You could set the minimum to medium and it would never go below that. It’s important to not make this setting too complex and have a sensible default that looks good on all widths without overcrowding it, for users who don’t want to mess with the YAML.
For me it is fine in the way to customizing. I would only suggest to set default to medium in <650, so the user can take this or set to low, if he wants. Currently he has no choice and it is always set to low, as far as I understood.
installed the latest .22, but I must be going silly… I can not find the boolean to change the zoom behavior?
I haven’t updated the docs with this option yet. It was mentioned in your github issue:
uiLayout:
invertZoom: true
Is interactive history card working properly inside conditional card? I have a card created that shows status of Husqvarna Automever. Card shows in dashboard if automation is enabled (controlled via input_boolean) I’m using history graph to show hostory of mover status changes. Everything works perfectly inside card editor, I’m getting result exactly as I want it to be (here with the full source code):
Unfortunately, when the card is saved it dissapears completely, as it would be if condition is not met. Here I’m showing dashboard after saving changes, still in Edit mode (otherwise card would disappear completely). Card in the middle is the one in question:
When I replace history explorer card with standard history card everything works fine. If I remove conditional card wrap, only leaving inner vertical-stack-in-card, everuthing works fine. Is it any sort of bug?
A right! I was looking for an interface Boolean so we can hot toggle.
I can see the use of a different approach depending on the selected items
No issues here with a conditional card
type: conditional
conditions:
- entity: input_boolean.test
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:history-explorer-card
cardName: historycard-54575540
uiLayout:
selector: hide
toolbar: hide
graphs:
- type: timeline
entities:
- entity: weather.home