Custom app UI for MQTT based app

Developers
1

Hi, just embarking on an MQTT based client app that has a keypad style interface with 16 buttons and a two line text display giving feedback. It’s a security keypad but looks pretty much like a calculator. We currently have this implemented in Home-Assistant, but would like to offer in Homey, as many of our users struggle with the Home-Assistant setup.

I have the MQTT buttons and display communication working, but am at the point where I’m struggling to find an example of a customised app user interface with multiple buttons and a text display. I’d be grateful for any pointers or advice.

2

There’s no such thing with Homey. The only thing that comes somewhat close is to create an app settings page (however, its purpose is really meant for, as the name suggests, application settings and not for controlling devices).

3

You can create a page with a bunch of buttons on, but they will be arranged in two columns.
The message display would be on the next tab and is pretty limited. So not a great choice.

4

Oh, no. that sounds really limited. Are there really no apps that require more than a few buttons or a single slider? Are there any work arounds or the possibility of a request for enhancement ?

5

Maybe it’s not what you looking for, I’m not a dev, but I’d like show some apps with imho creative settings/configuration pages

Screenshot_20230820-005631_Homey
Screenshot_20230820-005631_Homey1080×2020 148 KB

Even landscape is possible

Screenshot_20230820-010914_Chrome~01
Screenshot_20230820-010914_Chrome~011199×839 178 KB

6

Which app is this? I made a driver very complicated for ESPhome devices trying to use Homey “styles”, but the result is terrible lol

7

Take another look :blush: (it’s 2 different apps btw)

8

I gave up on those for HomeKitty and created my own styling (more iOS-like, which fits HomeKitty better too):

image
image610×1050 47.5 KB

You should be able to use any styling library you want (Bootstrap, Tailwind, etc), and also most JS libraries (I use, amongst other things, petite-vue to handle the navigation, buttons, switches, etc). Just realise that all those resources will be part of your app and may cause it to grow in size (hence my choice for petite-vue and not the full-fledged Vue).

9

I should point out for clarity that I was referring to Device Settings pages and not the app configuration page.

10

And all html based settings pages (app settings, device repair) are not really useful to control a device :wink:
So current state is: Homey only offers button/sensor views in device details showing a 2 column style you can’t change (it’s mobile app or WebApp style).

11

Not to create a device, but to control it. Still not ideal but at least it allows you to create a custom layout.

12

You are right. I meant ‘control’. I corrected it in my post above.

1 Like
13

Okay, I have a basic keypad. Still a bit of work to do. It’s not so good that the user needs to find the app config page to get to this, but at least it offers some sort of work around. Hopefully the UI will become more flexible in the future…

image
image524×614 21.4 KB

2 Likes