Suggestions for App.svelte and other components

[Phil - NY4Q]

Why don't we do this now that we have chased down all the bugs and have fine-tuned our sites to our liking, send me your App.svelte and we can place those in the repository for use. We can name them after our calls if you wish and then people can view the site and pick the layout they prefer. They'd just need to rename the preferred site App and compile. I can amend the INSTALL.md to explain that.

App-NY4Q.svelte for example.

What do you think?

Phil

[Emmanuel SV1BTL]

What do you think?

Very good idea, Phil! I'll prepare mine.

Meanwhile some remarks:

- I think that site_information.json must include two more keywords:
"siteCity": "siteCity", and
"siteAntenna": "siteAntenna",

- A suggestion about VFO A/B button. I have rewritten it so the button to change its label after pressing it. The code is:

Code Select Expand

<button
on:click={() => toggleVFO(vfo)}
class="retro-button text-white font-bold h-10 w-20 text-xs rounded-md flex items-center justify-center border border-gray-600 shadow-inner transition-all duration-200 ease-in-out {toggleVFO === vfo ? 'bg-green-600 pressed scale-95' : 'bg-blue-700 hover:bg-gray-600'}">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
</svg>
{vfo}
</button>

- A way to show VFO, Mode and Bandwidth located in the Freq/S-meter window, in a single line:

Code Select Expand

<div class="flex items-center justify-center text-xs w-48">
<span class="text-yellow-400 px-1">{vfo}</span>
<span class="text-gray-400 px-1">|</span>
<span class="text-green-400 px-1">{demodulation}</span>
<span class="text-gray-400 px-1">|</span>
<span class="text-cyan-300 px-1">{bandwidth} kHz</span>
</div>

- Also adding SQZ pressed indicator in the same Freq/S-meter window, among with the other indicators:

Code Select Expand

<div class="px-1 py-0.5 flex items-center justify-center w-12 h-5 relative overflow-hidden">
<span class="text-xs font-mono {mute ? 'text-red-500' : 'text-red-500 opacity-20 relative z-10'}">MUTED</span>
</div>

<div class="px-1 py-0.5 flex items-center justify-center w-12 h-5 relative overflow-hidden">
<span class="text-xs font-mono {squelchEnable ? `text-orange-500` : `text-orange-500 opacity-20 relative z-10`}">SQ</span>
</div>
                   
...etc

- I have also changed the hover color over "Record", "Stop" and "Download" buttons:

Code Select Expand

<!-- Recording Options -->
<div class="mt-6 w-full">
<h3 class="text-white text-lg font-semibold mb-2">Recording Options</h3>
<div class="flex justify-center gap-4">
<button class="bg-gray-700 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg flex items-center transition-colors {isRecording ? 'ring-2 ring-red-500' : ''}" on:click={toggleRecording}>

