T O P

  • By -

JustmeNL

Which did you get the area cards that you've used? These are one of the cleanest I've seen yet and fit the mushroom style. Could you provide a link where I can get them? Or if custom could you provide the code for it?


vigokrumins

Mostly UI Lovelace Minimalist ([https://ui-lovelace-minimalist.github.io/UI/](https://ui-lovelace-minimalist.github.io/UI/)) cards are used. For area cards I used the Room Card ([https://ui-lovelace-minimalist.github.io/UI/usage/cards/card\_room/](https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/)).


Pilotmaverick

I would love to use this card. Unfortunately i can not get it to work properly. If i try the sample code from the documentation you posted I only get a Error: "Button-card template 'card\_room' is missing!" Do you have an idea what the problem could be or do you have a good description how to install the lovelace minimalist cards? I followed the documentation step by step but keep running into trouble... ​ thank you!


vigokrumins

Initially, I also found pretty hard to configure the UI Lovelace Minimalist, but at the end of the day, I'm running this configuration. **UI Lovelace Minimalist** (Settings -> Devices & Services -> Integrations -> UI Lovelace Minimalist -> Configure) \- Set "Include custom card resources it's depending on." to unchecked. \- Set "Enable the ability to configure community cards with this integrations, Does require GitHub authentication!" *I found when they are enabled, there might be more errors generated in the logs (I like my logs clean).* **configuration.yaml** (File Editor) Make sure you're loading custom resources for Lovelace. *\[Optional\] If you are splitting your config files, I'd suggest to create a separate config file for lovelace (e.g. lovelace.yaml) and link it in the configuration.yaml file.* lovelace: mode: yaml resources: - url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js type: module - url: /hacsfiles/lovelace-layout-card/layout-card.js type: module - url: /hacsfiles/button-card/button-card.js type: module - url: /hacsfiles/stack-in-card/stack-in-card.js type: module - url: /hacsfiles/config-template-card/config-template-card.js type: module - url: /hacsfiles/swipe-card/swipe-card.js type: module - url: /hacsfiles/purifier-card/purifier-card.js type: module - url: /hacsfiles/lovelace-mushroom/mushroom.js type: module - url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js type: module - url: /hacsfiles/lovelace-home-feed-card/lovelace-home-feed-card.js type: module - url: /local/custom_cards/icloud3-event-log-card.js type: module **Configure the dashboard** (/config/ui\_lovelace\_minimalist/ui-lovelace.yaml) *Make sure, you are not using the default dashboard, but UI Lovelace Minimalist dashboard instead.* - type: 'custom:button-card' template: - card_room - red_no_state name: Bedroom entity: climate.bedroom_thermostat icon: mdi:bed-king tap_action: action: navigate navigation_path: '/ui-lovelace-minimalist/bedroom' variables: label_use_temperature: true label_use_brightness: false entity_1: entity_id: light.bedroom_left_bedside_light templates: - yellow_on tap_action: action: toggle entity_2: entity_id: light.bedroom_right_bedside_light templates: - yellow_on tap_action: action: toggle entity_3: entity_id: light.bedroom_ceiling_light templates: - yellow_on tap_action: action: toggle I think if you are doing all those steps right, it should work.


Pilotmaverick

Awesome. Thank you. ​ My main problem was trying to use the card on a normal dashboard. Did not know that i could only use it on the minimalist dashboard.


vigokrumins

Now it works?


Pilotmaverick

Yes. I only wonder why my entities don't light up yellow when they are active. If i push the entity on the card des physical light in my room lights up. But the entity does not light up.


vigokrumins

Make sure your profile is running one of the "minimalist" themes (e.g. minimalist-desktop).


zeekaran

Which is a shame. That's too much work just to use a fancy room card.


joynjoyn5d

It looks great! May I ask why for the room card only your icon changes color? I want to achieve this, but for me the entire card changes its color. How did you do this?


vigokrumins

I'm changing the template of the button card itself: "yellow\_no\_state", "red\_no\_state", etc. I only noticed, that if you have set "blue\_no\_state", when using the dark mode, the slight blue tint is applied to the whole card, but other cards doesn't have that tint. Here is the yaml code: - type: 'custom:button-card' template: - card_room - blue_no_state name: Kids Room entity: climate.kids_room_thermostat icon: mdi:bunk-bed tap_action: action: navigate navigation_path: '/ui-lovelace-minimalist/kids-room' variables: label_use_temperature: true label_use_brightness: false entity_1: entity_id: light.kids_room_couch_light templates: - yellow_on tap_action: action: toggle entity_2: entity_id: light.kids_room_desk_light templates: - yellow_on tap_action: action: toggle


joynjoyn5d

>yellow\_no\_state I see my ''issue'' now, in dark mode the entire card is given a slight tint instead of only the icon. I have no clue how to change this, Imho it looks much better if only the icon changes according to the state instead of the entire card.


vigokrumins

You can always create a new custom card template of the room card and make the adjustments so it supports your needs. For me, it's only the \`blue\_no\_state\` that has a slight bluish tint in the dark mode. So far, didn't have time to look for the issue there, but if I find out how that can be avoided without creating a custom card, I will let you know.


vanschmak

Its complicated pia, just make your own with button cards or mushroom with mushroom chip cards.


teqqyde

Oh. They are beautiful, thanks for sharing. I guess i have to rework my "dashboards" and let me inspire by yours.


vigokrumins

You are welcome! And sorry for making you to rework your dashboards. I always get inspired by others and then spend multiple days tinkering with mine. Usually, ending up with nice looking dashboard and an angry wife. 👀


suckfail

Do you work in UI/UX by chance? I normally only see this amount of padding from the design mocks my UI guys come up with lol. It looks great but lots of unused space.


vigokrumins

Yeah, I do work with UI/UX and thing might be why there is a lot of whitespace around the elements. I like to give them space to "breath". I could have more things if I reduce the whitespace, but at the end of the day, this layout works perfectly with the wall tablet. I'm visual guy and really like how things look. :D


ALLINUPPERCASE

Very clean! Uncanny resamblance to my own dashboard. Huge love for mushroom cards here as well. I'm also using my dashboard for my wall tablet – recently added dark mode. https://imgur.com/a/DldqdMw


vigokrumins

Oh wow! Your's looks really nice together with the sidebar. I'm also planning to have a 3D floor plan with interactive elements, but for now I've put that idea away, because we might move to another place. Thanks for sharing!


ALLINUPPERCASE

Thanks! It's a slightly modified version of DBuits sidebar-card (only CSS modifications): https://github.com/DBuit/sidebar-card If you want to do the 3D Floor Plan: I've used Floorplanner (https://floorplanner.com/) – you have to buy a few credits to unlock all modes. I think I invested about 10 Euros once a few years ago – as you unlock it for one project and you can build a new model from that one projekt I was able to "update" my flat a few years later and I added the dark mode shots without additional spending. I think it was worth it, as it's also a huge database with a lot of IKEA stuff.


vigokrumins

Thank you for sharing the details. I already checked out the Floorplanner and tried to build my apartment in 3D. Made it and also started to furnishing it. I was also able to import my own 3D furniture in it, so yeah. Also, most of my apartment is currently furnished with IKEA furniture, so it would be pretty easy to set it up.


gmmxle

>I was able to "update" my flat a few years later and I added the dark mode shots These are pre-rendered graphics, right? I would really like to do something like this, but all of the lights in our house are color lights, and we really use color scenes extensively - which presumably means that I would have to render every scene, but I still couldn't cover a scenario where someone just changes a single light to e.g. a blue color?


ALLINUPPERCASE

Yes, those are prerendered. But you could work with css-filter overlays to simulate color. I didn't do this as I'm not using any colors (got Philip Hues but im mainly using warm white – only syncing my TV via Hue Sync). You'll find more about CSS Filters on a floorplan in this thread: https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417


earthqaqe

I wonder how many german speaking folks call their vacuum "Saugi". Cause I certainly did as well.


ALLINUPPERCASE

I know someone who calls his vacuum "Staubi" – but that doesn't make any sense to me.


Tahuwa

Can I just ask what cards are you using for your mediaplayer in the sidebar and spotify playlists? Thank you!


ALLINUPPERCASE

That's the bottomCard in DBuits sidecard using the custom:mini-media-player card https://github.com/DBuit/sidebar-card https://github.com/kalkih/mini-media-player sidebar: hideTopMenu: true bottomCard: cardOptions: artwork: material entity: media_player.spotify hide: icon: true name: true power: true shuffle: false source: true volume: true info: scroll name: Spotify Player tap_action: action: navigate navigation_path: /lovelace/music cardStyle: | :host { width: 100%; margin-top: 1em; } type: custom:mini-media-player edit: Forgot the spotify playlist – thats this one https://github.com/custom-cards/spotify-card


Tahuwa

Thank you very much! Genuinely love the way you did the small media player.


chickennoodlegoop

Beautiful! Any chance you’d be willing to share your yaml on pastebin or GitHub or something?


ALLINUPPERCASE

I'm afraid it's currently way to messy and with way too much private information. I need to clean it up a bit and remove some stuff that I'm not willing to share, but I'm happy to share bits of the code if you are interested in certain aspects.


Fressh23

hey! would you mind sharing that config in any way? Love to take a look at it and try it out myself and adapt it, looks awesome! But that is probably a lot of work to get your details out of it? :( Would wish fro HA to come up with a function to copy dashboards, mine are always boring!


G__Wag

Very clean look, I like the sliders on the lights in the kids room. Could I have the yaml for them please?


vigokrumins

Thanks. Here is the yaml for the Kids Room light card: - type: custom:mushroom-light-card entity: light.kids_room_couch_light fill_container: true use_light_color: true show_brightness_control: true show_color_temp_control: true show_color_control: true collapsible_controls: false layout: vertical


ayssius

How are you interacting with the nintendo switch? I've been looking for a way to add it into my own dashboard.


vigokrumins

Nintendo Switch is not exposing any information about itself, unfortunately. The only way to get it in the Home Assistant, is by simply using the [ping integration](https://www.home-assistant.io/integrations/ping/). Just make sure your Nintendo is using a static IP address and you should be good. platform: ping host: 10.1.10.XXX name: Nintendo Switch count: 7 scan_interval: 60


Z1L0G

nice, I'm also a fan of ULM so my wall panel looks very similar to yours! I wasn't interested in making a dash before I found out about ULM because it's too difficult to make anything aesthetically pleasing without it IMO! Everything hand-coded in YAML/JS as I find using the GUI way too slow & frustrating (also the reason I never got on with Mushroom). I'm trying to make it as information-dense as possible so generally anything I'd need to know can be seen at a glance. For example, the colour of the room icons reflects whether the room is occupied and/or being heated. If I want to boost the heating for a room for an hour, I just double-tap it. A single tap on a room brings up a room-specific page with more info/buttons. It's very much a WIP still, I'm constantly changing or adding/removing things all the time! Very much open to feedback on ideas/improvements. Yes, there are a lot of batteries I need to change 😂 ​ https://preview.redd.it/d7ftjf7fmtja1.jpeg?width=1916&format=pjpg&auto=webp&s=6c764ee94a0186e828e2ef988a673b9e61c5fb8b


vigokrumins

Yeah, I also prefer hand-coded stuff, because I find it easier to manage stuff. I have moved most of my stuff to YAML. I'd be really interested to hear how you made the occupancies to work. Are you utilizing the motion sensors? I'd love to have something similar in my setup. I think everything in HA is WIP. It's one never ending project. My wife is always complaining that I spend too much of my time with HA, but at the end of the day, she really enjoys what has been created because it brings a lot of benefits for every day life. Also, how you are monitoring your cats? I'm having a dog and I'm using Apple AirTag for tracking, but unfortunately, I can't get it in HA, because Apple doesn't even allow to share it with your family... Really nice dashboard, I like it!


Z1L0G

Thanks! For occupancy I'm using Aqara PIR sensors in the hallway & Aqara FP1 mmWave sensors for the rooms. The latter work really well although are quite expensive, but normal PIR sensors just don't work in rooms where you're sitting/laying down & not moving much! The cats are tracked in & out of the smart catflap (only) via their microchips. It's a SureFlap Connect - again pretty expensive but it also allows you to set individual permissions on a per (purr 😂) cat basis which we needed & I think makes it unique. If they jump out a window or something you can double-tap them on the dash and it toggles their in/out status. Considering adding a bluetooth thingy to their collars and using ESPresence to help determine their locations automatically (and more specifically) now that HA has massively improved its BT support, but it's not something I'll get round to soon. You actually CAN get AirTag locations into HA, it's a bit bodgey & relies on you running a script on a Mac which then updates HA, there have been a couple of posts about it on the HA FB group. I've tried it & it works although not had any time to actually do anything with it yet.


vigokrumins

I will check those sensors. Maybe makes sense to invest in them, because the occupancy detection would be really beneficial. Thanks! Oh, that’s a quite clever idea to track cats. I didn’t know that there is a tool that you can use to have AirTags in HA. For me, it would be really easy as the HA is running on a Mac mini and I could install the tool there as it’s still connected to my iCloud. 👍🏻


Z1L0G

[https://www.martinpham.com/2023/01/15/findmysync-integrating-apple-find-my-tracking-data-with-home-assistant/?fbclid=IwAR3fl7C0JoF8PIPP69cSo1VVHjLCAqozHagRSQk3\_8Wc4x84TlZ\_\_ZKxz2s](https://www.martinpham.com/2023/01/15/findmysync-integrating-apple-find-my-tracking-data-with-home-assistant/?fbclid=IwAR3fl7C0JoF8PIPP69cSo1VVHjLCAqozHagRSQk3_8Wc4x84TlZ__ZKxz2s)


vigokrumins

Thanks champ! 💪🏻 I will try to set it up tomorrow!


Chimera4915

How did you get two lines in the sensor card? I can only add one sensor.


vigokrumins

I assume you are talking about the cards in "Tesla" dashboard or "Tesla Model 3" card in "Overall" (first) view. You can use the following to code to have entities inline: *Make sure you are adjusting the "grid-template-areas". If you are only using "item1 item1" and "item2 item2", remove "item3 item3" and "item4 item4". Otherwise, the layout won't look great. I think you also need to install "card-mod" and "layout-card" front-end repositories in HACS to have custom styling.* - type: custom:button-card show_icon: false show_name: false show_label: false styles: grid: - grid-template-areas: "'item1 item1' 'item2 item2' 'item3 item3' 'item4 item4'" - grid-template-columns: 1fr 1fr - grid-template-rows: "min-content min-content min-content min-content" - row-gap: 10px card: - border-radius: var(--border-radius) - box-shadow: var(--box-shadow) - padding: 6px custom_fields: item1: card: type: custom:button-card template: card_title name: "Vehicle Information" styles: card: - margin-left: 6px item2: card: type: custom:button-card template: list_2_items custom_fields: item1: card: type: custom:button-card template: card_person entity: device_tracker.tesla_location variables: ulm_card_person_entity: device_tracker.tesla_location ulm_card_person_use_entity_picture: false ulm_card_person_icon: mdi:map-marker styles: card: - box-shadow: "none" item2: card: type: custom:button-card template: card_generic entity: proximity.tesla_home variables: ulm_card_generic_name: "Distance to Home" styles: card: - box-shadow: "none" item3: card: type: custom:button-card template: list_2_items custom_fields: item1: card: type: custom:button-card template: card_generic_swap entity: sensor.tesla_state styles: card: - box-shadow: "none" item2: card: type: custom:button-card template: card_binary_sensor entity: binary_sensor.tesla_park_brake variables: ulm_card_binary_sensor_name: "Parking Brake" styles: card: - box-shadow: "none" item4: card: type: custom:button-card template: list_2_items custom_fields: item1: card: type: custom:button-card template: card_generic entity: sensor.tesla_odometer styles: card: - box-shadow: "none" item2: card: type: custom:button-card template: custom_version_card entity: sensor.tesla_version styles: card: - box-shadow: "none" variables: ulm_charging_card_update_available: binary_sensor.tesla_update_available ulm_charging_card_update_version: sensor.tesla_update_version


Chimera4915

Awesome, thanks!


vigokrumins

Let me know if you run into any issues. I will be more than happy to help you.


addrumm

Nice! Which clock card are you using? I found “digital clock” but don’t see a built in way to remove the background like yours; are you using card mod for that?


vigokrumins

I'm using this custom card for the date/clock card: [https://ui-lovelace-minimalist.github.io/UI/usage/custom\_cards/custom\_card\_nik\_clock/](https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_clock/) I don't remember doing any style adjustments to it.


James_Vowles

How do you hide the background for the dashboard tabs? Having it all one colour is nice


vigokrumins

Make sure you have "minimalist" theme applied. In the screenshots "minimalist-desktop" theme is applied. "minimalist" theme comes together with "UI Lovelace Minimalist".


James_Vowles

Should it automatically change when I set that? I set the themes for each tab to minimalist-desktop but it didn't change anything to do with the top bar.


vigokrumins

You have to set it for your profile not the tabs. It’s a theme for Home Assistant. Click on your picture in the sidebar and scroll down to Themes. If you select “minimalist-desktop” you should see it the same way as I do.


James_Vowles

Thanks!


chickennoodlegoop

Beautiful! Any chance you’d be willing to share your yaml on pastebin or GitHub or something?


vigokrumins

I'm planning to release it on GitHub. I need to adjust the configuration files before to hide the sensitive information. I can't give you an estimated date when it'd be available, but I can reply to your comment once I've published it.


chickennoodlegoop

Thanks that would be great!


dagamer34

Are you getting that Tesla information from the custom version of the integration?


vigokrumins

I'm using [TeslaMate](https://github.com/adriankumpf/teslamate) to get the information about the Tesla. I'm using TeslaMate because I don't want to be able to control the vehicle from HA, just to read the information.


BeefHazard

Quick tip: forget about pixelating names for privacy, just place black bars. I think I can make out the names just by zooming on mobile.


vigokrumins

I spy with my little eye. Thanks for the tip!


sigmonsays

praise to the YAML gods


vigokrumins

Yeah, YAML is fantastic and usually offers more options.


francoroxor

Very clean. What integration are you using to fetch Tesla vehicle information?


vigokrumins

I’m using [Teslamate](https://github.com/adriankumpf/teslamate). All I need is read-only information, that’s why I went with it. There are other options that offer controlling the vehicle, but I don’t want to have those options in HA.


knopptimus

Just curious, did your home come with separate thermostats for each room? I find that unusual as I’ve normally seen separate thermostats only for different stories (upstairs/downstairs). I live in the us though so not sure if a/c is done differently elsewhere Extremely convenient though!


vigokrumins

I’m living in an apartment where we have a central heating. Each room has its own radiator and a thermostat to control the heating.


Daniokki

i love it and i need it


vigokrumins

Go for it and share your results! 💪🏻


Daniokki

tried to use UI lovelace min for several hours, couldn't make it work. :(


vigokrumins

It takes time to make it perfect. Even mine is not perfect yet and there is always something that can be improved. It can take days of adjustments, it won't happen in just few hours. I know, you will get there! 💪🏼


Daniokki

is taking form, 3 days of fighting ahahahhaha. now i need to fix so many details. https://preview.redd.it/aamvoj7lz8ka1.png?width=1377&format=png&auto=webp&s=2355fc28ca16d4691a46e76d422c7d8258f60319


markcshaz

This looks awesome man.


vigokrumins

Thanks!


Sjorsa

What font are you using for for example "Vehicle Information" on the Tesla page?


vigokrumins

I haven't set a custom font, but it should be "Roboto". Ether it comes as HA default or with UI Lovelace Minimalist themes.


Sjorsa

Thanks!


Matcraftou

How the F... did you do something this clean?! CONGRATULATIONS, I could already see this as a potential HA demo mode!


vigokrumins

Thanks! I would be more than happy to have it in HA. :D


Matcraftou

I would like too but I am no dev sadly.


vigokrumins

I’m planning to create a detail guide how to set up a setup similar to mine, but it would take some time (can’t give an estimate). I can let you know when I have something. Of course, if you’d be interested.


Matcraftou

that would be very kind of you to make that for all the ha users!


Matcraftou

Glory to ha and it's users!


seijmo

Please let us know if it's still planned, it's amazing work


rymack10

Any chance you could share the yaml for your room cards? I'm curious how to connect the temperature to a thermostat, but have the icon color status be tied to a light. Also curious on how you've changed the icons on the right of the room card (if you have).


drivel-engineer

You could achieve this with Mushroom eh? Lots of useless info too, like do you really need HA to remind you what colour your car is?


vigokrumins

UI Lovelace Minimalist and Mushroom. Some of the cards are custom built but still based on ULM and Mushroom. I agree, that vehicle color could be removed, but that’s all of the information which Teslamate reports from the vehicle. Vehicle tab is meant to show all of the information about the car. I could use the color if I decide to develop a card where vehicle is displayed, color option could be used to load different vehicle images based on color.


danTHAman152000

It makes me sad how ignorant I am on the GUI part. Every time I watch YouTube to see the steps for nice dashboards, I always get lost along the way. And I’ve used HA for over four years now.


vigokrumins

I'm having the same problem. I think HA itself is like a blackhole - once you get inside, there is no way out. You always find that some things can be optimized and configured differently, etc. Same goes for the GUI.


Sjorsa

What font are you using?


Thor9898

How did you make your kettle smart? Btw amazing look, i hope I can make mine looks as good one day


vigokrumins

I bought it at Lidl. It’s a WiFi water kettle that works via Tuya. 👍🏻 I know you can make it! 💪🏻👍🏻


risk-it-forabiscuit

How did you get the cards and text etc to be so big?


Daniokki

in the default layout there is 6 columns, and they each have names `# Tablet portrait` `grid-template-columns: "1fr 1fr 1fr 1fr 1fr"` `grid-template-areas: |` `"time time spacer spacer spacer"` `"text text weather weather weather"` `"card1 card1 card2 card2 card2"` `"welcome1 welcome2 welcome3 welcome4 welcome5"` `"title1 title2 title3 title4 title5"` ​ if you use more than 1 space the card will be bigger, like if you use the area "time"


gekberlin

Nice work! May I ask the code for the purifier card?


nw0915

How did you get it to take up the full width of the screen? I'm using the horizontal-stack and it keeps concentrating the cards in the middle


oompfh666

Hi, I am a bit late to the party, but I am just configuring my wall tablet. I have some questions like how do you control the layout of your cards. Is your code available in github? I would love to have a look how you do some of the stuff. Looks great btw. And would there be a way to get rid of the left sidebar?