Use input_select to set hours_to_show on a map card

[soul350]

I just modified a dashboard to use an input_select helper and config-template-card to dynamically change the hours_to_show property of a map card.

That works, but now the map card no longer fills up the lower half of the display like it previously had.

I’m using the layout card with the grid option to build this dash.

Here’s the current yaml that displays the map as a square

type: custom:config-template-card
view_layout:
  grid-area: map
variables:
  hours: states['input_select.hours_of_tracking_to_show'].state
entities:
  - input_select.hours_of_tracking_to_show
card:
  type: map
  entities:
    - entity: person.person1
    - entity: zone.home
    - entity: zone.work
    - entity: person.person2
  hours_to_show: ${Number(hours)}
  theme_mode: auto
  default_zoom: 13

Here’s the original that stretched the card all the way to the bottom of the screen like I wanted:

view_layout:
  grid-area: map

type: map
entities:
  - entity: person.person1
  - entity: zone.home
  - entity: zone.work
  - entity: person.person2
hours_to_show: 4
theme_mode: auto
default_zoom: 13

I’m sure it has something to do with the config-template-card being a wrapper to the map card, but I don’t know how to resolve it.

Edit: The stretching was handled by the grid layout options:

grid-template-columns: 20% 30% 50%
grid-template-rows: 85px 85px 100px 1fr
grid-template-areas: |
  "btn1 tile1 bat1"
  "btn2 tile2 bat2"
  "time time time"
  "map map map"
height: 100vh

I have 2 rows of various stuff at the top, then a row that is the input_select, then the final row is the map set to fill the rest of the space.

[WarLion]

Give the wrapper a height of 100%

type: custom:config-template-card
view_layout:
  grid-area: map
style: |
  :host {
    display: block;
    height: 100%;
  }

If for some reason the above doesn’t stretch nicely, you can declare a height

card:
  type: map
  style: |
    ha-card {
      height: 100%;
      margin: 0;
    }

[soul350]

Unfortunately, neither one had any effect on it.
Is there an alternate way to handle the dynamic map property without using the config-template-card? I think the config-template-card is being stretched to fill the screen instead of the map since the map is now a property of that card.

There may also be some clever layout card option to use here, but I’m not sure what that would be.

[Ildar_Gabdullin]

Cardmod codes provided above are missing a “card_mod” keyword. Start with fixing that error. (hope these cardmod codes were not taken from AI)
Also, config-template-card does not have ha-card, so using mod-card is needed. Suggest to check examples for config-template-card: find main cardmod thread - 1st post - fantastic link at the bottom - config-template-card.

[soul350]

I think I follow, you’re referring to this post?

Card-mod - Add css styles to any lovelace card

Styling a card inside ‘custom:config-template-card’: 1.Styling a row - there are 2 options: Option 1 - styling must be done from the "config-template-card": [image] Stopped working - see the issue; was fixed later. code Option 2 - styling must be done from the "Entities card": [image] code 2.Styling a card - must be done from the card itself: [изображение] code One more example: [изображение] code More examples are described here.

[Ildar_Gabdullin]

Correct.
But these examples are about styling an inner card/row inside CTC. Here what you need is to style the CTC card itself - which is not covered by these examples, sorry for a confusion.
Anyway, the CTC must be placed inside mod-card to be styled.

Actually, I suggest first to test with Code inspector (or a similar tool in your browser): set “height: 100%” (as was suggested above) to the “config-template-card” element and see if it helps. The idea is to get a “proof of concept” before starting playing with cardmod.

[soul350]

I don’t think the CTC card is the issue other than it steals the styling from the map card under it. When I check it out with Code Inspector, the config-template-card element takes up the entire remaining area of the screen like I suspected. It’s the map card rendered under it that is no longer styled to fully fill the CTC container.

I have an idea for a possible fix. It’s a bit hacky and dumb, but so is HA in general so it’ll fit right in if it works.

[soul350]

If I change this to ~150% it makes it look the way I want it to. I don’t think that’s card-mod friendly though

[soul350]

There’s probably a less dumb way to do this, but if it’s stupid and it works, it’s not stupid:

view_layout:
  grid-area: map
type: custom:config-template-card
variables:
  hours: states['input_select.hours_of_tracking_to_show'].state
