[Under New Management] Interactive history explorer custom card

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.

image

But the toolbar is still visible in more-info.

image

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 :slight_smile:
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

I hope this hasn’t been answered already but…

Does anyone know what the theme element is for the range selection background & text?

Right now they are both white

image

It looks like you are using a dark theme, but the dark flag in HA is not set. So the card thinks you’re on a light theme. Try:

infoPanel:
  uimode: dark

Where do I enter that?

in my theme?

I already have:

uimode: dark

in my theme but not the “infoPanel:” part.

The info panel is an entirely different instance of the card. Think of it as a ‘virtual’ history explorer card. You need to configure it just as you configured a normal custom history explorer card, if the defaults don’t work for you.

See my post here.

You add the config for the info panel into the YAML of any other history explorer card you have on your dashboard (maybe the one you used to enable the info panel override).

EDIT 2: I’ve installed the latest (non-dev) version (1.0.36 verified in the Chrome console) and the issue remains with the configuration as below.

EDIT: Wait, I think I just realized I don’t have the latest version. I’ll try that first and get back to you.

No luck so far.

I’m using the history explorer card as a dashboard accessed from the side bar.

here is my configuration.yaml entry

lovelace:
  mode: yaml
  resources: !include ui_lovelace_resources.yaml
  dashboards:
    lovelace-history:
      mode: yaml
      filename: lovelace_history_explorer_dash.yaml
      title: History Explorer
      show_in_sidebar: true
      require_admin: false

and here is the lovelace_history_explorer_dash.yaml contents

title: History
views:
  - title: History test
    type: panel
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:history-explorer-card
            skiplocale: true
            infoPanel:
              uimode: dark

but the drop down is still white.

Greeeaaaat!