UI and styling update?

[lucasod3v]

Hi there!

I've been using WLED for a while and thought I'd contribute. Below are the details of my suggestion:

Description:

• This PR introduces a minor change to styling and UI.
• Implemented using TailwindCSS (I hope this is okay).

Testing:

• Tested on an ESP32 and confirmed flashing works as expected. *I have not done thorough testing, for due diligence test with other kind of boards such as sound reactive and ethernet, just in case. AFAIK this shouldn't change any of the actual behavior of the installer.
• Note: v2.html has not been tested.

Visual Changes:

I've included images to showcase the changes:

Additional Notes:

The background color can be reverted to the original if needed.

[blazoncek]

We've had a talk with @lost-hope about changing installer look to introduce step-by-step selection of:

• ESP (8266, 32, S2, C3, S3-OPI, S3-QSPI; should be automatic)
• flash size (1M, 2M, 4M, 8M, 16M; API can't autodetect)
• type (audio, ethernet, usermods, etc)

Could you tackle this?

[lost-hope]

The design rework (this PR) looks fine to me.

We've had a talk with @lost-hope about changing installer look to introduce step-by-step selection of:

I have a proof of concept ot this, but havent found a satisfying way to have the manifest file string generated with the user inputs.
I never learned this. My only JS knowledge comes from coding the discord bot.
so if you could help with this, please reach out to me on the WLED discord if you are on there. (display name there is Sören, handle is lost.hope)

[blazoncek]

@LucasoDevDotTk instead of just committing, please provide a requested feedback.

[lucasod3v]

@LucasoDevDotTk instead of just committing, please provide a requested feedback.

Oh sorry, my bad, I have messaged Soren on discord and are discussing what the best solution may be.

Not the best at developing things related to ioT, but I can certainly attempt. I just need a pretty detailed description of what the correct implementation would be. I have sent a suggestion to Soren about what I think may be a good idea.

[lucasod3v]

This is my idea:

The first thing that popped into my mind was:

On commit marked with a special tag or part in the name: run a github action python script that parses and generates a versions.json in ./, and commit that to the repo. The python/shell script can easily be made by using CSV parsers.

For example:

WLED_0.14.2-b2_ESP32-C3.bin WLED_{VERSION}_{DEVICE}_{TYPE}.bin

Where the _ is the seperator instead of ;.

However I dont know if this a viable option?

This way, when a new version releases, the only thing you or other maintainers need to do, is to push a commit with the files to the /bin directory and the gh action will do the rest (As long as the file name is made correctly). Of course, we can also make a gh test that checks with a regex if everything matches the right pattern.

[blazoncek]

Ok, sorry, didn't know you are already talking to @lost-hope .
All is well then and I trust @lost-hope so anything he says is ok with me.
There is also work by @wled-install and his web installer. He could help further.