Skip to content

Development

Development

Process

  • Check Contribute
  • Determine if it is a StarBase or StarLight change
  • For medium to big changes: create a GitHub issue to document the design of the change
  • Fork the appropriate (StarBase or StarLight)
  • Create a branch (more text needed here) for medium or big changes (small can be done on main)
  • Implement your change
  • Follow the Standards and guidelines
  • Create a pull request

  • Update StarDocs to document and describe the impact of the change. You can use a link to the commit implementing the change as follows (2024040511 is the version number of the change):

    image

  • In case of a StarBase change, propagate the change downstream to StarLight. The git tree will typically look like this (green is downstream, blue is upstream):

    image

  • Determine if post merge steps are needed in StarLight (e.g. rerun npm run dev to update html_ui.h)

🚧

Live Server

July 24, 2024

StarBase htm, js and css files can be previewed directly using the Live Server plugin. This makes UI development faster as no need to compile flash and run on esp32 each time.

Step 1: Install the plugin and restart VSCode

Screenshot 2024-07-24 at 18 20 22

Step 2, select an htm file and right click Open with Live Server

Screenshot 2024-07-24 at 18 20 05

Step 3: see the result in your browser (127.0.0.1)

Screenshot 2024-07-24 at 18 20 39

Note 1: This live view uses the model.json file to get the module data

Note 2: Functionality is limited yet: it now shows the UI elements without the data

HTML compression

July 24, 2024

htm, js and css files are compressed into html_ui.h and html_newui.h files when compiled and flashed. By this memory footprint is smaller and also these files are not on the esp32 fileserver but flashed as compiled c code.

The magic for this is done in cdata.js and webbundle.py. Both files can be found in the tools folder.

npm needs to be installed and also npm ci (or npm install) - tbd: difference between ci and install?

installing npm is a manual task to be done by a developer (instructions?) but the rest is done by the webbundle.py script.

(previously a developer must execute npm ci (or npm install) and npm run build (or npm run dev) on the command prompt)

see also here for how it was explained in the past WLEDSR/Modifying Sound Reactive WLED