UI Design

[luc-github]

The official UI Editor of lvgl has already a sample UI for 3D printer : https://squareline.io/
as it is a sample / a proof of concept it has several issues to be used :
1 - it is designed for a 800x600 screen so it use complex UI which will not fit most of cheap screen in current hardware target list
2 - it only use images => which make the UI fancy but also huge and which definitly will not fit the ESP32 FS
3 - It cover only half of the needed UI => many settings are not covered : file selection, wifi configuration with keyboard usage, multiextruders, CNC UI etc...

But it bring several ideas on what controls should be used and some of the user flow
1 - need a main menu : print job information / jog / settings / TBD
2 - Use roller control for value selection is definitly a must
3 - slider control need + / - additionnal controls IMHO to allow precise changes
4 - we need to limit the usage of images and use the fonts as much as possible to limit the final size https://docs.lvgl.io/master/overview/font.html#special-fonts
But need adding some additionnal specific fonts may be necessary, I did it before (https://github.com/luc-github/svg-icons/tree/master/networkfonts) when network font where not available - now it seems not necessary for network but for specific features like extruder / bed / heat / laser / etc... it may still be a good vs an embedded image TBD

5 - Use LVG buttons / switches / rollers / labels / lists / keyboard should cover al controls
6 - fancy UI like jog one in sample or webUI should be simple to keep ease of use (avoid fat finger issue) , reliablity (need to do what it is supposed to do) and size (keep low foot print), so they are not a priority I think for the moment
7 - try to use relative positions as mucha as possible for controls to keep UI consistent across resolution or we will have to define a absolute positions file which may be painful to maintain at the end each time there is UI change
8 - theme support in lvgl is enabled but it is not a priority - first need to define / design each pages - theming will be in next steps once UI is clearly defined
9 - unlike webUI, displaying printer EEPROM settings is not a target for the screen UI - at least at this moment, it will be more part of next steps

if anyone has some design skill please shoot I am not designer and not good a it 😓

Any suggestion / mockup / of UI and user flow is welcome

[Skorpi08]

https://dribbble.com/shots/13953444-Touch-UI

[luc-github]

For reference here all controls/widgets available in lvgl, of course style can be modified :
Animated image:

Arc:

Bar:

Button:

Button Matrix:

Calendar:

Canvas:

Chart:

Checkbox:

Color wheel:

Dorplist:

Images:

Image button:

Keyboard:

Label:

Led:

Lines:

List:

Menu:

Message Box:

Meter:

Roller:

Slider:

Spinbox:

Spinner:

Switch:

Table:

Table view:

Text area:

Titleview:

Window:

[Skorpi08]

it should be mentioned, not all are available with the UI Editor.

[3DSmitty]

Here is Marlins LCD Menu Tree which could be used for reference:

https://marlinfw.org/docs/features/lcd_menu.html

[luc-github]

I have started to draw some UI org - followed some inkscape training to do the necessary context icons- but did not work on real mockup yet - still busy with backend code
I will start when wifi is ready to see the impact of performances when wifi and tft are active at once

[luc-github]

the current target screen have different resolutions:

but there real size are not really different: 2.8` , 3.5' and 4.3'

because there is no 7' in target size I suggest to focus in unique UI that will fit all.

Here my proposal for 3d printer :

it cover 4 extruders + 1 heat bed max:
heat bed report will alternate with chamber report if no space
sensors are only output and will also alternate if over number of 3
during print settings / Print / TBD / buttons will be hidden
Progression will appear in status bar, eventually pushing status bar may display more informations (TBD)
TBD button would be the Jog button
I do not think display position in main screen is really a big added value but it is arguable , it could be a button in same level as extruders that display X/Y/Z and would be then the jog button or babystep button when printing=>TBD

Using some icons / symboles would avoid to use any images:

IMHO there are 10 symboles, at least, that can be overwriten for specific usages:
extruder / bed / chamber / probe or sensor / fan / speed etc..

Feedback are welcome if you have better suggestion
the other screens need to be created but they should follow same idea

Sub screens also could look like previous suggestions: #6 (comment) because they have less constraint of display : #6 (comment)

so

For GRBL it should be defined what need to be displayed :
Status bar also for all text message
Machine Positions: up to 8 which open jog screen
Working positions: up to 8
in that case only display one kind of position at once? add toogle button on screen to choose which one to see ?
State (IDLE) running/job
Pause/resume button
Reset button
probe button ?
Settings
file selection button

Any fedback is welcome

[luc-github]

then as I wrote :

it could be a button in same level as extruders that display X/Y/Z and would be then the jog button

[3DSmitty]

@luc-github ok as long I can access it during a print.

[3DSmitty]

@luc-github Idea for the TBD button. How about a during print button for things like babystepping and fine tuning?

[luc-github]

the babysteps should be jog button - why add another one ?

[3DSmitty]

@luc-github ok

[luc-github]

Here the first draft of possible symbols from free fontawesome
I currently put together cnc and 3d printing but can be splited if necessary, I only used the solid of version 6.4.0.

Need to regenerate the c font files using https://lvgl.io/tools/fontconverter for the 2/3 size that will be necessary

This will avoid me to generate svg/font for dedicated usage - it is not frozen but I think it should cover all needs

About Montserrat font and usable size, the readable size on 320X240 on 2.8' screen is 14px, on 800x480 on 4.3` screen the size should be 24px
So need to configure lvgl to only use these size according hardware to save space, lv_conf.h is in each hardware definition so it won't be an issue.

I have also started a small how to for basic widgets : https://github.com/luc-github/ESP3D-TFT/blob/main/UI/basics.md
That I will complete with some other code sample

[luc-github]

I do not understand what is different of what wrote:

should the ui be configured by end user?

[3DSmitty]

@luc-github you had a lot of question marks (?) so I thought you were questioning how to do it. Here is my question, in lvgl does it have to be determined at build time what shows on the screen OR could there be a settings page on lcd to choose options on what shows on lcd?

[Skorpi08]

https://github.com/grbl/grbl/wiki/Configuring-Grbl-v0.9

$$ (view Grbl settings)
$# (view # parameters)
$G (view parser state)
$I (view build info)
$N (view startup blocks)
$x=value (save Grbl setting)
$Nx=line (save startup block)
$C (check gcode mode)
$X (kill alarm lock)
$H (run homing cycle)
~ (cycle start)
! (feed hold)
? (current status)
ctrl-x (reset Grbl)

[luc-github]

at run time not compile time the flex allow automatique position and even scrolable element, but still need to define the target at compile time: Hardware target/ Firmware target

[luc-github]

I have splited UI code according target FW / styles / resolution, which will make some flexibility
Displayed values description are defined in each target FW directory

Still on learning curve about lvgl API but it is on good way, UI will be implemented screen by screen from now => TBC

[luc-github]

V_20230624_193144_ES6.mp4

The current UI seems fit all resolutions - interrestingly the colors rendering is different from screen to screen and even on video - it suppose to be grey interface but go to blue somehow on camera when it is light grey to dark grey on screen irl
I did not do a different boot image for each resolution yet - this can be adjusted later as each resolution use it's own splash screen

[3DSmitty]

@luc-github that looks awesome! Love the button effects!

[luc-github]

That is just a mockup to test some effect and impact on UI as well on styles and see what is minimum to generate a UI
I will work on code siplification now and start to link buttons/rendering to features of course
Currently only [ESP600]/[ESP214] affect UI for notification message - need to add a parser for M117 and other comnmands also

[luc-github]

I have now a clear user flow
Several screens are still missing but they should be completed soon for 3D printer
main screen when printing should be like this

main screen when NOT printing should be like this

Status List :

the Display API and the Navigation API is now pretty well done, still need to implement the link between values API and Display API

The 3d printing missing screens should be implemented by next week

[3DSmitty]

Love it!

[luc-github]

Implementation take more time than expected - of course ....
I have implemented the fan / speed interface the filament change should be based on this too but with additional controls like extruder selection and feedrate to be used (TBD)

With keyboard

The main menu access by main page:

The information page from main menu

The Wifi menu fron main menu

The AP / STA page from wifi menu
SSID + Password hidden input

Keyboard + password in clear

Scan list

I have rewriten the loading of all screen to minimize foot print because it was crashing on 320X240 screen without PSRAM
Make some position relative to screen border for flexibility for different resolution
The the low resolution without PSRAM make me to rewrite several part of code that were working on PSRAM config
The support of keyboard / input / password / spinner / list / buttonsmatrix widgets, and show/hide a control is now I think ok

I had to spend a couple of days on button matrix style customization because it is not really meant to be modified but it is ok now, so learning curve is on good way 😸

As mentionned above I have tested UI on small resolution but the intermediate one currently use the small resolution, so need to be adjusted later

The current UI is not connected to real value / commands yet, because wait for complete ui implementation

Next will be temperatures / jog / filament / settings
about leveling I will add first the manual leveling because I am not familiar with automatic leveling UI

[3DSmitty]

@luc-github Looks great! If if the little WROOM screen with out PSRAM is going to hold down the others maybe drop it from the project? There are a lot more of new S3 Touchscreen devices for sale now that would suite this project better. Just a thought. As for a auto leveling screen I think a screen with a G29 button, the ability to adjust XYZ offset (M851), and a save to eeprom button would be fine.

[luc-github]

well the no PSRAM it is a good indicator that code has no memory leak and I only have this one for this resolution.
But I agree I will not support it at all price - more over the keyboard support at this resolution is pretty hard to use using fingers

I have also ordered a 7inch screen which has a decent price : lovyan03/LovyanGFX#419
It will allow to add the GT911 support and a RGB interface drivers as POC (https://docs.espressif.com/projects/esp-idf/en/latest/esp32s3/api-reference/peripherals/lcd.html#rgb-interfaced-lcd), and see how a 7 inch form factor is rendering , it should give more interface oportunity IMHO, but first I will focus on current UI

[3DSmitty]

@luc-github Yes they make those in a bunch of different size screens and ones with resistive and capacitive touch for a good price.