šŸŒ» Lovelace UI ā€¢ Minimalist

HAHA, thanks mate!

Appreciate it :slight_smile:

Iā€™m having problems with the popup.
When I use it, it is really a popup and not positioned on the right as in the video.


main.yaml

  - view_layout:
      grid-area: "card2"
    type: "custom:button-card"
    template: "card_light"
    name: Buitenlamp voordeur
    entity: light.up_down_light_rgb_cct
    icon: mdi:coach-lamp
    variables:
      ulm_card_light_enable_color: true
      ulm_card_light_enable_slider: true
      ulm_card_light_enable_popup: true
      ulm_input_select_option: light 1
      ulm_input_select: input_select.minimalist_ui_switch

popup.yaml

---
type: "custom:state-switch"
view_layout:
  grid-area: "popup"
  show:
    # only show when screen-width is larger than 1100px
    mediaquery: "(min-width: 1100px)"
# add your input_select
entity: input_select.minimalist_ui
default: "default"
transition: "slide-down"
transition_time: 500
# options set in the input_select
states:
  light 1:
    type: "custom:button-card"
    template: "popup_light_brightness"
    variables:
      ulm_popup_light_entity: "light.up_down_light_rgb_cct"

I have installed layout-card and state-switch 1.9.3

Iā€™m trying to edit the visual appearance of the popups. They all have pretty extreme rounded corners and I want to play a little with that. However, I canā€™t seem to find any border-radius related css property or anything else. Where is this border-radius being set?

Hello together,
I would like to create another minimalist dashboard for my phone. Which I would like to completely redesign.

I have created a new .yaml file under ā€œui_lovelace_minimalist\dashboardā€.

But how do I include it in Homeassistant?

Same issue here.
In the empty side (the right one), if you refresh sometimes the page, you will see the error of the popup.

Currently Iā€™m using two popups, both of them worked perfectly before the last update. Now I have those errors:

Errors


So if you want color for your generic cards again: Here you are:

Templates

custom_icon_color:
  variables:
    icon_color: theme
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              styles:
                img_cell:
                  - background-color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),0.05)'; ]]]"
                icon:
                  - color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),1)'; ]]]"

custom_random_icon_color:
  template: custom_icon_color
  variables:
    icon_color: >
      [[[
        let colors = ['red', 'blue', 'green', 'yellow'];
        let colorCount = Math.floor(Math.random() * colors.length);
        return colors[colorCount];
      ]]]

Usage

- type: "custom:button-card"
  name: Download
  icon: mdi:download
  variables:
    icon_color: green
  template:
    - card_generic
    - custom_icon_color
  entity: your.entity

# Random Colors
- type: "custom:button-card"
  name: Download
  icon: mdi:download
  template:
    - card_generic
    - custom_random_icon_color
  entity: your.entity

9 Likes

Same issueā€¦ hope there is a fix soon :slight_smile:

Mind sharing your theme adjustment to get that nice font?

Yes, here you are:

  1. create config/www/style.css and put this into:
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body {
  font-family: "Quicksand", sans-serif;
} 
html {
  font-family: "Quicksand", sans-serif;
--paper-font-common-base_-_font-family: 'Quicksand', sans-serif;
}
  1. add this to your resources:
- url: https://fonts.googleapis.com/css?family=Quicksand
  type: css
- url: /local/styles.css?v=0.05
  type: css
  1. refresh your frontend and cache. Maybe you have to delete it manually. Thats it. :wink:
7 Likes

Ok I have restarted the whole installation and cleared the cache so the default installation (with ā€˜include custom cardsā€™ enabled as part of the installation).

The default dashboard does now come up - I noticed two entries; one being ui-lovelace.yaml in the dashboard folder and the other being adaptive-dash/adaptive-ui.yaml.

I want to separate the various rooms into different files and have done the following:

  • Edited ui-lovelance.yaml as follows
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "Minimalist"
background: "var(--background-image)"
views:
  !include views/home.yaml
  • Created views/home.yaml in the dashboard folder with the following content (understand I need to customise the entities etc. but wanted to get the card up first to confirm the overall folder structure)
title: "Home"
path: "home"
cards:
  - type: "custom:button-card"
    template: "card_welcome_scenes"
    #triggers_update: input_boolean.<Your_boolean>
    #entity: input_boolean.<Your_boolean>
    variables:
      ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update
      ulm_weather: "weather.YOUR_WEATHERPROVIDER"
      entity_1:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "blue"
      entity_2:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "red"
      entity_3:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "green"
      entity_4:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "purple"
      entity_5:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "yellow"
      entity_6:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "pink"
      entity_7:
        entity_id: "<YOUR_ENTITY>"
        icon: "mdi:home" #OPTIONAL
        name: "YOUR_NAME" #OPTIONAL
        color: "yellow"

But when I navigate to http://192.168.2.142:8123/ui-lovelace-minimalist the dashboard is empty

Any idea where I go wrong here?

@tfmeier : before trying custom cart, try something easier (maybe because of the entities you have some issues and itā€™s not appearing).
e.g.:

title: "home"
path: "home"
#theme: "minimalist-desktop"
cards:
  - type: vertical-stack
    cards:
 
      - type: "custom:button-card"
        template: card_title
        name: bla bla bla
        label: "bing bang bong"

Thanks @adynis.

I have created a standard weather card with the correct entity and the dashboard still stays blank. Iā€™m accessing the dashboard at http://192.168.2.142:8123/ui-lovelace-minimalist

title: "home"
path: "home"
theme: "minimalist-desktop"
cards:
  - type: "custom:button-card"
    template: card_weather
    entity: weather.forecast_homeassistant
    variables:
      ulm_card_weather_name: " "
      ulm_card_weather_primary_info:
        - wind_speed
        - precipitation_probability
      ulm_card_weather_backdrop:
        fade: true

What Iā€™m not entirely sure about is the usage of the path variable. Couldnā€™t really find anything on path.

What exactly do we specify here and is there a need to configure anything in Home Assistant at all to match this?

According to the docs you need to provide list items underneath views: So try changing this:

to:

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

title: "Minimalist"
background: "var(--background-image)"
views:
  - !include views/home.yaml

The path is an extension to the URL of your dashboard view. The format is internal_ip:port/dashboard_name/path or in your case http://192.168.2.142:8123/ui-lovelace-minimalist/home.

Great. Making some progress. Thanks. I had taken this code from somewhere else.

See the updated URL using the /home/ suffix so thatā€™s clear as well now.

The only thing still going wrong is the button-card doesnā€™t load

image

the ui_lovelave_minimalist/custom_components/custom_cards/button-card folder is there and the button-card.js file is present as well.

Looking at the page source in the browser the button-card is loaded. Cleared the cache and used a few different browsers.


