šŸŒ» Lovelace UI ā€¢ Minimalist

I like how the custom person card info includes the battery state for the personal device.

custom_card_person_info2

Has someone ammendet the binary sensor card to include the same information?
I have a some battery powered Zigbee devices across the house (i.e. door and window sensors, or motion sensors). If the battery information would be visible in the binary sensor card, I would not need to waste additional space showing a battery card next to it.

Screenshot 2022-09-25 123646

1 Like

Never mind, I will answer on my own question :sweat_smile:

I found what I need in default installation files:

config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/popup_templates/popups/popup_light_brightness.yaml

At this moment, line 388 is: effects_list: false per default.
Changing it to true gives me exactly what I wanted - effects drop-down appear on this beautiful pop-up card:

Of course, this is not right approach, cause with first next update of ui-minimalist, this will be overwritten I believe. Tried to copy popup_light_brightness.yaml somewhere to config/ui_lovelace_minimalist, similar way as we are making custom cards, dashboards, etc. instead in config/custom_components/ui_lovelace_minimalist, but didnā€™t figured out right folder structure yet and not sure if this is doable at all.

Unfortunately I cannot share the code at the moment. I am not at home and VS Code seems to not work on a iPad. Neither in the App nor in Chrome of Safari.
You have to wait till next week. But for the calendar, just create a new custom: button-card And add the calendar as content of the card. I use atomic-calendar-revive

1 Like

Thank you very much for your answer, Iā€™ll try it :slight_smile:

Today is your lucky day. Just checked something and et voila, VS Code is working.

As I wrote, this is a Work in Progress. So not everything is working. At the moment I am working on the popups and templates.


---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"


kiosk_mode:
  hide_header: true
  hide_sidebar: true
  mobile_settings:
    hide_sidebar: false
    ignore_entity_settings: true
    custom_width: 768

 


