diff --git a/.gitignore b/.gitignore index a2f10883a6..d5209fe0f2 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ wled-update.sh /wled00/wled00.ino.cpp /wled00/html_*.h /wled00/js_*.h +/usermods/*/html_*.h diff --git a/AGENTS.md b/AGENTS.md index c1ce6a510f..3e5489d57c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -175,7 +175,9 @@ Background Info: ## Usermod Pattern -Usermods live in `usermods//` with a `.cpp`, optional `.h`, `library.json`, and `readme.md`. +The preferred approach for new usermods is **out-of-tree**: click **Use this template** on [github.com/wled/wled-usermod-example](https://github.com/wled/wled-usermod-example) to create your own copy, add your code, and reference it from a WLED build — no changes to the WLED source tree needed. The fully annotated reference implementation lives there. Full guide at [kno.wled.ge/advanced/custom-features](https://kno.wled.ge/advanced/custom-features/). + +In-tree usermods in `usermods//` (with a `.cpp`, optional `.h`, `library.json`, and `readme.md`) are for commonly-needed features the core team maintains; the bar for inclusion is high (see `usermods/readme.md`). ```cpp class MyUsermod : public Usermod { @@ -183,23 +185,27 @@ class MyUsermod : public Usermod { bool enabled = false; static const char _name[]; public: - void setup() override { /* ... */ } // runs once at start-up - void loop() override { /* ... */ } // runs once per main loop iteration - void addToConfig(JsonObject& root) override { /* ... */ } // create/add persistent settings (usermod settings) - bool readFromConfig(JsonObject& root) override { /* ... */ } // read from persistent settings (usermod settings UI) - uint16_t getId() override { return USERMOD_ID_MYMOD; } - void addToJsonInfo(JsonObject& root) override { /* ... */ } // Add custom items to the "info" page and to /json/info - void appendConfigData() override { /* ... */ } // Customize the settings page: dropdowns, checkboxes, extra text, etc. Buffer size is limited! + MyUsermod() : Usermod(_name) {}; + void setup() override { /* ... */ } // runs once at start-up + void loop() override { /* ... */ } // runs once per main loop iteration + void addToConfig(JsonObject& root) override { /* ... */ } // persist settings to cfg.json + bool readFromConfig(JsonObject& root) override { /* ... */ } // restore settings; return false if keys missing + void addToJsonInfo(JsonObject& root) override { /* ... */ } // add entries to /json/info + void appendConfigData(Print& settingsScript) override { /* ... */ } // customize the Usermod Settings page + // uint16_t getId() override { return USERMOD_ID_MYMOD; } // only needed — see "Usermod IDs" below }; const char MyUsermod::_name[] PROGMEM = "MyUsermod"; static MyUsermod myUsermod; REGISTER_USERMOD(myUsermod); ``` -refer to detailed examples in `usermods/EXAMPLE/`, `usermods/user_fx/` and [in the user documentation for custom features](https://kno.wled.ge/advanced/custom-features/). +For additional lifecycle hooks (`connected`, `handleOverlayDraw`, `handleButton`, MQTT callbacks, etc.) see the annotated example at [github.com/wled/wled-usermod-example](https://github.com/wled/wled-usermod-example) and `usermods/user_fx/`. -- Activate via `custom_usermods = ` in platformio build config. The `usermod_v2_` prefix or `_v2` suffix can be omitted. -- Base new usermods on `usermods/EXAMPLE/` (never edit the example directly) +- **Out-of-tree** (preferred): reference via `custom_usermods` in `platformio_override.ini`: + - Local clone: `symlink:///absolute/path/to/your-usermod` + - Published: `https://github.com/you/your-usermod.git#main` +- **In-tree**: activate via `custom_usermods = ` in the platformio build config. The `usermod_v2_` prefix or `_v2` suffix can be omitted. +- Base new usermods on the out-of-tree template above; if contributing in-tree, use `usermods/user_fx/` as a reference (never edit in-tree examples directly) - Store repeated strings as `static const char[] PROGMEM` - Add usermod IDs to `wled00/const.h` **only when a unique ID is required** (see below) diff --git a/pio-scripts/build_ui.py b/pio-scripts/build_ui.py index eb7a01b366..bdaa26a05a 100644 --- a/pio-scripts/build_ui.py +++ b/pio-scripts/build_ui.py @@ -1,5 +1,25 @@ Import("env") +import os +import re +from pathlib import Path # For OS-agnostic path manipulation import shutil +from SCons.Script import Exit + +# The web UI build banner lives here (Python), not in cdata.js, so it prints +# once per build during script evaluation -- before any compilation output -- +# instead of appearing partway through the build (or not at all) whenever the +# node process happened to run. +WLED_BANNER = ( + "\n" + "\t\x1b[34m ## ## ## ###### ######\n" + "\t\x1b[34m## ## ## ## ## ## ##\n" + "\t\x1b[34m## ## ## ## ###### ## ##\n" + "\t\x1b[34m## ## ## ## ## ## ##\n" + "\t\x1b[34m ## ## ###### ###### ######\n" + "\t\t\x1b[36m build script for web UI\n" + "\x1b[0m" +) +print(WLED_BANNER) node_ex = shutil.which("node") # Check if Node.js is installed and present in PATH if it failed, abort the build @@ -7,15 +27,178 @@ print('\x1b[0;31;43m' + 'Node.js is not installed or missing from PATH html css js will not be processed check https://kno.wled.ge/advanced/compiling-wled/' + '\x1b[0m') exitCode = env.Execute("null") exit(exitCode) -else: - # Install the necessary node packages for the pre-build asset bundling script - print('\x1b[6;33;42m' + 'Installing node packages' + '\x1b[0m') - env.Execute("npm ci") - - # Call the bundling script - exitCode = env.Execute("npm run build") - - # If it failed, abort the build - if (exitCode): - print('\x1b[0;31;43m' + 'npm run build fails check https://kno.wled.ge/advanced/compiling-wled/' + '\x1b[0m') - exit(exitCode) + +PROJECT_DIR = Path(env["PROJECT_DIR"]).resolve() +CDATA_JS = PROJECT_DIR / "tools" / "cdata.js" + + +# --- Dependency graph ----------------------------------------------------------- +# +# cdata.js is the single source of truth for which web UI headers exist and what +# they depend on. Every time it builds, it leaves behind a Makefile-style ".d" +# depfile describing that graph. We treat that file purely as a *cache from the +# previous build*: if it is present we feed its targets/sources to a single SCons +# Command (covering the main UI and every usermod) so SCons tracks the web UI's +# inputs and outputs natively; if it is absent -- the first build, or it was +# deleted -- we simply force the build once and read the depfile it leaves behind. +# +def _resolve_dep(token): + """Un-escape a depfile token ("\\ " -> " ") and resolve it against the project.""" + token = token.strip().replace('\\ ', ' ') + return os.path.normpath(os.path.join(str(PROJECT_DIR), token)) + + +def _expand_source(ap): + """Map one dependency token to concrete source files. An html job records its + whole source *folder* as the dependency; expanding it to the folder's current + files -- walked fresh every build -- means SCons sees today's file set, so + adding or removing a file there changes the dependency set and marks the UI + build out of date. A regular file maps to itself. A missing path yields + nothing: a stale token for a just-removed file must not become a non-existent + SCons source (which would abort the build).""" + if os.path.isdir(ap): + return [os.path.join(root, n) for root, _dirs, names in os.walk(ap) for n in names] + return [ap] if os.path.exists(ap) else [] + + +def _parse_depfile(depfile): + """Read a Makefile-style depfile into (targets, sources) lists of absolute + paths. Directory tokens are expanded to their current files (see + _expand_source). Paths are project-relative with forward slashes (no Windows + drive-letter colons); spaces within a path are escaped as "\\ ", so the + dependency list is split only on *unescaped* whitespace.""" + targets, sources, seen = [], [], set() + for line in depfile.read_text().splitlines(): + line = line.strip() + if not line or line.startswith('#') or ':' not in line: + continue + target, deps = line.split(':', 1) + targets.append(_resolve_dep(target)) + for dep in re.split(r'(? node_modules.stat().st_mtime + ) + if stale: + print('\x1b[6;33;42m' + 'Installing node packages' + '\x1b[0m') + rc = env.Execute("npm ci") + if rc: + print('\x1b[0;31;43m' + 'npm ci failed check https://kno.wled.ge/advanced/compiling-wled/' + '\x1b[0m') + Exit(rc) + + +def _wire_object_methods(target_env, cmd): + """Make every object compiled by target_env require the UI build command, so + the generated headers exist before anything #including them compiles -- even + under a parallel (-j) build.""" + for name in ("Object", "StaticObject", "SharedObject"): + if not hasattr(target_env, name): + continue + orig = getattr(target_env, name) + def wrapped(*args, _orig=orig, _env=target_env, **kwargs): + nodes = _orig(*args, **kwargs) + _env.Requires(nodes, cmd) + return nodes + setattr(target_env, name, wrapped) + + +# Guard so the UI build is registered at most once per environment. +_registered = {"done": False} + + +def _register_ui_build(xenv, result): + if _registered["done"]: + return + _registered["done"] = True + + # Usermod HTML manifests discovered by load_usermods.py (may be empty). + manifests = list(xenv.get("WLED_UI_MANIFESTS", [])) + depfile = Path(xenv.subst("$BUILD_DIR")).resolve() / "ui_deps.d" + + # The single node invocation that builds the whole web UI (main + usermods) + # and refreshes the depfile. The manifest set is baked into the action, so + # adding or removing a usermod changes the command's build signature and + # re-runs it -- which is how a new usermod's headers get built and recorded. + node_cmd = " ".join( + ['node', '"%s"' % CDATA_JS, '--depfile', '"%s"' % depfile] + + ['--manifest "%s"' % m for m in manifests] + ) + + def _build_ui(target, source, env, _cmd=node_cmd): + _ensure_node_modules(env) + rc = env.Execute(_cmd) + if rc: + print('\x1b[0;31;43m' + 'Web UI build failed check https://kno.wled.ge/advanced/compiling-wled/' + '\x1b[0m') + return rc + + action = env.VerboseAction(_build_ui, "Building web UI") + + # Feed the previous build's depfile to SCons when we have one; otherwise force + # a single build and pick up the depfile it leaves behind for next time. + targets, sources = _parse_depfile(depfile) if depfile.exists() else ([], []) + if targets: + ui_cmd = env.Command( + target=[env.File(t) for t in targets], + source=[env.File(s) for s in sources], + action=action, + ) + else: + # First build (or a deleted depfile): we know cdata.js must run and do not + # yet know what it produces. Make the depfile the target and force the + # run; the order-only prerequisite wired below still guarantees the + # generated headers land before any C++ that #includes them compiles. + ui_cmd = env.Command(target=[env.File(str(depfile))], source=[], action=action) + env.AlwaysBuild(ui_cmd) + + # By default SCons removes a builder's targets before running its action. + # Because every header is a target of this one Command, editing any single + # UI source would delete ALL of them, cdata.js would then see them missing + # and rebuild every one (each with a fresh WEB_BUILD_TIME), and everything + # that #includes a generated header would needlessly recompile. Mark the + # targets Precious so SCons leaves them in place and cdata.js's own + # per-job staleness check does the incremental rebuild. (Precious only + # affects pre-build removal, not `pio run -t clean`.) + env.Precious(ui_cmd) + + # Order the build ahead of compilation. PlatformIO compiles the main WLED + # sources with result.env (the project-as-library builder's env; see + # ProcessProjectDeps -> plb.env.BuildSources), and each usermod's sources + # with that module's own env -- so we wire both. + _wire_object_methods(result.env, ui_cmd) + # Match on realpath both sides: manifests come from load_usermods.py already + # resolved, and a symlink:// usermod's src_dir may reach through a symlink, + # so a plain normpath comparison could miss and leave its objects unwired. + manifest_dirs = {os.path.realpath(os.path.dirname(m)) for m in manifests} + for dep in result.depbuilders: + if os.path.realpath(str(dep.src_dir)) in manifest_dirs: + _wire_object_methods(dep.env, ui_cmd) + + # Belt-and-suspenders: also an explicit prerequisite of the final firmware. + xenv.Depends("$BUILD_DIR/$PROGNAME$PROGSUFFIX", ui_cmd) + + +# Hook ConfigureProjectLibBuilder *after* load_usermods.py's wrapper, so the +# usermod manifest list is already populated and the returned builder (whose env +# compiles the main sources) is available. This script is listed after +# load_usermods.py in platformio.ini, so our wrapper is outermost and runs last. +# We only register nodes here; the build runs later, at build time. +_old_ConfigureProjectLibBuilder = env.ConfigureProjectLibBuilder + +def _wrapped_ConfigureProjectLibBuilder(xenv): + result = _old_ConfigureProjectLibBuilder.clone(xenv)() + _register_ui_build(xenv, result) + return result + +env.AddMethod(_wrapped_ConfigureProjectLibBuilder, "ConfigureProjectLibBuilder") diff --git a/pio-scripts/load_usermods.py b/pio-scripts/load_usermods.py index 18852ff30b..22aa1255dc 100644 --- a/pio-scripts/load_usermods.py +++ b/pio-scripts/load_usermods.py @@ -201,6 +201,19 @@ def wrapped_ConfigureProjectLibBuilder(xenv): fg="red", err=True) Exit(1) + # Collect the HTML-asset manifests of the selected usermods and publish them + # for build_ui.py, which builds all UI assets (main WLED + usermods) in a + # single node invocation after this discovery step. The generated header + # lives in each usermod's own source directory, so SCons's C/C++ scanner + # detects the #include and orders compilation correctly. + ui_manifests = [] + for dep in wled_deps: + manifest_path = Path(dep.src_dir) / 'cdata.json' + if manifest_path.exists(): + ui_manifests.append(str(manifest_path.resolve())) + + xenv['WLED_UI_MANIFESTS'] = ui_manifests + # Save the depbuilders list for later validation xenv.Replace(WLED_MODULES=wled_deps) diff --git a/tools/cdata-test.js b/tools/cdata-test.js index 169756475e..12c69915a6 100644 --- a/tools/cdata-test.js +++ b/tools/cdata-test.js @@ -3,76 +3,21 @@ const assert = require('node:assert'); const { describe, it, before, after } = require('node:test'); const fs = require('fs'); +const os = require('os'); const path = require('path'); const child_process = require('child_process'); const util = require('util'); const execPromise = util.promisify(child_process.exec); -process.env.NODE_ENV = 'test'; // Set the environment to testing -const cdata = require('./cdata.js'); +// Importing the build script must be side-effect free: with NODE_ENV=test it +// defines its helpers but must not run a build. +process.env.NODE_ENV = 'test'; +require('./cdata.js'); -describe('Function', () => { - const testFolderPath = path.join(__dirname, 'testFolder'); - const oldFilePath = path.join(testFolderPath, 'oldFile.txt'); - const newFilePath = path.join(testFolderPath, 'newFile.txt'); - - // Create a temporary file before the test - before(() => { - // Create test folder - if (!fs.existsSync(testFolderPath)) { - fs.mkdirSync(testFolderPath); - } - - // Create an old file - fs.writeFileSync(oldFilePath, 'This is an old file.'); - // Modify the 'mtime' to simulate an old file - const oldTime = new Date(); - oldTime.setFullYear(oldTime.getFullYear() - 1); - fs.utimesSync(oldFilePath, oldTime, oldTime); - - // Create a new file - fs.writeFileSync(newFilePath, 'This is a new file.'); - }); - - // delete the temporary files after the test - after(() => { - fs.rmSync(testFolderPath, { recursive: true }); - }); - - describe('isFileNewerThan', async () => { - it('should return true if the file is newer than the provided time', async () => { - const pastTime = Date.now() - 10000; // 10 seconds ago - assert.strictEqual(cdata.isFileNewerThan(newFilePath, pastTime), true); - }); - - it('should return false if the file is older than the provided time', async () => { - assert.strictEqual(cdata.isFileNewerThan(oldFilePath, Date.now()), false); - }); - - it('should throw an exception if the file does not exist', async () => { - assert.throws(() => { - cdata.isFileNewerThan('nonexistent.txt', Date.now()); - }); - }); - }); - - describe('isAnyFileInFolderNewerThan', async () => { - it('should return true if a file in the folder is newer than the given time', async () => { - const time = fs.statSync(path.join(testFolderPath, 'oldFile.txt')).mtime; - assert.strictEqual(cdata.isAnyFileInFolderNewerThan(testFolderPath, time), true); - }); - - it('should return false if no files in the folder are newer than the given time', async () => { - assert.strictEqual(cdata.isAnyFileInFolderNewerThan(testFolderPath, new Date()), false); - }); - - it('should throw an exception if the folder does not exist', async () => { - assert.throws(() => { - cdata.isAnyFileInFolderNewerThan('nonexistent', new Date()); - }); - }); - }); -}); +// The CLI decides whether to build from NODE_ENV, so child processes must not +// inherit the test harness's NODE_ENV=test (which suppresses the build). +const buildEnv = { ...process.env, NODE_ENV: 'production' }; +const runCdata = (args = '') => execPromise('node tools/cdata.js ' + args, { env: buildEnv }); describe('Script', () => { const folderPath = 'wled00'; @@ -216,3 +161,196 @@ describe('Script', () => { }); }); }); + +describe('Dependency graph (--emit-deps / --depfile)', () => { + const depfile = path.join(os.tmpdir(), `cdata-deps-${process.pid}.d`); + + after(() => { + try { fs.rmSync(depfile); } catch { /* ignore */ } + }); + + it('emits a depfile listing every generated header, without building', async () => { + const { stdout } = await runCdata(`--emit-deps --depfile "${depfile}"`); + assert.match(stdout, /Wrote dependency graph/); + assert.doesNotMatch(stdout, /Minified/); // nothing was actually built + + const dep = fs.readFileSync(depfile, 'utf8'); + for (const header of ['wled00/html_ui.h', 'wled00/html_settings.h', 'wled00/js_iro.h']) { + assert.match(dep, new RegExp('^' + header.replace(/\./g, '\\.') + ':', 'm'), + `depfile is missing a rule for ${header}`); + } + }); + + it('records cdata.js, package.json and package-lock.json as inputs of every header', async () => { + await runCdata(`--emit-deps --depfile "${depfile}"`); + const dep = fs.readFileSync(depfile, 'utf8'); + for (const line of dep.split('\n')) { + if (!line || line.startsWith('#') || !line.includes(':')) continue; + assert.match(line, /tools\/cdata\.js/, 'every rule should depend on cdata.js'); + assert.match(line, /(^|\s)package\.json(\s|$)/, 'every rule should depend on package.json'); + // The lock file pins minifier versions, so an npm install that changes them + // (without touching package.json) must still invalidate every header. + assert.match(line, /package-lock\.json/, 'every rule should depend on package-lock.json'); + } + }); + + it("records an html job's whole source folder, not a snapshot of its files", async () => { + // An html job inlines arbitrary resources from its source folder, so the + // folder itself is the dependency. That is what lets a file added to or + // removed from wled00/data (e.g. wled00/data/icons-ui/Read Me.txt) count as a + // dependency change -- rather than listing today's files and missing the next + // one that appears. + await runCdata(`--emit-deps --depfile "${depfile}"`); + const dep = fs.readFileSync(depfile, 'utf8'); + const uiRule = dep.split('\n').find(l => l.startsWith('wled00/html_ui.h:')); + assert(uiRule, 'no dependency rule for wled00/html_ui.h'); + assert.match(uiRule, /(^|\s)wled00\/data(\s|$)/, 'html_ui.h should depend on its source folder'); + // The folder is listed as one token, so individual files inside it -- and any + // spaces in their names -- are not enumerated here. + assert.doesNotMatch(uiRule, /Read/); + }); +}); + +describe('Usermod manifests', () => { + let modDir; + const manifest = () => path.join(modDir, 'cdata.json'); + + before(() => { + modDir = fs.mkdtempSync(path.join(os.tmpdir(), 'cdata-mod-')); + fs.mkdirSync(path.join(modDir, 'data')); + fs.writeFileSync(path.join(modDir, 'data', 'page.htm'), + '

