Implement Vertical GUI (Portrait Mode)

[radry]

Requirements

Currently vertical GUI is only implemented for TFT24.
Adding all other screens is easy since the base code is all the same but requires an actual screen to test it (which I don't have).
Only screen and controller specific files have to be changed/added.
How to do this is described below.

Compile:
To use TFT24 in portrait mode you need to compile for "BIGTREE_TFT24_V1.1_P" (Default enviroment is set to this in this commit).

Config.ini:
set "rotated_ui" to 2 or 3

Theme/Icons:
logo.bmp must have a portrait resolution (for TFT24 that's 240x320 instead of 320x240). Do not simply rotate it, the logo must still stay the same orientation.

Description

This is a first implementation of a vertical GUI (Portrait Mode).

How is it implemented:
My way of approaching this is as follows:

• Treat the vertical orientation as if it's its own screen. That means to use a screen in vertical orientation, it needs to be compiled for portrait mode. It can then only be used in portrait mode. To use landscape mode you just use the regular .bin and reset the settings.

• Most code that handles vertical GUI is filtered by #ifdef PORTRAIT and thus only compiled when target is a Portrait mode screen (PORTRAIT is defined in Vartiants/pins_TFTxxxx which has its own version for vertical orientation).
  This keeps the resulting .bin small.

How it looks

UPDATE 06.12.2021

Status Screen

Heat Menu

Main Menu

Move

Level

Printing

List Layout

How to add portrait mode to other screens

Coming Soon

Benefits

Adds vertical GUI

Related Issues

#524
#1830
#1170

[digant73]

as a personal suggestion, I would bind KEY_INFOBOX area as you made in Status Screen menu (so centered at the bottom). That means the temp info in the Heat menu (and all the other menus providing infobox) will be centered at the bottom of the screen.
In the Printing menu I would swap the "stop" button with "more" or "babystep". Also I would move the progress bar below the "speed" icon (so just above the "pause/resume", babystep (or "more") and "stop")

[radry]

@digant73 Thank you for your suggestion.

Placing the Temperature in the Heat menu (and similars) on the bottom is possible and I agree it would look cleaner but it will put the "back" button in a different location than the main menu (and most other menus). The benefit of the current implementation is, that the back button is always in the same position, regardless of the menu.
For example you can hit "back" in the heat menu and afterwards hit "back" in the main menu in the same location. Personally I prefer the possibility to hit "back" quickly in succession without having to switch finger position every time.
I think this will lower the risk of accidently pressing a wrong button.

One way I can imagine to prevent this back button problem is to generally place the back button in the 6th icon (second row, right most icon). But this will only be consistent if there are no menus with more than 6 icons including "back" (except the main menu). I think this could clean up the interface, even in all other menus.
I will look into it.

This is surely a point worth discussing.

[digant73]

@radry above just a brief review.
Also I would consider to move the info area always on top (in all menus). The back button will be moved at the bottom (last row, third column).
That means for example, the Heat menu could be:
row 1: Temp info (infobox)
row 2: -, unit, +
row 3: nozzle, stop, back

[radry]

I reworked the UI and also implemented @digant73 suggestion:

• The heat menu (and similar) has the temperature on the top.
• Thus I also changed the Status Menu to use such a layout.
• The main menu (and sub menus) have the bottom row icons now aligned left/right. This is done to have the back button always on the bottom right (same as heat menu).

How is this? If you like it I will push it to the PR after cleaning up the code as mentioned by @digant73
Please excuse the blurry pics.
Status Screen

Heat Menu

Main Menu

Move

Level

[labotecno]

nice ! i like it

[digant73]

@radry The menus with the infobox area (e.g. Heat, Status Screen etc...) are now OK.
For the menus with no infobox (e.g. Main, Move, Leveling etc...) it should be enough to simply remap icon 4 on the standard layout (non portrait mode) to icon 7 on portrait mode. That means you will have:

Main menu:
row 1: Heat/Fan, Movement, Un(Load)
row 2: Terminal, Custom, Settings
row 3: Em. Stop, , Back

Move menu:
row 1: Z-, Y+, Z+
row 2: X-, Y-, X+
row 3: 0.1mm, , Back

Level menu:
row 1: Point 4, Point 3, Distance
row 2: Point 1, Point 2, Point 5
row 3: Disarm XY, , Back

Fort the Printing menu, please provide a screenshot (and possibly consider to apply the changes in my first post).

Also, the portrait mode is an alternative to the standard mode, so I would convert all the "#ifdef PORTRAIT...#else...#endif" to "#ifndef PORTRAIT...#else...#endif"

[radry]

@digant73

Main menu:
row 1: Heat/Fan, Movement, Un(Load)
row 2: Terminal, Custom, Settings
row 3: Em. Stop, , Back

Move menu:
row 1: Z-, Y+, Z+
row 2: X-, Y-, X+
row 3: 0.1mm, , Back

Level menu:
row 1: Point 4, Point 3, Distance
row 2: Point 1, Point 2, Point 5
row 3: Disarm XY, , Back

That's already how it is, look at the screenshots.

Fort the Printing menu, please provide a screenshot (and possibly consider to apply the changes in my first post).

working on it

Also, the portrait mode is an alternative to the standard mode, so I would convert all the "#ifdef PORTRAIT...#else...#endif" to "#ifndef PORTRAIT...#else...#endif"

The code for "TFT70_V3_0" is also in there with #ifdef TFT70_V3_0 instead of #ifndef although it's not the default screen. I think it's easier to read and understand with #ifdef and it follows the already exising coding standard of TFT70_V3_0.

[radry]

New printing screen.

For other changes in the recent commit, see pictures above.

[digant73]

@radry I would update the pictures in the main section with the final layouts.
In the Printing menu I would also move the progress bar just above the Pause/More/Stop buttons just to separate the live icons / stats from the standard control buttons as it is in the standard mode

[radry]

Progress Bar on top now.
Looks better than dividing the icons and easier to implement than having it between bottom row and Babystep button.

[guruathwal]

@radry Nice work., but I am afraid to say that this implementation will be incompatible with the new menu API. Hardcoded menu layouts are being replaced with an easy-to-use grid system for all standard menus in my upcoming PRs.

[radry]

@guruathwal
Then you should implement the vertical GUI in the new menu API as well.
I don't know how that new API works but since the hardcoded vertical layout follows the same rules and coding style as the landscape one, it should be easy to translate to your new API. I might be able to help.

An other approach would be to keep the current menu API branch as legacy that receives all bugfixes not related to GUI, while the new menu API is continued as "2.0" version branch.

[radry]

@bigtreetech Please let me know what else you require to merge this PR.