Add URL params parsing and concept of "embedded mode"

This commit is contained in:
Ian Renton
2025-11-30 11:26:15 +00:00
parent 8a82f81ec4
commit 9d130712d8
13 changed files with 143 additions and 49 deletions

View File

@@ -3,11 +3,19 @@
<div id="info-container" class="mt-4">
<h2 class="mt-4 mb-4">About Spothole</h2>
<p>Spothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.</p>
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a larger number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
<p>The API is deliberately well-defined with an <a href="/apidocs/openapi.yml">OpenAPI specification</a> and <a href="/apidocs">API documentation</a>. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data.</p>
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>. If you want to run your own copy of Spothole, or start modifying it for your own purposes, the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a> contains a description of how the software works and how it's laid out, as well as instructions for configuring systemd, nginx and anything else you might need to run your own server.</p>
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full details are available in the README.</p>
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>.</p>
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full details are available in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</p>
<p>This server is running Spothole version {{software_version}}.</p>
<h2 class="mt-4 mb-4">Using Spothole</h2>
<p>There are a number of different ways to use Spothole, depending on what you want to do with it and your level of technical skill:</p>
<ol><li>You can <b>use it on the web</b>, like you are (probably) doing right now. This is how most people use it, to look up spots and alerts, and make interesting QSOs.</li>
<li>If you are using an Android or iOS device, you can <b>"install" it on your device</b>. Spothole is a Progressive Web App, meaning it's not delivered through app stores, but if you open the page on Chrome (Android) or Safari (iOS) there will be an option in the menu to install it. It will then appear in your main app menu.</li>
<li>You can <b>embed the web interface in another website</b> to show its spots in a custom dashboard or the like. The usage is explained in more detail in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</li>
<li>You can <b>write your own client using the Spothole API</b>, using the main Spothole instance to provide data, and do whatever you like with it. The README contains guidance on how to do this, and the full API docs are linked above. You can also find reference implementations in the form of Spothole's own web-based front end, plus my other two tools built on Spothole: <a href="https://fieldspotter.radio">Field Spotter</a> and the <a href="https://qsomap.m0trt.radio">QSO Map Tool</a>.</li>
<li>If you want to <b>run your own version of Spothole</b> so you can customise the configuration, such as enabling sources that I disable on the main instance, you can do that too. The README contains not only advice on how to set up Spothole but how to get it auto-starting with systemd, using an nginx reverse proxy, and setting up HTTPS support with certbot.</li>
<li>Finally, you can of course download the source code and <b>develop Spothole to meet your needs</b>. Whether you contribute your changes back to the main repository is up to you. As usual, the README file contains some advice on the structure of the repository, and how to get started writing your own spot provider.</li></ol>
<h2 id="faq" class="mt-4">FAQ</h2>
<h4 class="mt-4">"Spots"? "DX Clusters"? What does any of this mean?</h4>
<p>This is a tool for amateur ("ham") radio users. Many amateur radio operators like to make contacts with others who are doing something more interesting than sitting in their home "shack", such as people in rarely-seen countries, remote islands, or on mountaintops. Such operators are often "spotted", i.e. when someone speaks to them, they will put the details such as their operating frequency into an online system, to let others know where to find them. A DX Cluster is one type of those systems. Most outdoor radio awards programmes, such as "Parks on the Air" (POTA) have their own websites for posting spots.</p>

View File

@@ -1,7 +1,7 @@
% rebase('webpage_base.tpl')
<div class="mt-3">
<div class="row">
<div id="settingsButtonRow" class="row">
<div class="col-auto me-auto pt-3">
<p id="timing-container">Loading...</p>
</div>

View File

@@ -1,7 +1,7 @@
% rebase('webpage_base.tpl')
<div class="mt-3">
<div class="row">
<div id="settingsButtonRow" class="row">
<div class="col-auto me-auto pt-3">
<p id="timing-container">Loading...</p>
</div>

View File

@@ -3,11 +3,9 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="white"/>
<meta name="color-scheme" content="light dark">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
<meta property="og:title" content="Spothole"/>
<meta property="twitter:title" content="Spothole"/>
@@ -48,7 +46,7 @@
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg bg-body p-0 border-bottom">
<nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
<div class="container-fluid p-0">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" id="logo" width="192" height="60" alt="Spothole">
@@ -79,7 +77,7 @@
</main>
<div class="hideonmobile hideonmap">
<div id="footer" class="hideonmobile hideonmap">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
<p class="col-md-4 mb-0 justify-content-center text-body-secondary" style="text-align: center;">Spothole v{{software_version}}</p>

View File

@@ -1,7 +1,7 @@
% rebase('webpage_base.tpl')
<div id="map">
<div id="maptools" class="mt-3 px-3" style="z-index: 1002; position: relative;">
<div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
<div class="row">
<div class="col-auto me-auto pt-3"></div>
<div class="col-auto">

View File

@@ -8,7 +8,7 @@
</div>
<div class="mt-3">
<div class="row">
<div id="settingsButtonRow" class="row">
<div class="col-auto me-auto pt-3">
<p id="timing-container">Loading...</p>
</div>