Lovelace Soft UI - Simple and Clean Lovelace Configuration

Share your Projects! Dashboards & Frontend
310

Actual @KTibow, this SoftUI helps us to create an awesome and clean dashboard.
I think because this is in Portuguese you didn’t notice that all my sensors and switches have custom On and Off messages as well as custom icons

I use the soft ui with combination of custom:button-card, grids, templates and CSS styles.

Then i used 2 main templates and 1 auxiliar template

  • main_style - Just for defination of the general button style
  • cover_style - Define the grid for the covers buttons (Up, Down and Stop)
  • cover_inside_button - Auxiliar template for the inside cover buttons

I have this defined on the lovelace raw code

  main_style:
    styles:
      img_cell:
        - padding-left: 25px
        - padding-bottom: 15px
        - justify-content: start
      card:
        - width: 'min(37vw, 170px)'
        - height: 'min(35vw, 150px)'
        - border-radius: 15px
        - border-style: solid
        - border-color: var(--primary-background-color)
        - background-color: var(--primary-background-color)
        - border-width: 2px
        - margin: 3px 20px 3px 3px
        - box-shadow: >
            [[[ return '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px
            rgba(0, 0, 0, .09)' ]]]
        - font-family: 'Google Sans, Roboto'
        - font-weight: 500
      name:
        - justify-self: start
        - font-size: 18px
        - font-weight: 400
        - align-self: center
        - text-align: left
        - padding-left: 15px
        - opacity: 0.5
        - color: var(--primary-text-color)
      icon:
        - color: var(--primary-icon-color)
        - justify-self: start
        - align-self: start
        - opacity: 0.5
      state:
        - justify-self: start
        - font-weight: normal
        - font-size: 14px
        - opacity: 0.6
        - padding: 0 15px 5px
        - color: var(--primary-text-color)
        - opacity: 0.5
      label:
        - justify-self: start
        - font-weight: normal
        - font-size: 14px
        - opacity: 0.6
        - padding: 0 15px 5px
        - color: var(--primary-text-color)
        - opacity: 0.5
  cover_style:
    show_label: true;
    show_state: false
    variables:
      sensor_name: ' '
    label: |
      [[[ return (states[entity.entity_id].attributes.current_position)+'%' ]]]
    hold_action:
      action: more-info
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-areas: '"i top" "i stop" "n bottom" "l l"'
        - grid-template-rows: 1fr 1fr 1fr min-content
        - grid-template-columns: 2fr 1fr
    custom_fields:
      top:
        card:
          type: 'custom:button-card'
          entity: null
          icon: 'mdi:arrow-up-circle-outline'
          template: cover_inside_button
          tap_action:
            action: call-service
            service: cover.open_cover
            service_data:
              entity_id: '[[[ return entity.entity_id ]]]'
      bottom:
        card:
          type: 'custom:button-card'
          entity: null
          icon: 'mdi:arrow-down-circle-outline'
          template: cover_inside_button
          tap_action:
            action: call-service
            service: cover.close_cover
            service_data:
              entity_id: '[[[ return entity.entity_id ]]]'
      stop:
        card:
          type: 'custom:button-card'
          entity: null
          icon: 'mdi:stop-circle-outline'
          template: cover_inside_button
          tap_action:
            action: call-service
            service: cover.stop_cover
            service_data:
              entity_id: '[[[ return entity.entity_id ]]]'
  cover_inside_button:
    size: 70%
    show_icon: true
    show_name: false
    styles:
      card:
        - width: 30px
        - height: 30px
        - margin: 5px
        - border-radius: 20px
        - box-shadow: >
            [[[ return '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px
            rgba(0, 0, 0, .03)'; ]]]
        - background-color: var(--primary-background-color)
      icon:
        - color: '#b473f5'
          opacity: 1

And then i just create a custom button card

entity: cover.cover1
name: Kitchen
icon: 'mdi:blinds'
template:
  - main_style
  - cover_style
type: 'custom:button-card'

The HEX color codes that i mainly use are:

  red: "#d62b5b"
  yellow: "#f7bf42"
  green: "#60eb60"
  blue: "#46bdea"

Regarding the buttons, just for you have an ideia

entity: switch.switch_light_garage
name: Light
template:
  - main_style
  - button_grid
  - button
type: 'custom:button-card'
variables:
  icon_on: 'mdi:lightbulb-on-outline'
  icon_off: 'mdi:lightbulb-off'
  message_on: 'Attention, light is on'
  message_off: Off
  color: var(--yellow)
3 Likes
311

This looks amazing! Congratulations!

PS- you have a typo in the status of “Portão” :stuck_out_tongue:

1 Like
313

Yes, is exactly the same as the garage light but with different variables
My goal was to create this dashboard the easiest way possible but at the same time the most customized way

entity: switch.switch_portao
name: Portão
template:
  - main_style
  - button_grid
  - botao
type: 'custom:button-card'
variables:
  icon_on: 'mdi:garage-open'
  icon_off: 'mdi:garage-variant'
  message_on: Aberto
  message_off: Fechado
  color: var(--yellow)

image

314

Hi comments for your work I saw the new code you put in and I wanted to ask you for the temperature and humidity in one tab how did you do?
Can you attach example or code?

315

Hello, Somehow when I enable yaml mode for lovelace, my header with the tabs disappear, specifically while using soft UI

I’m just running some tests, this is what I currently have in my ui-lovelace.yaml

title: Lovelace
views:
  - title: Main
    badges:
      - binary_sensor.ha_update_avail_template
      - binary_sensor.haapi_mqtt_test
    cards:
  - title: Media Players
    cards:
      - type: media-control
        entity: media_player.chromecastaudio1984
      - type: media-control
        entity: media_player.computer_room_dot
  - title: Environment
    cards:
      - type: entities
        title: Severe Weather Alerts
        entities:
          - sensor.pws_alerts
          - sensor.pws_location
316

What theme are you using?

317

Is this just happening to me or is there any problem in the latest version of HA with markdown cards? The loading time after a refresh takes much longer than before. Anyone else with same issue?

318

I’m using Light Soft UI and Dark Soft UI depends on the time

319

Does Dark Soft UI have the same problem?

320

Just the Light theme

321

Go to HACS > integrations > 3 dots next to Light Soft UI > Reinstall > main.

322

That did it, thank you so much

323

It seems to be working fine for me. I’m on HA 2020.12.1 Have you tried rebooting etc.

324

Somehow as soon as i start adding some cards, the tabs disappear again in both themes. This is what I have:

On my ui-lovelace.yaml:

title: HASS

# Lovelace views, all the views are inside the views folder

views: !include_dir_merge_list views/

On my only view file I have the following:

- title: ""
  icon: mdi:lightbulb
  badges:
    - binary_sensor.ha_update_avail_template
    - binary_sensor.haapi_mqtt_test
  cards:
    - entity: switch.some_entity
      icon: mdi:lightbulb
      name: Luz
      size: 35%
      styles:
        img_cell:
          - padding-left: 15px
          - justify-content: start
      type: "custom:button-card"

Am I missing something?

325

And not in the default theme?

326

Yes, it is the default theme

327

Never mind, I think i got it. If there’s only one tab it doesn’t show anything, if there’s more it starts to show them. I’m sorry still a total noob here.

328

Hello @claudiovillani58
I’ve uplade the code to Git, you can check very configuration that i have.

1 Like
329

You wil need to instal this via HACS

I’m a bit confused. Did you mean to link to both GitHub - qiz-li/lovelace-soft-ui: 💫 Simple and clean Lovelace configuration and https://github.com/KTibow/light-soft-ui-theme?

330

Thank you !!! :smiley:

1 Like