gui-structure

[42sol-eu]

Provide a generic structure of the application.

1. Code Editor Panel - modify / read the loaded script
2. Model View Panel - generate a view of the loaded script
3. Customizer Panel - manipulate / change the parameters of the loaded script
4. Logging window (much improved because the echo function in OpenSCAD is very limited)
5. Help View Panel
6. Core file management (load/save/run/export)

[42sol-eu]

We decided on the following concept:

1. left drawer for action (might be replaced with a menu for power users)
2. header with view switches (button group)
3. main area with resizable splitter containing two panels

• No right drawer
• No footer

Settings via a dialog.

The panels can show the following elements:

1. [Left Panel] Model Gallery (Prio 3)
2. [Left Panel] Editor (Prio 1)- already working with uil.codemirror or with monacco-editor (like VS Code)
3. [Right Panel] Viewer (Prio 1) - already workign with pywebview and OCP_vscode in a subprocess
4. [Both Panels[ˆ1]] Customizer (Prio 2) - showing the parameter set defined by the script
5. [Right Panel] Help (Prio 3) - HTML/Markdown/RST content for the editor and the main libraries
6. [Both Panels] Notes (Prio 4) - Markdown notes
7. [Left Panel=100%] Settings
8. [Left Panel] Generator (Prio 4)
9. [Both Panels] Log Window (maybe with a command input

Moving a view to the left and the right panel via ui.element.move()

---

I experimented with the main_splitter and a bound value (min=0, max=100, step=10)

This enables the user to create many scenarios easily.
The main scenarios are

a. Editor / Viewer - for model modification/investigation
b. Customizer / Viewer - for parameter manipulation and export of the custom model
c. [Experimental (*2)] Editor / Customizer - for parameter setup / debugging
d. [Experimental (*2)] Editor / Help - for extending a model with support of the documentation

You need to see this on your computer to get the impression - is really fun.

• The value in the top bar is connected to the position of the splitter
• moveing the splitter manually changes the value
• using the dark grey buttons on the left will set the splitter either to 50 or to 100
• using the dark grey button on the right will set the splitter either to 0 or to 50
• entering the value is also possible (if it is a step=10)

[42sol-eu]

TODO: test if https://nicegui.io/documentation/teleport#teleport can be used for customizer, editor and view to switch between left and right panels

[42sol-eu]

TODO: splitter concept (step=10) if changing
TODO: use splitter if activated view is pressed

[42sol-eu]

TODO: test if https://nicegui.io/documentation/teleport#teleport can be used for customizer, editor and view to switch between left and right panels

Important

The correct way to move a view is ui.element.move( {Target} ).

[42sol-eu]

@jdegenstein I added the pull request