More fixes in V1.0.34. If the more info panel override didn’t properly activate on your system, please update.
tbh, I dont understand that… how do I set it explicitly on iOS app browser? The config is a per card setting isnt it in the Yaml mode config? not a per browser setting?
As I showed above, the setting is activated because of the card it uses in that dashboard, what more could I do to explicitly enable that? (see below for exact yaml)
btw, Ive just updated to 1.0.34, and still see the oddly placed toolbar dropdown in the iOS app too. And no HE more info panel anywhere. I did refresh, kill app, even refresh frontend cache via the settings/app/error-tracking menu option
full disclosure:
I have 1 dashboard view panel HE card (has a unique name):
- title: History
icon: mdi:history
path: history
type: panel
cards:
- type: custom:history-explorer-card
cardName: history-panel-view
showUnavailable: false
recordedEntitiesOnly: true
lineMode: stepped
uiLayout:
selector: top
toolbar: both
and 1 HE card inside another dashboard, also with a unique name:
- type: custom:history-explorer-card
header: 3 Fase totaal
cardName: 3-Fase-totaal
uiLayout:
# toolbar: hide
selector: hide
lineMode: stepped
graphs:
- type: line
entities:
- entity: sensor.calculated_totaal_l1_power
- entity: sensor.calculated_totaal_l2_power
- entity: sensor.calculated_totaal_l3_power
# globally used in more-info panels
infoPanel:
lineMode: stepped
this last card is supposed to take care of the more-info panel override, at least as far as I understand it?
please let me ask something entirely different, for which I have been looking for some time now. Silly me, there’s no way I can imagine how to do what I am looking for…
having these sunchance forecast sensors for the next few days, they are actual entities, and not attributes. I would love to represent them in a way, that shows 1 graph, with a line connecting them. Would this be possible with a detailed setting in a HE card? (aware they are not historic values, but current…)
- type: custom:bar-card
title: Kans op zon
# hours_to_show: 24
# update_interval: 30
# smoothing: true
show:
labels: true
severity:
- color: Grey
from: 0
to: 25
- color: Skyblue
from: 26
to: 50
- color: Gold
from: 51
to: 100
entities:
- sensor.buienradar_sunchance_1d
- sensor.buienradar_sunchance_2d
- sensor.buienradar_sunchance_3d
- sensor.buienradar_sunchance_4d
- sensor.buienradar_sunchance_5d
showing as:
but looking for something like:
or a meteogram like this:
if not possible with History-explorer, maybe you have an idea how to realize it using other tools.
By using ‘Enable history info panel’ in the UI dropdown menu, from the HE card you have the infoPanel config attached to. From your iOS app.
OK, let me try to explain this. The info panel override is a global component. It affects the entire frontend, regardless of whether or not you have a HE card somewhere on it. But due to the way the HA frontend is designed code wise, there is no way for a global component to get any kind of user config. None. Nothing. Nada.
Only custom cards get YAML config. So you have to tie the global component to a custom card somehow, even if conceptually it doesn’t make sense. So to get the user config. But the problems don’t end there. Again, due to another weird design choice of the HA frontend, custom cards can only read their user YAML when they’re visible, ie. when you navigate to the dashboard and tab that contains the custom card. So in this case, it would mean for the override to be customized, you would need a HE card on every single tab of every single dashboard you have. And all of these HE cards would have to have a copy of the infoPanel section. Not really practical.
So the only way to configure a global frontend component at any time and any place, is to store the user config in the browser, locally. When a HE card loads its infoPanel section, it will copy it into a special config space in your browser. Which in turn will then be used by the global more info override code. This copying process is initially activated by using the ‘Enable history info panel’ option. This will prepare the local storage on your browser for the config and copy it over from the YAML. Then, every time you modify the infoPanel YAML on the HE card, the card will update the local browser storage to match your changes. You could even delete the infoPanel section entirely and the override would keep its last config on that browser.
Complicated and annoying, yes. But the way the frontend is designed, there’s no other way to do this.
1 Like
Not without very extensive modifications of the card, I’m afraid.
got it…
because I had set that dropdown menu to ‘hide’, I couldn’t…
fixed that now, and showing the HE more-info panels. Understand the local_storage, just had not seen the tool to enable it. sorry…
still seeing this on iOS companion app though:
on a regular card:
and on a more-info panel:
OK, yeah that’s the ‘usual’ layout problem that always appeared on iOS. It renders differently than on any other browser I ever tested, with more spacing around the text and buttons. No idea why. I don’t have an iOS device, so unfortunately I can’t debug this.
Once you have the override enabled, you can hide the menu again.
yes, thats what I did now, thanks, all working as expected.
Ill ask in Discord #iOS_and_mac what to do about those spacings, and refer to this thread
Is it possible to remove fill color from all infopanel curves? And also set default curve color. Looks like it works only when done separately for each entity?
fill: '#00000000'
You can set the defaults in entityOptions for entire device classes too. For example, to change the defaults for sensors in the temperature device class:
infoPanel:
entityOptions:
temperature:
color: red
fill: '#00000000'
It probably would make sense to add the support for entire domains too. stateColors can do domain wide overrides after all.
Putting just the fill line alone after infoPanel doesn’t seem to work. It only works when there are entityoptions and even then it works only for that entity.
This doesn’t work:
infoPanel:
fill: '#00000000'
this works, but only for temperature:
infoPanel:
fill: '#00000000'
entityOptions:
temperature:
color: green
Also: I can’t get entityOptions to work for Airthings co2, voc and radon. They only work for temperature and humidity.
Obviously not, as I said, it’s only per entity or per device class.
Yes, that’s the point of a device_class rule.
Make sure you’re using the correct device_class name, spelt exactly as in the developer tools.
Just tried this and I am amazed. Just fantastic! Most useful card ever!
Question:
If I use
toolbar: hide
selector: hide
on a card, it works fine.
But the toolbar is still visible in more-info.
Can I hide it in more-info as well?
I like to keep the UI clean and hide a lot of other objects in the more-info and since you have the amazing zoom function with CTRL+mouse roll and timeline click 'n slide, I don’t need the toolbar.
I originally planned to do this right from the start, but the strange way the HA frontend manages dialogs prevented me from doing it the same way than the other config. In very simple terms, HA dialogs (like the more info popup) have a render and an update function. Render creates the html you see on the popup, including the buttons, the graphs, etc. Update tells the dialog code how it should render (depending on the entity type, etc). Now, the problem is, render is called before update… So we have a chicken and egg problem. It would render the button for a fraction of a second, before realizing (in the subsequent update call) that it doesn’t need them. So they would flash briefly. It’s a design flaw in the HA frontend.
Configurable UI elements will have to be handled apart from the other config. I’ll think about how I could do this.
Thanks for the explaination.
I know all kinds of reverse engineering takes a lot of time, and this one’s just a nice to have 
I haven’t tried yet, but I guess I could hide it with card-mod like I hide a lot of other elements instead.
Thanks again for your amazing work!
card mod should work, you could hide the div that encapsulates both buttons.
Do you think it will be possible to have 1. in the midterm and 2. in the long-term future? This would be really great.
Yeah, short term. UI config on the info panel is scheduled for the next release.
Dunno, tbh. I have to see how to insert or clone this.
1 Like
V1.0.36 is up.
Most UI config options should now work for more info panels too (color and graph height overrides, hide toolbar, invert zoom buttons, etc). @arganto @boneheadfraggle
You can now also do domain wide rules for entityOptions in addition to device_class and entities. The order of priority for the override is - entity first, then device class and domain last. This works for the custom card as well as for the more info panel. If, for example, you want red lines without fill for all your sensors by default in the more info panel, except for humidity which should be green: (@TimoJ)
infoPanel:
entityOptions:
sensor:
color: red
fill: '#00000000'
humidity:
color: green
fill: '#00ff0010'
You can now hide entity name labels from tooltips if you want them even more compact. See readme under tooltips. You might notice that the YAML format for tooltip options has changed a bit to make it cleaner. You can change your current tooltip settings to the new format if you want, but you don’t have to. The old settings will keep working (forever).
And some clipping fixes to the more info panel on Chrome and derivatives (Edge, Chromium, Vivaldi, etc).
3 Likes