The ultimate feature: Allow users to create custom UIs in JavaScript or C++

I love the Lovelace UI, but the cards can be a bit restrictive. Allowing users to code their own UIs and upload elements would be an insanely powerful feature. With the ability to make your own UI, users would be able to do literally whatever their hearts desired, with very very little no work from the HA devs. This is how tools like Übersicht (macOS,) Rainmeter (Windows) and Conky (linux) work.

Here are examples of custom Übersicht / Rainmeter / Conky UIs to give you a sense of what people could create in Home Assistant with the ability to directly code UIs.

These are just examples. If you could create a UI in C++ or JS or [insert programming language here] anything you could draw on a piece of paper you could create. And a thriving community would mean that people could just download the code and edit the configuration.

This is how the Übersicht community works. Users program the widgets in JavaScript, then upload them to github. Then others can Download them:

Have any thoughts on this? Agree? Disagree? Leave a reply.

You can already do this. Your custom UI (written in whatever language you prefer) would communicate with Home Assistant via its API.

3 Likes

As Taras said. You can do this using the HA websocket API. Look at Tileboard for example. It’s entirely written in JS. It has completely replaced Lovelace for me.

Oh awesome. Thanks - had no idea you could do this. If anyone has any other links I’d love to check them out.

Your user interfaces look a little sparse to me.
i.e. A hell of a lot of real estate for very little information.
They look like the jazzy screens that your get on some TV show about an evil genius who has built some fiendish bomb with an esoteric interface (you know the ones which are always defused with 00:01 to go (there are innumerable examples but the obvious one is Galaxy Quest).
I appreciate the artwork but it strikes me that the aim of the game is to automate your home and not faff about with any interface at all.

@Mutt - those are UIs for Linux, macOS and Windows. That’s why the layouts are sparse. I’m just illustrating the point that being able to use code creates a system where users could create anything they could dream up, not implying these exact layouts would be food for HA. These UIs are cool for a desktop, but not an automation panel.

@123 @HeyImAlex. If you have any resources on creating custom UIs I’d love to read about it. I looked on the site/Google but all I could find was info on creating custom Lovelace cards

No, I understand that. But there are those here that crave such interfaces for their “look” and part of that is the sparsity of information.
I’m not saying that’s a problem in its self but imagine a UI that implicitly required a full page to control one light.
Moderation in all things including moderation.

1 Like

I agree. These would be way too sparce for me.

But then again hey, if some users just want a certain UI for a look it’s their HA installation, not mine. I prefer a balance between form and function, but if someone hooses form over function as long as I don’t have to use it, whatever.

But I love that quote… “Moderation in all things including moderation.” -Stealing

Start here:

Also look at the Tileboard source for a working example.

1 Like

To be honest, a lot of consumer targeted mobile apps are like that. Maybe not a single button per page, but very simplified functionality with lots of design around. It’s not always a bad thing. To be honest, UI wise I find Lovelace to be hugely overengineered myself. Some Lovelace screenshots you see on here and Reddit look like control panels for a nuclear power plant.

FYI, in addition to the options covered above you can also build a custom panel and have it included in the lovelace navigation menu. In case people want to integrate a fully custom dashboard into Lovelace but not build an entire custom frontend.

Calling any of this the ultimate feature seems like a stretch though. I have like zero interest in building a UI myself, I will gladly delegate that to anyone else. I’ve had “make a floorplan” on my task list forever and I can’t even drag myself to do that much UI work, and that’s not even code. I will happily spend hours in Node RED or Python automating things that would’ve taken me a minute but 5 minutes messing with CSS and JS in the frontend makes me want to do literally anything else.

Plus if I want to know about something it alerts me. If its not important enough to alert me then I don’t care about it. So what do I need UI for? Half-joking. I do use my UI but every time I look at it I kind of feel like I’m missing an automation.

Yep, me too !

I can fully relate. I’m developing low level backend code at my everyday job, but sometimes we have to add a UI over it, if only for debugging or internal testing. It’s horrible, it’s something you always want to push on the intern (until you realize you don’t have an intern) and in the end, everybody will bitch about how bad your UI is anyway. In terms of HA I’ve been creating some JS based UIs for my personal use. I’m more or less happy with them, but they certainly won’t win a design award anytime soon :wink:

I have a lot of respect for UI designers. Creating a good UI is a very complex job. We all expect software to have nice looking, functional, discoverable and intuitive UIs after all. And someone has to make them :slightly_smiling_face:

2 Likes

Yea I confess I put the ‘ultimate feature’ thing just to make people more likely to click - but there is truth in it. HA already does everything else so there’s not much I would change from a functionality standpoint - so a fully customizable UI would be the last feature to make it pretty much 100% custimizable.

Also, I agree that I might not want to create my own UI, but having a thriving community would mean people could upload their designs. Check out the community for Rainmeter. People code the widgets then you can download then and place them anywhere.

And Übersicht (in the top right click “sort by Downloads” to see the good ones)

http://tracesof.net/uebersicht-widgets/#

A similiar community for Conky

Also, Kodi is worth mentioning.

Lol, same here.

1 Like

It will be nice if will be some graphical tools, like Adobe Flash was for web. Maybe we need to integrate https://www.figma.com/ here. It will be nice for designers.