entities:
  - input_select.hours_of_tracking_to_show
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  cards:
    - type: map
      view_layout:
        grid-area: inner
      entities:
        - entity: person.person1
        - entity: zone.home
        - entity: zone.work
        - entity: person.person2
      hours_to_show: ${Number(hours)}
      theme_mode: auto
      default_zoom: 13
  layout:
    grid-template-columns: 100%
    grid-template-rows: 1fr
    grid-template-areas: |
      "inner"
    height: 100vh

[Ildar_Gabdullin]

@soul350

I don’t think the CTC card is the issue other than it steals the styling from the map card under it

It is. This PR will fix it in a forthcoming release: fix: card's height in horizontal-stack & grid by ildar170975 · Pull Request #158 · iantrich/config-template-card · GitHub
The “div#card” should be altered, not “:host”. That was my PR, and I have forgotten a proper way to fix it; checked my PR and it turned to be that “div#card” element.

To manually fix it - try doing these steps:

• find a folder with a JS file
• delete gz file
• open JS file in editor
• paste “style=“height: 100%;” into a proper place (check the PR for an exact place)

[soul350]

Ah, right you are. Manually editing in the PR in dev tools fixed it:

I’ll see if I can patch it in the js file until the update comes out.

Thanks!

[VietNgoc (Ngoc John)]

Use aspect ratio in map config.

[VietNgoc (Ngoc John)]

src%2Fpanels%2Flovelace%2Fcards%2Fhui-map-card.ts

[Ildar_Gabdullin]

CTC anyway should be fixed. You can check it with several CTC cards with different inner cards in Grid.

[soul350]

I patched the js file and did a ctrl-F5 browser refresh and it looks like it’s displaying properly now, thanks.

I assume the next update will have the fix, but will verify before I apply it and accidentally undo this.

[soul350]

Well, I’ve discovered a new issue. When I configure my map to use the drop down input to select the number of hours to use for the track, the icon for the user no longer updates correctly. The track updates, but the circle with the initials/photo in it stays in the same place.

I set up a simple dashboard to test it with 2 cards:

Drop down

type: entities
entities:
  - entity: input_select.hours_of_tracking_to_show
state_color: false
show_header_toggle: true

Map

type: custom:config-template-card
variables:
  hours: states['input_select.hours_of_tracking_to_show'].state
entities:
  - input_select.hours_of_tracking_to_show
card:
  type: map
  entities:
    - entity: person.user1
    - entity: zone.home
    - entity: zone.work
    - entity: person.user2
  hours_to_show: ${Number(hours)}
  theme_mode: auto
  default_zoom: 13

The problem doesn’t go away if I change hours_to_show to a fixed value, nor does it go away if I change the hours variable to a fixed value.

So it seems like it has something to do with using the config-template-card. Any ideas?

[soul350]

Alternately, is there a way to do this that does not use this card? I feel like there should be.

[soul350]

Closing this one out with what I learned in case it helps someone else going forward:

In order to get the map to update the icon location as well, the person entities need to be added to the entities list along with the input_select, so that it will trigger an update on changes to them as well. The side effect of this is that you will get a brief screen flash/redraw whenever it updates.

This was annoying to me as I have my dash on a large wall hanging display.

Ultimately, the only solution I found that did everything I needed was to simply use conditional cards.

I had to create a conditional card for each value of the input_select:

- type: conditional
    conditions:
      - condition: state
        entity: input_select.hours_of_tracking_to_show
        state: 2 Hours
    card:
      hours_to_show: 2
      type: map
      entities:
        - entity: person.user1
        - entity: zone.home
        - entity: zone.work
        - entity: person.user2
      theme_mode: auto
      default_zoom: 13
- type: conditional
    conditions:
      - condition: state
        entity: input_select.hours_of_tracking_to_show
        state: 1 Day
    card:
      hours_to_show: 24
      type: map
      entities:
        - entity: person.user1
        - entity: zone.home
        - entity: zone.work
        - entity: person.user2
      theme_mode: auto
      default_zoom: 13

When you are in edit mode, it will look like you have a bunch of duplicate cards, but in view mode only the card(s) that meet the conditions appear. This method also had the added bonus of allowing me to use more readable values in the drop down and then convert them to hours in the map - i.e. my drop down has values like 1 Day and this displays a map with hours_to_show: 24.