Suggestions for App.svelte and other components

[Phil - NY4Q]

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

I added min & max settings to the waterfall.js file - see below - we all need to all amend our waterfall.js file as below.

Code Select Expand

{ ITU: 123, name: '30m', min: -45, max: 120, startFreq: 10100000, endFreq: 10150000,  stepi: 1000, color: 'rgba(50, 168, 72, 0.6)',
modes: [{ mode: MODES.CW, startFreq: 10100000, endFreq: 10150000 }]
},

If you don't add those fields, then the function ignores that and just assigns the defaults in the App.svelte.
73,
Phil

[sv2amk]

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.

OK. This is done by me:

Code Select Expand


          <!-- Begin Band Selection Section -->
          <div class="w-full mt-4">
            <h3 class="text-white text-lg font-semibold mb-2">Amateur Bands</h3>
            <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
                {#each bandArray as bandData, index}
                  {#if verifyRegion(bandData.ITU)}
                        {#if bandData.visibleButton == 1}
                  {#if printBandButton(bandData.startFreq,bandData.endFreq)}
                <button id="band-selector" class="retro-button text-xs text-white fontrbold h-7 text-base rounded-md flex items-center justify-center border border-gray-600 shadow-inner transition-all duration-200 ease-in-out {currentBand === index ? 'bg-blue-600 pressed scale-95' : 'bg-gray-700 hover:bg-gray-600'}"
                  on:click={() => handleBandChange(index)} title="{bandData.name}">{bandData.name}
                </button>
                      {/if}
                    {/if}
                  {:else}
                {/if}
              {/each}
            </div>
            </div>
          <!-- Begin Non-amateur Band Selection Section -->
          <div class="w-full mt-4">
            <h3 class="text-white text-lg font-semibold mb-2">Non Amateur Bands</h3>
            <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
                {#each bandArray as bandData, index}
                  {#if verifyRegion(bandData.ITU)}
                        {#if bandData.visibleButton == 2}
                  {#if printBandButton(bandData.startFreq,bandData.endFreq)}
                <button id="band-selector" class="retro-button text-xs text-white fontrbold h-7 text-base rounded-md flex items-center justify-center border border-gray-600 shadow-inner transition-all duration-200 ease-in-out {currentBand === index ? 'bg-blue-600 pressed scale-95' : 'bg-gray-700 hover:bg-gray-600'}"
                  on:click={() => handleBandChange(index)} title="{bandData.name}">{bandData.name}
                </button>
                      {/if}
                    {/if}
                  {:else}
                {/if}
              {/each}
            </div>
            </div>
            <!-- End of Band Selection Area -->

and the waterfall.js  has to be adjusted accordingly:

Code Select Expand

        { ITU: 1,
            name: '60m', visibleButton: '1', startFreq: 5351500, endFreq: 5366650,  stepi: 100, color: 'rgba(50, 168, 72, 0.6)',
            modes: [
              { mode: MODES.CW, startFreq: 5351500, endFreq: 5354000 },
              { mode: MODES.USB, startFreq: 5354000, endFreq: 5366500 }]
        },
................
        { ITU: 123,
            name: '49m AM', visibleButton: '2', startFreq: 5900000, endFreq: 6200000,  stepi: 5000, color: 'rgba(199, 12, 193, 0.6)',
            modes: [{ mode: MODES.AM, startFreq: 5900000, endFreq: 6200000 }]
        },

Maybe Phill can do the same with less commands

73 de sv2amk

[sv2amk]

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

I added min & max settings to the waterfall.js file - see below - we all need to all amend our waterfall.js file as below.

Code Select Expand

{ ITU: 123, name: '30m', min: -45, max: 120, startFreq: 10100000, endFreq: 10150000,  stepi: 1000, color: 'rgba(50, 168, 72, 0.6)',
modes: [{ mode: MODES.CW, startFreq: 10100000, endFreq: 10150000 }]
},

If you don't add those fields, then the function ignores that and just assigns the defaults in the App.svelte.
73,
Phil

TNX Phill.

Where can i look for that function? Is it included in the community App.svelte? If not can you please post an example of yours?

73 de Sakis sv2amk

[Emmanuel SV1BTL]

I added min & max settings to the waterfall.js file - see below - we all need to all amend our waterfall.js file as below.
Code Select Expand

Code Select Expand

{ ITU: 123, name: '30m', min: -45, max: 120, startFreq: 10100000, endFreq: 10150000,  stepi: 1000, color: 'rgba(50, 168, 72, 0.6)',
modes: [{ mode: MODES.CW, startFreq: 10100000, endFreq: 10150000 }]
},

Not working for me Phil. Shall we declare min & max somewhere else?

[Phil - NY4Q]

I will soon post the latest community version with all updated functions.

I want to add the 'publishBand' variable to the band function and test that. Hopefully by 1800/1900 UTC.

I will also add the new waterfall.js requests with the min/max and publishBand. publishBand will be a boolean consisting of true or false and all bands will be visible and you can edit out those you wish to not publish. The waterfall min & max will be set to -40 and 120 at default and you can edit as needed.

Will someone please work on a CONFIG_TIPS.md file that explains some of these setups that we all know about, but new people will not?

[Phil - NY4Q]

Ok, the new files are up. I ran a test 'auto install' and all looks good.

Be sure to back up your files and tweaks that you have on your systems prior to updating.

Let's let the dust settle a while (as we say in the US) before making any changes. Let's see if any bugs show up.

Note: Emmanuel - I moved the bookmark back to the original popup as many users were not seeing the bookmarks on their mobile devices, so make a note of that to save your favorite code for that.

73,
Phil

[Emmanuel SV1BTL]

Everything works just fine Phil. In my case, I found reading the community App.svelte, how to make Preset Filters and Band Brightness to work.
One more time, I thank you very, very much for your efforts and the perfect results!

[Phil - NY4Q]

Emmanuel - Please update your site files and send them to me to place in your folder on the repository.

[sv2amk]

Hello Phil!

Ok, the new files are up. I ran a test 'auto install' and all looks good.

Be sure to back up your files and tweaks that you have on your systems prior to updating.

I 'd like to see it but I couldn't find it in the github. Whewe can I look?

Let's let the dust settle a while (as we say in the US) before making any changes. Let's see if any bugs show up.

Well, I found a bug, but the solution may "raise dust" again.

The brightness is adjusted automatically, but manual adjustment is impossible.

The solution was to make comments (or remove) the lines 865 to 870 of your last community App.svelte from the github:

Code Select Expand


  /*    if (bandArray[i].max < 256) {
          min_waterfall = bandArray[i].min;
          max_waterfall = bandArray[i].max;
          handleMinMove();
          handleMaxMove();
        }*/


in  function updateBandButton()

Then I inserted code in function handleBandChange(newBand) under the line 1835
that does 2 operations: 1. adjusts the brightness and 2. reads the initial frequency that is inserted in waterfall.js for every band.:

Code Select Expand

  let initFreq = parseFloat(bandArray[newBand].initFreq);
  min_waterfall = parseInt(bandArray[newBand].min);
  max_waterfall = parseInt(bandArray[newBand].max);

Also a line is inserted under the line with old number 1857 to set the initial frequency if set (if not set initial frequency is the center frequency):

Code Select Expand

  if(initFreq |= "") { centerFreq = initFreq };

Of course I had to make comment the 2 old lines 1851 and 1852 with the default values for brightness:

Code Select Expand

//  min_waterfall = -30;
//  max_waterfall = 110;

The function made like this:

Code Select Expand

  // This Band Selection function handles band changes sent from the Band Selection section of the main page //
  // The 7.15255 float below is (total_watefall_span / maximum_frequency_sampled) //
  function handleBandChange(newBand) {
    let centerFreq = parseFloat(
      (bandArray[newBand].endFreq - bandArray[newBand].startFreq) / 2 +
        bandArray[newBand].startFreq,
    );

 
  let initFreq = parseFloat(bandArray[newBand].initFreq);
  min_waterfall = parseInt(bandArray[newBand].min);
  max_waterfall = parseInt(bandArray[newBand].max);


    let waterfallEndSpan = parseFloat(bandArray[newBand].endFreq / 7.15255);
    let waterfallStartSpan = parseFloat(bandArray[newBand].startFreq / 7.15255);
    let waterfallSpan = (waterfallEndSpan - waterfallStartSpan) / 2;
    waterfallSpan = waterfallSpan + waterfallSpan * 0.01; // 10% above band edge
    frequencyInputComponent.setFrequency(centerFreq);
    handleFrequencyChange({ detail: centerFreq });
    updatePassband();
    let [l, m, r] = audio.getAudioRange();
    const [waterfallL, waterfallR] = waterfall.getWaterfallRange();
    const offset =
      ((m - waterfallL) / (waterfallR - waterfallL)) * waterfall.canvasWidth;
    m = Math.min(waterfall.waterfallMaxSize - 512, Math.max(512, m));
    l = Math.floor(m - 512);
    r = Math.ceil(m + 512);
    // Below sets the waterfall brightness //


  //  min_waterfall = -40;
  //  max_waterfall = 120;

    handleMinMove();
    handleMaxMove();
    // End waterfall brightness //
    l -= waterfallSpan;
    r += waterfallSpan;


if(initFreq |= "") { centerFreq = initFreq };

    frequencyInputComponent.setFrequency(centerFreq);
    handleFrequencyChange({ detail: centerFreq });
    waterfall.setWaterfallRange(l, r);
    frequencyMarkerComponent.updateFrequencyMarkerPositions();
    updatePassband();
    currentBand = newBand;
  }
  // End of Band Selection Function //

This worked for us and you can see it at Emmanuel's server.

I send our waterfall.js that has the added variables for the above.
Emmanuel will send his App.svelte also.

PS. In waterfall.js the variable publishBand: has 3 states: '' that does not create the button, '1' that creates the button in group "Amateur bands" and '2' that creates the button in the group "non amateur bands" as mentioned in post #110.
73 de sv2amk Sakis.

[Phil - NY4Q]

Ok, I have fixed the 'band spread' fudge factor calculation with an ACTUAL data calculation - haha

I have fixed the waterfall resetting itself upon frequency change 'feature'.

I have fixed the VFO A/B bug when you initially load the URL - no one noticed this.

When I get time, I will add a boolean to the waterfall.js to detect if a band is amateur or not. This boolean will be simply amateurBand and will be either true or false.

Emmanuel  I would rather do this, than add the check to the publishBand as you mentioned, although that would also work fine.

That being said, if you already have to code ready to separate the bands, please amend that code and use amateurBand and then publish that for me to add to the main App.svelte.

I hope this is ok with everyone.

Note : On your amateurBand function, make sure it will behave if only one band is published, as in my VHF Phantom+ instance that only publishes the 2m VHF band.

Phil

[Bas ON5HB]

Manolis,

Please do not make another version on the same github.
I suggest you start your own github or make a fork off this version.

I understand you want to move fast, sometimes too fast, but you can start your own github version.

The forum will support it, we just make another separate version.

But it's not a wise idea to mix the community version with other versions in the same github.

3 options:

1: Wait until Phil has adapted changes and accept it.
2: Make your own github and push your version there.
3: Fork and upload changes and wait for Phil do adopt them, while your own version is there too, however this can give problems.

Do not get me wrong, I love your enthusiasm and fast moving changes, but putting 500 versions into 1 github is not a good idea.
It will only confuse newcomers.

As said before, you move to fast. I for one do not update for the moment, can't keep up.

[Phil - NY4Q]

Ok, the latest changes are now up and look good.

This includes the waterfall min/max issue when the frequency was changed, it includes a VFO A/B issue I noticed and I have fixed that. I also changed the way the initial VFO A/B starts. It is based on settings in the site_information.json file and not just typed in on the App.svelte.

Added to waterfall.js is the boolean amateurBand and that has already been set to true or false based on the particular band.

I like Bas' comments on maintaining the community version as a single entity and removing those other sites. The community version will be that - the community's changes and all available for the newcomer sysops to change if they feel the need.

The best way to allow users to use your particular site is to do what Bas has mentioned and just create a fork and allow others to download. That also allows you to make changes at the speed you want to and as you innovate, we can add your changes to the community version.

We have made this into a very nice product together and I want that to continue.

Phil

[Phil - NY4Q]

I like that band menu split and initFreq suggestion and will add that in the next release, but again, let's let the dust settle on this last upload.