UI Design Question

Developers
1

Hello, I am creating an app for my FlashForge 3d Printer.

I am challenged by the following situation, and I am not sure how to solve it UI wise.
My printer has the state, online or offline. It also has the state, printing or paused / stopped.

What i do now is that the printer has an onoff capability, where if you press the onoff button, it will pause OR resume the current print.
But if you are not printing and the printer is online, the button is obviously gray. But you can’t see if it is online or not.

Should the button represent online offline state, ( But you can’t press it, as the device turns on/off with a physical button ), but how would you resume or pause the print then?
Or should the button represent printing state ( Which you also cant press when its offline ), and should there be an offline online sensor?
Or ???

How do i solve this properly?

Thanks for the help.

My app: FlashForge | Homey
My code: GitHub - arnovr/homey-flashforge

2

For me, the device tile should represent the overall device state. That would be on/off in most cases.

I would do in this case:

  • use device on/off state for the onoff capability.
  • deactivate the UI quickaction for onoff to prevent taps on the device. If you don’t have a capability listener for it should also work.
  • set onoff capability to current device state
  • for print state: use a mode list capability (enum list), shown sensor view. This can be used to show the current state if there is more that just on/off.
  • for print start/pause you can decide to use a switch (shown in button page, then it’s easier to get there without the dropdown selection when using a second onoff capability). This switch is also a boolean capability. Use c custom capability. Then you can define your own icon and text. This switch can show the print state with the on/off state.
    Another possibility is to use two buttons in button page, one to start, one to pause.
    I think a switch would be easier to handle for the user because he can seen the state directly at the button state.
3

Thank you for the thorough response, I am going to have a look!

4

So i made the onoff button capability with getable: false, and setable: false. The quickaction is disabled, and in the interface you get this:

Screenshot_20250708-091042
Screenshot_20250708-0910421224×2700 123 KB

Which does nothing as i registered an empty listener, isn’t this a bit confusing?

I also added the print state as a sensor ( still need to work out icons somehow ):

Screenshot_20250708-092018
Screenshot_20250708-0920181224×2700 160 KB

I dont fully understand this remark, which UIcomponent do you mean for a the switch? toggle? button? Or do you have an example somewhere that shows what you mean?

Thank you for the help, this is my first homey app, and I find the capabilities in combination with UI have a bit confusing behavior.

5

I can give you some examples later…

1 Like
6

First the manual :slight_smile:

A boolean capability can be define as a button (just clickable) or as a switch (with on/off state). It depends on the “getable” attribute.

getable: false => stateless => button
getable: true => stateful => switch

Example for a switch on a device button view:

grafik
grafik275×463 15.5 KB

"getable": true => switch
"uiComponent": "button" => show it on the button tab, not as a “big” switch

To interact on the user action, I register a capability listener.

If the button is pressed, the capability switches its state (true->false or reverse). Then use this state and call your API.

7

Thanks A LOT, for your response. This helped!

So eventually my fix is that i have a 2 boolean capabilities is_online, and is_printing.
The is_online has uiComponent null, and printing the button.

I think i have the UI pretty ok now.

On the homepage its like a sensor, no button press here:

Screenshot_20250710-201418
Screenshot_20250710-2014181224×2700 130 KB

when you go “in” the device, you get the printing button, which changes state if the machine is printing, or pauses/resumes if you press the button

Screenshot_20250710-201428
Screenshot_20250710-2014281224×2700 118 KB

And on the sensors you have this:

Screenshot_20250710-201745
Screenshot_20250710-2017451224×2700 150 KB

I am definitely no UX’er, but I have the feeling this is working properly.
What do you think? Any remarks?

Thanks for the help!

8

All right :+1:

1 Like