title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
views:
# Dashboard
  - title: "Dashboard"
    path: 0
    icon: "mdi:flower"
    type: custom:grid-layout
    layout:
      grid-template-columns: 0.5em 5em repeat(3, 3fr) 0.5em
      grid-template-rows: 6em 18em 29em 1em
      grid-gap: 0.7em
      grid-template-areas: |
        ". . . chips clock ."
        ". navigation welcome weather camera ."
        ". navigation calendar rooms house ."
        ". . footer footer footer ."

    cards:

      #############
      #   Chips   #
      #############

      - type: vertical-stack
        view_layout:
          grid-area: chips
        cards:
          - type: "custom:button-card"
            color_type: blank-card
          - type: horizontal-stack
            cards:  
              - type: "custom:button-card"
                color_type: blank-card
              - type: 'custom:button-card'
                template: custom_card_person_chip
                variables:
                  ulm_custom_card_person_chip_entity: person.christoph
              - type: 'custom:button-card'
                template: custom_card_person_chip
                variables:
                  ulm_custom_card_person_chip_entity: person.franziska
              - type: "custom:button-card"
                color_type: blank-card
          - type: "custom:button-card"
            color_type: blank-card

      #############
      #   Clock   #
      #############

      - type: "custom:button-card"
        view_layout:
          grid-area: clock
        styles:
          label:
            - justify-self: "right"
          name:
            - justify-self: "right"
        template: custom_card_nik_clock
        variables:
          ulm_custom_card_nik_clock_switch_enable: false

      ##################
      #   Navigation   #
      ##################
 
      - type: grid
        columns: 1
        square: true
        view_layout:
          grid-area: navigation
        cards:
          # House
          - type: custom:button-card
            name: 
            icon: mdi:home
            aspect_ratio: 1/1
            tap_action:
              action: navigate
              navigation_path: /home
          # Energy
          - type: custom:button-card
            name: 
            icon: mdi:fire
            aspect_ratio: 1/1
            tap_action:
              action: navigate
              navigation_path: /energy-yaml
          # Metrics
          - type: custom:button-card
            icon: mdi:chart-multiline
            aspect_ratio: 1/1
            tap_action: !include popup/proxmox.yaml

      ###############
      #   Welcome   #
      ###############
                
      - type: "custom:button-card"
        view_layout:
          grid-area: welcome
        template: "custom_card_se7enair_welcome"
        styles:
          card:
            - height: 100%
        triggers_update: input_boolean.alarmanlage
        variables:
          ulm_card_esh_welcome_collapse: input_boolean.alarmanlage
          ulm_weather: weather.openweathermap
          entity_1:
            nav: "house"
            icon: "mdi:home"
            name: "House"
            color: "blue"
          entity_2:
            nav: "lights"
            icon: "mdi:lightbulb"
            name: "Lights"
            color: "yellow"
          entity_3:
            nav: "security"
            icon: "mdi:shield"
            name: Secure
            color: "green"
          entity_4:
            nav: "proxmox"
            icon: "mdi:chart-multiline"
            name: Proxmox
            color: "purple"
          entity_5:
            nav: "!include popup/wifi.yaml"
            icon: "mdi:wifi"
            name: Wifi
            color: "red"
          

      ###############
      #   Weather   #
      ###############

      - type: weather-forecast
        view_layout:
          grid-area: weather
        show_current: true
        show_forecast: true
        entity: weather.openweathermap

      ################
      #   Calendar   #
      ################

      - type: custom:atomic-calendar-revive
        view_layout:
          grid-area: calendar
        enableModeChange: true
        firstDayOfWeek: 1
        maxDaysToShow: 30
        entities:
          - entity: !secret calendar_entity_primary
          - entity: !secret calendar_entity_family
        showCurrentEventLine: false
        showMonth: false
        showWeekDay: true
        showNoEventsForToday: true
        showEventIcon: false
        calShowDescription: true
        showLastCalendarWeek: false
        dimFinishedEvents: true
        showRelativeTime: false
        eventCalNameColor: rgba(86, 100, 86, .35)
        calWeekDayColor: rgba(86, 100, 86, .35)
        showLocation: false
        untilText: bis
        noEventsForNextDaysText: keine Termine in den nƤchsten Tagen
        showProgressBar: false
        showDescription: true
        noEventText: keine Termine heute
        showFullDayProgress: true
        disableCalEventLink: false
        disableCalLocationLink: false
        disableCalLink: false
        showDate: false
        sortByStartTime: true
        cardHeight: 91%
        refreshInterval: 60

      #############
      #   House   #
      #############
         
      - type: grid
        columns: 2
        square: false
        view_layout:
          grid-area: house
        cards:
          - type: 'custom:button-card'
            template: custom_card_se7enair_washingmachine
            entity: input_select.waschmaschinenstatus
            variables:
              ulm_card_generic_swap_name: Waschmaschine
          - type: custom:button-card
            template: custom_card_se7enair_washingmachine
            entity: input_select.trocknerstatus
            variables:
              ulm_card_generic_swap_name: Trockner
          - type: "custom:button-card"
            entity: lock.nuki_haustuere_lock
            template: "custom_card_eraycetinay_lock"
            name: "HaustĆ¼re"
            variables:
              ulm_custom_card_eraycetinay_lock_tap_control: true
              ulm_custom_card_eraycetinay_lock_battery_level: sensor.nuki_haustuere_battery
              ulm_custom_card_eraycetinay_lock_door_open: binary_sensor.flur_haustuere_tuersensor_contact
            triggers_update:
              - "sensor.nuki_haustuere_battery"
              - "binary_sensor.flur_haustuere_tuersensor_contact"
          - type: "custom:button-card"
            template: card_cover
            entity: cover.garage_tor
            variables:
              ulm_card_cover_enable_controls: false
              ulm_card_cover_enable_slider: false
              ulm_card_cover_name: Garage
              ulm_card_cover_garage: true
          - type: 'custom:button-card'
            template: card_generic_swap
            entity: switch.nuki_opener_ring_suppression
            variables:
              ulm_card_generic_swap_name: KlingelunterdrĆ¼ckung
          - type: "custom:button-card"
            template:
              - card_media_player
            entity: media_player.wohnzimmer_alexa
            variables:
              ulm_card_media_player_enable_popup: true
          - type: 'custom:button-card'
            template: card_generic_swap
            entity: calendar.abfallkalender
          - type: 'custom:button-card'
            template: card_generic_swap
            entity: sensor.maehroboter_status_lesbar
            variables:
              ulm_card_generic_swap_name: MƤhroboter
              ulm_card_generic_swap_icon: mdi:robot-mower
          - type: "custom:button-card"
            template: card_light
            entity: light.aussen_licht
            variables:
              ulm_card_light_enable_slider: false
              ulm_card_light_enable_color: true
              ulm_card_light_force_background_color: false

              
      #############
      #   Rooms   #
      #############
      
      - type: grid
        columns: 2
        view_layout:
          grid-area: rooms
        square: false
        cards:
          # Wohnzimmer
          - type: 'custom:button-card'
            template:
              - card_room
              - red_on
            name: Wohnzimmer
            icon: mdi:sofa
            entity: climate.wohnzimmer_heizung
            tap_action: !include ../../popup/climate_wohnzimmer.yaml
              # action: navigate
              # navigation_path: /ui-lovelace-minimalist/wohnzimmer
            variables:
              entity_1:
                entity_id: light.wohnzimmer_licht_gruppe
                tap_action:
                  action: toggle
                templates:
                  - yellow_on
              entity_2: 
                entity_id: media_player.wz_tv
                templates:
                  - yellow_on
              entity_3:
                entity_id: humidifier.wz_luftbefeuchter
          # Esszimmer
          - type: 'custom:button-card'
            template:
              - card_room
            name: Esszimmer
            icon: mdi:table-furniture
            entity: climate.esszimmer_heizung
            tap_action:
              action: navigate
              navigation_path: /ui-lovelace-minimalist/esszimmer
            variables:
              entity_1:
                entity_id: light.esszimmer_licht
                templates:
                  - yellow_on
                tap_action:
                  action: toggle
          # KĆ¼che
          - type: 'custom:button-card'
            template:
              - card_room
            name: KĆ¼che
            icon: mdi:stove
            tap_action:
              action: navigate
              navigation_path: /ui-lovelace-minimalist/kueche
            variables:
              label_use_temperature: false
              entity_1:
                entity_id: light.kueche_licht_gruppe
                templates:
                  - yellow_on
                tap_action:
                  action: toggle
          # Bad
          # - type: 'custom:button-card'
          #   template:
          #     - card_room
          #   name: Bad
          #   icon: mdi:bathtub
          #   entity: climate.bad_heizung
          #   tap_action:
          #     action: navigate
          #     navigation_path: /ui-lovelace-minimalist/bad
          #   variables:
          #     entity_1:
          #       entity_id: binary_sensor.bad_fenster_links_contact
          # Schlafzimmer
          - type: 'custom:button-card'
            template:
              - card_room
            name: Schlafzimmer
            icon: mdi:bed
            entity: climate.schlafzimmer_heizung
            tap_action:
              action: navigate
              navigation_path: /ui-lovelace-minimalist/schlafzimmer
            variables:
              entity_1:
                entity_id: light.schlafzimmer_licht
                templates:
                  - yellow_on
                tap_action:
                  action: toggle
              entity_2: 
                entity_id: switch.schlafzimmer_babyphone
                templates:
                  - yellow_on
                tap_action:
                  action: toggle
          # BĆ¼ro
          # - type: 'custom:button-card'
          #   template:
          #     - card_room
          #   name: BĆ¼ro
          #   icon: mdi:chair-rolling
          #   entity: climate.buero_heizung
          #   tap_action:
          #     action: navigate
          #     navigation_path: /ui-lovelace-minimalist/buero
          #   variables:
          #     entity_1:
          #       entity_id: binary_sensor.buero_bewegungsmelder_occupancy
          #       tap_action:
          #         action: more-info
          #       templates:
          #         - yellow_on

      ##############
      #   Camera   #
      ##############

      - type: custom:button-card
        view_layout:
          grid-area: camera
        styles:
          card:
            - height: 100%
          custom_fields:
            camera:
              [top: 0%, left: 0%, width: 111%, position: absolute]
        custom_fields:
          camera:
            card:
              type: custom:frigate-card
              cameras:
                - live_provider: frigate-jsmpeg
                  camera_entity: camera.garten_kamera_hof
                  camera_name: hof
              view:
                default: live
                update_seconds: 300
                timeout_seconds: 300
                update_force: false
              menu:
                mode: overlay-top
                buttons:
                  clips: true
                  image: false
                  download: false
              live:
                preload: true
                draggable: false
                actions:
                  tap_action:
                    action: custom:frigate-card-action
                    frigate_card_action: fullscreen
                controls:
                  next_previous:
                    style: icons
              image:
                mode: camera



      ##############
      #   Footer   #
      ##############

      # - type: horizontal-stack
      #   view_layout:
      #     grid-area: footer
      #   cards:
      #     - type: "custom:button-card"
      #       color_type: blank-card
      #     # Wifi
      #     - type: custom:button-card
      #       template: card_navigate
      #       styles:
      #         card:
      #           - width: 10em
      #       tap_action: !include popup/wifi.yaml
      #       variables:
      #         ulm_card_navigate_path: /ui-lovelace-minimalist/media
      #         ulm_card_navigate_title: Wifi
      #         ulm_card_navigate_icon: mdi:wifi
      #     # House
      #     - type: custom:button-card
      #       template: card_navigate
      #       styles:
      #         card:
      #           - width: 10em
      #       tap_action: !include popup/house.yaml
      #       variables:
      #         ulm_card_navigate_path: /ui-lovelace-minimalist/media
      #         ulm_card_navigate_title: House
      #         ulm_card_navigate_icon: mdi:home
      #     - type: "custom:button-card"
      #       color_type: blank-card
      #     # Metrics
      #     - type: custom:button-card
      #       template: card_navigate
      #       styles:
      #         card:
      #           - width: 10em
      #       tap_action: !include popup/proxmox.yaml
      #       variables:
      #         ulm_card_navigate_path: /ui-lovelace-minimalist/media
      #         ulm_card_navigate_title: Wifi
      #         ulm_card_navigate_icon: mdi:chart-multiline
      #     # Energy
      #     - type: custom:button-card
      #       template: card_navigate
      #       styles:
      #         card:
      #           - width: 10em
      #       tap_action: !include popup/energy.yaml
      #       variables:
      #         ulm_card_navigate_path: /ui-lovelace-minimalist/media
      #         ulm_card_navigate_title: Energy
      #         ulm_card_navigate_icon: mdi:fire
      #     - type: "custom:button-card"
      #       color_type: blank-card



         