<!DOCTYPE html><html><head><link rel="modulepreload" href="/frontend_latest/core.f2e094cd.js" crossorigin="use-credentials"><link rel="modulepreload" href="/frontend_latest/app.933bd729.js" crossorigin="use-credentials"><meta charset="utf-8"><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="icon" href="/static/icons/favicon.ico"><meta name="viewport" content="width=device-width,user-scalable=no,viewport-fit=cover,initial-scale=1"><style>body{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;padding:0;height:100%}</style><title>Home Assistant</title><link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4"><link rel="apple-touch-icon" sizes="180x180" href="/static/icons/favicon-apple-180x180.png"><meta name="apple-itunes-app" content="app-id=1099568401"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="Home Assistant"><meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"><meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"><meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"><meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"><meta name="msapplication-TileColor" content="#03a9f4ff"><meta name="mobile-web-app-capable" content="yes"><meta name="referrer" content="same-origin"><meta name="theme-color" content="#03A9F4"><meta name="color-scheme" content="dark light"><style>html{background-color:var(--primary-background-color,#fafafa);color:var(--primary-text-color,#212121)}@media (prefers-color-scheme:dark){html{background-color:var(--primary-background-color,#111);color:var(--primary-text-color,#e1e1e1)}}body{font-family:Roboto,Noto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;height:100vh;margin:0;padding:0}#ha-launch-screen{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#ha-launch-screen svg{width:170px;flex-shrink:0}#ha-launch-screen .ha-launch-screen-spacer{flex:1}</style></head><body><div id="ha-launch-screen"><div class="ha-launch-screen-spacer"></div><svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect fill="#41bdf5" width="200" height="200" ry="16.4"/><path fill="#fff" d="m38.416 165.29v-53.456h-13.901a3.7332 3.7332 0 0 1-2.662-6.3504l74.804-76.084c1.8068-1.8376 4.7612-1.8628 6.5992-0.056l0.048 0.048 39.04 39.518v-7.3188a3.1112 3.1112 0 0 1 3.1112-3.1112h12.964a3.1112 3.1112 0 0 1 3.1116 3.1112v26.855l16.627 17.047a3.7332 3.7332 0 0 1-2.6728 6.34h-13.954v53.456a3.1112 3.1112 0 0 1-3.1112 3.1112h-116.89a3.1112 3.1112 0 0 1-3.1112-3.1112zm82.556-65.304a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0176 5.996 6.0176c0.9256 0 1.802-0.2108 2.5848-0.5868l8.6072 8.6384v8.3672l-10.792 10.831v-7.936a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v11.947l-9.9932 10.029v-58.912l8.2076-8.2368a5.9544 5.9544 0 0 0 2.5848 0.5864c3.3116 0 5.996-2.694 5.996-6.0176 0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 0.9292 0.2096 1.8088 0.584 2.5944l-7.3792 7.406-7.3796-7.406a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 3.3236 2.6844 6.0176 5.996 6.0176 0.9256 0 1.802-0.2108 2.5848-0.5864l8.2072 8.2368v42.064l-14.39-14.442v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-11.192-11.232v-11.145a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v12.807l12.363 12.407h-7.108c-0.8232-2.3372-3.044-4.0116-5.6548-4.0116-3.3112 0-5.996 2.694-5.996 6.0172 0 3.3236 2.6848 6.0176 5.996 6.0176 2.6108 0 4.832-1.6744 5.6548-4.012h11.105l17.216 17.278v30.03l-9.1932-9.2264v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.996 2.694-5.996 6.0172 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-13.376-13.423a6.0116 6.0116 0 0 0 0.5844-2.5944c0-3.3232-2.684-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0172 5.996 6.0172c0.9256 0 1.8024-0.2104 2.5848-0.5864l13.376 13.424h-7.108c-0.8232-2.3372-3.044-4.012-5.6548-4.012-3.3112 0-5.996 2.6944-5.996 6.0176s2.6848 6.0172 5.996 6.0172c2.6108 0 4.8316-1.6744 5.6548-4.0116h11.105l11.192 11.232h5.6528l11.592-11.633h10.705c0.8232 2.3368 3.044 4.0112 5.6548 4.0112 3.3112 0 5.996-2.694 5.996-6.0172s-2.6848-6.0172-5.996-6.0172c-2.6108 0-4.8316 1.6744-5.6548 4.0116h-12.361l-10.764 10.802v-13.18l12.82-12.866h20.698c0.8232 2.3372 3.044 4.0116 5.6544 4.0116 3.3116 0 5.996-2.694 5.996-6.0172 0-3.3236-2.6844-6.0176-5.996-6.0176-2.6104 0-4.8312 1.6744-5.6544 4.012h-16.702l11.963-12.006v-10.029l8.6068-8.6384a5.9544 5.9544 0 0 0 2.5852 0.5868c3.3112 0 5.996-2.6944 5.996-6.0176s-2.6848-6.0172-5.996-6.0172-5.996 2.694-5.996 6.0172c0 0.9292 0.21 1.8088 0.5844 2.5944l-5.7804 5.8016v-18.367a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v18.366l-5.7808-5.8016zm-51.78 57.58c-1.3244 0-2.3984-1.0776-2.3984-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm17.588-18.052c-1.3248 0-2.3988-1.0776-2.3988-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm-20.786-2.808c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm-1.9988-20.058c-1.3244 0-2.398-1.0776-2.398-2.4072 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm49.964 2.808c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm27.181 18.453c-1.324 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-10.392 19.255c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm11.192-57.364c-1.3244 0-2.3984-1.078-2.3984-2.4072s1.074-2.4068 2.3984-2.4068 2.3984 1.0776 2.3984 2.4068-1.074 2.4072-2.3984 2.4072zm-13.191-15.645c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-15.989-9.628c-1.3244 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-25.582 0c-1.324 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-20.785 9.2268c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072s2.3984 1.0776 2.3984 2.4072c0 1.3292-1.074 2.4068-2.3984 2.4068zm15.189 14.843c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm33.976 1.2036c-1.324 0-2.398-1.078-2.398-2.4072s1.0736-2.4068 2.398-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4072-2.3984 2.4072z"/></svg><div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div></div><home-assistant></home-assistant><script>function _ls(e){var t=document.documentElement,i=t.insertBefore(document.createElement("script"),t.lastChild);return i.defer=!0,i.src=e,i}window.Polymer={lazyRegister:!0,useNativeCSSProperties:!0,dom:"shadow",suppressTemplateNotifications:!0,suppressBindingNotifications:!0},window.polymerSkipLoadingFontRoboto=!0,"customElements"in window&&"content"in document.createElement("template")||document.write("<script src='/static/polyfills/webcomponents-bundle.js'><\/script>");var isS11_12=/(?:.*(?:iPhone|iPad).*OS (?:11|12)_\d)|(?:.*Version\/(?:11|12)(?:\.\d+)*.*Safari\/)/.test(navigator.userAgent)</script><script>function _pf(o,t){var n=document.createElement("link");n.rel="preload",n.as="font",n.type="font/woff2",n.href=o,n.crossOrigin="anonymous",document.head.appendChild(n)}-1===navigator.userAgent.indexOf("Android")&&-1===navigator.userAgent.indexOf("CrOS")&&(_pf("/static/fonts/roboto/Roboto-Regular.woff2"),_pf("/static/fonts/roboto/Roboto-Medium.woff2"))</script><script crossorigin="use-credentials">isS11_12||(import("/frontend_latest/core.f2e094cd.js"),import("/frontend_latest/app.933bd729.js"),window.customPanelJS="/frontend_latest/custom-panel.228367ca.js",window.latestJS=!0,window.globalThis||(window.globalThis=window))</script><script>import("/ui_lovelace_minimalist/cards/simple-weather-card/simple-weather-card.js");
    import("/ui_lovelace_minimalist/cards/my-cards/my-cards.js");
    import("/ui_lovelace_minimalist/cards/button-card/button-card.js");
    import("/ui_lovelace_minimalist/cards/lovelace-layout-card/lovelace-layout-card.js");
    import("/ui_lovelace_minimalist/cards/lovelace-auto-entities/lovelace-auto-entities.js");
    import("/ui_lovelace_minimalist/cards/mini-media-player/mini-media-player.js");
    import("/ui_lovelace_minimalist/cards/mini-graph-card/mini-graph-card.js");
    import("/ui_lovelace_minimalist/cards/weather-radar-card/weather-radar-card.js");
    import("/ui_lovelace_minimalist/cards/lovelace-card-mod/lovelace-card-mod.js");
    import("/ui_lovelace_minimalist/cards/lovelace-state-switch/lovelace-state-switch.js");
    import("/hacsfiles/iconset.js");
    import("/ui_lovelace_minimalist/cards/light-entity-card/light-entity-card.js");
    </script><script>window.latestJS||(window.customPanelJS="/frontend_es5/custom-panel.9875c7eb.js",_ls("/frontend_es5/core.5407379b.js"),_ls("/frontend_es5/app.267f38e0.js"))</script><script>if (!window.latestJS) {
        }</script></body></html>

This really should display, right?

Hey @Stimo I am having the same issue. Did you manage to get it solved?

I havenĀ“t been able to take a look at this yet, but there is an issue regarding this

1 Like

Fixed. #943

How i can force an aspect ratio on the custom camera card?

Since the doorbell is another aspect ratio, it looks weird.

I tried fixing it myself in the css file, but didnt work

Managed to fix the issue I reported 4 days ago. The issue was invalid entities coupled with caching. Definetly been a learning curve but I was expecting this not to be a smooth ride (which is why I went this route as opposed to the mushroom route)ā€¦

I have a Denon AVR in my house I would like to integrate into my minimalist dashboard. Looking at the available cards I can see the media_player card but supplying the one entity I have of the Denon I only get volume control and start/stop/previous/next. Enabling the popup (ulm_card_media_player_enable_popup = true) doesnā€™t do anything

image

but no ability to control the rest of the AVR like in the following picture.

image

How can I implement this in minimalist?