Added multiple image support per box

This commit is contained in:
VA3HDL 2024-05-21 14:42:34 -04:00
parent 683b3bbcac
commit 0397f80b15
2 changed files with 31 additions and 7 deletions

View File

@ -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)

View File

@ -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);