Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@BusyBird15
BusyBird15 authored Dec 17, 2024
1 parent 88061c4 commit 4c9f0c5
Show file tree
Hide file tree
Showing 3 changed files with 234 additions and 41 deletions.
28 changes: 19 additions & 9 deletions beta/sparkradar/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@

</head>
<body>
<div>
<!--Leaflet map-->
<div id="map"></div>

Expand Down Expand Up @@ -201,6 +202,13 @@ <h3 id="tempsbox" style="color: white; font-weight: bold; margin: 0px;">--°</h3
<span class="checkmark" style="margin-right: 10px;"></span>
Show debugger
</label>
<p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-location setticon" style="font-size: 16px; color: white;"></i><b>Current Location</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">Show your current location on the radar map. Your location info does not leave your device.</p>
<label style="margin-left: 20px; font-size: medium;" class="checkbox-container">
<input type="checkbox" id="location" onchange="showLocation();">
<span class="checkmark" style="margin-right: 10px;"></span>
Show my location
</label>
<p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-download setticon" style="font-size: 16px; color: white;"></i><b>Settings Database</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">Download your settings as a backup, or upload an existing backup.</p>
<div style="diplay: flex; flex-direction: row;">
Expand Down Expand Up @@ -264,7 +272,7 @@ <h3 id="tempsbox" style="color: white; font-weight: bold; margin: 0px;">--°</h3
</select>
<p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-eye setticon" style="font-size: 16px; color: white;"></i><b>Radar opacity</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">A higher opacity value means a less transparent radar.</p>
<input style="width: calc(50% - 10px);" type="range" min="1" max="100" value="75" class="slider" id="radop" onchange="radarOpacityChange()" title="Radar Opacity">
<input style="width: calc(100% - 10px);" type="range" min="1" max="100" value="75" class="slider" id="radop" onchange="radarOpacityChange()" title="Radar Opacity">
<p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-bolt setticon" style="font-size: 16px; color: white;"></i><b>Lightning</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">Choose at what zoom lightning strikes appear on the map. Lightning strikes are accumulated over the last 60 minutes.</p>
<select id="light" onchange="setLightningLevel();">
Expand Down Expand Up @@ -346,8 +354,8 @@ <h3 id="tempsbox" style="color: white; font-weight: bold; margin: 0px;">--°</h3
</div>

<div id="about" style="height: calc(100% - 50px); margin-top: 10px; flex-direction: column; align-items: center; overflow-y: auto; display: none; scrollbar-width: none; flex-direction: column;">
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Version:</b> BETA v0.20</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Dec. 2, 2024</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Version:</b> BETA v0.21</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Dec. 17, 2024</p>
</div>

<div id="alertinfo" style="height: calc(100% - 50px); margin-top: 10px; flex-direction: column; font-family: Consolas; overflow-y: auto; display: none; scrollbar-width: none; flex-direction: column;">
Expand Down Expand Up @@ -405,29 +413,31 @@ <h3 id="tempbox" style="color: white; font-weight: bold; margin: 0px;">--°</h3>
</div>

<!--Map text attribution-->
<p id="textattr" style="position: absolute; bottom: 45px; right: 5px; z-index: 9; font-size: small; color: white; margin: 0px;">&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> and &copy;<a href="https://www.maptiler.com">MapTiler</a></p>
<p id="textattr" style="position: absolute; bottom: 45px; right: 10px; z-index: 9; font-size: small; color: white; margin: 0px;">&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> and &copy;<a href="https://www.maptiler.com">MapTiler</a></p>

<!--Radar Legend-->
<img id="radarlegend" style="box-shadow: #0000008c 3px 3px 9px 0px; position: absolute; border-radius: 10px; z-index: 9; right: 5px; bottom: 5px;" src="https://weather.gov/images/nws/radarfaq/BDHC_CT.png">
<img id="radarlegend" style="position: absolute; border-radius: 10px; z-index: 9; right: 10px; bottom: 10px;" src="https://weather.gov/images/nws/radarfaq/BDHC_CT.png">

<!--Canvas for drawing-->
<canvas id="drawing" style="background: none; display: none; cursor: crosshair; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 101;" style="cursor: crosshair;"></canvas>

