hamdashboard

Ham Dashboard (hamdashboard)

This repository provides a simple, browser-based ham radio dashboard that displays images, maps, web pages, and feeds in a configurable grid. It is lightweight, easy to host, and suitable for use on a local computer, Raspberry Pi, or a static host such as GitHub Pages or Cloudflare Pages.

Quick demo videos:

Original presentation: YouTube - VA3HDL presentation
Spanish overview: YouTube - VA3HDL en español

User-submitted public dashboards

These live dashboards were shared by members of the ham community:

BCAT N4TDX — Steve N5NG (Brevard County ARES)
- Steve’s config files (as .txt): https://qsl.net/n5ng/config.txt and https://qsl.net/n5ng/HAM/config.txt
FFX DEMS — Sandy KQ4DNE
FFX ARES — Sandy KQ4DNE
WA4MED — Matthew WA4MED
PY3TX — South America
VE7CAS — Vancouver, BC
G0IKV — Southport, England
OK1SLM — Prague
VK3VSN — Melbourne, Australia
K6BCW — San Francisco Bay Area
KN6PTQ — San Francisco Bay Area
W2SZ — NE US
N2YQT — NE US
KC2VWR — NE US
KD2YFY — NE US
KD4VRD — North Carolina
KD5PQJ — Texas
N5GAH — Texas
KJ7YYI — Arizona
NQ0M — Kansas
W3RDW — Ohio
W4QAL — West Florida

Quick start

Download the following files from this repository into a single folder: hamdash.html, config.js, and wheelzoom.js.
Open hamdash.html in your browser.
Use the right-side menu and select “Setup” to open the settings UI and configure your dashboard.
Alternatively, edit config.js in a text editor to set sources, menus, and layout.
Load configuration from the browser (Local Storage) or from config.js, then save your settings.

Notes

For hosted (server) installations, store settings in config.js so the server serves the same configuration to all visitors.
For personal use or testing, Local Storage keeps changes specific to your browser session.
Now is possible to use a pure Json file format for the configuration load on hosted environments
For file:// access (non-hosted usage) a newer JsonP-style format is available for the configuration load

Settings UI

The settings UI provides buttons to manage configurations and backups:

Save Settings to Local Storage — Save current page settings in the browser.
Reset to Defaults — Restore sample settings for testing.
Backup Settings to JSON file — Download a JSON file with your settings.
Restore Settings from JSON file — Load settings from a JSON backup.
Import from config.js — Load settings defined in a config.js file (recommended for servers).
Export to config.js — Export current settings in config.js format for hosting.

Public dashboards and safety

The “Setup” UI cannot modify the server-side config.js file. When a visitor switches a public dashboard to Local Storage, the change affects only that visitor’s browser. To hide the Setup option or Load Cfg option on public installations, add the following lines to your config.js:

const disableSetup = true;
const disableLdCfg = true;

Video guides

Docker

Michael Stevens maintains a Docker image: michaelsteven/hamdashboard

How to use

Double-click an image to view full-screen; double-click again to close.
Right-click an image to cycle to the next image (if multiple images are assigned to a tile).
Tiles refresh independently (default refresh behavior: every 5 minutes for most sources).
Tiles with iFrames: double click to unlock the tile and interact with the content

Pi-Star iFrame embedding (fix)

If a remote site sets the X-Frame-Options header it may prevent embedding via iframes. On Pi-Star you can temporarily switch to read/write, edit the nginx security config, and restart nginx:

rpi-rw
sudo nano /etc/nginx/default.d/security.conf
# comment out: add_header X-Frame-Options  "SAMEORIGIN";

sudo systemctl restart nginx.service

This screenshot shows Pi-Star settings:

iFrame tips

If the source server forbids embedding and you cannot change its headers, options are limited. A local proxy that strips the header can work but adds complexity. Use the online tool to test a URL before adding it to a tile: iFrame Tester online

Changelog highlights (most recent)

See the chronological entries below for full details. Notable recent changes:

2026.01.24 — Added 10 features:
1. JSON & JSONP Configuration Support (example .json and JsonP .js files added to the repo)
2. Dynamic Date Placeholders
3. Rotating Tile Titles - Requested by multiple users, see example in all 3 config files
4. Smart Mixed-Media Interactivity (for tiles mixing images, videos, iFrames)
5. Enhanced Full-Screen Navigation
6. Setup UI Improvements
7. Enhanced Breadcrumb Navigation to provide always a return path to previous configs
8. PREVIOUS Menu Button
9. Enhanced Config File Detection to support various file formats
10. File Picker Integration to load different dashboards on the fly
2026.01.22 — Added directives to load images and iframes with colors inverted. Full details on the release notes.
2026.01.17 — Ability to load any config files via the menu.
2025.11.12 — Switch between multiple config files (e.g., satellite.js) via the menu.
2025.04.02 — RSS feed refresh times configurable; feed ticker added.
2025.03.29 — Scrolling RSS ticker and clickable feed items.
2025.01.24 — Settings merged into hamdash.html; realtime variable changes enabled.

Upgrade notes

For simpler sintax you can now use Json or JsonP files for config files
Read the specific upgrade notes in the changelog below before replacing config.js
To use multiple config files, add a menu entry in config.js such as:

var aURL = [  
  ["f3de21ff", "SATS", "satellite.js"],
  ["f3de21ff", "WX", "weather.js", "1", "R"]
];

Rotating Tile Titles Usage:

Pass an array as the first element of a tile configuration.

// Example in config.js
[
  ["Radar CONUS", "Radar Local"], 
  "https://radar.com/map1.gif", 
  "https://radar.com/map2.gif"
]

Example images

Grid examples

More notes and history

The repository includes a detailed changelog documenting fixes, features, and upgrade instructions dating back through 2024. Please review the changelog entries below before performing upgrades.

Releases & Change logs