Investigate spectrogram pixelation compared to industry standard tools #239

Activity

1. aashish24

   added this to the September 2025 Milestone milestone on Sep 10, 2025
2. BryonLewis commented on Sep 11, 2025

   

   BryonLewis

   on Sep 11, 2025

   Collaborator

   More actions

   Possibly utilize https://opengeoscience.github.io/geojs/tutorials/contour/ countours from GeoJS.
3. aashish24

   modified the milestones: September 2025 Milestone, October 2025 Milestone on Sep 30, 2025
4. aashish24

   self-assigned this

   on Sep 30, 2025
5. naglepuff commented on Oct 8, 2025

   

   naglepuff

   on Oct 8, 2025

   Last edited by naglepuff

   Collaborator

   More actions

   I've taken some time to see if SVG filters can be used to help here, especially if this is a presentation-only concern.

   For example, take this reference image of a spectrogram:

   

   Using contrast/Gaussian blur

   Not shown in the snippet below is the filter that applies the color scheme. Here is an example of applying Gaussian blur and then contrast to the image, blended with the original:

         <feGaussianBlur
           in="colorscheme"
           stdDeviation="1.5"
           result="blurred"
         />
         <!-- increase contrast for defined edges -->
         <feComponentTransfer
           in="blurred"
           result="contrasted"
         >
           <feFuncR
             type="linear"
             slope="1.2"
             intercept="-0.1"
           />
           <feFuncG
             type="linear"
             slope="1.2"
             intercept="-0.1"
           />
           <feFuncB
             type="linear"
             :slope="1.2"
             :intercept="-0.1"
           />
         </feComponentTransfer>
         <feBlend
           in="colorscheme"
           in2="contrasted"
           mode="overlay"
         />
   

   And here is the resultant image:

   

   Subjectively, the zoomed out image looks nicer/smoother to me. That might be mostly due to the noise reduction that's going on. Zoomed in on a single pulse, there's clearly still some blocky pixelation. I don't know if this filter removes any vital information for identifying bat species however.

   Using feConvolveMatrix

   This example uses a convolution matrix instead of the feGaussianBlur element. It similarly blends the blurred image with the original. Here's an example of the filter:

         <feConvolveMatrix
           in="colorscheme"
           out="blurred"
           :order="3"
           :kernelMatrix="
   1 1 1
   1 1 1
   1 1 1
           "
           :divisor="9"
         />
         <!-- blend for even more refined edges -->
         <feBlend
           in="colorscheme"
           in2="blurred"
           mode="overlay"
         />
   

   And the results:

   

   These filters, as well as a third option that combines the two, have been implemented in the spectro-smoothing branch. The filters are defined in the template of the LayerManager.vue component, and are applied to the quad feature in geoJSUtils.ts::useGeoJS::initializeViewer. See #251 for implementation details.
6. aashish24

   modified the milestones: October 2025 Milestone, November Milestones on Nov 6, 2025
7. naglepuff commented on Nov 13, 2025

   

   naglepuff

   on Nov 13, 2025

   Collaborator

   More actions

   See https://github.com/aashish24/contour_tools for a tool that uses marching squares to generate svg files for spectrogram contours.
8. aashish24

   assigned

   naglepuff

   and unassigned

   aashish24

   on Dec 11, 2025
9. aashish24

   modified the milestones: November Milestones, December milestone on Dec 11, 2025