<!--Toolbar-->
<div class="overlay-object" id="toolbar" style="border-radius: 10px; align-items: center; justify-content: center; position: absolute; bottom: 10px; left: 10px; z-index: 9; height: auto; width: auto;">
<button class="toolbtn" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px 0px 5px 5px; background: none; border: none;" title="Refresh" onclick="mapEvents += 1; addRadarToMap(radarStation); loadAlerts(); loadWatches(); loadOutlook();"><i class="fa-solid fa-refresh" style="font-size: 16px;"></i></button>
<button class="toolbtn" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: none; border: none;" title="Drawing tools" onclick="toggleDrawing(true);"><i class="fa-solid fa-pencil" style="font-size: 16px;"></i></button>
<div class="overlay-object" id="toolbar" style="border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 10px; left: 10px; z-index: 9; height: auto; width: auto;">
<button class="toolbtn" style="transition-duration: 0.2s; 10px; width: 35px; height: 35px; margin: 5px 5px 0px 5px;" title="Refresh" onclick="mapEvents += 1; addRadarToMap(radarStation); loadAlerts(); loadWatches(); loadOutlook();"><i class="fa-solid fa-refresh" style="font-size: 16px;"></i></button>
<button class="toolbtn" style="transition-duration: 0.2s; 10px; width: 35px; height: 35px; margin: 5px 5px 0px 5px;" title="Go to my location" onclick="map.flyTo([nowlat, nowlon], 10);"><i class="fa-solid fa-location" style="font-size: 16px;"></i></button>
<button class="toolbtn" style="transition-duration: 0.2s; width: 35px; height: 35px; margin: 5px;" title="Drawing tools" onclick="toggleDrawing(true);"><i class="fa-solid fa-pencil" style="font-size: 16px;"></i></button>
</div>

<!--Drawing toolbar-->
<div class="overlay-object" id="drawingtoolbar" style="border-radius: 10px; align-items: center; justify-content: center; position: absolute; top: 10px; left: 10px; z-index: 102; height: auto; width: auto;">
<button class="toolbtn" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px 0px 5px 5px; background: none; border: none;" title="Close" onclick="toggleDrawing(false)"><i class="fa-solid fa-xmark" style="font-size: 16px;"></i></button>
<button class="toolbtn" style="transition-duration: 0.2s; width: 35px; height: 35px; margin: 5px;" title="Close" onclick="toggleDrawing(false)"><i class="fa-solid fa-xmark" style="font-size: 16px;"></i></button>
<button class="drawingtoolbtn" id="blue" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: #27beffff; border: none;" onclick="setPenColor('#27beffff'); setSelectedColor('blue');"><i class="fa-regular fa-circle-dot" style="color: lightgray; font-size: 16px;"></i></button>
<button class="drawingtoolbtn" id="red" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: #ff2121ff; border: none;" onclick="setPenColor('#ff2121ff'); setSelectedColor('red');"></button>
<button class="drawingtoolbtn" id="green" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: #00af00ff; border: none;" onclick="setPenColor('#00af00ff'); setSelectedColor('green');"></button>
<button class="drawingtoolbtn" id="white" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: #ffffffff; border: none;" onclick="setPenColor('#ffffffff'); setSelectedColor('white');"></button>
<button class="drawingtoolbtn" id="black" style="transition-duration: 0.2s; border-radius: 10px; width: 35px; height: 35px; margin: 5px; background: #000000ff; border: none;" onclick="setPenColor('#000000ff'); setSelectedColor('black');"></button>
</div>
</div>
</body>

<!--Add JS after elements are added-->
Expand Down
176 changes: 159 additions & 17 deletions beta/sparkradar/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@

// Make the map
var map = L.map('map', { attributionControl: true, zoomControl: false, zoomSnap: 0, maxZoom: 18}).setView([38.0, -100.4], 4);
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const maplat = params.get('lat');
const maplon = params.get('lon');
const mapz = params.get('z');
if (maplat && maplon) {
if (mapz) {
var map = L.map('map', { attributionControl: true, zoomControl: false, zoomSnap: 0, maxZoom: 17}).setView([maplat, maplon], mapz);
} else {
var map = L.map('map', { attributionControl: true, zoomControl: false, zoomSnap: 0, maxZoom: 17}).setView([maplat, maplon], 7);
}
} else {
var map = L.map('map', { attributionControl: true, zoomControl: false, zoomSnap: 0, maxZoom: 17}).setView([38.0, -100.4], 4);
}

// Setup the layers of the map
map.createPane('outlook');
Expand Down Expand Up @@ -231,6 +244,24 @@ updateflashes();
document.head.appendChild(flashingstyles);


function outlinecolor (enable) {
if (enable) {
themap = document.getElementById("map");
themap.style.width = "calc(100% - 10px)";
themap.style.height = "calc(100% - 10px)";
themap.style.animation = "alertpulse 1s infinite";
themap.style.border = "5px solid red";
} else {
themap = document.getElementById("map");
themap.style.width = "calc(100% - 10px)";
themap.style.height = "calc(100% - 10px)";
themap.style.animation = "none";
themap.style.border = "5px solid black";
}
}

outlinecolor(false);

