🌻 Lovelace UI • Minimalist

Maybe someone has implemented or seen anywhere Power Distribution card ?
Like this it would be awesome: GitHub - JonahKr/power-distribution-card: A Lovelace Card for visualizing power distributions.

If you need any “testers”. Reach out to me, please :slight_smile:

1 Like

Might be a silly question, but I’ve just installed this and plan on using the theme with my existing dashboard, how do I remove the 2 new sample dashboards that the installation created automatically? Or at least hide them from the sidebar. Tried deleting the files but they recreated themselves on restart of HA.

In the configuration of the integration there are 2 checkboxes.

  • Enable creation of a Dashboard entry in the Side panel.

  • Enable adaptive Dashboard with popup splitview

These determine if the sample dashboards are created and shown

1 Like

I tried using your code but the card looks different than yours, but green & red texts doesn’t show up. Any idea? Thanks

Have you figured that out yet? I am having the same issue. Thanks

Hi all,

Just started wiht minimalist adaptieve dashboard, i have downloaded the “state switch card”, the problem is tat its is version 1.9.5, the docs says that it will only work wiht 1.9.3 or below!

how can i get version 1.9.3 installed? i want those popups working.

2de, for some reseaon the dashboard will not load correctly on my mobile, the 2 card rooms next to eachtoghter will not fill the screen in the widht.

---

type: "custom:layout-card"

layout_type: "custom:grid-layout"

layout:

  # Tablet portrait

  grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr"

  grid-template-areas: |

    "text text text text text text"

    "chip chip chip chip chip chip"

    "title1 title1 title1 title1 title1 title1"

    "card1 card1 card2 card2 card3 card3"

    "title2 title2 title2 title2 title2 title2"

    "card4 card4 card5 card5 card6 card6"

  mediaquery:

    # Mobile

    "(max-width: 700px)":

      grid-template-columns: "1fr 1fr"

      grid-template-areas: |

        "text text"

        "chip chip"

        "card1 card2"

        "card3 card4"

        "card5 card6"

        "card7 card8"

view_layout:

  grid-area: "main"

cards:

  - view_layout:

      grid-area: "text"

    type: custom:mushroom-title-card

    title: |-

      {% if now().strftime("%H")|int < 12 %}

        Goedenmorgen {{user}}

      {% elif now().strftime("%H")|int < 18 %}

        Goedenmiddag {{user}}

      {% else %}

        Goedenavond {{user}}

      {% endif %}

  - view_layout:

      grid-area: "chip"

    type: "horizontal-stack"

    cards:

      - type: custom:mushroom-chips-card

        chips:

          - type: template

            icon: >

              {% if is_state ('sensor.lights_on', '0') %}

              mdi:lightbulb-off      

              {% else %}

              mdi:lightbulb

              {% endif %}

            icon_color: >

              {% if is_state ('sensor.lights_on', '0') %}

                grey      

              {% else %}

                orange

              {% endif %}

            content: '{{ states(''sensor.lights_on'') }}'

          - type: entity

            entity: sensor.water_p_d

            icon: mdi:water

            icon_color: blue

          - type: template

            icon: mdi:gas-burner

            icon_color: red

            content: '{{ states(''sensor.gas_p_d'') | round (1) }} m³'

  - view_layout:

      grid-area: "title1"

    type: "custom:button-card"

    template: "card_title"

    label: "Beneden"

  - view_layout:

      grid-area: "title2"

    type: "custom:button-card"

    template: "card_title"

    label: "Boven"

  - view_layout:

      grid-area: "card1"

    type: "custom:button-card"

    template:

      - card_esh_room

      - yellow_on

    name: Woonkamer

    icon: mdi:sofa

    entity: "light.lampen_woonkamer"

    variables:

      ulm_custom_card_esh_room_light_entity: light.lampen_woonkamer

      ulm_card_light_enable_popup: true

      ulm_input_select_option: light 1

      ulm_input_select: input_select.select_popup_view

    label: >

      [[[ return "🌡️ " + states['sensor.woonkamer_temperature'].state + " °C" + " 💧 " + states['sensor.woonkamer_humidity'].state + " %" ]]]

  - view_layout:

      grid-area: "card2"

    type: "custom:button-card"

    template:

      - card_esh_room

      - yellow_on

    name: Keuken

    icon: mdi:countertop

    entity: "light.lampen_keuken_main"

    variables:

      ulm_custom_card_esh_room_light_entity: light.lampen_keuken_main

    label: >

      [[[ return "🌡️ " + states['sensor.temperatuur_sensor_keuken_temperature'].state + " °C" + " 💧 " + states['sensor.temperatuur_sensor_keuken_humidity'].state + " %" ]]]

  - view_layout:

      grid-area: "card3"

    type: "custom:button-card"

    template:

      - card_esh_room

      - yellow_on

    name: Salon

    icon: mdi:office-building

    entity: "light.lampen_salon_main"

    variables:

      ulm_custom_card_esh_room_light_entity: light.lampen_salon_main

    label: >

      [[[ return "🌡️ " + states['sensor.salon_temperature'].state + " °C" + " 💧 " + states['sensor.salon_humidity'].state + " %" ]]]

  - view_layout:

      grid-area: "card4"

    type: "custom:button-card"

    template:

      - card_esh_room

      - yellow_on

    name: Jayla

    icon: mdi:bed

    entity: "light.lampen_jayla"

    variables:

      ulm_custom_card_esh_room_light_entity: light.lampen_jayla

    label: >

      [[[ return "🌡️ " + states['sensor.jayla_temperature'].state + " °C" + " 💧 " + states['sensor.jayla_humidity'].state + " %" ]]]

  - view_layout:

      grid-area: "card5"

    type: "custom:button-card"

    template:

      - card_esh_room

      - yellow_on

    name: Pa & Ma

    icon: mdi:bed-double

    entity: "light.lampen_pa_en_ma"

    variables:

      ulm_custom_card_esh_room_light_entity: light.lampen_pa_en_ma