Hi ##VERSION##

'); + fs.writeFileSync(manifest(), JSON.stringify({ + header: [{ + output: 'html_mod.h', + srcDir: 'data', + specs: [{ file: 'page.htm', name: 'PAGE_mod', method: 'gzip', filter: 'html-minify' }], + }], + })); + }); + + after(() => { + fs.rmSync(modDir, { recursive: true, force: true }); + }); + + it('legacy single-manifest mode builds only that header', async () => { + const out = path.join(modDir, 'html_mod.h'); + const { stdout } = await runCdata(`"${manifest()}"`); + assert(fs.existsSync(out), 'usermod header was not built'); + assert.match(fs.readFileSync(out, 'utf8'), /PAGE_mod/); + assert.doesNotMatch(stdout, /index\.htm|html_ui\.h/); // main UI is not part of this run + }); + + it('--manifest adds the usermod header to the graph alongside the main UI', async () => { + const depfile = path.join(modDir, 'deps.d'); + await runCdata(`--emit-deps --depfile "${depfile}" --manifest "${manifest()}"`); + const dep = fs.readFileSync(depfile, 'utf8'); + assert.match(dep, /html_mod\.h:/); // the usermod output + assert.match(dep, /wled00\/html_ui\.h:/); // together with the main UI + }); + + it('rejects a manifest with an unknown top-level key', async () => { + const bad = path.join(modDir, 'bad.json'); + fs.writeFileSync(bad, JSON.stringify({ + inject: {}, // reserved for the future, not accepted by current tooling + header: [{ + output: 'html_bad.h', + specs: [{ file: 'page.htm', name: 'PAGE_bad', method: 'gzip', filter: 'html-minify' }], + }], + })); + await assert.rejects(runCdata(`"${bad}"`), /unknown top-level key/); + fs.rmSync(bad); + }); + + it('builds one header per header op in a multi-header manifest', async () => { + const multi = path.join(modDir, 'multi.json'); + fs.writeFileSync(multi, JSON.stringify({ + header: [ + { output: 'html_a.h', srcDir: 'data', + specs: [{ file: 'page.htm', name: 'PAGE_a', method: 'gzip', filter: 'html-minify' }] }, + { output: 'html_b.h', srcDir: 'data', + specs: [{ file: 'page.htm', name: 'PAGE_b', method: 'gzip', filter: 'html-minify' }] }, + ], + })); + await runCdata(`"${multi}"`); + assert.match(fs.readFileSync(path.join(modDir, 'html_a.h'), 'utf8'), /PAGE_a/); + assert.match(fs.readFileSync(path.join(modDir, 'html_b.h'), 'utf8'), /PAGE_b/); + fs.rmSync(multi); + }); + + it('emits a valid raw string for a plaintext spec with no delimiters', async () => { + const pt = path.join(modDir, 'plain.json'); + fs.writeFileSync(pt, JSON.stringify({ + header: [{ output: 'html_plain.h', srcDir: 'data', + specs: [{ file: 'page.htm', name: 'PAGE_plain', method: 'plaintext' }] }], + })); + await runCdata(`"${pt}"`); + const out = fs.readFileSync(path.join(modDir, 'html_plain.h'), 'utf8'); + // A safe matching delimiter pair is filled in, so the literal is R"=====(...)=====" + // rather than an invalid bare R"...". + assert.match(out, /const char PAGE_plain\[\] PROGMEM = R"=====\(/); + assert.match(out, /\)=====";/); + assert.doesNotMatch(out, /R"[^=]/); // never a bare/undelimited raw string + fs.rmSync(pt); + fs.rmSync(path.join(modDir, 'html_plain.h')); + }); + + // The build hard-fails on any invalid manifest (cdata.js is the single + // validator; the Python layer only forwards paths). Each case asserts the + // CLI exits non-zero with a message identifying the specific problem. + const spec = { file: 'page.htm', name: 'PAGE_x', method: 'gzip', filter: 'html-minify' }; + const invalidManifests = { + 'malformed JSON': { raw: '{ "header": [ }', error: /Could not read manifest/ }, + 'a header op missing output': { + json: { header: [{ specs: [spec] }] }, error: /missing a string 'output'/ }, + 'an empty header array': { + json: { header: [] }, error: /missing or empty 'header' array/ }, + 'no header key at all': { + json: { schemaVersion: 1 }, error: /missing or empty 'header' array/ }, + 'an unsupported schemaVersion': { + json: { schemaVersion: 2, header: [{ output: 'x.h', specs: [spec] }] }, + error: /unsupported schemaVersion 2/ }, + 'two header ops writing the same output': { + json: { header: [ + { output: 'dup.h', srcDir: 'data', specs: [{ ...spec, name: 'PAGE_a' }] }, + { output: 'dup.h', srcDir: 'data', specs: [{ ...spec, name: 'PAGE_b' }] }, + ] }, + error: /collides with an earlier header op/ }, + // Path traversal: no manifest-supplied path may escape the usermod folder. + 'an output escaping the usermod folder': { + json: { header: [{ output: '../escape.h', specs: [spec] }] }, + error: /output '\.\.\/escape\.h' resolves outside the usermod folder/ }, + 'an absolute output path': { + json: { header: [{ output: '/tmp/evil.h', specs: [spec] }] }, + error: /resolves outside the usermod folder/ }, + 'a srcDir escaping the usermod folder': { + json: { header: [{ output: 'x.h', srcDir: '../../elsewhere', specs: [spec] }] }, + error: /srcDir '\.\.\/\.\.\/elsewhere' resolves outside the usermod folder/ }, + 'a spec file escaping the usermod folder': { + json: { header: [{ output: 'x.h', srcDir: 'data', specs: [{ ...spec, file: '../../../../etc/hosts' }] }] }, + error: /file '.*etc\/hosts' resolves outside the usermod folder/ }, + // Spec value validation: bad values must fail loudly, not reach codegen. + 'a spec name that is not a C identifier': { + json: { header: [{ output: 'x.h', srcDir: 'data', specs: [{ ...spec, name: 'not a name!' }] }] }, + error: /needs a 'name' that is a valid C identifier/ }, + 'an unknown spec method': { + json: { header: [{ output: 'x.h', srcDir: 'data', specs: [{ ...spec, method: 'zip' }] }] }, + error: /invalid 'method' "zip"/ }, + 'an unknown spec filter': { + json: { header: [{ output: 'x.h', srcDir: 'data', specs: [{ ...spec, filter: 'htlm-minify' }] }] }, + error: /invalid 'filter' "htlm-minify"/ }, + 'a plaintext spec with only one delimiter': { + json: { header: [{ output: 'x.h', srcDir: 'data', + specs: [{ file: 'page.htm', name: 'PAGE_x', method: 'plaintext', prepend: '=====(' }] }] }, + error: /must set both 'prepend' and 'append'/ }, + }; + + for (const [desc, { raw, json, error }] of Object.entries(invalidManifests)) { + it(`rejects ${desc}`, async () => { + const bad = path.join(modDir, 'invalid.json'); + fs.writeFileSync(bad, raw !== undefined ? raw : JSON.stringify(json)); + await assert.rejects(runCdata(`"${bad}"`), error); + fs.rmSync(bad); + }); + } +}); diff --git a/tools/cdata.js b/tools/cdata.js index 5ae7088b3e..4bffaf312e 100644 --- a/tools/cdata.js +++ b/tools/cdata.js @@ -12,31 +12,26 @@ * * How it works? * - * It uses NodeJS packages to inline, minify and GZIP files. See writeHtmlGzipped and writeChunks invocations at the bottom of the page. + * It uses NodeJS packages to inline, minify and GZIP files. See the mainJobs table and writeChunks/writeHtmlGzipped below. + * + * Command line: + * node cdata.js build the main web UI (skips up-to-date outputs) + * node cdata.js -f | --force rebuild everything unconditionally + * node cdata.js --manifest ... additionally build these usermod manifests in the same run + * node cdata.js --depfile write a Makefile-style dependency graph for the build system + * node cdata.js --emit-deps --depfile only write the dependency graph, build nothing + * node cdata.js legacy single-manifest mode (build just that manifest) */ const fs = require("node:fs"); const path = require("path"); -const inline = require("web-resource-inliner"); const zlib = require("node:zlib"); -const CleanCSS = require("clean-css"); -const minifyHtml = require("html-minifier-terser").minify; const packageJson = require("../package.json"); -// Export functions for testing -module.exports = { isFileNewerThan, isAnyFileInFolderNewerThan }; - -const output = ["wled00/html_ui.h", "wled00/html_pixart.h", "wled00/html_cpal.h", "wled00/html_edit.h", "wled00/html_pxmagic.h", "wled00/html_pixelforge.h", "wled00/html_settings.h", "wled00/html_other.h", "wled00/js_iro.h", "wled00/js_omggif.h"] - -// \x1b[34m is blue, \x1b[36m is cyan, \x1b[0m is reset -const wledBanner = ` -\t\x1b[34m ## ## ## ###### ###### -\t\x1b[34m## ## ## ## ## ## ## -\t\x1b[34m## ## ## ## ###### ## ## -\t\x1b[34m## ## ## ## ## ## ## -\t\x1b[34m ## ## ###### ###### ###### -\t\t\x1b[36m build script for web UI -\x1b[0m`; +// The heavy third-party packages (web-resource-inliner, clean-css, +// html-minifier-terser) are require()d lazily inside the functions that use +// them. This keeps the --emit-deps dependency-graph pass working before +// `npm ci` has populated node_modules, and keeps node startup cheap. // Generate build timestamp as UNIX timestamp (seconds since epoch) function generateBuildTime() { @@ -46,14 +41,14 @@ function generateBuildTime() { const singleHeader = `/* * Binary array for the Web UI. * gzip is used for smaller size and improved speeds. - * + * * Please see https://kno.wled.ge/advanced/custom-features/#changing-web-ui * to find out how to easily modify the web UI source! */ // Automatically generated build time for cache busting (UNIX timestamp) #define WEB_BUILD_TIME ${generateBuildTime()} - + `; const multiHeader = `/* @@ -123,40 +118,51 @@ async function minify(str, type = "plain") { if (type == "plain") { return str; } else if (type == "css-minify") { + const CleanCSS = require("clean-css"); return new CleanCSS({}).minify(str).styles; } else if (type == "js-minify") { + const minifyHtml = require("html-minifier-terser").minify; let js = await minifyHtml('', options); return js.replace(/<[\/]*script>/g, ''); } else if (type == "html-minify") { + const minifyHtml = require("html-minifier-terser").minify; return await minifyHtml(str, options); } throw new Error("Unknown filter: " + type); } +// Promisified wrapper around web-resource-inliner's callback API. Resolves with +// the inlined HTML (css/js pulled in) or rejects on error. Without this, the +// enclosing async function used to resolve *before* the callback ran, so callers +// could not await the real work and a thrown error vanished into an unhandled +// rejection instead of propagating. +function inlineHtml(sourceFile, inlineCss) { + const inline = require("web-resource-inliner"); + return new Promise((resolve, reject) => { + inline.html({ + fileContent: fs.readFileSync(sourceFile, "utf8"), + relativeTo: path.dirname(sourceFile), + strict: inlineCss, // when not inlining css, ignore errors (enables linking style.css from subfolder htm files) + stylesheets: inlineCss // when true (default), css is inlined + }, (error, html) => error ? reject(error) : resolve(html)); + }); +} + async function writeHtmlGzipped(sourceFile, resultFile, page, inlineCss = true) { console.info("Reading " + sourceFile); - inline.html({ - fileContent: fs.readFileSync(sourceFile, "utf8"), - relativeTo: path.dirname(sourceFile), - strict: inlineCss, // when not inlining css, ignore errors (enables linking style.css from subfolder htm files) - stylesheets: inlineCss // when true (default), css is inlined - }, - async function (error, html) { - if (error) throw error; - - html = adoptVersionAndRepo(html); - const originalLength = html.length; - html = await minify(html, "html-minify"); - const result = zlib.gzipSync(html, { level: zlib.constants.Z_BEST_COMPRESSION }); - console.info("Minified and compressed " + sourceFile + " from " + originalLength + " to " + result.length + " bytes"); - const array = hexdump(result); - let src = singleHeader; - src += `const uint16_t PAGE_${page}_length = ${result.length};\n`; - src += `const uint8_t PAGE_${page}[] PROGMEM = {\n${array}\n};\n\n`; - console.info("Writing " + resultFile); - fs.writeFileSync(resultFile, src); - }); + let html = await inlineHtml(sourceFile, inlineCss); + html = adoptVersionAndRepo(html); + const originalLength = html.length; + html = await minify(html, "html-minify"); + const result = zlib.gzipSync(html, { level: zlib.constants.Z_BEST_COMPRESSION }); + console.info("Minified and compressed " + sourceFile + " from " + originalLength + " to " + result.length + " bytes"); + const array = hexdump(result); + let src = singleHeader; + src += `const uint16_t PAGE_${page}_length = ${result.length};\n`; + src += `const uint8_t PAGE_${page}[] PROGMEM = {\n${array}\n};\n\n`; + console.info("Writing " + resultFile); + fs.writeFileSync(resultFile, src); } async function specToChunk(srcDir, s) { @@ -178,7 +184,14 @@ async function specToChunk(srcDir, s) { } else { const minified = await minify(str, s.filter); console.info("Minified " + s.file + " from " + originalLength + " to " + minified.length + " bytes"); - chunk += `const char ${s.name}[] PROGMEM = R"${s.prepend || ""}${minified}${s.append || ""}";\n\n`; + // prepend/append together delimit the C++ raw string: R"delim(...)delim". + // Default to a safe matching pair when the spec supplies neither, so a + // plaintext spec is never emitted as a bare R"..." -- which is invalid C++ + // because it has no parentheses. (manifestToJobs rejects supplying only one + // of the two, so an unmatched delimiter can't slip through here.) + const prepend = s.prepend !== undefined ? s.prepend : "=====("; + const append = s.append !== undefined ? s.append : ")====="; + chunk += `const char ${s.name}[] PROGMEM = R"${prepend}${minified}${append}";\n\n`; return s.mangle ? s.mangle(chunk) : chunk; } } else if (s.method == "binary") { @@ -201,280 +214,557 @@ async function writeChunks(srcDir, specs, resultFile) { fs.writeFileSync(resultFile, src); } -// Check if a file is newer than a given time -function isFileNewerThan(filePath, time) { - const stats = fs.statSync(filePath); - return stats.mtimeMs > time; +// List every file under a folder, recursively (absolute or srcDir-relative paths). +function listFilesRecursive(folderPath) { + const out = []; + for (const entry of fs.readdirSync(folderPath, { withFileTypes: true })) { + const p = path.join(folderPath, entry.name); + if (entry.isDirectory()) out.push(...listFilesRecursive(p)); + else out.push(p); + } + return out; +} + +// List every directory under a folder, including the folder itself, recursively. +// A directory's mtime changes when an entry is added or removed, so these are the +// nodes that make folder-membership changes (a new or deleted file) observable to +// the mtime-based staleness check -- listing the surviving files alone cannot. +function listDirsRecursive(folderPath) { + const out = [folderPath]; + for (const entry of fs.readdirSync(folderPath, { withFileTypes: true })) { + if (entry.isDirectory()) out.push(...listDirsRecursive(path.join(folderPath, entry.name))); + } + return out; +} + +// Every generated header, described as data so a single code path can both build +// it and report its input dependencies. +// kind:'html' — a single .htm inlined + gzipped into a PAGE_ array +// kind:'chunks' — one or more specs concatenated into a header +const mainJobs = [ + { kind: 'html', src: "wled00/data/index.htm", out: "wled00/html_ui.h", page: 'index' }, + { kind: 'html', src: "wled00/data/pixart/pixart.htm", out: "wled00/html_pixart.h", page: 'pixart' }, + { kind: 'html', src: "wled00/data/pxmagic/pxmagic.htm", out: "wled00/html_pxmagic.h", page: 'pxmagic' }, + { kind: 'html', src: "wled00/data/pixelforge/pixelforge.htm", out: "wled00/html_pixelforge.h", page: 'pixelforge', inlineCss: false }, // do not inline css + //{ kind: 'html', src: "wled00/data/edit.htm", out: "wled00/html_edit.h", page: 'edit' }, + + { + kind: 'chunks', + srcDir: "wled00/data/", + out: "wled00/js_iro.h", + specs: [ + { + file: "iro.js", + name: "JS_iro", + method: "gzip", + filter: "plain", // no minification, it is already minified + mangle: (s) => s.replace(/^\/\*![\s\S]*?\*\//, '') // remove license comment at the top + } + ], + }, + + { + kind: 'chunks', + srcDir: "wled00/data/pixelforge", + out: "wled00/js_omggif.h", + specs: [ + { + file: "omggif.js", + name: "JS_omggif", + method: "gzip", + filter: "js-minify", + mangle: (s) => s.replace(/^\/\*![\s\S]*?\*\//, '') // remove license comment at the top + } + ], + }, + + { + kind: 'chunks', + srcDir: "wled00/data", + out: "wled00/html_edit.h", + specs: [ + { + file: "edit.htm", + name: "PAGE_edit", + method: "gzip", + filter: "html-minify" + } + ], + }, + + { + kind: 'chunks', + srcDir: "wled00/data/cpal", + out: "wled00/html_cpal.h", + specs: [ + { + file: "cpal.htm", + name: "PAGE_cpal", + method: "gzip", + filter: "html-minify" + } + ], + }, + + { + kind: 'chunks', + srcDir: "wled00/data", + out: "wled00/html_settings.h", + specs: [ + { + file: "style.css", + name: "PAGE_settingsCss", + method: "gzip", + filter: "css-minify", + mangle: (str) => + str + .replace("%%", "%") + }, + { + file: "common.js", + name: "JS_common", + method: "gzip", + filter: "js-minify", + }, + { + file: "settings.htm", + name: "PAGE_settings", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_wifi.htm", + name: "PAGE_settings_wifi", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_leds.htm", + name: "PAGE_settings_leds", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_dmx.htm", + name: "PAGE_settings_dmx", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_ui.htm", + name: "PAGE_settings_ui", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_sync.htm", + name: "PAGE_settings_sync", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_time.htm", + name: "PAGE_settings_time", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_sec.htm", + name: "PAGE_settings_sec", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_um.htm", + name: "PAGE_settings_um", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_2D.htm", + name: "PAGE_settings_2D", + method: "gzip", + filter: "html-minify", + }, + { + file: "settings_pin.htm", + name: "PAGE_settings_pin", + method: "gzip", + filter: "html-minify" + }, + { + file: "settings_pininfo.htm", + name: "PAGE_settings_pininfo", + method: "gzip", + filter: "html-minify" + } + ], + }, + + { + kind: 'chunks', + srcDir: "wled00/data", + out: "wled00/html_other.h", + specs: [ + { + file: "usermod.htm", + name: "PAGE_usermod", + method: "gzip", + filter: "html-minify", + mangle: (str) => + str.replace(/fetch\("http\:\/\/.*\/win/gms, 'fetch("/win'), + }, + { + file: "msg.htm", + name: "PAGE_msg", + prepend: "=====(", + append: ")=====", + method: "plaintext", + filter: "html-minify", + mangle: (str) => str.replace(/\.*\<\/body\>/gms, "

%MSG%"), + }, + { + file: "dmxmap.htm", + name: "PAGE_dmxmap", + prepend: "=====(", + append: ")=====", + method: "plaintext", + filter: "html-minify", + mangle: (str) => ` +#ifdef WLED_ENABLE_DMX +${str.replace(/function FM\(\)[ ]?\{/gms, "function FM() {%DMXVARS%\n")} +#else +const char PAGE_dmxmap[] PROGMEM = R"=====()====="; +#endif +`, + }, + { + file: "update.htm", + name: "PAGE_update", + method: "gzip", + filter: "html-minify", + }, + { + file: "welcome.htm", + name: "PAGE_welcome", + method: "gzip", + filter: "html-minify", + }, + { + file: "liveview.htm", + name: "PAGE_liveview", + method: "gzip", + filter: "html-minify", + }, + { + file: "liveviewws2D.htm", + name: "PAGE_liveviewws2D", + method: "gzip", + filter: "html-minify", + }, + { + file: "404.htm", + name: "PAGE_404", + method: "gzip", + filter: "html-minify", + }, + { + file: "favicon.ico", + name: "favicon", + method: "binary", + } + ], + }, +]; + +// Top-level keys a usermod manifest (cdata.json) is allowed to carry. Any other +// key is a validation error: the schema is closed so typos and not-yet-supported +// features (e.g. 'inject', 'defaults') fail loudly instead of being ignored. +const MANIFEST_ALLOWED_KEYS = new Set(['header', 'schemaVersion', '$schema']); + +// The processing a spec's 'method' selects, and (for text methods) the optional +// 'filter' minifier. A manifest is validated against these up front so a typo +// fails loudly with manifest context, rather than surfacing as an "Unknown +// method/filter" throw deep in the build (or, worse, silently generating invalid +// C++). SPEC_FILTERS must stay in sync with the branches in minify(). +const SPEC_METHODS = new Set(['plaintext', 'gzip', 'binary']); +const SPEC_FILTERS = new Set(['plain', 'css-minify', 'js-minify', 'html-minify']); + +// Resolve `rel` (a manifest-supplied path) against `baseDir`, failing via `fail` +// if it lands outside `baseDir`. Usermod manifests are third-party build inputs, +// so a stray `..` -- or an absolute path -- in an output/srcDir/spec file must not +// let the build read from, or write to, anywhere outside the usermod's own folder. +// path.resolve (not path.join) is used deliberately: it treats an absolute `rel` +// as absolute, so "/etc/passwd" is caught by the escape check rather than being +// quietly reinterpreted as a subpath. +function resolveWithin(baseDir, rel, fail, what) { + const abs = path.resolve(baseDir, rel); + const rp = path.relative(baseDir, abs); + if (path.isAbsolute(rp) || rp === '..' || rp.startsWith('..' + path.sep)) { + fail(what + " '" + rel + "' resolves outside the usermod folder"); + } + return abs; } -// Check if any file in a folder (or its subfolders) is newer than a given time -function isAnyFileInFolderNewerThan(folderPath, time) { - const files = fs.readdirSync(folderPath, { withFileTypes: true }); - for (const file of files) { - const filePath = path.join(folderPath, file.name); - if (isFileNewerThan(filePath, time)) { - return true; +// Turn a usermod manifest (cdata.json) into one chunks job per header op. +// The manifest is an externally-tagged object: `header` is an array of +// header-operations, each of which produces one generated header file. +function manifestToJobs(manifestArg) { + const manifestPath = path.resolve(manifestArg); + const modDir = path.dirname(manifestPath); + const fail = (msg) => { + console.error("Invalid manifest " + manifestPath + ": " + msg); + process.exit(1); + }; + + let manifest; + try { + manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8')); + } catch (e) { + console.error("Could not read manifest " + manifestPath + ": " + e.message); + process.exit(1); + } + + if (typeof manifest !== 'object' || manifest === null || Array.isArray(manifest)) { + fail("top-level value must be an object"); + } + for (const key of Object.keys(manifest)) { + if (!MANIFEST_ALLOWED_KEYS.has(key)) fail("unknown top-level key '" + key + "'"); + } + // Absent schemaVersion means the baseline contract (implicit v1); only absent + // or an explicit 1 is understood by this tooling. + if ('schemaVersion' in manifest && manifest.schemaVersion !== 1) { + fail("unsupported schemaVersion " + JSON.stringify(manifest.schemaVersion) + " (expected 1 or absent)"); + } + if (!Array.isArray(manifest.header) || manifest.header.length === 0) { + fail("missing or empty 'header' array"); + } + + const seenOut = new Set(); + return manifest.header.map((op, i) => { + if (typeof op !== 'object' || op === null || Array.isArray(op)) { + fail("header[" + i + "] must be an object"); } - if (file.isDirectory() && isAnyFileInFolderNewerThan(filePath, time)) { - return true; + if (typeof op.output !== 'string' || op.output.length === 0) { + fail("header[" + i + "] is missing a string 'output'"); } - } - return false; + if (!Array.isArray(op.specs) || op.specs.length === 0) { + fail("header[" + i + "] is missing a non-empty 'specs' array"); + } + // Constrain every manifest-supplied path to the usermod folder (see + // resolveWithin). srcDir is resolved first so spec files can be checked + // against it. + const srcDir = resolveWithin(modDir, op.srcDir || 'data', fail, "header[" + i + "] srcDir"); + op.specs.forEach((s, j) => { + const where = "header[" + i + "].specs[" + j + "]"; + if (typeof s !== 'object' || s === null || Array.isArray(s)) { + fail(where + " must be an object"); + } + if (typeof s.file !== 'string' || s.file.length === 0) { + fail(where + " is missing a string 'file'"); + } + resolveWithin(srcDir, s.file, fail, where + " file"); + // 'name' is emitted verbatim as a C identifier (const char [] ...); a + // value with spaces or punctuation would break -- or inject into -- the + // generated header, so require a strict identifier. + if (typeof s.name !== 'string' || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(s.name)) { + fail(where + " needs a 'name' that is a valid C identifier"); + } + if (!SPEC_METHODS.has(s.method)) { + fail(where + " has an invalid 'method' " + JSON.stringify(s.method) + + " (expected one of: " + [...SPEC_METHODS].join(', ') + ")"); + } + // filter is optional (absent means no minification); reject only a value + // that minify() would not understand. + if (s.filter !== undefined && !SPEC_FILTERS.has(s.filter)) { + fail(where + " has an invalid 'filter' " + JSON.stringify(s.filter) + + " (expected one of: " + [...SPEC_FILTERS].join(', ') + ")"); + } + // A plaintext spec's raw-string delimiters must be supplied as a matching + // pair; supplying only one would emit an unbalanced R"delim(...)" . Neither + // is fine -- specToChunk fills in a safe default pair. + if (s.method === 'plaintext' && (s.prepend === undefined) !== (s.append === undefined)) { + fail(where + " must set both 'prepend' and 'append' raw-string delimiters, or neither"); + } + }); + // Two ops writing the same file would declare two SCons builders for one + // target (an error); catch it here with a clear message instead. + const out = resolveWithin(modDir, op.output, fail, "header[" + i + "] output"); + if (seenOut.has(out)) { + fail("header[" + i + "] output '" + op.output + "' collides with an earlier header op; each must write a distinct file"); + } + seenOut.add(out); + return { + kind: 'chunks', + srcDir: srcDir, + out: out, + specs: op.specs, + manifestPath: manifestPath, // the manifest itself is an input + }; + }); } -// Check if the web UI is already built -function isAlreadyBuilt(webUIPath, packageJsonPath = "package.json") { - let lastBuildTime = Infinity; +// A job's inputs, split by how a change to them is detected: +// files - exact files whose *content* feeds the output: this script, +// package.json and package-lock.json (they affect every generated +// output), the manifest, and a chunks job's listed specs. +// dirs - folders an html job depends on wholesale. It inlines arbitrary +// resources from its source folder, so a file appearing or disappearing +// there changes the result. We depend on the folder itself, not a +// snapshot of its current files, so that added/removed files count as a +// dependency change rather than being silently ignored. +// package-lock.json pins the exact minifier/inliner versions, so an `npm install` +// that changes them (without touching package.json) must still invalidate every +// header -- the compressed bytes they emit can change. A missing lock file is +// tolerated downstream (isJobStale ignores absent inputs; the build system drops +// non-existent depfile sources). +function jobInputs(job) { + const files = [__filename, 'package.json', 'package-lock.json']; + const dirs = []; + if (job.kind === 'html') { + dirs.push(path.dirname(job.src)); + } else { + for (const s of job.specs) files.push(path.join(job.srcDir, s.file)); + } + if (job.manifestPath) files.push(job.manifestPath); + return { files, dirs }; +} - for (const file of output) { +// A job is stale if its output is missing or older than any input. For a folder +// dependency that means both every file *within* it (a content edit) and every +// directory in the tree (a bumped directory mtime, which is how an added or +// removed entry -- including a removed file we can no longer stat -- shows up). +function isJobStale(job) { + let outMs; + try { + outMs = fs.statSync(job.out).mtimeMs; + } catch (e) { + if (e.code === 'ENOENT') return true; + throw e; + } + const { files, dirs } = jobInputs(job); + const inputs = files.slice(); + for (const d of dirs) { + try { + inputs.push(...listDirsRecursive(d), ...listFilesRecursive(d)); + } catch (e) { + if (e.code === 'ENOENT') return true; // the whole source folder vanished + throw e; + } + } + for (const input of inputs) { try { - lastBuildTime = Math.min(lastBuildTime, fs.statSync(file).mtimeMs); + if (fs.statSync(input).mtimeMs > outMs) return true; } catch (e) { - if (e.code !== 'ENOENT') throw e; - console.info("File " + file + " does not exist. Rebuilding..."); - return false; + if (e.code !== 'ENOENT') throw e; // a missing input can't make us stale } } + return false; +} + +async function buildJob(job) { + if (job.kind === 'html') { + await writeHtmlGzipped(job.src, job.out, job.page, job.inlineCss !== false); + } else { + await writeChunks(job.srcDir, job.specs, job.out); + } +} - return !isAnyFileInFolderNewerThan(webUIPath, lastBuildTime) && !isFileNewerThan(packageJsonPath, lastBuildTime) && !isFileNewerThan(__filename, lastBuildTime); +// Emit a Makefile-style depfile: one `output: input1 input2 ...` rule per job. +// Paths are written relative to the current directory (the project root) with +// forward slashes, so the file is portable and free of Windows drive-letter +// colons that would confuse a depfile parser. Spaces in file names are escaped +// as "\ " (Makefile style) so a name like "Read Me.txt" stays a single token. +function toDepPath(p) { + return path.relative(process.cwd(), path.resolve(p)).split(path.sep).join('/'); } -// Don't run this script if we're in a test environment -if (process.env.NODE_ENV === 'test') { - return; +function escapeDepPath(p) { + return toDepPath(p).replace(/ /g, '\\ '); } -console.info(wledBanner); +function emitDepfile(depfilePath, jobs) { + let out = "# Auto-generated by tools/cdata.js -- web UI dependency graph. Do not edit.\n"; + for (const job of jobs) { + const target = escapeDepPath(job.out); + // A folder input is emitted as the directory itself (not its current files): + // the build system re-reads the folder each build, so files added there later + // are picked up without the depfile having to be regenerated first. + const { files, dirs } = jobInputs(job); + const deps = [...files, ...dirs].map(escapeDepPath); + out += `${target}: ${deps.join(' ')}\n`; + } + fs.mkdirSync(path.dirname(path.resolve(depfilePath)), { recursive: true }); + fs.writeFileSync(depfilePath, out); + console.info("Wrote dependency graph (" + jobs.length + " targets) to " + depfilePath); +} -if (isAlreadyBuilt("wled00/data") && process.argv[2] !== '--force' && process.argv[2] !== '-f') { - console.info("Web UI is already built"); - return; +// Await every task; if any fail, report them all and throw once. Using +// allSettled rather than Promise.all means one failing conversion cannot abort +// its siblings mid-write and leave a truncated header behind. +async function runAll(tasks) { + const results = await Promise.allSettled(tasks); + const errors = results.filter(r => r.status === 'rejected').map(r => r.reason); + if (errors.length > 0) { + for (const err of errors) console.error(err); + throw new Error(errors.length + " web UI build task(s) failed"); + } } -writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h", 'index'); -writeHtmlGzipped("wled00/data/pixart/pixart.htm", "wled00/html_pixart.h", 'pixart'); -writeHtmlGzipped("wled00/data/pxmagic/pxmagic.htm", "wled00/html_pxmagic.h", 'pxmagic'); -writeHtmlGzipped("wled00/data/pixelforge/pixelforge.htm", "wled00/html_pixelforge.h", 'pixelforge', false); // do not inline css -//writeHtmlGzipped("wled00/data/edit.htm", "wled00/html_edit.h", 'edit'); - -writeChunks( - "wled00/data/", - [ - { - file: "iro.js", - name: "JS_iro", - method: "gzip", - filter: "plain", // no minification, it is already minified - mangle: (s) => s.replace(/^\/\*![\s\S]*?\*\//, '') // remove license comment at the top - } - ], - "wled00/js_iro.h" -); - -writeChunks( - "wled00/data/pixelforge", - [ - { - file: "omggif.js", - name: "JS_omggif", - method: "gzip", - filter: "js-minify", - mangle: (s) => s.replace(/^\/\*![\s\S]*?\*\//, '') // remove license comment at the top - } - ], - "wled00/js_omggif.h" -); - -writeChunks( - "wled00/data", - [ - { - file: "edit.htm", - name: "PAGE_edit", - method: "gzip", - filter: "html-minify" - } - ], - "wled00/html_edit.h" -); - -writeChunks( - "wled00/data/cpal", - [ - { - file: "cpal.htm", - name: "PAGE_cpal", - method: "gzip", - filter: "html-minify" +function parseArgs(args) { + const opts = { force: false, depfile: null, emitDepsOnly: false, manifests: [], legacyManifest: null }; + for (let i = 0; i < args.length; i++) { + const a = args[i]; + if (a === '-f' || a === '--force') opts.force = true; + else if (a === '--emit-deps') opts.emitDepsOnly = true; + else if (a === '--depfile') { + opts.depfile = args[++i]; + if (opts.depfile === undefined) { console.error("--depfile requires a path"); process.exit(1); } } - ], - "wled00/html_cpal.h" -); - -writeChunks( - "wled00/data", - [ - { - file: "style.css", - name: "PAGE_settingsCss", - method: "gzip", - filter: "css-minify", - mangle: (str) => - str - .replace("%%", "%") - }, - { - file: "common.js", - name: "JS_common", - method: "gzip", - filter: "js-minify", - }, - { - file: "settings.htm", - name: "PAGE_settings", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_wifi.htm", - name: "PAGE_settings_wifi", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_leds.htm", - name: "PAGE_settings_leds", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_dmx.htm", - name: "PAGE_settings_dmx", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_ui.htm", - name: "PAGE_settings_ui", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_sync.htm", - name: "PAGE_settings_sync", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_time.htm", - name: "PAGE_settings_time", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_sec.htm", - name: "PAGE_settings_sec", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_um.htm", - name: "PAGE_settings_um", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_2D.htm", - name: "PAGE_settings_2D", - method: "gzip", - filter: "html-minify", - }, - { - file: "settings_pin.htm", - name: "PAGE_settings_pin", - method: "gzip", - filter: "html-minify" - }, - { - file: "settings_pininfo.htm", - name: "PAGE_settings_pininfo", - method: "gzip", - filter: "html-minify" + else if (a === '--manifest') { + const m = args[++i]; + if (m === undefined) { console.error("--manifest requires a path"); process.exit(1); } + opts.manifests.push(m); } - ], - "wled00/html_settings.h" -); - -writeChunks( - "wled00/data", - [ - { - file: "usermod.htm", - name: "PAGE_usermod", - method: "gzip", - filter: "html-minify", - mangle: (str) => - str.replace(/fetch\("http\:\/\/.*\/win/gms, 'fetch("/win'), - }, - { - file: "msg.htm", - name: "PAGE_msg", - prepend: "=====(", - append: ")=====", - method: "plaintext", - filter: "html-minify", - mangle: (str) => str.replace(/\.*\<\/body\>/gms, "

%MSG%"), - }, - { - file: "dmxmap.htm", - name: "PAGE_dmxmap", - prepend: "=====(", - append: ")=====", - method: "plaintext", - filter: "html-minify", - mangle: (str) => ` -#ifdef WLED_ENABLE_DMX -${str.replace(/function FM\(\)[ ]?\{/gms, "function FM() {%DMXVARS%\n")} -#else -const char PAGE_dmxmap[] PROGMEM = R"=====()====="; -#endif -`, - }, - { - file: "update.htm", - name: "PAGE_update", - method: "gzip", - filter: "html-minify", - }, - { - file: "welcome.htm", - name: "PAGE_welcome", - method: "gzip", - filter: "html-minify", - }, - { - file: "liveview.htm", - name: "PAGE_liveview", - method: "gzip", - filter: "html-minify", - }, - { - file: "liveviewws2D.htm", - name: "PAGE_liveviewws2D", - method: "gzip", - filter: "html-minify", - }, - { - file: "404.htm", - name: "PAGE_404", - method: "gzip", - filter: "html-minify", - }, - { - file: "favicon.ico", - name: "favicon", - method: "binary", + else if (!a.startsWith('-')) opts.legacyManifest = a; + else { console.error("Unknown option: " + a); process.exit(1); } + } + return opts; +} + +async function main() { + const opts = parseArgs(process.argv.slice(2)); + + // Assemble the job list. Legacy single-manifest mode builds only that + // manifest; otherwise we build the main UI plus any --manifest usermods. + const jobs = opts.legacyManifest + ? manifestToJobs(opts.legacyManifest) + : mainJobs.concat(opts.manifests.flatMap(manifestToJobs)); + + if (opts.emitDepsOnly) { + if (!opts.depfile) { + console.error("--emit-deps requires --depfile "); + process.exit(1); } - ], - "wled00/html_other.h" -); + emitDepfile(opts.depfile, jobs); + return; + } + + const stale = opts.force ? jobs : jobs.filter(isJobStale); + if (stale.length === 0) { + console.info("Web UI is already built"); + } else { + await runAll(stale.map(buildJob)); + } + + // Refresh the dependency graph for the build system, if requested. + if (opts.depfile) emitDepfile(opts.depfile, jobs); +} + +// Don't run the build when imported by the test harness. +if (process.env.NODE_ENV !== 'test') { + main().catch((err) => { + console.error(err); + process.exitCode = 1; + }); +} diff --git a/tools/cdata.schema.json b/tools/cdata.schema.json new file mode 100644 index 0000000000..c15df6f93c --- /dev/null +++ b/tools/cdata.schema.json @@ -0,0 +1,83 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://raw.githubusercontent.com/wled-dev/WLED/main/tools/cdata.schema.json", + "title": "WLED usermod cdata.json manifest", + "description": "Describes how a usermod's web UI source files are compiled into generated C headers at build time. Consumed by tools/cdata.js. Keep in sync with the validation in tools/cdata.js.", + "type": "object", + "additionalProperties": false, + "required": ["header"], + "properties": { + "$schema": { + "type": "string", + "description": "Optional JSON Schema reference for editor validation. Ignored by the build." + }, + "schemaVersion": { + "type": "integer", + "enum": [1], + "description": "Manifest schema version. Omit to use the baseline schema (implicit v1); only 1 is currently supported. A future breaking change would introduce version 2." + }, + "header": { + "type": "array", + "minItems": 1, + "description": "Header-generation operations. Each produces one generated .h file in the usermod's own directory.", + "items": { "$ref": "#/definitions/headerOp" } + } + }, + "definitions": { + "headerOp": { + "type": "object", + "additionalProperties": false, + "required": ["output", "specs"], + "properties": { + "srcDir": { + "type": "string", + "default": "data", + "description": "Folder, relative to the manifest, holding the source files. Defaults to \"data\"." + }, + "output": { + "type": "string", + "minLength": 1, + "description": "Filename of the generated header, written into the usermod's own directory (e.g. \"example_ui.h\")." + }, + "specs": { + "type": "array", + "minItems": 1, + "description": "One entry per source file / C symbol to embed in this header.", + "items": { "$ref": "#/definitions/spec" } + } + } + }, + "spec": { + "type": "object", + "additionalProperties": false, + "required": ["file", "name", "method"], + "properties": { + "file": { + "type": "string", + "description": "Source filename under srcDir." + }, + "name": { + "type": "string", + "description": "C symbol to generate; e.g. \"PAGE_example\" yields a PAGE_example[] PROGMEM array plus PAGE_example_length." + }, + "method": { + "enum": ["gzip", "plaintext", "binary"], + "description": "How the embedded data is encoded: gzip-compressed, verbatim text, or a raw byte array." + }, + "filter": { + "enum": ["html-minify", "css-minify", "js-minify", "plain"], + "default": "plain", + "description": "Pre-processing applied to the source before embedding. Defaults to plain (no minification)." + }, + "prepend": { + "type": "string", + "description": "Raw-string delimiter prefix; only meaningful with the plaintext method." + }, + "append": { + "type": "string", + "description": "Raw-string delimiter suffix; only meaningful with the plaintext method." + } + } + } + } +} diff --git a/usermods/EXAMPLE/library.json b/usermods/EXAMPLE/library.json deleted file mode 100644 index d0dc2f88e6..0000000000 --- a/usermods/EXAMPLE/library.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "EXAMPLE", - "build": { "libArchive": false }, - "dependencies": {} -} diff --git a/usermods/EXAMPLE/readme.md b/usermods/EXAMPLE/readme.md index ee8a2282a0..58dcef7bd3 100644 --- a/usermods/EXAMPLE/readme.md +++ b/usermods/EXAMPLE/readme.md @@ -1,9 +1,13 @@ -# Usermods API v2 example usermod +# Looking for the example usermod? -In this usermod file you can find the documentation on how to take advantage of the new version 2 usermods! +The annotated example has moved to its own repository: -## Installation +**[github.com/wled/wled-usermod-example](https://github.com/wled/wled-usermod-example)** -Add `EXAMPLE` to `custom_usermods` in your PlatformIO environment and compile! -_(You shouldn't need to actually install this, it does nothing useful)_ +Click **Use this template** on GitHub to create your own copy and start your own usermod. It contains a fully annotated implementation and a `library.json` template covering everything you need. +For the full guide — enabling usermods, the `custom_usermods` build system, persistent settings, effects, and more — see: + +**[kno.wled.ge/advanced/custom-features](https://kno.wled.ge/advanced/custom-features/)** + +Please use the example repo above as the starting point for your own work. diff --git a/usermods/EXAMPLE/usermod_v2_example.cpp b/usermods/EXAMPLE/usermod_v2_example.cpp deleted file mode 100644 index 65f3eda457..0000000000 --- a/usermods/EXAMPLE/usermod_v2_example.cpp +++ /dev/null @@ -1,407 +0,0 @@ -#include "wled.h" - -/* - * Usermods allow you to add own functionality to WLED more easily - * See: https://github.com/wled-dev/WLED/wiki/Add-own-functionality - * - * This is an example for a v2 usermod. - * v2 usermods are class inheritance based and can (but don't have to) implement more functions, each of them is shown in this example. - * Multiple v2 usermods can be added to one compilation easily. - * - * Creating a usermod: - * This file serves as an example. If you want to create a usermod, it is recommended to use usermod_v2_empty.h from the usermods folder as a template. - * Please remember to rename the class and file to a descriptive name. - * You may also use multiple .h and .cpp files. - * - * Using a usermod: - * 1. Copy the usermod into the sketch folder (same folder as wled00.ino) - * 2. Register the usermod by adding #include "usermod_filename.h" in the top and registerUsermod(new MyUsermodClass()) in the bottom of usermods_list.cpp - */ - -//class name. Use something descriptive and leave the ": public Usermod" part :) -class MyExampleUsermod : public Usermod { - - private: - - // Private class members. You can declare variables and functions only accessible to your usermod here - bool enabled = false; - bool initDone = false; - unsigned long lastTime = 0; - - // set your config variables to their boot default value (this can also be done in readFromConfig() or a constructor if you prefer) - bool testBool = false; - unsigned long testULong = 42424242; - float testFloat = 42.42; - String testString = "Forty-Two"; - - // These config variables have defaults set inside readFromConfig() - int testInt; - long testLong; - int8_t testPins[2]; - - // string that are used multiple time (this will save some flash memory) - static const char _name[]; - static const char _enabled[]; - - - // any private methods should go here (non-inline method should be defined out of class) - void publishMqtt(const char* state, bool retain = false); // example for publishing MQTT message - - - public: - - // non WLED related methods, may be used for data exchange between usermods (non-inline methods should be defined out of class) - - /** - * Enable/Disable the usermod - */ - inline void enable(bool enable) { enabled = enable; } - - /** - * Get usermod enabled/disabled state - */ - inline bool isEnabled() { return enabled; } - - // in such case add the following to another usermod: - // in private vars: - // #ifdef USERMOD_EXAMPLE - // MyExampleUsermod* UM; - // #endif - // in setup() - // #ifdef USERMOD_EXAMPLE - // UM = (MyExampleUsermod*) UsermodManager::lookup(USERMOD_ID_EXAMPLE); - // #endif - // somewhere in loop() or other member method - // #ifdef USERMOD_EXAMPLE - // if (UM != nullptr) isExampleEnabled = UM->isEnabled(); - // if (!isExampleEnabled) UM->enable(true); - // #endif - - - // methods called by WLED (can be inlined as they are called only once but if you call them explicitly define them out of class) - - /* - * setup() is called once at boot. WiFi is not yet connected at this point. - * readFromConfig() is called prior to setup() - * You can use it to initialize variables, sensors or similar. - */ - void setup() override { - // do your set-up here - //Serial.println("Hello from my usermod!"); - initDone = true; - } - - - /* - * connected() is called every time the WiFi is (re)connected - * Use it to initialize network interfaces - */ - void connected() override { - //Serial.println("Connected to WiFi!"); - } - - - /* - * loop() is called continuously. Here you can check for events, read sensors, etc. - * - * Tips: - * 1. You can use "if (WLED_CONNECTED)" to check for a successful network connection. - * Additionally, "if (WLED_MQTT_CONNECTED)" is available to check for a connection to an MQTT broker. - * - * 2. Try to avoid using the delay() function. NEVER use delays longer than 10 milliseconds. - * Instead, use a timer check as shown here. - */ - void loop() override { - // if usermod is disabled or called during strip updating just exit - // NOTE: on very long strips strip.isUpdating() may always return true so update accordingly - if (!enabled || (strip.isUpdating() && (millis() - lastTime < 200))) return; // adjust "200" (in millisecond) to your needs - prevents starvation with very long strips - - // do your magic here - if (millis() - lastTime > 1000) { - //Serial.println("I'm alive!"); - lastTime = millis(); - } - } - - - /* - * addToJsonInfo() can be used to add custom entries to the /json/info part of the JSON API. - * Creating an "u" object allows you to add custom key/value pairs to the Info section of the WLED web UI. - * Below it is shown how this could be used for e.g. a light sensor - */ - void addToJsonInfo(JsonObject& root) override - { - // if "u" object does not exist yet wee need to create it - JsonObject user = root["u"]; - if (user.isNull()) user = root.createNestedObject("u"); - - //this code adds "u":{"ExampleUsermod":[20," lux"]} to the info object - //int reading = 20; - //JsonArray lightArr = user.createNestedArray(FPSTR(_name))); //name - //lightArr.add(reading); //value - //lightArr.add(F(" lux")); //unit - - // if you are implementing a sensor usermod, you may publish sensor data - //JsonObject sensor = root[F("sensor")]; - //if (sensor.isNull()) sensor = root.createNestedObject(F("sensor")); - //temp = sensor.createNestedArray(F("light")); - //temp.add(reading); - //temp.add(F("lux")); - } - - - /* - * addToJsonState() can be used to add custom entries to the /json/state part of the JSON API (state object). - * Values in the state object may be modified by connected clients - */ - void addToJsonState(JsonObject& root) override - { - if (!initDone || !enabled) return; // prevent crash on boot applyPreset() - - JsonObject usermod = root[FPSTR(_name)]; - if (usermod.isNull()) usermod = root.createNestedObject(FPSTR(_name)); - - //usermod["user0"] = userVar0; - } - - - /* - * readFromJsonState() can be used to receive data clients send to the /json/state part of the JSON API (state object). - * Values in the state object may be modified by connected clients - */ - void readFromJsonState(JsonObject& root) override - { - if (!initDone) return; // prevent crash on boot applyPreset() - - JsonObject usermod = root[FPSTR(_name)]; - if (!usermod.isNull()) { - // expect JSON usermod data in usermod name object: {"ExampleUsermod:{"user0":10}"} - userVar0 = usermod["user0"] | userVar0; //if "user0" key exists in JSON, update, else keep old value (userVar0 is defined in wled.h) - } - // you can as well check WLED state JSON keys - //if (root["bri"] == 255) Serial.println(F("Don't burn down your garage!")); - } - - - /* - * addToConfig() can be used to add custom persistent settings to the cfg.json file in the "um" (usermod) object. - * It will be called by WLED when settings are actually saved (for example, LED settings are saved) - * If you want to force saving the current state, use serializeConfig() in your loop(). - * - * CAUTION: serializeConfig() will initiate a filesystem write operation. - * It might cause the LEDs to stutter and will cause flash wear if called too often. - * Use it sparingly and always in the loop, never in network callbacks! - * - * addToConfig() will make your settings editable through the Usermod Settings page automatically. - * - * Usermod Settings Overview: - * - Numeric values are treated as floats in the browser. - * - If the numeric value entered into the browser contains a decimal point, it will be parsed as a C float - * before being returned to the Usermod. The float data type has only 6-7 decimal digits of precision, and - * doubles are not supported, numbers will be rounded to the nearest float value when being parsed. - * The range accepted by the input field is +/- 1.175494351e-38 to +/- 3.402823466e+38. - * - If the numeric value entered into the browser doesn't contain a decimal point, it will be parsed as a - * C int32_t (range: -2147483648 to 2147483647) before being returned to the usermod. - * Overflows or underflows are truncated to the max/min value for an int32_t, and again truncated to the type - * used in the Usermod when reading the value from ArduinoJson. - * - Pin values can be treated differently from an integer value by using the key name "pin" - * - "pin" can contain a single or array of integer values - * - On the Usermod Settings page there is simple checking for pin conflicts and warnings for special pins - * - Red color indicates a conflict. Yellow color indicates a pin with a warning (e.g. an input-only pin) - * - Tip: use int8_t to store the pin value in the Usermod, so a -1 value (pin not set) can be used - * - * See usermod_v2_auto_save.h for an example that saves Flash space by reusing ArduinoJson key name strings - * - * If you need a dedicated settings page with custom layout for your Usermod, that takes a lot more work. - * You will have to add the setting to the HTML, xml.cpp and set.cpp manually. - * See the WLED Soundreactive fork (code and wiki) for reference. https://github.com/atuline/WLED - * - * I highly recommend checking out the basics of ArduinoJson serialization and deserialization in order to use custom settings! - */ - void addToConfig(JsonObject& root) override - { - JsonObject top = root.createNestedObject(FPSTR(_name)); - top[FPSTR(_enabled)] = enabled; - //save these vars persistently whenever settings are saved - top["great"] = userVar0; - top["testBool"] = testBool; - top["testInt"] = testInt; - top["testLong"] = testLong; - top["testULong"] = testULong; - top["testFloat"] = testFloat; - top["testString"] = testString; - JsonArray pinArray = top.createNestedArray("pin"); - pinArray.add(testPins[0]); - pinArray.add(testPins[1]); - } - - - /* - * readFromConfig() can be used to read back the custom settings you added with addToConfig(). - * This is called by WLED when settings are loaded (currently this only happens immediately after boot, or after saving on the Usermod Settings page) - * - * readFromConfig() is called BEFORE setup(). This means you can use your persistent values in setup() (e.g. pin assignments, buffer sizes), - * but also that if you want to write persistent values to a dynamic buffer, you'd need to allocate it here instead of in setup. - * If you don't know what that is, don't fret. It most likely doesn't affect your use case :) - * - * Return true in case the config values returned from Usermod Settings were complete, or false if you'd like WLED to save your defaults to disk (so any missing values are editable in Usermod Settings) - * - * getJsonValue() returns false if the value is missing, or copies the value into the variable provided and returns true if the value is present - * The configComplete variable is true only if the "exampleUsermod" object and all values are present. If any values are missing, WLED will know to call addToConfig() to save them - * - * This function is guaranteed to be called on boot, but could also be called every time settings are updated - */ - bool readFromConfig(JsonObject& root) override - { - // default settings values could be set here (or below using the 3-argument getJsonValue()) instead of in the class definition or constructor - // setting them inside readFromConfig() is slightly more robust, handling the rare but plausible use case of single value being missing after boot (e.g. if the cfg.json was manually edited and a value was removed) - - JsonObject top = root[FPSTR(_name)]; - - bool configComplete = !top.isNull(); - - configComplete &= getJsonValue(top["great"], userVar0); - configComplete &= getJsonValue(top["testBool"], testBool); - configComplete &= getJsonValue(top["testULong"], testULong); - configComplete &= getJsonValue(top["testFloat"], testFloat); - configComplete &= getJsonValue(top["testString"], testString); - - // A 3-argument getJsonValue() assigns the 3rd argument as a default value if the Json value is missing - configComplete &= getJsonValue(top["testInt"], testInt, 42); - configComplete &= getJsonValue(top["testLong"], testLong, -42424242); - - // "pin" fields have special handling in settings page (or some_pin as well) - configComplete &= getJsonValue(top["pin"][0], testPins[0], -1); - configComplete &= getJsonValue(top["pin"][1], testPins[1], -1); - - return configComplete; - } - - - /* - * appendConfigData() is called when user enters usermod settings page - * it may add additional metadata for certain entry fields (adding drop down is possible) - * be careful not to add too much as oappend() buffer is limited to 3k - */ - void appendConfigData() override - { - oappend(F("addInfo('")); oappend(String(FPSTR(_name)).c_str()); oappend(F(":great")); oappend(F("',1,'(this is a great config value)');")); - oappend(F("addInfo('")); oappend(String(FPSTR(_name)).c_str()); oappend(F(":testString")); oappend(F("',1,'enter any string you want');")); - oappend(F("dd=addDropdown('")); oappend(String(FPSTR(_name)).c_str()); oappend(F("','testInt');")); - oappend(F("addOption(dd,'Nothing',0);")); - oappend(F("addOption(dd,'Everything',42);")); - } - - - /* - * handleOverlayDraw() is called just before every show() (LED strip update frame) after effects have set the colors. - * Use this to blank out some LEDs or set them to a different color regardless of the set effect mode. - * Commonly used for custom clocks (Cronixie, 7 segment) - */ - void handleOverlayDraw() override - { - //strip.setPixelColor(0, RGBW32(0,0,0,0)) // set the first pixel to black - } - - - /** - * handleButton() can be used to override default button behaviour. Returning true - * will prevent button working in a default way. - * Replicating button.cpp - */ - bool handleButton(uint8_t b) override { - yield(); - // ignore certain button types as they may have other consequences - if (!enabled - || buttons[b].type == BTN_TYPE_NONE - || buttons[b].type == BTN_TYPE_RESERVED - || buttons[b].type == BTN_TYPE_PIR_SENSOR - || buttons[b].type == BTN_TYPE_ANALOG - || buttons[b].type == BTN_TYPE_ANALOG_INVERTED) { - return false; - } - - bool handled = false; - // do your button handling here - return handled; - } - - -#ifndef WLED_DISABLE_MQTT - /** - * handling of MQTT message - * topic only contains stripped topic (part after /wled/MAC) - */ - bool onMqttMessage(char* topic, char* payload) override { - // check if we received a command - //if (strlen(topic) == 8 && strncmp_P(topic, PSTR("/command"), 8) == 0) { - // String action = payload; - // if (action == "on") { - // enabled = true; - // return true; - // } else if (action == "off") { - // enabled = false; - // return true; - // } else if (action == "toggle") { - // enabled = !enabled; - // return true; - // } - //} - return false; - } - - /** - * onMqttConnect() is called when MQTT connection is established - */ - void onMqttConnect(bool sessionPresent) override { - // do any MQTT related initialisation here - //publishMqtt("I am alive!"); - } -#endif - - - /** - * onStateChanged() is used to detect WLED state change - * @mode parameter is CALL_MODE_... parameter used for notifications - */ - void onStateChange(uint8_t mode) override { - // do something if WLED state changed (color, brightness, effect, preset, etc) - } - - - /* - * getId() allows you to optionally give your V2 usermod an unique ID (please define it in const.h!). - * This could be used in the future for the system to determine whether your usermod is installed. - */ - uint16_t getId() override - { - return USERMOD_ID_EXAMPLE; - } - - //More methods can be added in the future, this example will then be extended. - //Your usermod will remain compatible as it does not need to implement all methods from the Usermod base class! -}; - - -// add more strings here to reduce flash memory usage -const char MyExampleUsermod::_name[] PROGMEM = "ExampleUsermod"; -const char MyExampleUsermod::_enabled[] PROGMEM = "enabled"; - - -// implementation of non-inline member methods - -void MyExampleUsermod::publishMqtt(const char* state, bool retain) -{ -#ifndef WLED_DISABLE_MQTT - //Check if MQTT Connected, otherwise it will crash the 8266 - if (WLED_MQTT_CONNECTED) { - char subuf[64]; - strcpy(subuf, mqttDeviceTopic); - strcat_P(subuf, PSTR("/example")); - mqtt->publish(subuf, 0, retain, state); - } -#endif -} - -static MyExampleUsermod example_usermod; -REGISTER_USERMOD(example_usermod); diff --git a/usermods/readme.md b/usermods/readme.md index eefb64dbd0..8258877517 100644 --- a/usermods/readme.md +++ b/usermods/readme.md @@ -1,21 +1,33 @@ # Usermods -This folder serves as a repository for usermods (custom `usermod.cpp` files)! +This folder contains usermods, optional WLED components maintained by the core WLED team and some legacy modules with separate maintainers. Usermods are self-contained modules that add functionality without modifying core source files. -If you have created a usermod you believe is useful (for example to support a particular sensor, display, feature...), feel free to contribute by opening a pull request! +## Writing your own usermod -In order for other people to be able to have fun with your usermod, please keep these points in mind: +Start from the official example repository — click **Use this template** on GitHub to create your own copy: -* Create a folder in this folder with a descriptive name (for example `usermod_ds18b20_temp_sensor_mqtt`) -* Include your custom files -* If your usermod requires changes to other WLED files, please write a `readme.md` outlining the steps one needs to take -* Create a pull request! -* If your feature is useful for the majority of WLED users, I will consider adding it to the base code! +**[github.com/wled/wled-usermod-example](https://github.com/wled/wled-usermod-example)** -While I do my best to not break too much, keep in mind that as WLED is updated, usermods might break. -I am not actively maintaining any usermod in this directory, that is your responsibility as the creator of the usermod. +It contains a fully annotated implementation and a `library.json` template. Keep your usermod in its own repository and reference it from your WLED build via `custom_usermods` — no changes to the WLED source tree needed. -For new usermods, I would recommend trying out the new v2 usermod API, which allows installing multiple usermods at once and new functions! -You can take a look at `EXAMPLE_v2` for some documentation and at `Temperature` for a completed v2 usermod! +For the complete guide see **[kno.wled.ge/advanced/custom-features](https://kno.wled.ge/advanced/custom-features/)**, covering: -Thank you for your help :) +- Enabling usermods via `custom_usermods` in `platformio_override.ini` +- Local development with `symlink://` references +- Sharing via git URL +- `library.json` structure and the required `"libArchive": false` setting +- All lifecycle methods (`setup`, `loop`, `addToConfig`, `readFromConfig`, etc.) +- Adding custom LED effects via usermod + +Once your usermod is ready, add it to the [Community Usermods index](https://kno.wled.ge/advanced/community-usermods/) and tag your repository with the [`wled-usermod`](https://github.com/topics/wled-usermod) GitHub topic so others can find it. + +## Contributing a usermod to this folder + +The preferred approach is an independent repository (see above). If you strongly believe that your module adds a commonly missing feature that would be useful in most WLED installations, and maintenance can be managed by the core WLED team, you can suggest it for inclusion here: + +- Create a subfolder with a descriptive name +- Include a `library.json` and your source files +- Add a `README.md` describing what the mod does and any wiring or configuration required +- Open a pull request on the WLED repo + +The bar for inclusion in the main WLED repository is quite high. We encourage you to consider maintaining the module in your own repository for a period of time first. diff --git a/wled00/data/settings.htm b/wled00/data/settings.htm index ef20671c87..de5984d7e1 100644 --- a/wled00/data/settings.htm +++ b/wled00/data/settings.htm @@ -17,6 +17,13 @@ l.onerror = () => setTimeout(loadFiles, 100); document.head.appendChild(l); })(); + function addUMBtn(n) { + var b = document.createElement('button'); + b.type = 'button'; + b.onclick = function() { window.location = getURL('/settings/um/' + encodeURIComponent(n)); }; + b.textContent = n; + gId('umlist').appendChild(b); + }