ui: add button labels that tell the user which button does what #56
Conversation
|
I've now gone through all screens and added legends. |
|
First: I find this really helpful. It feels like the first time that I really know what button does which action. Or at least this way a user can learn to use them right. (Maybe we can add caps with different colors to the buttons, to make it even easier to remember?) @fiurin and I had a look at this change from a user-perspective. One thing we kind of stumbled across is the label on the lower button. This button can either be used with a short- or long press. And does different things depending on the type of press. This would look like this: I would vote to leave all other screens as they are in this PR. |
|
I've rebased the PR on top of recent main (it should go in after #59 though, so we see the CI succeed before merging) and changed the labels in the mentioned screens from what they were there to "Action". |
Thanks! I tried the recent changes on my device. Looks good! |
Currently draw_border does its own locking of the display, but most callees also lock the screen to draw UI elements or will do so soon when button legends are introduced. Make draw_border use the already locked display instead of doing its own locking. This is mostly an esthetic change, as the framebuffer backend is not at all concerned with the locking we do here and performance-wise it should not make a difference. Signed-off-by: Leonard Göhrs <l.goehrs@pengutronix.de>
The system screen contains information like this:
SoC: 30C
Uplink: 1000MBit/s
DUT: Down
IP: 123.123.123.123
The IP line would overflow into the button legends that are about to be,
added so shorten the "Uplink:" label to "UL:" and move everything left:
SoC: 30C
UL: 1000MBit/s
DUT: Down
IP: 123.123.123.123
Signed-off-by: Leonard Göhrs <l.goehrs@pengutronix.de>
The legend is drawn at the right of the screen using rotated text. The embedded_graphics library does not have support for rotating elements like text, so we instead provide it with a _view_ of the screen that is rotated and onto which it can render its text as normal. Signed-off-by: Leonard Göhrs <l.goehrs@pengutronix.de>
… status For these two screens it is rather easy to make the legend dynamic. For other screens it is a bit more complicated, so only do these two first. Signed-off-by: Leonard Göhrs <l.goehrs@pengutronix.de>
There was a problem hiding this comment.
The changes themselves look good to me. My main concern is that we are starting to reinvent a proper GUI toolkit here - which is already a solved problem. It would be nice to investigate if LVGL which has offical Rust bindings and is MIT licensed handles what we need.
|
Using an actual graphics toolkit, like LVGL for instance, would be great I think, because it could make the UI more modern (and maybe make working on the UI a bit easier). |
This adds a little legend on the right of the screen (where the two buttons are) that tells the user what which button does what:
TODO before merging: