Original VA3HDL YouTube - Presentation video
VA3HDL en español YouTube - Video en español
Hamdash Demo -- Test it here before download
BCAT N4TDX -- by Steve N5NG, in use by the Brevard County (Florida) ARES Team
- Links for Steve's weather and hamradio config.js as .txt files:
FFX DEMS -- by Sandy KQ4DNE for Emergency Management Weather
FFX ARES -- by Sandy KQ4DNE for ARES
WA4MED -- by Matthew WA4MED
PY3TX -- South America
VE7CAS -- Vancouver, BC
OK1SLM -- Prague, EU
VICSCAN -- Melbourne, Australia by @vk3ymml
K6BCW -- San Francisco bay area
KN6PTQ -- San Francisco Bay Area
W2SZ -- NE US by Brian W2SZ
N2YQT -- NE US by Ryan N2YQT
KC2VWR -- NE US
KD2YFY -- NE US
KD4VRD -- North Carolina
KD5PQJ -- Texas
N5GAH -- Texas
KJ7YYI -- Arizona
NQ0M -- Kansas
W3RDW -- Ohio
W4QAL -- SE US - West Florida
- Just download the files from the Github repository (hamdash.html, config.js, and wheelzoom.js) and keep them together on the same folder.
- Open hamdash.html with any browser of your preference.
- Use the right menu "Setup" option to load the settings page to configure your dashboard.
- Alternatively with any text editor (like Notepad) you can change the source images (can be more than one per box) or the menu options from the config.js file.
- Select to load your configuration from browser's Local Storage or config.js file, and save the settings.
- For server based hosted installs is recommended to use the settings stored in the config.js file. (More details below)
Save the settings on the page to the Local Storage of the current browser in use
Reset all settings' values to sample default values for testing
Save all settings values to a JSON file that can be downloaded and imported on a different browser or installation
Load all settings values from a JSON file saved with the previous button
Load all settings values from a config.js file format (config.js file is the recommended format for server installations)
Save all settings values to a config.js file format (config.js file is the recommended format for server installations)
The "Setup" link from the right hand side menu do no have any possibility to make changes to the config.js file hosted on the server or even hosted locally. If someone using a public dashboard access the "Setup" settings page and change it to Local Storage, will be affecting only him/herself specifically as the Local Storage refer to that user's browser in particular. Is perfectly safe and no harm can be done.
However, I have added for users that have public access dashboards, a new option on the config.js file that removes the "Setup" option from the menu.
const disableSetup = true;
YouTube - Configuration instructions contributed by Jason KM4ACK
YouTube - Raspberry Pi instructions contributed by Andreas M0FXB
YouTube - Live Stream with Ham Radio Wilderness Frank KG6NLW
YouTube - Live Stream with Temporarily Offline Ham Radio KM9G
YouTube - Ham Dashboard on Inovato Quadra by Peter KJ5AJB
YouTube - French review and instructions by Jean-Benard F5SVP
YouTube - Repaso e instrucciones en Español con Jose EA8EE
Docker version -- by Michael Stevens
- Double click on an image to expand to full screen.
- Double click again to close full screen view.
- Right click on an image to display the next one. (In the latest version is possible to add multiple images per box.)
- The content refreshes automatically every 5 minutes.
Is that easy!
73 de Pablo, VA3HDL
This error can occur if the server has certain security measures in place, such as the x-frame-options header, which prevents its content from being embedded on other websites using iframes.
-
Login via ssh to the pi-star then run this command to switch to Read/Write mode:
rpi-rw -
Edit the file nginx security.conf file:
sudo nano /etc/nginx/default.d/security.conf -
comment the line below with a "#" in front, like this:
# add_header X-Frame-Options "SAMEORIGIN"; -
Run this command to switch back to Read Only mode:
rpi-ro -
Now you can either reboot your Pi-Star, or just restart the nginx service:
sudo systemctl restart nginx.service
There is very little that can be done on the client side if the source site does not allow embedding the site inside another page (like the dashboard!) specially if the user can't change the server settings (most cases.)
As a workaround for these issues, I've tested running a local proxy on my computer to strip out the x-frame-options header coming from the source server and it worked well on some cases. But setting up a proxy adds another layer of complexity to the setup.
Use this online tool to test any URL to see if it can be displayed in an iframe before adding it to the dashboard -> iFrame Tester online
If you want to upgrade to the latest version, please make sure your read the Changelog below (do not overwrite your config.js file.)
Check the updated demos too!
- Fixed a bug with the "Export to config.js file" button that was saving the "default" values instead of saving the current settings displayed on the page.
- Thanks to Dave WB5NHL for reporting this issue to me.
- Merged the settings.html page into the main hamdash.html page for maintenance and upgrade simplification
- Added a color picker for the menu items background
- Replaced all CONST declarations on the config.js file with VAR declarations to allow these variables to be changed in realtime via Setup page
- Fixed issue with Back menu option that refreshed the entire page
- Unloaded the page iFrame when is not visible (these are the pages loaded by the side menu options)
Delete the file settings.html if you have one. This file is no longer needed. Settings are now part of hamdash.html file. Exporting the configuration to JSON file is strongly recommended if you are using Browser Local Storage to save your configuration as a backup.
- Added ability to export settings to config.js file
- Bug fix: Delete button for Menu items don't work
- Moved Setup Page buttons to the top and made them always visible for easy access
- Added tooltips to the Setup Page (settings.html)
- Added a "Setup" page to configure the dashboard directly from the browser
- Added the "Setup" option to the menu to loads the settings page
- Ability to choose the option to load the configuration from: config.js file or Local Storage
- Use config.js as default if present for backwards compatibility
- Ability to import existing config.js file into Local Storage
- Ability to export settings from Local Storage to backup Json file
- Ability to import settings from backup Json file into Local Storage
- Ability to hide the "Setup" option from the menu by adding "const disableSetup = true;" on the config.js file
Remove these lines from your config.js file to avoid duplicated menu entries (these entries are now hardcoded)
["add10d", "BACK", "#", "1"],
["add10d", "BACK", "#", "1", "R"],
["ff9100", "Refresh", "#", "1"],
["0dd1a7", "Help", "#", "1"],
Make sure you also download (in addition to hamdash.html) the new file settings.html that provides the new setup page option
The "Setup" link from the right hand side menu do no have any possibility to make changes to the config.js file hosted on the server or even hosted locally. If someone using a public dashboard access the "Setup" settings page and change it to Local Storage, will be affecting only him/herself specifically as the Local Storage refer to that user's browser in particular. Is perfectly safe and no harm can be done.
However, I have added for users that have public access dashboards, a new option on the config.js file that removes the "Setup" option from the menu.
const disableSetup = true;
Add the above line to the config.js and rename the settings.html page to anything that you only know and is hard to guess.
-
Added capability to customize the grid size (any combination of number of columns and number of rows for the dashboard tiles.) See examples and usage below.
-
Usage: Add these lines to your config.js file and replace "4" and "3" with the number of columns and rows that you desire
// Grid layout var layout_cols = 4; var layout_rows = 3; -
Ensure the total number of tiles match your sources and your rotation/refresh delays specified in the config.js file
-
Removed "VA3HDL" from the page title.
-
Grid size examples:
--> 2x2:
--> 3x3:
--> 4x4:
--> 5x3:
- Added website capability to tiles using "iframe|" keyword before the tile URL. Check the updated config.js file for usage examples. The tiles can contain any website that supports embedding using iFrame, including live YouTube videos!
- Added "Discussions" to GitHub options for users to share their menu and image sources and anything else interesting -- https://github.com/VA3HDL/hamdashboard/discussions
- Add version check and minor fixes.
- Removed 5 minutes page autorefresh. Now all tiles refresh separatelly (at same or different intervals.) So there is no longer needed refresh the entire page.
-
Full screen images will rotate with mouse right click (when there is more than one image on the selected tile)
-
Added the ability to set individual image rotation at different intervals per tile adding a line like this at the end of the config.js file:
const tileDelay = [5000,4000,3000,2000,1000,6000,7000,8000,9000,8500,7500,6500];
- Added menu option (right side menu) to display on screen the various sources for images and menu options to facilitate sharing URL sources in our user community
- Added support to play videos (along with the images.) Some modernized sites provide .mp4 videos instead of animated GIFS.
- Added image loading error handling
- Added workaround to prevent images being cached on the browser and not getting updated
- Moved the configuration parts of the JavaScript code to its own file "config.js" so it is easy to upgrade after updates to the main code. Suggested by Lou KI5FTY.
- Improved menu usability
- Removed dependencies to local installed fonts. Fonts now are loaded from Google Fonts directly to ensure consistency.
- Ability to add multiple images per position. Images are rotated automatically every 30 seconds.
- Autorefresh is now paused automatically when switching to a website (from menu) or when an image is zoomed-in to full screen
- Moved configuration variables to the top of the script and added extra commentary to ease the initial setup
- Added menu to the right of the page. Now the left menu has ham radio links and right menu has weather links
Tutorial contributed by Robert W3RDW
How to host your dashboard with Cloudflare Pages, free
