Add theme system for customizable backgrounds

- Move backgrounds to themed folders (backgrounds/desert/, backgrounds/custom/)
- Add theme config option in config.json (default: "desert")
- Add /api/config endpoint to serve theme and location
- Update pixel-view.js to load backgrounds from theme folder
- Add config.json.example for reference
- Update CONFIG.md documentation

Users can now set "theme": "custom" and place their own backgrounds
in backgrounds/custom/ to customize the view for their location.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
root
2026-01-20 12:03:37 -08:00
parent 96ce78accc
commit 1f8b69e846
10 changed files with 140 additions and 26 deletions

View File

@@ -15,7 +15,8 @@ Edit `config.json` to customize your installation:
"lat": 0.0,
"lon": 0.0
},
"web_port": 2001
"web_port": 2001,
"theme": "desert"
}
```
@@ -31,6 +32,7 @@ Edit `config.json` to customize your installation:
| `location.lat` | number | Latitude of your receiver location |
| `location.lon` | number | Longitude of your receiver location |
| `web_port` | number | Port for the web interface (default: 2001) |
| `theme` | string | Background theme: `"desert"` (default) or `"custom"` |
### Receiver Configuration Examples
@@ -51,12 +53,44 @@ Edit `config.json` to customize your installation:
---
## Background Images
## Background Themes
Pixel View uses directional background images to show the horizon view from your receiver location. You should customize these to match your actual surroundings.
Pixel View uses directional background images to show the horizon view from your receiver location. Backgrounds are organized into themes stored in the `backgrounds/` folder.
### Available Themes
| Theme | Description |
|-------|-------------|
| `desert` | Las Vegas desert landscape (default) |
| `custom` | Your own custom backgrounds |
### Theme Folder Structure
```
backgrounds/
├── desert/ # Default desert theme
│ ├── north.png
│ ├── east.png
│ ├── south.png
│ └── west.png
└── custom/ # Your custom backgrounds
├── README.md # Instructions for creating custom backgrounds
├── north.png
├── east.png
├── south.png
└── west.png
```
### Using Custom Backgrounds
1. Add your background images to `backgrounds/custom/`
2. Set `"theme": "custom"` in your `config.json`
3. Restart the server
### Image Files
Each theme folder needs these 4 directional images:
| File | Direction | Description |
|------|-----------|-------------|
| `north.png` | North (0°) | View looking north from your location |