Lovelace: Banner card

Jay-uk · August 17, 2019, 8:53pm

Hi - firstly thanks for such an awesome card, it really helps to build an amazing lookign interface - I created a bunch of gradient images for the backgrounds and it looks amazing.

I’m having a problem with my input_boolean’s though - none of them render as toggles. I’m using version 0.7.0 - is there some special configuration in the card code I need to help it along?

Cheers!

Edit - I’ve love to be able to say how or why, but after a HASS restart this mysteriously started working! Thank again for the awesome card!

Edit #2 - since the input_boolean is now rendering as a toggle, the Map_state function no longer works - seems it got broken somehow - let me know if sharing any info/configs might help pin that one down!

Tombstone · August 18, 2019, 12:08pm

@nervetattoo love you work you have done. Just have one question but don’t know how to explain. If you have a look at my picture of the cards. I have run out of room for my titles for the entities. Is there a way to have double lines… So it would be greenhouse first line and second line would be water.

Pirol62 · August 18, 2019, 12:51pm

I would use the name and shorten the the title: GH Water.

- entity_id: your sensor
  name: 'GH Water'

“Sprinkler Timer” could be “Timer” besauce Sprinkler is a double info

nervetattoo · August 19, 2019, 8:08am

When you have a toggle you can’t really use map_state for much because it will always render as a toggle. After 0.7 you might be able to do some wacky stuff to control this on a per-state basis, but I wouldn’t recommend doing this:

map_state:
  'on':
    domain: sensor
    value: Something
  'off':
    domain: input_boolean

Without actually testing and verifying I’m guessing that would conditionally show a toggle or just a value

nervetattoo · August 19, 2019, 8:11am

Do what @Pirol62 suggests, thats what I would do.
Supporting line wrapping would make the titles and values lose their alignment and mess up readability and scannability, which is why I’ve forced this heading to not wrap. Find ways to solve within the constraints instead of trying to find ways to break them, they are there for a reason

Jay-uk · August 19, 2019, 9:29am

Hi @nervetattoo,

Sorry, I should have been clearer; I’m not trying to map states of the toggles, but other entities on the page, where it no longer works.

For example, see the screenshot (see specifically the “Motion” tile)

And the code here:

background: '#79F0FD'
entities:
  - entity: light.landing
    name: Light
  - entity: sensor.landing_motion_temperature_measurement
    name: Current Temp
  - entity: binary_sensor.landing_motion_motion
    map_state:
      'off': 'mdi:walk'
      'on': 'mdi:run'
    name: Motion
heading: "\U0001F6EC Landing"
type: 'custom:banner-card'

Before the input_boolean as toggle was working, these states were mapped fine on the Motion sensor, since the toggle rendered properly, the mapping no longer works.

Cheers - Jay.

Pirol62 · August 19, 2019, 9:34am

Hmmm… that’s what I do and it works:

      - entity: binary_sensor.motion_motion_schlafzimmer
        map_state:
          'off': 'mdi:human-male'
          'on': 'mdi:run'
        name: Bewegung

But now I’m totally confused.
I’m on the latest version0.7.0 with 0.97.1.
My input_boolean stays as value on/off and not as a toggle. My map_state works ?!?!

Jay-uk · August 19, 2019, 10:11am

Same issue - my input_boolean didn’t render as toggles, until i did a restart of HASS (might not be related, but thats when it started working) and since then, the state mapping stopped working

Pirol62 · August 19, 2019, 10:49am

Interesting. I restarted this morning due to new sensors. But the banner card behavior stayed as described. The card seems to have a random behavior due to location

nervetattoo · August 19, 2019, 10:50am

So there is one thing to always ensure after an upgrade of a card: Make sure its not cached!! Clearing browser cache is the dead-certain way of doing this that I would recommend if something doesn’t quite work.

When it comes to map_state not working I can confirm I broke it and will release a fixed version very shortly.

nervetattoo · August 19, 2019, 11:29am

0.8 released with map_state fixed again

bussio · August 19, 2019, 12:07pm

However, the following statement does not work:

        map_state:
          'on': auf
          'off': zu

Jay-uk · August 19, 2019, 7:13pm

I’m also not seeing the map_state fixed in 0.8 - did a force cache and reload and still the same I’m afraid.

photo64 · August 19, 2019, 9:17pm

Couple of styling questions:

Is there a way to change the color of the text ? Everything I tried using the card-mod tool didn’t seem to work and the only text color I get is white text even against light backgrounds. Am I able to change it to a dark color?
Is it possible to change the opacity of the background? Again I tried a few things using the card-mod tool but it didn’t seem to change.
** edit - I was able to finally figure this out but still stuck on getting the text color to change

nervetattoo · August 20, 2019, 5:13am

Automatic color (light/dark) came in 0.7, if it doesn’t work then you are dealing with browser cached older version.
In 0.8 you can set color: <a color> to manually define the main heading color. The rest of the text and icons stays white however.

SNoof85 · August 21, 2019, 8:09pm

Hey !
Really love this one ! Just a question, i’m replacing some entities card with this one. In entities card i was used to use some toggle lock from toggle-lock-entity-row but it’s not working in that card. I’m not sure if it’s from this card side i should ask but i have to start somewhere

Thx for advice !

Edit : i know i’m just asking for a custom element to support another custom element. This is not really easy because if thomas changes anything in his custom card, it can break stuff on yours and vice versa.
Maybe you could also add your own featured lock in the banner card

ideal2545 · August 21, 2019, 10:41pm

Trying to figure out how to make multiple actions work for my locks

trying to do something like this:

  - entity: lock.garageinside_deadbolt_locked
    map_state:
      locked: 'mdi:lock'
      action: lock.unlock
      unlocked: 'mdi:lock-open'
      action: lock.lock

basically two actions, the icon shows a lock, and if you tap it, it unlocks and shows unlocked icon, but i can’t figure out a good way to get two actions in, at the moment can only do one. I tried using the when unlocked: action locked (to put it quickly) but didn’t have much luck. Is this possible? Im thinking maybe my logic is just weird?

Pirol62 · August 22, 2019, 5:29am

From my understanding, the map_state is just for mapping a certain state into something else which should be displayed. Transform a word into another or into an icon.
the action is an own key_word and cannot be used inside the map_state section.

- entity: your.entity
  map_state:
      1: display this
      2: display that
  action:
     service: your.script or automation

nervetattoo · August 22, 2019, 11:05am

That was correct, but recently I added support for overriding everything in map_state. Though, most of the combinations are untested and I probably won’t spend time actively supporting weird contortions

You should be able to do this:

- entity: <entity>
  map_state:
    locked:
      value: mdi:lock
      action: something

ideal2545 · August 22, 2019, 5:01pm

thanks for the help!