Home Assistant Mobile Dashboard

A mobile Home Assistant dashboard inspired by LE0N's Rounded theme

⚠️ UPDATE 8/27/2024:

I am aware of a breaking change that has caused the title of the graph cards to appear below the graph itself.

Like this ⬇

I don't expect to be able to fix this myself, as I'm not that great with CSS and it sounds like that's the root of the issue. If anyone manages to find a solution, open a pull request or post it in this community thread, we'd all greatly appreciate it.

So if you're seeing this on your dashboard and don't know how to fix it, you're not the only one 😉

---

No, I'm not creative enough to give this a name. Yes, I know I could just name it "Rounded dashboard based off LE0N's dashboard," but that's a bit of a mouthful. Personally, I think Home Assistant Mobile Dashboard has a nice ring to it, don't you?

Beginners Warning: This repo is pretty much a dump of my config and will require some work to get working on your end. As a result, I'm assuming you have some basic YAML knowledge and will be able to troubleshoot basic issues and errors, because your dashboard will likely be freaking out with all kinds of errors after pasting in my code. Sorry in advance 😜

---

You'll need the following custom repos:

All these can be installed via HACS.

• Layout Card
• Button Card
• Card Mod
• My Cards Bundle
• Swipe Card
• Vertical Stack-In Card
• Mushroom Cards
• Mini Graph Card
• Timer Bar Card
• Custom Brand Icons (optional but recommended, gives you more icon choices)

---

Credit where credit is due (once again): Of course, I need to give credit to LE0N and his amazing work with his Rounded dashboard and theme. I went through 4 different mobile dashboards within about 7 months before I settled on his, and I think I'll be sticking with it for quite a while. The layout of this dashboard is very heavily based off his, and the theme is pretty much identical. I used a lot of his custom button cards as well as created a few of my own.

---

There's a few things you need to do before you paste in the YAML file so LISTEN UP:

Step 1: Copy the weather_icons folder into your config/www folder. This is required for the weather card on the main page.

This thing right up here ⬆

Step 2: Import the Rounded theme file:

• 2.1: Navigate to the rounded.yaml theme file and choose Copy raw file.

• 2.2: Access your Home Assistant configuration.yaml file and add the following lines if you don't already have them:

frontend:
  themes: !include_dir_merge_named themes

• 2.3: Create a new folder inside the config directory named "themes" (yes, it's case sensitive).
• 2.4: Inside that folder, create a new file, name it rounded.yaml, and paste in the rounded.yaml file that you copied earlier.
• 2.5: Save the file and restart Home Assistant.

Step 3: Ensure you can access and use the new Rounded theme via your profile.

oh and don't mind me having like 50 themes on my instance

If you don't see it, repeat step 2 and make sure you named the folders and files correctly.

Time to import the actual dashboard...

• Open the mobile_dash_redacted_master.yaml file and choose Copy raw file.
• In Home Assistant, go to Settings > Dashboards and create a new dashboard from scratch.

• Open the dashboard and access the raw configuration editor:

• Delete any existing lines and then paste in the YAML file that you copied earlier. There should be ~5100 lines.
• Save the file and exit the raw config editor.

From here, you should be able to begin clicking through each of the cards and replacing my entities with yours.

DON'T OPEN AN ISSUE UNTIL YOU READ THIS!!!

MY HOME ASSISTANT ENTITIES ARE NOT THE SAME AS YOUR HOME ASSISTANT ENTITIES. This means that you'll be seeing a bunch of errors with stuff like "Entity not found" and "ButtonCardJSTError" on pretty much every card. But don't panic. Edit each of the cards and replace each of my entities with your entities, or delete the card entirely if you don't want it. Even better, feel free to modify any of the cards to your liking. I made all the YAML available to you for a reason.

These errors say different things but all mean the same thing (the entity doesn't exist):

• Entity not found
• Entity not available
• ButtonCardJSTError
• Undefined is not an object
• The card just doesn't show up at all

If you've tried basic troubleshooting and are still seeing errors and don't know what they mean, then feel free to drop a comment on YouTube or open an issue. I'll be more than happy to help you out.

And don't forget to drop a star on this repo if you like this dashboard! 😀