{#if isRecording}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" />
</svg>
Stop

{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
Record

{/if}
</button>

{#if canDownload}
<button class="bg-gray-700 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg flex items-center transition-colors" on:click={downloadRecording}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
Download
</button>

{/if}
</div>             
</div>


Please look for all them functions in my http://sv1btlham.no-ip.org:8900SV1BTL PhantomSDR+.

[Phil - NY4Q]

The changes look great Emmanuel. I'll get those in the community version this weekend. Thanks.

Phil

[Emmanuel SV1BTL]

GM Phil,
I've tested the newer App.svelte and it's really working very good. SV2AMK (Sakis) has to make the corrections needed to the "stepi", because the step 9000 is not the appropriate for all bands 

I'm trying to adapt my template to the community waterfall.js, but for now I'm facing some problems. My template is working excellent with my version of waterfall.js, but not with this in the community github, so for now I cannot send it to you so to upload it in github - except it will be uploaded together with my version of waterfall.js. Please let me know if this will be o.k.

Have you tried to make AGC switcher to work? As I can see, you have included the code to App.svelte (hidden).

Something more:
When I pick a new bandwidth with the preset buttons, I've noticed that the bandwidth is changed to the newer value, but if I want to jump to another preset, then the bandwidth first returns to its default for the mode value and then allows me to select another value according to the preset button. I think that you wanted to work this way, as it is mentioned on the code:

 // Used to track bandwidth as to make sure the //
  // static bandwidth buttons can be enabled and returened //
  // to the default bandwidth for thr chosen mode //
  let currentBandwidth = 0;
  let staticBandwidthEnabled = false;

but can we overcome this step, so the change of the bandwidth to be activated immediately, without passing through the default value?

[Phil - NY4Q]

GM Phil,
I've tested the newer App.svelte and it's really working very good. SV2AMK (Sakis) has to make the corrections needed to the "stepi", because the step 9000 is not the appropriate for all bands 

Afternoon, and very good. Yes, that needed to be done.

I'm trying to adapt my template to the community waterfall.js, but for now I'm facing some problems. My template is working excellent with my version of waterfall.js, but not with this in the community github, so for now I cannot send it to you so to upload it in github - except it will be uploaded together with my version of waterfall.js. Please let me know if this will be o.k.

What is different with your waterfall.jd file? Maybe we can merge it to the community version.

Have you tried to make AGC switcher to work? As I can see, you have included the code to App.svelte (hidden).

I have not looked further into this. I began the functions, then wanted to look into other open source code of AGC to see what they are doing. But you are welcome to play with it some to see if you can get a good result.

Something more:
When I pick a new bandwidth with the preset buttons, I've noticed that the bandwidth is changed to the newer value, but if I want to jump to another preset, then the bandwidth first returns to its default for the mode value and then allows me to select another value according to the preset button. I think that you wanted to work this way, as it is mentioned on the code:

 // Used to track bandwidth as to make sure the //
  // static bandwidth buttons can be enabled and returened //
  // to the default bandwidth for thr chosen mode //
  let currentBandwidth = 0;
  let staticBandwidthEnabled = false;

but can we overcome this step, so the change of the bandwidth to be activated immediately, without passing through the default value?

To be truthful, I found it difficult to switch from one level to another without first going back to the default, so I let it as an on/off type filter rather than switching from one to another. This and AGC and a few other things I would like to see 'fixed', but I haven't had the time yet to look deeply.

Phil

[Phil - NY4Q]

I see what you mean Emmanuel. What we will do is create a folder in the repository and you just include what files are specific to your site and we'll place those there so if people want to use those, then they can.

active_sites/NY4Q/specific_files_go_here
active_sites/SV1BTL/specific_files_go_here

etc...

Phil

[Emmanuel SV1BTL]

I see what you mean Emmanuel. What we will do is create a folder in the repository and you just include what files are specific to your site and we'll place those there so if people want to use those, then they can.

active_sites/NY4Q/specific_files_go_here
active_sites/SV1BTL/specific_files_go_here

etc...

Phil

Good idea, so I have to prepare once more the specified files including audio folder & a help (for the installation) file, and send them all as a .zip. Shall I uploaad them here, or send them via email?

[Phil - NY4Q]

Either is fine!

Good idea, so I have to prepare once more the specified files including audio folder & a help (for the installation) file, and send them all as a .zip. Shall I uploaad them here, or send them via email?

Either is fine!

[Phil - NY4Q]

Emmanuel, I have rewritten the IF Filter routine so as to not have to double-tap the buttons. I am testing the code and will publish the new App.svelte tomorrow if I see no issues.

Phil

[Emmanuel SV1BTL]

Very good Phil, yes, this (filters) is a wanted update.
Sakis (SV2AMK) and I are testing the newer waterfall.js with corrected steps and areas through the whole Band 0-30MHz (to UHF included). Another basic change is the option to "hide" bands and their buttons, if someone does not want some bands to appear as buttons. Their characteristics (mode and step) will remain, but no button, or identification line under waterfall will be shown.
Little work remains to do, and it'll be ready for upload to the github by you.

P.S. would be a good idea to distinguish radioamateur from broadcasting bands divided by a single,<hr> line? I am thinking that radioamateur bands have different interest from broadcasting ones and searching among them maybe it will be easier. I do believe that this is a very easy modification, by simply changing the order of the bands in waterfall.js, so "band reader" script in App.svelte to reorder them. Tell me please your thoughts.
There will be a working demo of course to see it and approve....

[Phil - NY4Q]

P.S. would be a good idea to distinguish radioamateur from broadcasting bands divided by a single,<hr> line? I am thinking that radioamateur bands have different interest from broadcasting ones and searching among them maybe it will be easier. I do believe that this is a very easy modification, by simply changing the order of the bands in waterfall.js, so "band reader" script in App.svelte to reorder them. Tell me please your thoughts.
There will be a working demo of course to see it and approve....

Yes, that is something that will be useful.

[Phil - NY4Q]

Very good Phil, yes, this (filters) is a wanted update.
Sakis (SV2AMK) and I are testing the newer waterfall.js with corrected steps and areas through the whole Band 0-30MHz (to UHF included). Another basic change is the option to "hide" bands and their buttons, if someone does not want some bands to appear as buttons. Their characteristics (mode and step) will remain, but no button, or identification line under waterfall will be shown.
Little work remains to do, and it'll be ready for upload to the github by you.

I have been doing that on my site by just placing a 0 for ITU, but you can add a field called show: and assign a 0 or 1 if you like.

[Emmanuel SV1BTL]

I have been doing that on my site by just placing a 0 for ITU, but you can add a field called show: and assign a 0 or 1 if you like.

Something like that is made.
A " {#if bandData.visibleButton != ""} " was added in App.svelte in "Band Selection Section"
and a reference " visibleButton: 'yes' " or '' (for no) is added for every band in waterfall.js. Sakis made it this way.

Your BW IF Filters in your WebSDR are working very well, as expected. Looking forward to see the uploaded new App.Svelte and App-NY4Q.svelte files.

[sv2amk]

I have been doing that on my site by just placing a 0 for ITU, but you can add a field called show: and assign a 0 or 1 if you like.

Something like that is made.
A " {#if bandData.visibleButton != ""} " was added in App.svelte in "Band Selection Section"
and a reference " visibleButton: 'yes' " or '' (for no) is added for every band in waterfall.js. Sakis made it this way.

Your BW IF Filters in your WebSDR are working very well, as expected. Looking forward to see the uploaded new App.Svelte and App-NY4Q.svelte files.

Hello Phill.
As Emmanuel mentioned, I have inserted a new variable with the name visibleButton in waterfall.js and App.svelte in order to "hide" buttons  but keep displaying labels and maybe colors under the waterfall area (exmple pirates before 40m and 80m ham bands in our region).
I also copied this part:

Code Select Expand

checkBandAndSetMode(frequency) {
    let newBand = null;
    let newMode = null;

    for (const band of this.bands) {

      // This comparator will fix an issue of printing the band name multiple times //
      // because of the ITU regions added in the this.bands[] array //
      // I import the region from site_information and do a comparison against //
      // the site ITU region and the band.ITU value. //
//This copied "as is" by sv2amk from below to fix the same issue but for the modes.//
            if (band.ITU === siteRegion || band.ITU == 123) {

      if (frequency >= band.startFreq && frequency <= band.endFreq) { ......
.................................

on top of the modulation selecting function in waterfall.js, to avoid messing the modulation changing in our region.
The files are ready to be sent to you but I would like to adjust the brightness by pressing the band buttons. I sow that in your server the brightness of the waterfall changes as well as the sliders. Can you please explain how you do this?
I also would like to include your last changes in your svelte before sending the files.
73 de sv2amk

[Phil - NY4Q]

Your BW IF Filters in your WebSDR are working very well, as expected. Looking forward to see the uploaded new App.Svelte and App-NY4Q.svelte files.

I am cleaning up the App.svelte and will upload all the latest I have by Sunday. Its been a busy week.

Phil