2 Likes

many many thanks! I wll sit down at the computer right away. This will be my night :smiley: ā€¦thank you very much! Wow nice!!!

1 Like

Does anybody else also have issues with the label from the person card? Since the last update i always have ā€œundefinedā€ as status. If i click on the card then i can see the correct status ā€œHomeā€; ā€œWorkā€; etc.

Here is the code


 - type: 'custom:button-card'
          template: card_person
          variables:
            ulm_card_person_entity: person.christoph
            ulm_card_person_use_entity_picture: true
            ulm_card_person_battery: sensor.iphone_battery_level
            #ulm_address: sensor.iphone_geocoded_location

If i uncomment the ulm_address then i get the exact address, but i just want the Zone as label.
image

Iā€™ve been looking into the card yaml code to figure out the amazing ways that custom button card has been used. One thing Iā€™m not sure about is the following:

- margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"

I get that it translates as ā€œif thereā€™s no entity 1, return -24%, else return -10%ā€, but what does the ? mean after variables but before .entity? i.e. !variables? <-

I also see it in other places like this:

entity: "[[[ return variables?.entity_1?.entity_id; ]]]"

Plus, whatā€™s the difference between these two? ie question mark at the end of variables vs exclamation mark at the beginning?

        variables: "[[[ return variables?.entity_2; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_2; ]]]"

