Eim 46 styling gui

[Hahihula]

Changed the visual appearance of the installer.

[brianignacio5]

A few changes but otherwise LGTM

[brianignacio5]

Is it possible to implement some drag and drop functionality ? It would be cool to drag and drop the config here to load config files for users. If possible we can add it for future feature request.

[Hahihula]

I've added drag&drop ( you can drop the file anywhere on the window in this step ) even with animated highlight .

[brianignacio5]

Maybe unrelated to this PR but worth looking into it. I've received this error while cmake extraction.

About this error, when the error happens the UI is frozen and can't go back to the start. I suggest to add a way to obtain the setup log at any given point of the setup and a way to cancel the setup.

[kolipakakondal]

Hi @HahihulaDo we detect prerequisites from Homebrew as well? I see CMake is not being detected through its installation.

[kolipakakondal]

Can we simplify the layout to accommodate more information in less space? Instead of showing the missing prerequisites below, we could list all prerequisites in the top section itself. After the check, it can display what’s missing and what will be installed using status icons. With that approach, the user can avoid scrolling down to see the Missing Prerequisites section.

[kolipakakondal]

For any OS, if users need to install any prerequisites themselves, please provide a link within the wizard. This will help avoid users having to go through the documentation to figure out what needs to be installed.
https://docs.espressif.com/projects/esp-idf/en/latest/esp32/get-started/linux-macos-setup.html?highlight=dfu%20util#step-1-install-prerequisites

[kolipakakondal]

Good to have:
If there is a persistent issue with installing tools or prerequisites and the user would like to check the logs, it would be great if we could provide a link that directly opens the log file.

[kolipakakondal]

Hi @Hahihula Thanks for PR. Good progress. See if we can implement the following type of UI: The header, footer, and wizard size should remain fixed across platforms, while the middle section will be used for the installation content.Changing the content area size for every screen disrupts a professional appearance. See if we can consider this approach.

@pedrominatel @igrr Please share your thoughts with us before Petr considers the revamp.

[Hahihula]

Hi @HahihulaDo we detect prerequisites from Homebrew as well? I see CMake is not being detected through its installation.

Yes, we detect the prerequisites from homebrew. Which version did you used? Isn't this the old issue with the version from dmg package? Only working is probably the binary one. The version with dmg or msi will be used After we start with version management and as they are no use as of today, I did not spend time resolving these permissions issues.

[pedrominatel]

This is redundant. Change just to Prerequisites.

[pedrominatel]

We can avoid using ESP-IDF everywhere. The installation manager title in red makes this clear, and we could remove it where it is not needed.

[pedrominatel]

If red is the color, change to the Espressif logo red (#e7352c). I know it's nitpicking but it's part of the branding.

[Hahihula]

It was meant to be Espressif red, replacing all around the app!

[pedrominatel]

@kolipakakondal, IMHO we need to keep the UI as simple as possible, with the possibility of installing with some of the configurations settled as default.
I'm attaching this UI for you to take a look at (be kind, I'm not a designer ).

In this proposal, we can simplify the interface by adding the links for each step in a way that the user can return to that specific part or go directly to the installation without setting anything (if possible).
The part with the ESP-IDF version selection and the SoCs can be done in just one step and the version should reflect on the supported target list.

Do we need to show the dependency check results every time? Does this information matter if all dependencies match?

The download server settings can be included in the general setting and should be used only if necessary.

[Fabricio-ESP]

Hi @Hahihula ,
I noticed the height of the template window is too high from start, most people still use fullhd screens and the application is occupying all vertical height and still the footer is not visible on startup, forcing users to maximize the window to see it. Even with that the "Select your starting point!" para shows a scroll bar, it is better to make it wider and reduce height.

I guess there are several suggestions to change the main template, just take window height in consideration, and attempt to keep it under 900pixels

Also there is some redundancy on the installing screen, maybe we can remove one of these 2 sections:

[Hahihula]

@kolipakakondal @pedrominatel Ok, so what about letting the user on the starting page to a)load config b) select "expert mode" instalation (which will lead to current wizard) c) select "default/simplified installation" which will not ask him any question unless hitting a wall ? As we support complete headless and non-interactive installation, this should actually be achievable without any more effort (just with the small UI redo)

[pedrominatel]

@kolipakakondal @pedrominatel Ok, so what about letting the user on the starting page to a)load config b) select "expert mode" instalation (which will lead to current wizard) c) select "default/simplified installation" which will not ask him any question unless hitting a wall ? As we support complete headless and non-interactive installation, this should actually be achievable without any more effort (just with the small UI redo)

Sounds good to me!

[Hahihula]

hope this will be ok:

[kolipakakondal]

@kolipakakondal, IMHO we need to keep the UI as simple as possible, with the possibility of installing with some of the configurations settled as default. I'm attaching this UI for you to take a look at (be kind, I'm not a designer ).

In this proposal, we can simplify the interface by adding the links for each step in a way that the user can return to that specific part or go directly to the installation without setting anything (if possible). The part with the ESP-IDF version selection and the SoCs can be done in just one step and the version should reflect on the supported target list.

Do we need to show the dependency check results every time? Does this information matter if all dependencies match?

The download server settings can be included in the general setting and should be used only if necessary.

Hi @pedrominatel Thanks for the proposal. This looks good to me as well. On the left-hand side, we can show all the steps involved in the installation process and highlight the current one. We will continue to drive the major actions through the bottom button.

I don’t think we need to support back-and-forth navigation to avoid potential issues with the installation process.

In the case of Simplified Installation, we can run all the steps in automatic mode and show only the progress. For Expert Installation, we can allow the user to configure each step and proceed to the next step only by clicking the 'Next' button.

@Hahihula Please see if we can implement this for the initial version.

[Hahihula]

Ok, I've added the sidebar to the expert installation:

And also made previous steps clickable so user can actually go back, but only before the installation starts...