A different take on designing a Lovelace UI

Wow!!! Willing to share your code?

Will share my hass-config via Github asap. I will make a new topic when finished :wink:. I will tag you in that topic. Thanks!

3 Likes

Thank you! I will try to test it.

hi… can someone please help me, i am trying to add my custom:atomic-calendar-revive to the sidebar, but I cannot get it right, the calendar goes on top of the sidebar, have grid-area set to sidebar, how du I make appear after the markdown??

I have two icons for my curtains. How can I make it change from one icon to the other when open or closed? I don’t need animation - just want it to change icon

I tried this in the switch.yaml but it gives me no icon at all:


  - platform: template  
    switches:
      rullegardin:
        friendly_name: "Rullegardin"
        value_template: '{{ is_state("cover.rullegardin", "open") }}'
        turn_on:
        - service: cover.open_cover
          target:
            entity_id: cover.rullegardin
        turn_off:
        - service: cover.close_cover
          data:
            entity_id: cover.rullegardin 
        icon_template: >-
          {% if is_state('switch.rullegardin', 'on') %}
            mdi:blinds-open
          {% else %}
            mdi:blinds
          {% endif %}

In the lovelace it looks like this:


          - type: custom:button-card
            entity: switch.rullegardin #hue_group
            name: Rullegardin
            template:
              - rullegardin

And the template looking like this:


  rullegardin:
    template:
      - base
    state_display: >
      [[[ return variables.state === 'on' ? 'Åpen' : 'Lukket'; ]]]
    icon: mdi:blinds-open

This is amazing!

Can I ask, how did you make the “tab” buttons across the top change to different screens?

Thank you!

Those are just navigation buttons ;-).

#################################################
#
#         MAIN MENU
#
#################################################
type: 'custom:mod-card'
style: !include main_menu.styles.yaml
card:
  type: 'horizontal-stack'
  columns: 6
  cards:
    #################################################
    #         HOME
    #################################################
    - type: 'custom:button-card'
      name: 'Home'
      icon: 'mdi:home-assistant'
      tap_action:
        action: 'navigate'
        navigation_path: '/hass-nolu/home'
      template:
        - main_menu_item

    #################################################
    #         ROOMS
    #################################################
   ....

At the moment I am working on a popup for my robomower.

Above the buttons at the bottom there is a line called “Pause für X Tag”. Which allows me to pause the mower for X days.
Below that, there are two buttons to increase or decrease this time. I am looking for a way to get both in one line. I dont need the slider. Only the text and the value.

Any ideas? I tried to pack it together with grid, but it doesnt look good.

action: fire-dom-event
browser_mod:
  command: popup
  title: Mähi
  style:
    hui-vertical-stack-card:
      $hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
        #root {
          justify-content: space-evenly !important;
        }
      $hui-conditional-card>hui-grid-card$: |
        hui-horizontal-stack-card {
          padding: 0em 2em 0 2em !important;
          height: 5.5em !important;
        }
        #root {
          grid-gap: 0 !important;
        }

  card:
    type: vertical-stack
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: entities
            entities:
              - entity: sensor.maehroboter_status_lesbar
                secondary_info: last-changed
                icon: mdi:robot-mower
              - type: custom:bar-card
                width: 55%
                height: 2em
                decimal: 0
                unit_of_measurement: "%"
                positions:
                  icon: outside
                  indicator: "off"
                  name: outside
                severity:
                  - color: "#303435"
                    from: 11
                    to: 100
                  - color: "#6d2525"
                    from: 0
                    to: 10
                entity_row: true
                entities:
                  - entity: sensor.maehroboter_batterie
                    name: Batterie
                  - entity: sensor.maehroboter_messerqualitaet
                    name: Messerqualität
              - entity: sensor.maehroboter_fehlernachricht
              - entity: sensor.maehroboter_wetterstop
              - entity: input_number.maehroboter_pause
                name: Pause für X Tage
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                style: &horizontal2-style |
                  #root {
                    justify-content: flex-end;
                    margin: 1.7em -0.7em 0 0;
                  }
                cards:
                  - type: custom:button-card
                    icon: mdi:plus
                    tap_action:
                      action: call-service
                      service: input_number.increment
                      target:
                        entity_id: input_number.maehroboter_pause
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:minus
                    tap_action:
                      action: call-service
                      service: input_number.decrement
                      target:
                        entity_id: input_number.maehroboter_pause
                    template: icon_name
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                style: &horizontal-style |
                  #root {
                    justify-content: space-evenly;
                    margin: 1.7em -0.7em 0 0;
                  }
                cards:
                  - type: custom:button-card
                    icon: mdi:autorenew
                    name: Auto
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: auto
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:home
                    name: Home
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: home
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:clock-check-outline
                    name: Feierabend
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: eod
                    template: icon_name

1 Like

Hi mrpharderwijk

Your configuration is looking great, can you share your code?

Thanks.

1 Like

see Nolu - another take on Lovelace UI (WIP)

Found a good way for me.

Need to work/learn more with custom:hui-element