Thanks for that :hugs:

Can someone help me? In the beginning of using Minimalist my yaml code changes are applied immediately. But since a few HA updates every code change I need to restart HA for the changes to take effect.
How can I fix the installation so I dont need to restart HA everytime I change something?

Hey Guys, I made a custom card for light groups and it works great so far. But I found a issue with larger screen sizes. I did a bunch of debuging on the issue and narrowed it down to grid-area being set (and I cant figure out how to unset it). Does anyone know how to unset the grid-area of a card? I made a separate post with more info but have not had a response so figured I would ask here.

Any help is appreciated,

@jarrah

?.

Is an ā€œoptional chainingā€ operator and returns ā€œundefinedā€ instead of an error when the variable or a part is not set.

Read: return entity_2 when not undefined (linking of chains and variables)

Read: if variables.entity_2 is false or undefined ā†’ return true (condition)

@Mitssz You should always be able to reload Ui Minimalist from the dev-tools, to see the changes in your dashboard make also sure to reload the dashboard with the 3 dots in the upper-right corner of your dashboard. FAQ - UI Lovelace Minimalist For more info.

@PartemImperium I have took a look at your code. Maybe try changing the full last styles part to something like this:

              card: #TODO: Look into if minimalist has any way to have a array of cards in a grid.
                type: grid
                square: false
                columns: 2
        styles:
          card:
            - padding: "0px"
          grid:
            - grid-template-areas: "lights"
            - display: "flex"
            - justify-content: "start"
