Please do not post questions in the shout-box as it will be lost in a few days. Open your own topic in the appropriate section. Thank you.

Index.html modification for adding some info.

Started by Emmanuel SV1BTL, Nov 18, 2024, 08:43 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Emmanuel SV1BTL

Nov 18, 2024, 08:43 AM
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: &nbsp;
<body onload="startTime()">
<span id="time" style=" background-color: #; color: rgba(0, 225, 255, 0.993); border-radius: 0px 0px 0px 0px;"></span>
 &nbsp;&nbsp;⫷⫸ &nbsp;&nbsp;

Frequency information:&nbsp;&nbsp;&nbsp;
<button class="myButton" onClick="window.open('http://www.mwlist.org/mwlist_quick_and_easy.php');">
<span class="icon">MW List</span>
</button>
&nbsp;
<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: &nbsp;&nbsp;&nbsp;
<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()">&nbsp;&nbsp;&nbsp;
<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.

 

HB9RYZ

#1
Nov 22, 2024, 03:53 PM
Thank you very much :-) works great
http://rigi.dyndns-remote.com:8074/
73 de HB9RYZ
Wolfgang

Emmanuel SV1BTL

#2
Nov 28, 2024, 12:11 PM
Quote from: HB9RYZ on Nov 22, 2024, 03:53 PMThank you very much :-) works great
http://rigi.dyndns-remote.com:8074/
73 de HB9RYZ
Wolfgang

I think that recent modification you've done, is much better. Can you describe us what you've done?

Bas ON5HB

#3
Nov 28, 2024, 05:52 PM
Why not fork it and insert the code for everybody to use?

Instead of modding the code by hand.

Or send the stuff to Steven and hope he releases a new version with all this in it.

We should not go into the websdr.org direction where we keep changing the 'package' to keep it updated.

Just git-clone / compile / run it 8)

I think this is the best approach, although I do hope Steven will include all so we can stick to his version.

Do not get me wrong, but people are jumping on board, some are very good coders, we can make big steps but it needs to be included/added.
Best regards,

Bas ON5HB

Ps. the Community Edition can be found here: https://github.com/ny4qphil/PhantomSDR-Plus

hb3xdc

#4
Nov 28, 2024, 06:42 PM
@Emmanuel SV1BTL

I did some html changes in the app.svelte for hb9ryz and me, I can share the code also on github if you want, sure there could be more professional ways but it works
Gianni - HB3XDC
WebSDR Lucerne
Sardinia SDR

hb3xdc

#5
Nov 28, 2024, 06:44 PM
Gianni - HB3XDC
WebSDR Lucerne
Sardinia SDR

hb3xdc

#7
Nov 29, 2024, 05:09 PM
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
Gianni - HB3XDC
WebSDR Lucerne
Sardinia SDR

Phil - NY4Q

#8
Nov 29, 2024, 08:46 PM
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 SV1BTL

#9
Nov 30, 2024, 07:19 AM
@Gianni

Some minor changes to your code, please check out and if you like them, I'll send you the code. http://sv1btlham.no-ip.org:8900/

I'll try to build something like a drop down menu, to focus on several bands.

hb3xdc

#10
Nov 30, 2024, 10:05 AM
@Emmanuel Yes. Good idea to put the tuning steps up.
Gianni - HB3XDC
WebSDR Lucerne
Sardinia SDR

Phil - NY4Q

#11
Nov 30, 2024, 02:29 PM
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.

Phil - NY4Q

#12
Nov 30, 2024, 11:38 PM Last Edit: Nov 30, 2024, 11:50 PM by Phil - NY4Q
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 :

Code Select
function setBand(band) {
set centerFrequency();
set mode();
set waterfallSpan();
}

Phil

Emmanuel SV1BTL

#13
Dec 17, 2024, 11:31 AM Last Edit: Dec 17, 2024, 12:34 PM by Emmanuel SV1BTL
This is a script to "grab" the frequency currently tuned and open external links to frequency search tool like: http://www.mwlist.org/mwlist_quick_and_easy.php and http://www.short-wave.info/index.php.

  • First code (MW lookup). If you are in area 1 (Europe/Middle East) keep the code as it is. If you are in area 2 (Asia and Pacific), area 3 (North America, Central America, Caribbean), or area 4 (South America), you have to change "area=" in to the first code (for MW lookup).
  • The second code (SW lookup), will search the SDR receiver's IP location, so to exactly show the QTH and the stations that are heard real time.

Attachment the buttons in place.


Code Select
Frequency List:&nbsp; 
                <button class="glass-button text-white py-1 px-3 mb-2 lg:mb-0 rounded-lg text-xs sm:text-sm" style="color:rgba(0, 225, 255, 0.993)" onClick="window.open('http://www.mwlist.org/mwlist_quick_and_easy.php?area=1&amp;kHz='+{Math.round(frequency)},'websdrstationinfo','');">
                  <span class="icon">MW List</span>
                  </button>
                  &nbsp;
                <button class="glass-button text-white py-1 px-3 mb-2 lg:mb-0 rounded-lg text-xs sm:text-sm" style="color:rgba(0, 225, 255, 0.993)" onClick="window.open('http://www.short-wave.info/index.php?freq='+{Math.round(frequency)}+'&amp;timbus=NOW&amp;ip=179&amp;porm=4','websdrstationinfo','')">
                  <span class="icon">SW List</span>
                  </button>
Print
Go Up Pages1
User actions
Powered by EzPortal