action: fire-dom-event
browser_mod:
  command: popup
  title: Mähi
  style:
    hui-vertical-stack-card:
      $hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
        #root {
          justify-content: space-evenly !important;
        }
      $hui-conditional-card>hui-grid-card$: |
        hui-horizontal-stack-card {
          padding: 0em 2em 0 2em !important;
          height: 5.5em !important;
        }
        #root {
          grid-gap: 0 !important;
        }

  card:
    type: vertical-stack
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: entities
            entities:
              - entity: sensor.maehroboter_status_lesbar
                secondary_info: last-changed
                icon: mdi:robot-mower
              - type: custom:bar-card
                width: 55%
                height: 2em
                decimal: 0
                unit_of_measurement: "%"
                positions:
                  icon: outside
                  indicator: "off"
                  name: outside
                severity:
                  - color: "#303435"
                    from: 11
                    to: 100
                  - color: "#6d2525"
                    from: 0
                    to: 10
                entity_row: true
                entities:
                  - entity: sensor.maehroboter_batterie
                    name: Batterie
                  - entity: sensor.maehroboter_messerqualitaet
                    name: Messerqualität
              - entity: sensor.maehroboter_fehlernachricht
                name: Fehler
              - entity: sensor.maehroboter_wetterstop
                name: Wetterstop
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                style: &horizontal2-style |
                  #root {
                    justify-content: flex-end;
                    margin: 1.7em -0.7em 0 0;
                  }
                cards:
                  - type: custom:hui-element
                    card_type: markdown
                    # content: Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
                    content: >
                      {% if states('input_number.maehroboter_pause')|int == 1 %}
                        Pause für einen Tag
                      {% elif states('input_number.maehroboter_pause')|int > 1 %}
                        Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
                      {% else %}
                        Keine Pause
                      {% endif %}
                  - type: custom:button-card
                    icon: mdi:plus
                    tap_action:
                      action: call-service
                      service: input_number.increment
                      service_data:
                        entity_id: input_number.maehroboter_pause
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:minus
                    tap_action:
                      action: call-service
                      service: input_number.decrement
                      service_data:
                        entity_id: input_number.maehroboter_pause
                    template: icon_name
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                style: &horizontal-style |
                  #root {
                    justify-content: space-evenly;
                    margin: 1.7em -0.7em 0 0;
                  }
                cards:
                  - type: custom:button-card
                    icon: mdi:autorenew
                    name: Auto
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: auto
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:home
                    name: Home
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: home
                    template: icon_name
                  - type: custom:button-card
                    icon: mdi:clock-check-outline
                    name: Feierabend
                    tap_action:
                      action: call-service
                      service: input_select.select_option
                      service_data:
                        entity_id: input_select.maehroboter
                        option: eod
                    template: icon_name

1 Like

I have a strange problem when I am using some of the code.
my code for a light button is:

button_card_templates: !include ../button_card_templates_mattias.yaml

views:
  - type: custom:grid-layout
    path: 0
    layout:
      #default
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .       .       ."
        "sidebar  vardagsrum  studio  sovrum  ."
        "sidebar  media       övrigt  hemma   ."
        "sidebar  footer      footer  footer  ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  sidebar     sidebar  ."
            ".  vardagsrum  sovrum   ."
            ".  studio      övrigt   ."
            ".  media       hemma    ."
            ".  footer      footer   ."
            ".  .           .        ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: repeat(3, 1fr) 0
          grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .           .       ."
            "sidebar  vardagsrum  sovrum  ."
            "sidebar  studio      övrigt  ."
            "sidebar  media       hemma   ."
            "sidebar  footer      footer  ."
            "sidebar  .           .       ."
    cards:
      - type: grid
        title: Vardagsrum
        view_layout:
          grid-area: vardagsrum
        columns: 2
        cards:
          - type: custom:button-card
            entity: light.bedroom
            name: Bedroom
            template:
              - light
              - icon_hue

When I use the theme ‘tablet’ as you are using, I don’t get the button, but with another theme, I can see the button

If I remove grid card and directly use custom button card like below, I can see the button with tablet theme.

Anybody has any guess where I am doing mistake?

Hi, your style is amazing… can i ask you weather’s card codes?

thanks in advance.

EDIT: Added an open and closed mode =D Thanks @pedolsky for the tip!

    styles:
      custom_fields:
        icon:
          - width: 70%
          - stroke: >
              [[[ return variables.state === 'closed' ? '#3181b7' : '#9da0a2'; ]]]
    custom_fields:
      icon: >
        [[[ if (entity.state === 'open') return '<svg viewBox="0 0 50 50">
        <path  d="M10 3v44.5M2 1.8v46.5M48 1.8v46.5M1 3h48m-6 44h6m-5.5-11.5v12.7M40 46h3.5m1-43v17.5M40 3v44.5M5.5 3v17.5m1 15l-.2 12.7M10 46H6.5m.5 1H1" stroke-width="2.5"/> </svg> ' ;   
        else return '<svg viewBox="0 0 50 50"> <path d="M2 3v44M48 3v44M.8 2.5h48.4M38 47.5h11.2M34.5 35v12m.5-.5h3M43.5 2v18M25 3v44M7.5 2v18m9 15v12m-.5-.5h-3m0 1H.8M38.5 32v15m-26-15v15m3.5.5h19M19.5 8v18m12-18v18" stroke-width="2.5"/> </svg>'; ]]]    

Could try the yamls from: GitHub - fastender/blob: The Blob - Documentation

Do it the same way as for state:

icon: >
      [[[ return entity.state === 'on' ? 'mdi:blinds-open' : 'mdi:blinds'; ]]]

Did it =D
Not actually animated, but it has different icons for open and closed!
Thanks for the tip on how to accomplish it!

I’ve noticed the margins act weird when trying to add additional rows/tiles to a room…

When adding no more than 2 rows of tiles I do not observe the issue…

Any idea what might be the culprit here? Maybe some padding/margin?

Anyone encountered strangeness with the TV icon ? - Mine seems to work randomly… most of the time when the TV is on the blue ‘screen’ effect on the icon doesn’t appear, or its there but at a twisted angle.

Other times it shows up OK and looks fine! :thinking:

Hi guys,
I have a strange problem using multiple versions of clients.
When I use a browser I have the following error:
err
If I use windows base client it’s working but I have an unformatated layout


What am I doing wrong?
Cheers, Chris