🌻 Lovelace UI • Minimalist

[nikno (Niklas)]

I figured out that I need to empty the browser cache, after that things started to show up.

But still having issues with the apexcharts, some of the info shows up in a card but then an error in what appear/might to be the line chart area. I tried different chart types but no difference.

EDIT: Solved. Below is how it looks when you haven’t installed the HACS apex-charts addon, didn’t read the requirements very well…

This is the code:

      - type: horizontal-stack
        cards:
          - type: "custom:button-card"
            template: "custom_card_apexcharts"
            variables:
              chart_type: "line"
              graph_span: "1h"
              entity_1:
                entity_id: sensor.fridge_temperature
                icon: mdi:fridge
                name: "Fridge"
                color: "blue"
              entity_2:
                entity_id: sensor.living_room_temperature
                icon: mdi:sofa
                name: "Livingroom"
                color: "red"
              entity_3:
                entity_id: sensor.bedroom_temperature
                icon: mdi:bed-king
                name: "Bedroom"
                color: "green"

[flintstones-fred]

I have been using this card for almost 6 months and a set of these room cards is front and center of my dashboard. I have one “feature request” as I haven’t figured out a way to implement it myself. Can you direct me in the right direction?
For room cards, where I have a light entity, tapping toggles the lights, double tapping opens up the popup where I can adjust the brightness and colors of those lights. This is great, but I was thinking if the visual element on the card for the lights can become a brightness slider if the lights are ON. I think with the 3 column grid you have shown above, it may be a little bit crowded, but with a 2 column grid, that may actually be a great addition which allows for an easier brightness adjustment.

Any thoughts?

[manofoz]

Hello,

I am working towards using the adaptive dashboard as documented here: Adaptive Dashboard - UI Lovelace Minimalist.

I am struggling with a few things. First the pop up seems to go away sometimes and if I restart HAOS is comes back. Nothing is being logged for the dashboard so I don’t know how to debug this. Any tips would be great.

Second I don’t get RBG lighting controls for my RBG lights. I made an entity button on another dashboard and checked the supported_color_modes and RGBW shows up.

However my popup, using popup_light_brightness which has ‘rgbw’ in al list of color_modes only shows brightness and temperature. Is the template case sensitive?

Also the Back and More Options buttons don’t seem to do anything but I have not looked much into that yet.

Thanks!

Update - if I navigate to another dashboard and then back to the adaptive minimalist one the popup loads. When I refresh the adaptive page the popup goes away.

Update - I had some HUE lights so I tried just one light strip which showed up as having Color temperature and XY as it’s supported_color_modes. Still only getting basic white / yellows. I also tried every other popup_light template and none showed a color picker like the light card on the standard UI does. The only one that I could get colors out of was popup_light_palette.yaml which just had the presets that came with the devices.

Edit: I saw a color pallet flash across the screen after HAOS restarted but it just scrolled by and left me with nothing. When I reloaded it was gone and looked like the screenshot I posted.

[manofoz]

Not having much luck with the predefined templates but I’ve learned a lot about how the card behind it works. I think I can just make my own color picker for the lights. Easy to add RBG but I’ll have to search around to see how to add whatever normal light tones are considered:

However I still have no idea why the popup doesn’t load unless I click on another dashboard, in this case the other minamalistic lovelace UI dashboard that came with the package. That’s been a bit annoying but I can do away with it and just have it as a regular card.

[MichelFR (Michel R.)]

How can i change the color of an entity in room_card?

This does not work:

templates:
  - red_on

Below is my current code:

- type: "custom:button-card"
            template:
              - card_room
              - blue_on
            name: Schlafen
            entity: light.schlafzimmer
            icon: mdi:bed
            label: '[[[ return states["sensor.sz_luftsensor_temperature"].state + "° | " + states["sensor.sz_luftsensor_humidity"].state + "%" ]]]'
            variables:
              label_use_temperature: false
              label_use_brightness: false
              entity_1:
                entity_id: light.schlafzimmer
                templates:
                  - yellow_on
                tap_action:
                  action: toggle
              entity_2:
                entity_id: climate.sz_bt_heizung
                templates:
                  - red_on
                tap_action:
                  action: more-info

[andyblac (Andy Blackburn)]

try

templates:
  - red_off

or if you want more control try my custom room card

My Custom Cards for Minimalist UI

I thought I would share my custom cards, I would like your feedback on these. The dev branch will be used for the bleeding edge and could have bugs, but if you find any issues in the master or dev brach please submit a git issue, and I take a look. I did these for myself, but I hope you like. [Screenshot 2023-09-28 at 19.23.51] guides are here If your having issue with these cards, make sure you have all the necessary frontend integrations installed. first you need to have installed UI …

[nukleuz80 (nukleuz)]

Hi guys,

i have some trouble to understand how to make custom popup templates.
I can use the existing templates, but i want to grid the layout myself.

I read the docs more than one time but don´t get the point.

Can anyone describe in short what to do?

Thanks!

EDIT: Do i have to create it like a custom card?

[nukleuz80 (nukleuz)]

