A different take on designing a Lovelace UI

HI,

which font-family you use? here my grafik

yours looks better :slight_smile:

thy

I have added the fonts Mattias uses in his design. They are placed in www/fonts and it is the families of SF-Mono, SF-UI-Display and SF-UI-Text.

1 Like

hmm i have the same config and fonts but looks different

Aah. That’s it. Wasn’t aware of that. Thanks

can someone please tell me how I do the red update notification, like the picture…image

Well, since today update, my custom css classes stoped working. Anyone with this problem?

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

The syle file:


card-mod-card: |
  ha-card {
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .card-header {
    margin: -0.5em 0 1.1em 0.4em;
    font-family: SF Text;
    letter-spacing: 0.005em;
    font-size: 1.5em;
  }
  /* * * * * * * * * * * * * * * * * *
    *                                 *
    *              TYPES              *
    *                                 *
    * * * * * * * * * * * * * * * * * */
  ha-card.type-entities {
    background: none;
    padding: 0.3em 1.25em 0.4em 0.5em;
  }
  ha-card.type-custom-stack-in-card {
    background: none;
  }
  ha-card.type-history-graph {
    margin: 0.8em -1.9em -1.5em -0.8em;
  }
  ha-card.type-custom-hui-markdown-card {  
    font-family: SF Display;
    line-height: 2.05vw;
    letter-spacing: 0.06vw;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
  }
  /* * * * * * * * * * * * * * * * * *
    *                                 *
    *             CLASSES             *
    *                                 *
    * * * * * * * * * * * * * * * * * */
  ha-card.add_header {
    background: linear-gradient(180deg,
      var(--card-header) 0%,
      var(--card-header) 4.6em,
      var(--card-color) 4.6em,
      var(--card-color) 100%);
    border-radius: 1em;
  }
  .sidebar{
    font-size: 1.3vw;
    font-weight: 300;
    opacity: 0.75;
    width: 15.5vw;
    color: red;
    height: 1px;
  }
  .relogio{
    font-family: SF Text;
    font-size: 5vw;
    font-weight: 200;
    letter-spacing: -0.05vw;
    color: red;
  }

Nope. Check if the tablet theme in http://url:8123/profile is selected.

Don’t use it anymore but it’s a conditional image

Thanks for the post, great ideas, almost done with a minimal layout for a 7 inch tablet that goes on the wall

Only thing i haven’t been able to do is make the image of what is playing appear in the circle on top of the music card, where the icon normally would go. The image option is a hardcoded url that works if i put it in with quotes “”, but it changes with every image. I want to pass the attribute of the variable doing states.entity_id.attributes.media_url but i haven’t been able to make it work even tho i tried a bunch of variations of the code.

Hi guaro2k,

have you a code for your Temp and Humidity?

Looks great.

You can install the custom:mini-graph-card and just call it when you are calling the entity.

so, after “entities:” instead of calling - entity: entity.id just do - card: ‘custom:mini-graph-card’, see example bellow

padding helps to give a little more space for all the data, check the mini-graph-card add-on for other cool options, I haven’t tried all of them in this HomeKit implementation, I’ve found that not all addons options work

  - card: 'custom:mini-graph-card'
                noPadding: true
                cardOptions:
                  name: Humidity
                  entities:
                    - sensor.rm4_humidity
              - card: 'custom:mini-graph-card'
                noPadding: true
                cardOptions:
                  name: Temp
                  entities:
                    - sensor.rm4_temperature

Has anyone configured speaker groups and synced volume under this design? I haven’t been able

im using this add-on and code:

 - type: 'custom:mini-media-player'
                sync_volume: true
                entity: media_player.living_room
                name: Music
                image: >-
                  {{ state(media_player.living_room.attributes.entity_picture)
                  }}
                speaker_group:
                  platform: sonos
                  show_group_count: true
                  artwork: full-cover
                  sync_volume: true
                  expanded: false
                  entities:
                    - entity_id: media_player.Living_Room
                      name: Sonos Play
                    - entity_id: media_player.Living_Room_2
                      name: Sonos SL
                      sync_volume: true

Check my plex in ui-lovelace. It’s possible that you had the template working but your css was off. Try setting it as a background or something like that first.

styles:
  custom_fields:
    media_image: &plex_poster
      [background-position: center center, background-image: 
      "[[[ return 'url(' + states[entity.entity_id].attributes.data[1].fanart + ')'; ]]]"]

Mattias, how to install it? I cant find any discription.

Verry nice work on the cover. I try to copie it but can’t get it to work :thinking:
Where did you place this? In the button card template or did you create a new one?
How did you place it in youre ui-lovelace.yaml?

Good evening,

I added your sidebar_active to me, so where should be shown which lights are still on. but unfortunately I only get the status unavailable …side active

state

Use the configuration as inspiration. It is not plug and play.

Yes i have found it. Thx!

Do you do this in the button card cause I don’t get it to work.

                  - type: custom:button-card
                    entities:
                      - card: "custom:mini-graph-card"
                        noPadding: true
                        cardOptions:
                          name: Humidity
                          entities:
                            - sensor.tunex_b301_hum
                    name: Vardagsrum Temp
                    style:
                      width: 10%
                    custom_fields:
                      icon_lamp: >
                        <ha-icon icon="mdi:thermometer"></ha-icon>
                    styles: *icon_lamp_styles
                    template: base
                    tap-action:
                      action: more-info

this looks nice, I haven’t had success getting mine to display like this, I think it because im using home kit card and it kind of works a little different than mattias implementation.

But all in all this post was exactly what I needed to create a minimalistic dashboard