I have extracted the expand chip from the custom_card_esh_welcome card and made a separate custom chip to use it to show or hide some cards on the dashboard.

---

custom_chip_expand:
  template: "chips"
  entity: "[[[ return variables.ulm_entity]]]"
  icon: "mdi:chevron-up"
  show_icon: true
  styles:
    grid:
      - grid-template-areas: "'i'"
    card:
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
  state:
    - value: "on"
      icon: "mdi:chevron-down"
      styles:
        icon:
          - color: "rgb(var(--color-theme))"
  tap_action:
    action: "call-service"
    service: "input_boolean.toggle"
    service_data:
      entity_id: "[[[ return variables.ulm_entity]]]"

I called this chip with:

- type: "custom:button-card"
   template: custom_chip_expand
   variables:
     ulm_entity: input_boolean.minimalist_screens_dropdown_1

and I add this extra style to the card that I want to apply the effect on:

extra_styles: >
          [[[
            if (states['input_boolean.minimalist_screens_dropdown_1'].state == "on"){
              return `
                :host{
                  display: none !important;
                }
              `;
            }
          ]]]

Everything works fine except that the chip icon does not update from mdi:chevron-down to mdi:chevron-up when I click on the chip. If instead of using the custom chip I directly use its code in the dashboard page (see below), everything works including the change of icon. Any idea why the icon is not updated when I do it via a custom chip?

      - type: "custom:button-card"
        template: "chips"
        entity: input_boolean.minimalist_screens_dropdown_1
        icon: "mdi:chevron-up"
        show_icon: true
        styles:
          grid:
            - grid-template-areas: "'i'"
          card:
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
        state:
          - value: "on"
            icon: "mdi:chevron-down"
            styles:
              icon:
                - color: "rgb(var(--color-theme))"
        tap_action:
          action: "call-service"
          service: "input_boolean.toggle"
          service_data:
            entity_id: input_boolean.minimalist_screens_dropdown_1
1 Like

Very new to coding in yaml. I was able to get my minimalist dashboard pretty much how I want it except when using the minimalist light card popup option, It all works until I select a color. Once I pick a color, I can no longer change it back to white temperatures within that popup. Anyone have any idea how to fix this?

- type: "custom:button-card"
        template:
          - card_light
          - popup_light
        entity: light.living_room_chandelier
        variables:
          ulm_card_light_enable_slider: false
          ulm_card_light_enable_color: true
          ulm_card_light_force_background_color: true
          ulm_card_light_enable_collapse: false
          ulm_card_light_enable_popup: true
          ulm_card_light_enable_popup_tap: true
          ulm_card_tap_action: "popup"
          ulm_card_hold_action: "popup"
          ulm_card_double_tap_action: "popup"
          ulm_icon_tap_action: "toggle"
          ulm_icon_hold_action: "popup"
          ulm_icon_double_tap_action: "popup"
          ulm_name_tap_action: "popup"
          ulm_name_hold_action: "popup"
          ulm_name_double_tap_action: "popup"
          ulm_card_light_name: Chandelier
          ulm_card_light_icon: mdi:chandelier

Button-card template ‘edge’ is missing! :frowning:

Mine show up like this, any idea? Can you please help me fix this? Thanks

That template is part of the Minimalist UI - see here UI/edge.yaml at 34000875948167ad845d4c3bf276cc03dd858105 · UI-Lovelace-Minimalist/UI · GitHub

So if you have Minimalist UI installed or even just use the Templates, then it’s alreay there :slight_smile:

Is there guidance somewhere on how to create multiple minimalist dashboards on the same HA instance (I was going to assign different ones for different people, setting them up on their individual devices)?

do you want to share the code?

Have you checked this: Customizing - UI Lovelace Minimalist

@basbrus Got it, thank you

Using the code below the card functions correctly, but it displays with the state and then undefined%. Is there any way to remove the percentage?

    - type: "custom:button-card"
      template: card_cover
      entity: cover.garage_door

garage cover card

UPDATE: Missing templates. Do you have the template yaml’s to share? :slight_smile:

Hi. Nise setup, but I can’t get it working. Is this the complete yaml? I get an error when checking it. Looks like it is part of something more

Anyone has an idea why apex charts are not displayed (no error) but plain apex charts are working?
Config is:

- type: "custom:button-card"
   template: "custom_card_apexcharts"
   variables:
     chart_type: "donut"
     graph_span: "1d"
     entity_1:
       entity_id: "sensor.zuhause_verbrauch"
       icon: ""
       name: "Verbrauch"
       color: "blue"
       max_value: 300

You can check the card_cover.yaml, how the label is defined and create a customized version which takes the original card as a template and define the label to your taste.

1 Like