1 Like

Does anybody else have problems with browser mod popups? In certain, I cannot get Thermostat Popup to work and Iā€™m not sure where to trace this. I already cleared browser cache, restarted browser few times, removed Browser Mod integration, restarted Home Assistant and added integration again, same behavior on all devices, the empty popup:

Thx

That pointed me in the right direction. With that as a starter I ended up on the following.

        styles:
          card:
            - padding-bottom: "0px"
          custom_fields:
            lights:
              - width: "100%"
          grid:
            - grid-template-areas: "lights"
            - display: "flex"
            - justify-content: "start"

It works great. No more empty section. Thanks for the help/pointing me in the right direction.

I am running into a new issue now but dont think it will be as easy to fixā€¦ In the normal lights card (inside the auto entities on the bottom part) if the name of the light is longer than the width of the card it just overflows (and the slider follows its width). I found that unsetting the overflow on the inline styles for #name fixes it (because it has a ellipsis class on it that has overflow hidden). But because that is a card in a nested custom_field I dont think I can modify the styles like we did here or use card_mod to add a css style. Is it possible to modify these nested custom_fields card styles or will I just have to rename my lights to be shorter?

Hello, itā€™s me again :smiley:

Iā€™m now, thanks to you, a big step further. There is still a lot to do on my dream dashboard.

Now I have a small request, if it were possible.
Could you please post me your code custom_card ā€œcustom_card_se7enair_welcomeā€ here?

That would be great! Iā€™m sorry for bothering you again!

Thanks and regards :smiley:

At the moment there is no difference to the custom-scenes-card.
I tried to exchange scenes with popups. But so far no sucess.

Hello everyone. I am missing the color temperature indicator within the light popup card after update. How can I get it back?!

Hello,
i working on a custon chip icon state that will change background color if state is ā€œonā€

here is my code :

custom_chip_icon_state:
  template: chip_icon_state
  state:
    - value: 'on'
      styles:
        card:
          - background-color: >
              [[[
                return "rgba(var(--color-red),1)";
              ]]] 

but no color change.
Where am i wrong ?

PS: i refresh lovelace-minimalist and so on.

I have timers that I adjust with a input_number shown as a slider. Is there or can we get a numeric slider for minimalist?

Did you get a solution to this? Iā€™m trying to do something similiar (without using templates)ā€¦
Hereā€™s my code - but colour never changes.

      entity_2:
        entity_id: media_player.mass_bose_home_speaker_500_2
        templates:
          - green_playing      
        tap_action:
          action: toggle