I will answer myself: (but i think it will work smarter than my way)

I use this to call on tap_action the popup:

  - type: "custom:button-card"
    template: card_generic
    entity: sensor.tasmota_schweinestall_bme280__bme280_dewpoint
    tap_action: !include ../popup/popup_jb_apex.yaml
    variables:
      ulm_card_generic_name: "Taupunkt"

…/popup/popup_jb_apex.yaml

action: "fire-dom-event"
browser_mod:
  service: "browser_mod.popup"
  data:
    size: normal
    hide_header: true
    content:
      type: "custom:button-card"
      show_icon: false
      show_label: false
      show_state: false
      show_name: false
      template: popup_2_entity_graph
      entity: "sensor.tasmota_schweinestall_bme280_bme280_dewpoint"
      variables:
        ulm_icon: "mdi:home-thermometer-outline"
        ulm_title: "Klima"
        ulm_label: "Wichtige Klimadaten"
        ulm_entity1: "sensor.tasmota_schweinestall_bme280_bme280_temperature"
        ulm_entity1_name: "Temperatur"
        ulm_entity1_icon: "mdi:gauge"
        ulm_entity2: "sensor.tasmota_schweinestall_bme280_bme280_humidity"
        ulm_entity2_name: "rLuftfeuchtigkeit"
        ulm_entity2_icon: "mdi:water-percent"
        ulm_graph_header: "Klimaverlauf"
    style: |
      --popup-min-width: 400px;
      --popup-max-width: 600px;
      --popup-border-radius: 28px;

Then i created a custom_card for the template - the result is this:

BUT, i thinkt there is another way - perhaps the “right” way?
This is not exactly the way the internal popups works.

Can anyone point me to that, please?

[nukleuz80 (nukleuz)]

And again…
The following don´t work.

  - type: "custom:button-card"
    template: card_power_outlet
    entity: switch.smarttv
    variables:
      ulm_card_power_outlet_consumption_sensor: sensor.smarttv_energy
      ulm_card_power_outlet_name: Popup TEST
      ulm_card_hold_service: "popup"
      ulm_custom_popup:
        template: "popup_jb_klima_test"
        entity: sensor.smarttv_energy
        popup_variables:
          ulm_popup_jb_klima_sensor1: switch.smarttv

I created a custom_card with two files:

The firedom event: (custom_popup_jb_test.yaml)

---
popup_jb_klima_test:
  hold_action:
    action: "fire-dom-event"
    browser_mod:
      service: "browser_mod.popup"
      data:
        large: true
        hide_header: true
        content:
          type: "custom:button-card"
          template: "popup_jb_klima_test_temperature"
          entity: "[[[ return entity.entity_id ]]]"

The layout: (custom_popup_jb_test_layout.yaml)

---
popup_jb_klima_test_temperature:
  show_icon: false
  show_name: false
  show_label: false
  show_units: false
  styles:
    grid:
      - grid-template-areas: "'header' 'content1' 'footer'"
      - grid-template-rows: "16vh 56vh 14vh"
      - grid-template-columns: "1fr"
      - column-gap: "30px"
    card:
      - background: "var(--primary-background-color)"
      - box-shadow: "none"
      - padding: "0%"
    custom_fields:
      header:
        - align-self: "center"
        - margin-bottom: "4px"
      content1:
        - align-self: "center"
        - margin-top: "-6px"
      buttons:
        - display: "none"
      footer:
        - align-self: "absolute"
        - margin-top: "12px"
  extra_styles: |
    @media (max-width: 800px) {
      #container {
        grid-template-areas: "header" "content1" "buttons" "footer" !important;
        grid-template-rows: 16vh 52vh 14vh 14vh !important;
        grid-template-columns: 1fr !important;
      }
      #buttons {
        display: block !important;
        align-self: start !important;
      }
      #content2 {
        display: none !important;
      }
    }
  custom_fields:
    header:
      card:
        type: "custom:button-card"
        entity: "[[[ return entity.entity_id ]]]"
        template: "popup_header_cover"
    content1:
      card:
        type: "custom:my-slider-v2"
        entity: "[[[ return entity.entity_id ]]]"
        allowTapping: true
        vertical: true
        flipped: true
        styles:
          card:
            - height: "280px"
            - width: "100px"
            - box-shadow: "none"
            - background: "none"
          container:
            - border: "2px solid white"
            - border-radius: "14px"
            - Height: "280px"
            - width: "100px"
            - box-shadow: "none"
          progress:
            - background: "rgba(var(--color-theme),0.9)"
          track:
            - background: "rgba(var(--color-theme),0.09)"
          thumb:
            - width: "40px"
            - height: "5px"
            - background: "white"
            - position: "center"
            - margin-right: "30px"
            - margin-left: "30px"
            - border-radius: "0px 0px 10px 10px"
        card_mod:
          style:
            .: |
              :host {
                display: flex;
                justify-content: center;
                align-items: center;
                background: none;
              }
    buttons:
      card:
        type: "custom:button-card"
        template: "list_3_items"
        styles:
          card:
            - background: "none"
          grid:
            - align-items: "initial"
        custom_fields:
          item1:
            card:
              icon: "mdi:arrow-down"
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              template:
                - "popup_button"
                - "popup_button_cover_close"
              styles:
                img_cell:
                  - background-color: >
                      [[[
                          if (entity.state === "closing"){
                              return "rgba(var(--color-theme),0.2)"
                          }
                          if (entity.state === "opening"){
                              return "rgba(var(--color-theme),0.2)"
                          }
                          if (entity.attributes.current_position == "100"){
                              return "var(--card-background-color)"
                          } else {
                            return "var(--card-background-color)"
                          }
                      ]]]
              tap_action:
                action: "call-service"
                service: "cover.close_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item2:
            card:
              icon: "mdi:stop"
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              template:
                - "popup_button"
                - "popup_button_cover_stop"
              tap_action:
                action: "call-service"
                service: "cover.stop_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item3:
            card:
              icon: "mdi:arrow-up"
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              template:
                - "popup_button"
                - "popup_button_cover_open"
              styles:
                img_cell:
                  - background-color: >
                      [[[
                          if (entity.state === "closing"){
                              return "rgba(var(--color-theme),0.2)"
                          }
                          if (entity.state === "opening"){
                              return "rgba(var(--color-theme),0.2)"
                          }
                          if (entity.attributes.current_position == "100"){
                              return "rgba(var(--color-theme),0.2)"
                          } else {
                          return "var(--card-background-color)"
                          }
                      ]]]
              tap_action:
                action: "call-service"
                service: "cover.open_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
    footer:
      card:
        type: "custom:button-card"
        template: "popup_list_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "popup_button_back"
              entity: "[[[ return entity.entity_id ]]]"
          item2:
            card:
              type: "custom:button-card"
              template: "popup_button_power"
              entity: "[[[ return entity.entity_id ]]]"

