A different take on designing a Lovelace UI

VPC · June 20, 2020, 11:43am

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

and this when on

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

thanks!!

lucibuz · June 22, 2020, 7:30am

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.

Mattias_Persson · June 22, 2020, 11:30am

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.

Mattias_Persson · June 22, 2020, 11:43am

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

VPC · June 22, 2020, 11:44am

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!

Mattias_Persson · June 22, 2020, 12:11pm

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.

VPC · June 22, 2020, 12:11pm

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]

Frank_Hagenbuch · June 22, 2020, 12:35pm

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?

Mattias_Persson · June 22, 2020, 3:38pm

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

Mattias_Persson · June 22, 2020, 3:40pm

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

Frank_Hagenbuch · June 22, 2020, 4:06pm

Yes

lucibuz · June 22, 2020, 6:23pm

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?

Mattias_Persson · June 22, 2020, 7:16pm

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.

lucibuz · June 22, 2020, 7:22pm

Thanks for clarifying.
I’ll look into it.

VPC · June 23, 2020, 11:40am

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!!

Mattias_Persson · June 23, 2020, 12:14pm

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

VPC · June 23, 2020, 12:19pm

THANK YOU

That is helpful for me

damiantje99 · June 23, 2020, 1:19pm

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?

Mattias_Persson · June 23, 2020, 1:36pm

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

damiantje99 · June 23, 2020, 1:44pm

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

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.