Custom Waterfall

[Emmanuel SV1BTL]

A simple way to build a waterfall with your custom colors.
Go to file: .../PhantomSDR-Plus/fronend/src/lib/colormaps.js and add this after the "SpectraVU Colormap":

Code Select Expand

// Custom Colormap
const customData = [];

for (let i = 0; i < 256; i++) {
  if (i < 10) {
    // level 0: black background
    customData.push([0, 0, 0])
  } else if ((i >= 10) && (i < 20)) {
    // level 1: black -> blue
    customData.push([0, 0, 100 * (i - 100) / 50])
  } else if ((i >= 20) && (i < 120)) {
    // level 2: blue -> light-blue / greenish
    customData.push([60 * (i - 100) / 30, 100 * (i - 70) / 30, 100 * (i - 70) / 30 + 140])
  } else if ((i >= 120) && (i < 160)) {
    // level 3: light blue -> yellow
    customData.push([100 * (i - 30) / 50 + 60, 100 * (i - 80) / 50 + 125, 255 - (255 * (i - 100) / 50)])
  } else if ((i >= 160) && (i < 250)) {
    // level 4: yellow -> red
    customData.push([255, 255 - 255 * (i - 130) / 100, 0])
  } else if (i >= 250) {
    // level 5: red -> white
    customData.push([255, 255 * (i - 250) / 5, 255 * (i - 100) / 5])
  }
  customData[i] = customData[i].map(x => x / 255)
}



const definedColormaps = {
  turbo: turboColormap,
  gqrx: gqrxData,
  twente: twenteData,
  twentev2: twenteColorMapFull,
  SpectraVU: spectraVUData,
  custom: customData,
}

export const availableColormaps = [
  'turbo', 'gqrx', 'twente', 'twentev2','SpectraVU','custom'
]
[attach id=144]colormaps.js[/attach]
(This is a simple modification of the default GQRX color map. You can adjust the colors according to your needs)

#####

If you'd like to be this your default setting, then go to
.../PhantomSDR-Plus/fronend/src/App.svelte and change the settings as follows. If you don't make a change to App.svelte, then "custom" will only appear as an option to select in the drop-down menu under the "Waterfall Controls"

// Waterfall drawing
  let currentColormap = "custom"; //was "gqrx"
  let alpha = 0.5;
  let brightness = 130;
  let min_waterfall = -30;
  let max_waterfall = 110;
  function initializeColormap() {
    // Check if a colormap is saved in local storage
    const savedColormap = localStorage.getItem("selectedColormap");
    if (savedColormap) {
      currentColormap = savedColormap;
    }
    waterfall.setColormap(currentColormap);
  }


#####

recompile frontend
done!

Code Select Expand

[code][code]1014[/code][/code]

[Bas ON5HB]

Looks nice!!! Thanks Manolis

However, you inserted the code into the message as normal text, that won't compile.

Please use the code-button if you insert code, else it won't format properly.

[Emmanuel SV1BTL]

Looks nice!!! Thanks Manolis

However, you inserted the code into the message as normal text, that won't compile.

Please use the code-button if you insert code, else it won't format properly.

Can you check now Bas? I've also uploaded the file.

[Bas ON5HB]

It works now....but tricky.