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 Oct 8, 2024
1 parent 5e9ff2e commit 9965647
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 76 deletions.
38 changes: 27 additions & 11 deletions beta/sparkradar/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,8 @@
<div id="info" class="overlay-object" style="flex-direction: column; padding: 10px; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); max-width: 300px;">
<p id="radinfo_lna" style="margin: 0px; font-size: large;"><b>CONUS • LATEST</b></p>
<select id="prod" style="margin-top: 10px; font-size: medium;" onchange="setProduct();">
<option value="bref">Base Reflectivity</option>
<option value="bvel">Base Velocity</option>
<option value="bdhc">Digital Hydrometer Classification</option>
<option value="boha">Rainfall Accumulation (One Hour)</option>
<option value="bdsa">Rainfall Accumulation (Storm Total)</option>
<option value="conus_cref">Composite Reflectivity</option>
<option value="conus_bref">Base Reflectivity</option>
</select>
</div>

Expand All @@ -81,7 +78,7 @@
</button><br>

<div id="settings" style="overflow-y: hidden; display: flex; scrollbar-width: narrow; flex-direction: column;">
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Radar resolution</b></p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-star setticon" style="font-size: 16px; color: white;"></i><b>Radar resolution</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">A higher resolution provides a more crisp radar image but uses more data and may cause the radar to lag or load slower.</p>
<select id="res" onchange="setResolution();">
<option value="1">Maximum</option>
Expand All @@ -92,24 +89,42 @@
<option value="5">Minimum</option>
</select>

<p style="margin: 30px 5px 5px 5px; font-size: large;"><b>Radar opacity</b></p>
<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 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-bugs setticon" style="font-size: 16px; color: white;"></i><b>JS Information</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">The info appears in the bottom left corner and reveals what the radar is doing.</p>
<label style="margin-left: 20px; font-size: medium;" class="checkbox-container">
<input type="checkbox" id="debugger" onchange="if (document.getElementById('debugger').checked) { document.getElementById('infop').style.display = 'flex' } else { document.getElementById('infop').style.display = 'none' }">
<span class="checkmark" style="margin-right: 10px;"></span>
Show debugger
</label>

</div>

<div id="appinfo" style="align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>👋 Hi there!</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">Thanks for checking out my radar. Spark Radar was a project I started in 2024 because I love tracking the weather and programming. I made the entire thing open source because finding the radar data was really hard to do. <a href="https://github.com/BusyBird15/busybird15.github.io/">Github</a>!</p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">Thanks for checking out my radar. Spark Radar was a project I started in 2024 because I love tracking the weather and programming. I made the entire thing open source because finding the radar data was really hard to do. You can check out the source code in <a class="credit" href="https://github.com/BusyBird15/busybird15.github.io/">this repo</a>.</p>
<p style="margin: 20px 5px 5px 5px; font-size: large;"><b>How does it work?</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">The principle of Spark Radar is actually very simple. I found a tile server used by the NWS's radar. After passing it a bounding box and station, it returns an image which simply gets placed on the map!</p>
<p style="margin: 20px 5px 5px 5px; font-size: large;"><b>Credits</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">The following are the services and sources which the radar gets data from:</p>
<p style="margin: 5px 5px 10px 15px; font-size: medium; width: calc(100% - 40px); text-align: left;"><b>Radar Images: </b><a href="https://opengeo.ncep.noaa.gov" target="_blank" class="credit">NOAA's OPENGEO Server</a><br>
<b>Radar Info and Stations:</b> <a href="https://www.weather.gov/documentation/services-web-api#/" target="_blank" class="credit">NWS API</a><br>
<b>Alerts:</b> <a href="https://www.weather.gov/documentation/services-web-api#/" target="_blank" class="credit">NWS API</a><br>
<b>Watches:</b> <a href="https://www.mesonet.agron.iastate.edu/request/gis/spc_watch.phtml" target="_blank" class="credit">The IEM WW Archive</a><br>
<b>SPC Outlooks:</b> <a href="https://www.spc.noaa.gov/products/outlook/day1otlk_cat.nolyr.geojson" target="_blank" class="credit">NWS SPC GeoJSON</a><br>
<b>Search Results:</b> <a href="https://geocode.maps.co" target="_blank" class="credit">Geocode</a><br>
</p>
<p style="margin: 20px 5px 5px 5px; font-size: large;"><b>Honorable Mentions</b></p>
<p style="margin: 5px 5px 10px 5px; font-size: medium;">The following people have helped make the radar or have helped me with finding data:</p>
<p style="margin: 5px 5px 10px 15px; font-size: medium; width: calc(100% - 40px); text-align: left;"><b>SteepAtticStairs</b> (Creator of AtticRadar)<br><b>Dan Paulat</b> (Creator of SupercellWX)<br><b>Wxtership</b> (Owner of Xtreme Weather Discord)</p>
</div>

<div id="about" style="align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Version:</b> BETA v0.2</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Oct. 7, 2024</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Version:</b> BETA v0.3</p>
<p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Oct. 8, 2024</p>
</div>

<div id="alertinfo" style="font-family: Consolas; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
Expand All @@ -123,8 +138,9 @@
<input type="text" placeholder="Find a place" id="textbox" style="transition-duration: 0.3s; font-size: 16px; color: white; background: rgba(255, 255, 255, 0.2); padding: 5px; margin: 5px; border: none; width: 100%; border-radius: 7px;">
<button id="searchbtn" class="searchbuttons" style="padding: 5px 5px 5px 0px;" onclick="doLocSearch(document.getElementById('textbox').value);"><i class="fa-solid fa-search" style="font-size: 16px; margin: 5px; color: white;"></i></button>
</div>
<div id="results" class="overlay-object" style="width: calc(100% - 520px); flex-direction: column; max-width: 350px; min-width: 180px; left: 70px; top: 60px; overflow-x: auto; height: calc(100% - 400px); min-height: 200px; max-height: 300px; scrollbar-width: none; padding: 10px;"></div>
<div id="results" class="overlay-object" style="width: calc(100% - 520px); flex-direction: column; max-width: 330px; min-width: 180px; left: 70px; top: 60px; overflow-x: auto; height: calc(100% - 400px); min-height: 200px; max-height: 300px; scrollbar-width: none; padding: 10px;"></div>

<p id="infop" style="display: none; transition-duration: 0.2s; z-index: 100; margin: 0px; text-size: large; bottom: 10px; left: 10px; position: absolute; color: black;">Loading radar...</p>
</body>

<!--Add JS after elements are added-->
Expand Down
Loading

0 comments on commit 9965647

Please sign in to comment.