A different take on designing a Lovelace UI

I have an input_boolean wired up to a button card which allows people to request a beer. These buttons are on most panels in the house.

Use case is if you are in the garage working and come to a stopping point and would like to have a beer on the front porch. Since likely you are covered in sawdust after working in the garage you can’t come in yourself and get the beer. Once turned on the panels in the house say “A beer has been requested on the front porch”. The person inside can turn off the button and the panels say “Your beer is on the way!”. They bring out the beer and of course one for themselves as well!

This is all working. My question is around styling of the button itself.

When “on” I would like the button to have the color of a german pilsner instead of the usual white like it is now.

I have not modified the configuration in this repo. I have the following

          - type: custom:button-card
            entity: input_boolean.beer_requested_front_porch
            name: Front Porch
            style:
              top: 60.45%
              left: 63.31%
              width: 10%
            tap_action:
              action: toggle
            custom_fields:
              icon: >
                [[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
                return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
                if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
                return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
            styles: 
              custom_fields:
                icon:
                  [top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
            template: switch

Which gives this when off

image

and this when on

image

How can I override the default of the soft white background of the “on” button to a soft yellow?

thanks!!

1 Like

Hi Mattias,
How you manage to send command to turn ON the Samsung TV? I know it doesn’t work with Samsung integration.
Thanks for your help.

HDMI-CEC. I let apple tvs to turn on my tvs. I use this automation, that way it’s still a tv in homekit, but when I turn it on it also send a apple tv remote command to wake up.

  - alias: turn_on_tv2_fail_safe
    initial_state: true
    trigger:
      - platform: event
        event_type: call_service
        event_data:
          domain: media_player
          service: turn_on
          service_data:
            entity_id: media_player.samsung
    action:
      - service: remote.send_command
        data:
          entity_id: remote.sovrum
          command: menu

You can also use the smartthings integration (samsung iot) to turn on the tv, and I guess use it in a similar way that I have with this automation.

1 Like

You overwrite values ​​from the template when you define them. So either

styles:
  card: 
    - background-color: >
        [[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
        ...

or

state:
  - value: 'on'
    styles:
      card:
        - background-color: yellow

I am looking to create different background images to use in my project. I’m currently using the background that comes with this excellent repo. I would like to lighten up a few of my panels with a light grey / white / light blue background.

I’m on a Mac and currently have the app called Logoist. I would buy the Pixelmator app if required. Can anyone help me with how to create a new background image. I like how the colors blend together in the current background image. I have no idea how to create this by myself.

Another question. In this repo everything is laid out with percentages, left / top etc. How are they determined? Trial and error or using a graphics package? I ask as I recently did a 7" portrait panel and that was trial and error to get the button placement.

Thank you!

Illustrator has a gradient mesh tool. The easiest way, if you don’t want to create on from scratch, is to pick a background gradient blur background - Google Search and I bet you can change hue/color/contrast with free apps like gimp.

Yes, trial and error. Initially created the layout in photoshop as background and placed sliced out images on top to get a rough position. Then It’s bascially trial and error and measuring in photoshop from screenshots.

3 Likes

Thanks for the help. I have tried both methods but neither is overriding the on color for me.

Option 1


          - type: custom:button-card
            entity: input_boolean.beer_requested_front_porch
            name: Front Porch
            style:
              top: 60.45%
              left: 63.31%
              width: 10%
            tap_action:
              action: toggle
            custom_fields:
              icon: >
                [[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
                return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
                if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
                return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
            styles: 
              custom_fields:
                icon:
                  [top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
            state:
              - value: 'on'
                styles:
                  card:
                    - background-color: yellow
            template: switch

Option 2 (button does not show at all - I must have syntax error)




          - type: custom:button-card
            entity: input_boolean.beer_requested_front_porch
            name: Front Porch
            style:
              top: 60.45%
              left: 63.31%
              width: 10%
            tap_action:
              action: toggle
            custom_fields:
              icon: >
                [[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
                return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
                if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
                return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
            styles: 
              custom_fields:
                icon:
                  [top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
              card:
                background-color: >
                  [[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
                  return 'grey'; }
                  if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
                  return 'yellow'; }]]]
            template: switch


This is what is in the switch template

  switch:
    aspect_ratio: 1/1
    show_state: true
    show_icon: false
    state: *button_state
    styles:
      name: *button_styles_name
      state: *button_styles_state
      card: *button_styles_card
      custom_fields:
        loading:
          [filter: "[[[ return entity.state === 'off' ? 'invert(1)' : 'none'; ]]]", 
           top: 2%, left: 60%, width: 3.7vw, position: absolute, opacity: 0.6]

Hi, I have look on your Repo and go your way with the Include Folder. I have also update the Themes yaml in it.
Now, I have two things I don’t find why.

All my buttons show the icon blue when they are off and yellow when on.
And, my font color on the Information Popup is turned to a dark color so I don’t see it.

I searched for hours now , but I can not see what I have wrong. It’s also when I use your complete Lovelace-UI.yaml.

In your Repo you say you have „splitt“ the theme.ymal?image

Did you specify this in theme.yaml because that will be merged into configuration.yaml if you use packages: !include_dir_named include

frontend:
  themes:
    ...

Yeah, I don’t know. If it’s a one-off button skip the template: switch part and just do it the “normal” way.

Yes :unamused:

Thanks for your reply.
Let me know if I got this correct, your apple tvs are connected over HDMI inputs to your TVs (yout TVs support HDMI-CEC protocol) commands are sent over the homekit integration to your apple tvs.
If so, this is accept just for apple products (like apple tv) or can be replicated to a fire tv stick?

Yes

No. Commands are sent from HA to apple tv. The automation is only to retain the tv device class in homekit. Ignore if you don’t use that.

If both tv and fire stick supports hdmi-cec then sure. HA turns on fire stick, fire stick turns on tv. But like I said. there’s also the smartthings integration which can turn on your tv with samsungs api.

Thanks for clarifying.
I’ll look into it.

Just to take a step back from this…

I know my configuration is yaml but what language am I in? I’m almost sure that yaml is just the formatting (like xml) right???

For example,

icon: >
                [[[ if (states['group.window_sensor_group'].state === 'on') {
                return '<f

what language is the [[[ and then the { }?

I want to learn a good background on this language as I up until now have just been copying code from other places and implementing it. I would like to be able to write my own from scratch. I’m not sure what resources everyone have used to learn.

Another example of “I don’t know what this is doing” is

        style:
          .: |
            /* Global */
            #root > hui-icon-element {color: rgba(255, 255, 255, 0.1) !important; transition: 0.4s;}
            #root > hui-icon-element:hover {color: rgba(255, 255, 255, 0.25) !important; transition: none;}
            #root > hui-icon-element:active {color: rgba(255, 255, 255, 0.35) !important; transition: none;}
          "#root > hui-element > hui-markdown-card":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}
              ha-card > ha-markdown > p > font > ha-icon {margin-bottom: 0.15%; opacity: 0.6;}
              ha-card > ha-markdown > p > span {font-family: DB Sans Comp; font-size: 5vw; 
              font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
          "#root > hui-state-label-element":
            $: |
              div {padding: 0 !important;}

What is the .: | ?

Is the /* a comment? Why not the usual # ?

What is the | I have in my code doing?

style: |
               :host {
                 left: 11.6%;
                 top:  92.9%;
                 width: 23.5%;
                 overflow: hidden;
                 height: 15%;
                 background: none  !important;
                 box-shadow: none !important;
               }

Thank you for any guidance to resources and let me know the language I’m in!!

Inside [[[ … ]]] is javascript.
https://github.com/custom-cards/button-card

I guess a mix of yaml and css
#root > hui-element > hui-markdown-card this part is css but the key itself is yaml.
https://github.com/thomasloven/lovelace-card-mod

“a key of . [is] the current element.”
current element > yaml colon > multiline string
https://github.com/thomasloven/lovelace-card-mod

That’s a css comment. # is yaml/python

In short yaml multiline strings
https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-over-multiple-lines

3 Likes

THANK YOU

That is helpful for me

How does it determine the size of the screen? If I open the page on my PC, it doesnt fit (to large) but if I scale the window smaller, it looks fine.

Is there something in the code thats causing this?

Using relative lengths like % or vw instead of px, etc…
https://www.w3schools.com/cssref/css_units.asp

1 Like

Thank you! One more question, if u don’t mind :slight_smile:

The font you use, I can’t get it to work on my PC/browser. On my mobile and tablet its the right font, but elsewhere its like a real old-school font.