From 0397f80b156fdd7209d6821ab62062bd734a4857 Mon Sep 17 00:00:00 2001 From: VA3HDL Date: Tue, 21 May 2024 14:42:34 -0400 Subject: [PATCH] Added multiple image support per box --- README.md | 10 +++++++++- hamdash.html | 28 ++++++++++++++++++++++------ 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 305f477..9131895 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,18 @@ [YouTube video](https://www.youtube.com/watch?v=sIdqMQTGNSc) +Instructions 1. Just download the two files from the Github repository (hamdash.html and wheelzoom.js) and keep them together on the same folder. 2. Open hamdash.html with any browser of your preference and you done. -3. With any text editor (like Notepad) you can change the source images or the menu options. +3. With any text editor (like Notepad) you can change the source images (can be more than one per box) or the menu options. + +Quick Help +* 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 ![VA3HDL Sample Dashboard](https://github.com/VA3HDL/hamdashboard/blob/main/dashboard_sample.png?raw=true) diff --git a/hamdash.html b/hamdash.html index 643ac3a..88d524c 100644 --- a/hamdash.html +++ b/hamdash.html @@ -267,8 +267,9 @@ db 8D Y8b d8 88 `88. .88. 88 88 db 8D "https://services.swpc.noaa.gov/images/animations/d-rap/global/d-rap/latest.png", ], [ - "ISS POSITION", + "ISS & RS-44 POSITION", "https://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544", + "https://www.heavens-above.com/orbitdisplay.aspx?icon=default&width=600&height=300&mode=M&satid=44909", ], [ "SATELLITE CAN", @@ -292,14 +293,14 @@ db 8D Y8b d8 88 `88. .88. 88 88 db 8D "https://www.short-wave.info/php/transmitter-site-map.php?mobile=false&lat=52.67|-21.96|-15.53|-9.42|-17.76|-17.53|46.34|50.73|42.81|39.75|50.89|29.60|6.23|39.40|-15.53|43.51|46.34|-21.96|34.38|44.15|39.36|46.34|39.91|39.91|46.34|27.46|24.88|27.46|36.28|39.36|42.04|36.28|36.21|12.69|18.22|24.17|42.04|29.60|-15.73|-7.90|36.21|12.69|36.21|29.15|30.65|-21.96|33.50|-38.83|36.28|36.21|27.46&lon=9.75|27.60|28.00|160.05|168.36|146.05|-67.83|4.39|23.19|116.81|-113.85|55.79|-10.70|32.86|28.00|-79.63|-67.83|27.64|108.61|86.90|75.72|-67.83|-76.58|-76.58|-67.83|-80.93|102.50|-80.93|-86.10|75.72|12.32|-86.10|-86.89|-8.02|-63.02|54.25|12.32|55.79|46.45|-14.38|-86.89|-8.02|-86.89|47.77|-87.09|27.64|-86.47|176.42|-86.10|-86.89|-80.93&freq=3975|4930|4965|5020|5040|5055|5130|5780|5900|5985|6030|6040|6050|6050|6065|6070|6160|6195|7285|7295|7415|7490|9265|9265|9330|9395|9440|9455|9475|9600|9705|9930|9980|11640|11775|11810|11870|11880|11965|12095|12160|13630|13845|15540|15555|15580|15610|15720|15810|15825|17790&az=ND|20|ND|ND|ND|ND|245|ND|126|257|ND|313|ND|310|315|ND|245|350|317|270|308|245|242|242|245|355|283|285|50|308|206|180|90|111|320|90|210|211|295|27|85|111|90|310|5|350|85|35|40|46|160", ], ["10M PROPAGATION", "https://www.tvcomm.co.uk/g7izu/Autosave/NA_ES_AutoSave.JPG"], - ["HF PROPAGATION", "https://www.hamqsl.com/solarpich.php"], + ["HF PROPAGATION", + "https://www.hamqsl.com/solar101vhf.php", + "https://www.hamqsl.com/solar100sc.php", + "https://www.hamqsl.com/solarpich.php"], ]; - // https://www.hamqsl.com/solar100sc.php - // https://www.hamqsl.com/solarbc.php - // https://www.hamqsl.com/solarpich.php - var largeShow = 0; + var aIdx = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; // This function shows the embedded websites function MenuOpt(num) { @@ -315,6 +316,7 @@ db 8D Y8b d8 88 `88. .88. 88 88 db 8D } else if (num == 2) { alert(`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. The content refreshes automatically every 5 minutes. `); } @@ -338,6 +340,19 @@ The content refreshes automatically every 5 minutes. } } + function rotate(event) { + event.preventDefault(); + var targetElement = event.target || event.srcElement; + i = +targetElement.id.match(/\d+/)[0]; + if (aIMG[i].length > 2) { + ++aIdx[i]; + if (aIdx[i] > aIMG[i].length - 1) { + aIdx[i] = 1; + } + document.getElementById(targetElement.id).src = aIMG[i][aIdx[i]]; + } + } + function start() { // Get the parent div for Menu container var parentDiv = document.getElementById("myMenu"); @@ -364,6 +379,7 @@ The content refreshes automatically every 5 minutes. var newImg = document.createElement("img"); newImg.id = `"Image${index}"`; newImg.src = innerArray[1]; + newImg.oncontextmenu = rotate; newImg.ondblclick = larger; parentDiv.appendChild(newDiv); newDiv.appendChild(newImg);