This is a simple modification to "PhantomSDR-Plus/frontend/dist/index.html" to show some information, external links, UTC & Local time, Callsign search, or any other useful information you like to be shown.
#### index.html ####
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- button css -->
<style>
.myButton {
-moz-box-shadow: 1px 1px 3px -1px #414445;
-webkit-box-shadow: 1px 1px 3px -1px #414445;
box-shadow: 1px 1px 3px -1px #414445;
background:linear-gradient(to bottom, #ededed 5%, #c2c0c2 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#050505;
font-family:Arial;
font-size:12px;
font-weight:normal;
padding:0px 6px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:linear-gradient(to bottom, #c2c0c2 5%, #ededed 100%);
background-color:#c2c0c2;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
<!-- end button css -->
<title>SV1BTL - PhantomSDR+</title>
<script type="module" crossorigin src="/assets/index-DtLPSqpM.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BkbTJSy3.css">
<script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
<script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
<!-- time .js -->
<script>
function startTime() {
var Digital=new Date()
var hours=Digital.getUTCHours()
var minutes=Digital.getUTCMinutes()
var seconds=Digital.getUTCSeconds()
if (hours>=24){
hours="0"
//this makes the first hour of the day display as "00" UTC (the 2nd "0" is added below).
}
// Add leading zeros when needed:
if (hours<=9)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var LDigital=new Date()
var l_hours=LDigital.getHours()
var l_minutes=LDigital.getMinutes()
var l_seconds=LDigital.getSeconds()
if (l_hours>=24){
l_hours="0"
//this makes the first hour of the day display as "00" UTC (the 2nd "0" is added below).
}
// Add leading zeros when needed:
if (l_hours<=9)
l_hours="0"+l_hours
if (l_minutes<=9)
l_minutes="0"+l_minutes
if (l_seconds<=9)
l_seconds="0"+l_seconds
document.getElementById('time').innerHTML =
hours+":"+minutes+":"+seconds+" (UTC) ⬌ "+l_hours+":"+l_minutes+":"+l_seconds+" (Local)"
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<!-- end time .js -->
</head>
<body>
<center>
<h4 style="color:rgba(255, 251, 0, 0.959);">This is <a href="https://www.qrz.com/db/SV1BTL" target="new" style="color:rgba(0, 225, 255, 0.993)">SV1BTL</a>'s Wideband Websdr, located in <a href="http://k7fry.com/grid/?qth=KM17VX69JA" target="new" style="color:rgba(0, 225, 255, 0.993)">Athens, GR, KM17VX.</a> Online 24/7, except when we trasmit! - <a href="https://sdr-list.xyz/" target="_new" style="color:rgba(0, 225, 255, 0.993)"">PhantomSDR+ List</a></h4>
<h4 style="color:rgba(255, 251, 0, 0.959);">PC: <a href="https://amzn.eu/d/ePVdkpy"new" target="new" style="color:rgba(0, 225, 255, 0.993)">Intel Core i5-12450H, Ubuntu 22.04 "Jammy",</a> Receiver: <a href="https://www.rx-888.com/rx/" target="new" style="color:rgba(0, 225, 255, 0.993)">RX-888 MKII,</a> Antenna: <a href="https://hamradioshop.net/antennas/diy-end-fed-antennas/294/end-fed-antenna-building-kit-complete-for-10-12-15-17-20-30-40-80-160-meter-band.-450-watt-pep?c=100" target="new" style="color:rgba(0, 225, 255, 0.993)"> EFHW 160m.- 10m. with 64:1 balun. </a></h4>
<h4 style="color:rgba(255, 251, 0, 0.959);">
Time:
<body onload="startTime()">
<span id="time" style=" background-color: #; color: rgba(0, 225, 255, 0.993); border-radius: 0px 0px 0px 0px;"></span>
⫷⫸
Frequency information:
<button class="myButton" onClick="window.open('http://www.mwlist.org/mwlist_quick_and_easy.php');">
<span class="icon">MW List</span>
</button>
<button class="myButton" onClick="window.open('http://www.short-wave.info/index.php');">
<span class="icon">SW List</span>
</button>
<form method="get" target="_blank" action="https://www.qrzcq.com" >
Callsign lookup:
<input type="text" name="q" value="" size="6" style=" background-color: #2D3B4F; color: yellow; border-style: groove; border-color: grey; text-align:center; font-size: 84%;" onClick="this.form.q.select();this.form.q.focus()">
<input type="hidden" name="action" value="search" >
<input class="myButton" type="submit" name="page" value="Search" >
</form>
</h4></center>
<div id="app"></div>
<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-dY0RNhaD.js"></script>
<script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-ChAaje4m.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body>
</html>
#### end ####
Final result will be something like this, as shown here: http://sv1btlham.no-ip.org:8900/
It would be nice to get directly the frequency from the server and to search it automatically to MW or SW list (as it is already done using the classical websdr), but I have not gotten it to work yet. Any help would be appreciated.
Does anyone have an Idea how I could create in the .svelte a button which sets the zoom to a specific band? So that eg you click on 40m and it focus on this band
Or how about a drop down menu that lets the user choose the band, and that choice centers the band on the waterfall with the edges of the band at the edge of the waterfall and chooses the mode at the spot the freq is centered?
Something like the favorites on SDR Console.
@Emmanuel Yes. Good idea to put the tuning steps up.
I also put the tuning steps up top. Thank you for your code.
I have installed node and am learning to use vite. I plan to look at the band buttons as well.
I think we need to start threads based on what we want and build functions together.
For example, begin on a section of code that creates the band we wish to choose :
function setBand(band) {
set centerFrequency();
set mode();
set waterfallSpan();
}
Phil