This is just a copy of the included cover_popup with renamed templates.

The result:

Thank for looking what is wrong here…

[wardozer10 (Badsha Anzif)]

did the new 2023.11.0 ruin all of the config?

[colonelpanic]

It broke mine. I reverted back to 2023.10.5 until I have more time to dig into it. Most all of my cards were missing except the ones using the “card_title” and “card_vertical_button” templates.

[roelandtiemes (Roeland)]

Broke mine too, reverted back to 2023.10.5 and that fixed the issue!

[0la1]

Hi everyone,

I have finished my iPhone Dashboard and now created the structure for the tablet view. For some reason the navigation for the tablet view (I tried it with the Room Card “Wohnzimmer” only), always navigates me to the iPhone view.

This is the card code.

                #################### Wohnzimmer ####################
              - type: 'custom:button-card'
                template:
                  - card_room
                  - blue_no_state
                name: Wohnzimmer
                entity: sensor.klima_wohnzimmer_temperature
                icon: mdi:sofa
                tap_action:
                  action: navigate
                  navigation_path: /ui-lovelace-minimalist/wohnzimmer_T

And this is the file structure.

I feel it is something stupid, but can’t figure out where my problem lies.

Also the yaml files for the tablet are neither green nor have they a “U” right next to it (but I’m not sure what that means).

Thanks for your help!

[msl2424 (Michael Leen)]

Mind sharing the exact steps that you took to roll back to 2023.10.5? I’m in the same situation with a broken dashboard after the 2023.11.0 update.

[KruseLuds]

2023.11 broke most of my minimalist setup. I really prefer not to roll back, but fix what is broken. How do I troubleshoot/debug?

[nikno (Niklas)]

Similar experience here, after update to 2023.11.0 - only my main (“production”) dashboard works luckily. A couple of other ones which I do trials and experiment with does not work. I also applied the “ui minimalist” update that was in HACS, as well as 2 other ones I don’t remember which…

They are just filled with “Button-card template ‘xxx’ is missing!”

[manofoz]

Quick question - I am using the adaptive dashboard and the popups on the right side look great on a tablet or PC. Is there a way I can get those to actually be regular popups when the same tap actions occur for smaller screens like a mobile phone? Right now I can’t seem to figure out how to get anything to pop up, only the right side bar changes. I have browser mod v2 configured and working per their documentation.

Edit:
For now I just added a double tab browser mod popup so you can single tab to get the sidebar to change and double tap to get a popup. Or just double tap on the phone since there is no sidebar. Not great but it’ll work for now.

      double_tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            content:
              type: custom:more-info-card
              title: "[[name]]"
              entity: "[[light-entity]]"

[arunankam]

Ditto… 2023.11 broke my minimalist dashboard except for the main card.

[KruseLuds]

There are several HACS card updates - they fix the issues

[nikno (Niklas)]

@arunankam @KruseLuds @msl2424 @roelandtiemes @colonelpanic @wardozer10

I read up a bit on the discussion on the issues in Github and found this suggested workaround that worked for me. Go into HACS and “Redownload” the UI Lovelace-Minimalist integration, then restart Home Assistant. After that I refreshed my dashboards and it was all fine.