A different take on designing a Lovelace UI

Mattias_Persson · December 27, 2020, 1:58pm

you missed class: sidebar and use custom:hui-markdown-card

- type: custom:hui-markdown-card
  class: sidebar
  style:
    {top: 9%, left: 11.1%}
  content: >
    <span>{{ states('sensor.time') }}</span>
    ...

card-mod class in themes.yaml

.sidebar {
  font-size: 1.5vw;
  font-weight: 300;
  opacity: 0.75;
  width: 15.5vw;
  height: 1px;
}

the clock is styled card-mod-card-yaml:

...
ha-markdown-element>p>span {
  font-family: SF Text;
  font-size: 5vw;
  font-weight: 200;
  margin-left: -0.3vw;
  letter-spacing: -0.05vw;
}

also add “markdown fix” in ui-lovelace.yaml

# markdown fix
- type: custom:hui-element
  card_type: markdown
  style: {opacity: 0}
  content: preload

profit

Martin_Pejstrup · December 27, 2020, 2:59pm

Another question @Mattias_Persson. I see you have changed some files in your browser mod custom component. Do you recommend to integrate them as well and could that be the reason for all my popups have lost the styling?

Martin_Pejstrup · December 27, 2020, 3:00pm

Great spotted. And great explanation. Thanks!

But still no luck, I have also changed the hui-markdown-card and both themes.yaml and markdown fix was already integrated.

title: Hjem
views:
  - panel: true
    path: default_view
    cards:
      - type: picture-elements
        image: /local/background.png
        elements:
        
          # markdown fix
          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload        

          ##########################################################################
          #                                                                        #
          #                              * Sidebar *                               #
          #                                                                        #
          ##########################################################################

          - type: image
            image: local/sidebar.png
            tap_action:
              action: none
            hold_action:
              action: none
            style:
              {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}

          #################################################
          #                                               #
          #                  * Markdown *                 #
          #                                               #
          #################################################

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

Thanks in advance

Mattias_Persson · December 27, 2020, 3:03pm

Have you updated card-mod?

Martin_Pejstrup · December 27, 2020, 3:05pm

Yes, all should be fully updated.
Card-mod is 2.0.3

Mattias_Persson · December 28, 2020, 12:37pm

What exactly do you mean by this?

Is your themes.yaml actually included in configuration.yaml and have you selected the theme in the ha UI?

Martin_Pejstrup · December 28, 2020, 2:09pm

I was browsing your folders and spotted that there where changes in your browser_mod folder.

If I ex. look at services.yaml I have this:

command:
  description: Send a command to a browser
  fields:
    command:
      description: Command to send
      example: 'navigate'
    deviceID:
      description: List of receiving browsers
      example: '["99980b13-dabc9563", "office_computer"]'

And you have

You’re right, that was changed in the UI.
Then my main issue is the Person pop-up:

I tried to changed from yours a little, into this:

              action: call-service
              service: browser_mod.popup
              service_data:
                title: Martin
                deviceID: this
                style:
                  .: |
                    :host .content {
                      height: 675px;
                    }                
                card:
                  type: custom:stack-in-card
                  cards:
                    - type: entities
                      state_color: true
                      show_header_toggle: false                    
                      entities:       
                      
                        - entity: person.martin
                          secondary_info: last-changed
                          
                    - type: entities
                      entities:
                        - entity: sensor.viessmann
                          icon: mdi:calculator
                        - entity: sensor.hjem_map
                          icon: mdi:castle
                          name: Hjem

                        - type: custom:hui-element
                          card_type: glance
                          show_state: false
                          style:
                            .: |
                              ha-card {
                                background: none;
                                box-shadow: none;
                              }
                            "ha-card>div>div:nth-child(1)":
                              $:
                                "state-badge":
                                  $: |
                                    ha-icon {
                                      color: {{ '#3182b7' if is_state('device_tracker.martin', 'home') else '#FFFFFF20' }};
                                    }
                            "ha-card>div>div:nth-child(3)":
                              $:
                                "state-badge":
                                  $: |
                                    ha-icon {
                                      color: {{ '#3182b7' if is_state('device_tracker.martins_iphone_2', 'home') else '#FFFFFF20' }};
                                    }

                    - type: custom:hui-element
                      card_type: map
                      class: map
                      entities: [device_tracker.martins_iphone_2]
                      default_zoom: 15

