mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-04-25 12:22:12 +00:00
1de80a9eaf
## Summary Part of #669 — M2: Link the builder from the app. - **`public/geofilter-builder.html`** — the existing `tools/geofilter-builder.html` is now served by the static file server at `/geofilter-builder.html`. Additions vs the original: a `← CoreScope` back-link in the header, inline code comments explaining the output format, and a help bar below the output panel with paste instructions and a link to the documentation. - **`public/customize-v2.js`** — adds a "Tools" section at the bottom of the Export tab with a `🗺️ GeoFilter Builder →` link and a one-line description. - **`docs/user-guide/customization.md`** — documents the new GeoFilter Builder entry in the Export tab. > **Note:** `tools/geofilter-builder.html` is kept as-is for local/offline use. The `public/` copy is what the server serves. > **Depends on:** #734 (M1 docs) for `docs/user-guide/geofilter.md` — the link in the help bar references that file. Can be merged independently; the link still works once M1 lands. ## Test plan - [x] Open the app, go to Customizer → Export tab — "Tools" section appears with GeoFilter Builder link - [x] Click the link — opens `/geofilter-builder.html` in a new tab - [x] Builder loads the Leaflet map, draw 3+ points — JSON output appears - [x] Copy button works, output is valid `{ "geo_filter": { ... } }` JSON - [x] `← CoreScope` back-link navigates to `/` - [x] Help bar shows paste instructions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
85 lines
3.0 KiB
Markdown
85 lines
3.0 KiB
Markdown
# Customization
|
|
|
|
CoreScope includes a built-in theme customizer. Access it from **Tools → Customization** in the navigation menu.
|
|
|
|
[Screenshot: theme customizer panel with color pickers]
|
|
|
|
## What you can customize
|
|
|
|
### Branding
|
|
|
|
- **Site name** — displayed in the nav bar and browser tab
|
|
- **Tagline** — shown on the home page
|
|
- **Logo URL** — replace the default logo
|
|
- **Favicon URL** — custom browser tab icon
|
|
|
|
### Theme colors (Light & Dark)
|
|
|
|
Every color in the UI is customizable:
|
|
|
|
- **Accent** — primary color for links, buttons, highlights
|
|
- **Navigation** — nav bar background, text, and muted text colors
|
|
- **Background** — page background and content area
|
|
- **Surfaces** — cards, panels, input fields, detail panes
|
|
- **Status** — green (healthy), yellow (degraded), red (silent)
|
|
- **Text** — primary text, muted text, borders
|
|
- **Tables** — row stripe, hover, and selected row colors
|
|
|
|
Both light and dark themes are independently configurable.
|
|
|
|
### Node colors
|
|
|
|
Set the color for each role: repeater, companion, room, sensor, observer. These colors appear on the map, in node badges, and throughout the UI.
|
|
|
|
### Packet type colors
|
|
|
|
Customize the color for each packet type: Advert, Channel Msg, Direct Msg, ACK, Request, Response, Trace, Path.
|
|
|
|
### Home page
|
|
|
|
Customize the onboarding experience:
|
|
|
|
- Hero title and subtitle
|
|
- Getting-started steps (emoji, title, description for each)
|
|
- FAQ items
|
|
- Footer links
|
|
|
|
### Timestamps
|
|
|
|
- **Display mode** — relative ("5 min ago") or absolute
|
|
- **Timezone** — local or UTC
|
|
- **Format preset** — ISO or other presets
|
|
|
|
## Live preview
|
|
|
|
Changes apply instantly as you edit. You see the result in real time without saving.
|
|
|
|
## Exporting a theme
|
|
|
|
Click **Export JSON** to download your customizations as a JSON file. This produces a config-compatible block you can paste into your `config.json`.
|
|
|
|
## Importing a theme
|
|
|
|
Click **Import JSON** and paste a previously exported theme. The customizer loads all values and applies them immediately.
|
|
|
|
## Resetting
|
|
|
|
Click **Reset to Defaults** to restore all settings to the built-in defaults.
|
|
|
|
## GeoFilter Builder
|
|
|
|
The Export tab includes a **GeoFilter Builder →** link. Click it to open a Leaflet map where you can draw a polygon boundary for your deployment area. The tool generates a `geo_filter` block you can paste directly into `config.json`.
|
|
|
|
See [Geographic Filtering](geofilter.md) for full details on what geo filtering does and how to configure it.
|
|
|
|
## How it works
|
|
|
|
The customizer writes CSS custom properties (variables) to override the defaults. Exported JSON maps directly to the `theme`, `nodeColors`, `branding`, and `home` sections of [config.json](configuration.md).
|
|
|
|
## Tips
|
|
|
|
- Start with the accent color — it cascades through buttons, links, and highlights
|
|
- Dark mode has its own color set (`themeDark`), independent of light mode
|
|
- Node colors affect the [Map](map.md), [Live](live.md) page, and node badges everywhere
|
|
- Export your theme before upgrading CoreScope, then re-import it after
|