Automatic UI codegeneration

[huksley]

Writes compressed C arrays of data files (web interface)

How to use it?

First install NodeJS 11+ and npm globally.

After that, run:

> npm install
> npm run build

NOTE: If you change data folder often, you can run it in monitoring mode (it will recompile and update *.h on every file change)

> npm run dev

How it works?

It uses NodeJS packages to inline, minify and GZIP files.
See writeHtmlGzipped and writeChunks invocations at the bottom of the page.

[huksley]

Hello,
Here is update to make html_settings.h, html_other.h and html_ui.h autogenerated.
Why?
Because it will allow easier debugging and modification.

You will not need anymore use online services for HTML regeneration, i.e. this https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
will be much simpler.

In future, also pages can be made simpler and more modern, also locally test environment could be made possible to test WebUI before uploading to server.

Bug fixes:

• I found differences between files so I replaced some of them with HTML found in html_*.h files.
• For example settings_sync.htm are different. Fixed. Moved SetV to bottom.
• JS error - gId("co").selected in settings_wifi.htm is not defined. And I can not find that it in master branch.
• settings_wifi.htm - Copied Expiremental/Wifi sleep html snippet from .h to .htm
• settings_time.htm - Renamed field from ML to MD

[huksley]

I also use this code for usermod WebUI changes, PNG to sprites generation here
huksley#1

See video: https://www.youtube.com/watch?v=9BVHkfE_R_8&feature=youtu.be

[kareem613]

This is great. I suggest the wiki documentation get updated to reflect this.

[Aircoookie]

Thank you for this tool, it seems very useful! I will give the workflow a try and add the documentation to the wiki once I merge :)

[huksley]

Updated upstream changes introduced by #964 for html_*.h

[huksley]

Snippet for Wiki https://github.com/Aircoookie/WLED/wiki/Add-own-functionality

Changing Web UI

In order to conserve space, the Web UI interface is represented as a series of wled00/html_ui.h, wled00/html_settings.h and wled00/html_other.h files which contain C/C++ strings with specific parts of the Web UI.

These files are automatically created from source files available in wled00/data folder. To generate files, install NodeJS 11.0+ globally. After that, recreate html_*.h files by running in the repo directory:

> npm install
> npm run build

If you want to test changes to the UI, it is easiest to work with the local wled00/data/index.htm file. You just need to enter the IP address of a WLED 0.10.0 or newer instance into the popup. If you accidentally input an incorrect IP or want to test with a different instance, clear the local storage (in Chrome: Developer Tools -> Application -> Local Storage)

If you continuously modify files in the wled00/data directory, you want to monitor these changes to make local html_*.h files being updated automatically. To do this, run this in repo directory:

> npm run dev

This will start monitoring wled00/data folder for changes.

WARNING!!! Be careful with changing the javascript in HTML files! For example function GetV() {} must be the last javascript function in the <script> element as it will be replaced by automatically generated code to fetch relevant settings from EEPROM. See tools/cdata.js for the replacement rules which run for every *.htm file in wled00/data.

[Aircoookie]

Awesome, thank you for the wiki documentation as well!
Just made a few minor improvements, see the commit details. I have to say that this tool will be a huge help and seems to work very well for me. Will merge later today!

[huksley]

Great news to have it merged! Sorry I miss my github notifications lately.