Can you spot my mistake?

Mattias_Persson · December 28, 2020, 2:46pm

browser mod is just updated in hacs, I have not changed anything in the integration.

I guess the person popup issue is related to stack-in-card 0.2.0, I downgraded to the previous version, until I have time to figure out what broke the styling

LocoLoco · December 29, 2020, 7:16am

Very nice,

How do you did it with the rainforcast?

Martin_Pejstrup · December 29, 2020, 8:32am

Downgraded as well. Didn’t fix it.
Unless you see something wrong, I’ll keep trying myself.
Thanks for your help

I’ll be back again
Right now I’m still working on getting my Velux covers up and running and I want to integrate my Nilan ventilation and Wavin floor heating.

FYI above problem with the markdown is also fixed. Found a typo after changing to hui-markdown-card

basti4k · December 29, 2020, 9:16am

hi @Mattias_Persson and thanks for the very nice theme and inspirations!

how can i build/style the popup “close” Button outside from the Popup-Item?
And with Name?

Thanks!

Mattias_Persson · December 29, 2020, 11:39am

Just to prove a point I upgraded. Remember stack-in-card and do a hard refresh.

Mattias_Persson · December 29, 2020, 11:41am

basti4k · December 29, 2020, 12:18pm

yes i check this.

here the “Close” buttons:

Martin_Pejstrup · December 29, 2020, 12:49pm

You are right. I was wrong. The hard refresh was needed…
Thought frontend HACS didn’t need that.

Thanks again Matthias! For your patience and help.

andrew47 · December 29, 2020, 2:13pm

Hi Mattias,
Thanks for sharing this great design.
Does someone get the sliders to work on a iPad or iPhone?
I use google or alexa to turn on lights and so but sometime I use the iPad to dim.

Martin_Pejstrup · December 29, 2020, 4:16pm

Hi Matthias

Another question.
How would you make the Sonos and Apple TV icon appear when there’s a cover on the button card?
2020-12-29_17h15_05

LocoLoco · December 29, 2020, 8:25pm

Hi Mattias,
Great design.

I have a question,
How do you get Entities card and a Bar card in line?
I have try it in 2 different way’s, but get the same result.
The icon and the name of te entity of the bar card stands more to the left than the Entities card.
How can I fix this?

Mattias_Persson · December 29, 2020, 8:40pm

github.com

matt8707/hass-config/blob/234067f1b720eaba55f44639ce6e4a1cc1ff46ed/include/themes.yaml#L303


  padding: 1.4px;
  width: 15em;
}

/* * * * * * * * * * * * * * * * * *
 *                                 *
 *            BAR CARD             *
 *                                 *
 * * * * * * * * * * * * * * * * * */

.type-custom-bar-card bar-card-name {
  padding-left: 0.25em;
}

.type-custom-bar-card bar-card-iconbar {
  padding-left: 0.23em;
}

.type-custom-bar-card bar-card-value {
  margin-right: auto;
  color: #e0e1e1;

Mattias_Persson · December 29, 2020, 8:47pm

I think I did it that way because otherwise the icon covers too much

basically opacity is set to 1 or 0 depending on cover art

github.com

matt8707/hass-config/blob/234067f1b720eaba55f44639ce6e4a1cc1ff46ed/button_card_templates.yaml#L164


      if ((entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby') && (entity.attributes.entity_picture == null)) {
      return 'rgba(0, 0, 0, 0.6)'; } else { return '#efefef'; } ]]]", 
      text-shadow: "[[[ if (entity.attributes.entity_picture == null) return 'none'; 
      else return '1px 1px 5px rgba(18, 22, 23, 0.9)' ; ]]]"]

media:
  template: ['base', 'shared_media']
  styles:
    custom_fields:
      icon:
        [opacity: "[[[ return entity.attributes.entity_picture == null ? 1 : 0; ]]]", 
        top: 11.5%, left: 11.5%, width: 2.9vw, position: absolute, fill: '#9da0a2']
    card:
      [background-color: none, background-size: cover,
      background-image: 
      "[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby' || 
      entity.state === 'unknown' || entity.state === 'unavailable') {
      return 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)'; }
      if ((entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby') && (entity.attributes.entity_picture == null)) {
      return 'linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%)'; }
      else { return 'linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%), url(' + entity.attributes.entity_picture + ')'; } ]]]"]