opensourcemirror
/
WLEDwiki
mirror of https://github.com/Aircoookie/WLED.wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated Add own functionality (markdown)

This commit is contained in:
Aircoookie 2020-06-10 18:23:54 +02:00
parent 8b44514f39
commit 4d97990a3f
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
Add-own-functionality.md
View File

@ -75,22 +75,24 @@ Here is a step-by-step guide on how to make your effect:
If you programmed a nice effect you want to share, submit a pull request!
### Web UI
### Changing Web UI
Changes to the embedded web user interface are not convenient. The reason is that the HTML is gzipped and added to the code as a binary array in `html_ui.h` to boost speed and lower flash usage.
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.
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)
These files are automatically created from source files available in wled00/data folder. To generate files, install [NodeJS 11.0+](https://nodejs.org/en/download/) globally. After that, recreate `html_*.h` files by running in the repo directory:
```
> npm install
> npm run build
```
To serve your changes by the internal webserver, you will need to follow these or similar steps to gzip compress the `index.html` file:
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)
- Gzip compress the file. I use [this online converter](https://online-converting.com/archives/convert-to-gzip/), use setting `Compress this file, output – gz`
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.
- Rename file to `xxx.gz.png` (change file type to image)
**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`.
- Convert it to a C-style byte/char array. I use [this converter](https://littlevgl.com/image-to-c-array), intended for image sprites. Therefore, the previous step of changing the file format was neccessary. Select `Raw` as Color format.
- Open the downloaded .c file in a text editor, e. g. Notepad++. Select the contents of the array and replace the array contents in `html_ui.h` with them.
- Update PAGE_index_L to the binary size stated in the bottom of the downloaded .c file
- Recompile and flash WLED!
Recompile and flash WLED!