// Stored settings management
function saveSettings() {
var mapMode = 0;
Expand Down Expand Up @@ -408,6 +439,22 @@ const lightningicon = L.icon({
className: 'lightningicon',
});

const shadowmarker = L.divIcon({
html: '<div class="currentlocation_marker"></div>',
iconSize: [20, 20], // Match the original size of the marker
iconAnchor: [10, 10], // Center the icon correctly
className: ''
});

const currentmarker = L.divIcon({
html: '<div class="innermarker"></div>',
iconSize: [14, 14], // Match the original size of the marker
iconAnchor: [7, 7], // Center the icon correctly
className: ''
});



function fadeIn(elementID){
document.getElementById(elementID).style.display = "flex";
setTimeout(() => document.getElementById(elementID).classList.add("show"), 10);
Expand Down Expand Up @@ -1028,23 +1075,22 @@ function buildRadarContent (feature) {
const currentDate = new Date();
const timediff = (currentDate - radarDate) / (1000 * 60);

var construct = '<div style="display: flex; margin: 10px; justify-content: space-around;">';
var construct = '<div style="display: flex; margin: 10px; margin-top: 0px; justify-content: space-around; align-items: center;">';
construct += '<i class="fa-solid fa-satellite-dish" style="font-size: 24px; margin-right: 15px; color: #27beffff;"></i>';
construct += '<p style="font-size: large;">' + feature.properties.id + '</p>';
construct += '</div><br>';

construct += '<p style="font-size: medium;"><b>Station type: </b>' + feature.properties.stationType + '</p>';
if ((Math.round(feature.properties.latency.current.value * 100) / 100) > 500){
construct += '<p style="font-size: medium;"><b>Status: </b>Offline</p>';
stus = "Offline";
} else if (timediff > 10){
construct += '<p style="font-size: medium;"><b>Status: </b>Outdated</p>';
} else if (stus == "Operate") {
construct += '<p style="font-size: medium;"><b>Status: </b>Operational</p>';
} else {
construct += '<p style="font-size: medium;"><b>Status: </b>' + stus + '</p>';
construct += '<div style="display: flex; flex-direction: column; align-items: center;"><p style="font-size: large; font-weight: bolder;">' + feature.properties.id + '</p>';

try {
if (feature.properties.rda.properties.status == "Operate" && timediff < 5){
construct += '<p>Online';
} else if (feature.properties.rda.properties.status == "Start-Up" || timediff < 10){
construct += '<p style="color: #ffcc00ff">Out of date';
} else {
construct += '<p style="color: #ff2121ff">Offline';
}
} catch {
construct += '<p style="color: #ff2121ff">Offline';
}
construct += '<p style="font-size: medium;"><b>Ping: </b>' + (Math.round(feature.properties.latency.current.value * 100) / 100).toFixed(2) + ' sec</p>';
construct += '</p></div></div>';

if (stus == "Offline"){
construct += '<button style="margin: 10px 5px 5px 5px; width: 100%; font-size: medium; background: #89999f; color: black; padding: 3px; border: none; border-radius: 10px;">Select Station</button>'
Expand Down Expand Up @@ -1247,6 +1293,15 @@ setInterval(() => {
}, 20000);

function onMapEvent(e) {
const center = map.getCenter();
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
params.set('lat', center.lat.toFixed(5));
params.set('lon', center.lng.toFixed(5));
params.set('z', map.getZoom().toFixed(1));
url.search = params.toString();
window.history.pushState({}, '', url);

mapEvents += 1;
canRefresh = true;
addRadarToMap(radarStation);
Expand Down Expand Up @@ -2399,4 +2454,91 @@ setInterval(() => {
// radius: 241401,
// stroke: 2,
// fillOpacity: 0,
//}).addTo(map)
//}).addTo(map)


let currentLocationMarker = null;
let watchId = null;
let isLocationOn = false;
let nowlat = null;
let nowlon = null;

function startUpdatingLocation() {
isLocationOn = document.getElementById("location").checked;
if (navigator.geolocation) {
if (watchId === null) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
nowlat = position.coords.latitude;
nowlon = position.coords.longitude;

// Place or update the custom circle marker at the user's location
if (currentLocationMarker) {
currentLocationMarker.setLatLng([nowlat, nowlon]);
} else {
const outermarker = L.marker([lat, lon], { icon: shadowmarker }).addTo(map);
const innermarker = L.marker([lat, lon], { icon: currentmarker }).addTo(map);
if (isLocationOn) {
map.flyTo([lat, lon], 10);
}
document.getElementById("location").checked = true;
}
},
(error) => {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Your position is unavailable. GPS is off or signal is too weak.");
console.log("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("Took too long to recieve a location, perhaps GPS is too weak.");
console.log("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred while getting your location.");
console.log("An unknown error occurred.");
break;
}
document.getElementById("location").checked = false;
clearCurrentLocationMarker();
isLocationOn = false;
},
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 10000
}
);
}
} else {
alert("Your browser doesn't support location. Try a different browser to use this feature.");
document.getElementById("location").checked = false;
}
}

function clearCurrentLocationMarker() {
if (currentLocationMarker) {
map.removeLayer(outermarker);
map.removeLayer(innermarker);
currentLocationMarker = null;
}
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}

function showLocation() {
isLocationOn = document.getElementById("location").checked;

if (isLocationOn) {
startUpdatingLocation();
} else {
clearCurrentLocationMarker();
}
}
Loading

0 comments on commit 4c9f0c5

Please sign in to comment.