Working spectrum in grid

gui/src/assets/waterfall/spectrum.js

@@ -274,14 +274,16 @@ Spectrum.prototype.updateSpectrumRatio = function () {
 };
 
 Spectrum.prototype.resize = function () {
-  var width = this.canvas.clientWidth;
+  var width = this.parent.clientWidth;
-  var height = this.canvas.clientHeight;
+  var height =this.parent.clientHeight;
   // little helper for setting height of clientHeight is not working as expected
   if (height == 0){
     var height = 250
 
   }
-
+  if (width == 0){
+    width=500;
+  }
 
   if (this.canvas.width != width || this.canvas.height != height) {
     this.canvas.width = width;
@@ -473,7 +475,7 @@ export function Spectrum(id, options) {
 
   // Create main canvas and adjust dimensions to match actual
   this.canvas = document.getElementById(id);
-
+  this.parent = this.canvas.parentElement;
   this.canvas.height = this.canvas.clientHeight;
   this.canvas.width = this.canvas.clientWidth;
 

gui/src/components/grid_active_stats.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // @ts-nocheck
 // reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
-
+import { initWaterfall } from "../js/waterfallHandler.js";
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
@@ -22,7 +22,7 @@ import {
   Legend,
 } from "chart.js";
 import { Line, Scatter } from "vue-chartjs";
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 function selectStatsControl(obj) {
   switch (obj.delegateTarget.id) {
@@ -166,29 +166,22 @@ const scatterChartData = computed(() => ({
     },
   ],
 }));
-</script>
+var localSpectrum;
-
+onMounted(() => {
-<script lang="ts">
-import { initWaterfall } from "../js/waterfallHandler.js";
-
-export default {
-  mounted() {
     // This code will be executed after the component is mounted to the DOM
     // You can access DOM elements or perform other initialization here
     //const myElement = this.$refs.waterfall; // Access the DOM element with ref
 
     // init waterfall
-    initWaterfall();
+  localSpectrum = initWaterfall("waterfall-grid");
-  },
+  window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false);
-};
+});
+
 </script>
 
 <template>
   <div class="card h-100" >
     <div class="card-header">
-      <div class="">
-        <div class="">
-          <div class="">
             <div class="btn-group" role="group">
               <div
                 class="list-group bg-body-tertiary list-group-horizontal"
@@ -331,16 +324,13 @@ export default {
                 data
               </button>
             </div>
-          </div>
 
 
-        </div>
-      </div>
     </div>
     <div class="card-body w-100 h-100 overflow-auto">
-      <div class="tab-content" id="nav-stats-tabContent">
+      <div class="tab-content h-100 w-100" id="nav-stats-tabContent">
         <div
-          class="tab-pane fade"
+          class="tab-pane fade h-100 w-100"
           v-bind:class="{
             'show active': settings.local.spectrum === 'waterfall',
           }"
@@ -349,10 +339,8 @@ export default {
           aria-labelledby="list-waterfall-list"
         >
           <canvas
-            ref="waterfall"
+            id="waterfall-grid"
-            id="waterfall"
+            class="force-gpu"
-            style="position: relative; z-index: 2;width:100%; height: 100%;"
-            class="force-gpu h-100 w-100"
           ></canvas>
         </div>
         <div

gui/src/components/main_active_stats.vue

@@ -170,7 +170,7 @@ const scatterChartData = computed(() => ({
 
 <script lang="ts">
 import { initWaterfall } from "../js/waterfallHandler.js";
-
+var localSpectrum;
 export default {
   mounted() {
     // This code will be executed after the component is mounted to the DOM
@@ -178,7 +178,8 @@ export default {
     //const myElement = this.$refs.waterfall; // Access the DOM element with ref
 
     // init waterfall
-    initWaterfall();
+    localSpectrum = initWaterfall("waterfall-main");
+    window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false);
   },
 };
 </script>
@@ -359,10 +360,10 @@ export default {
           aria-labelledby="list-waterfall-list"
         >
           <canvas
-            ref="waterfall"
+            ref="waterfall-main"
-            id="waterfall"
+            id="waterfall-main"
-            style="position: relative; z-index: 2"
+            style="position: relative; z-index: 2;aspect-ratio:unset; width: 100%; height: 200px;"
-            class="force-gpu h-100 w-100"
+            class="force-gpu"
           ></canvas>
         </div>
         <div

gui/src/js/waterfallHandler.js

@@ -8,22 +8,19 @@ import { settingsStore as settings } from "../store/settingsStore.js";
 
 var spectrum = new Object();
 
-export function initWaterfall() {
+export function initWaterfall(id) {
-  spectrum = new Spectrum("waterfall", {
+    spectrum = new Spectrum(id, {
     spectrumPercent: 0,
-    wf_rows: 192, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container
+    wf_rows: 1024, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container
+    wf_size: 1024,
   });
-  setColormap(settings.local.wf_theme);
+  spectrum.setColorMap(settings.local.wf_theme);
+  return spectrum;
 }
 
 export function addDataToWaterfall(data) {
   data = JSON.parse(data);
-  try {
+  window.dispatchEvent(new CustomEvent("wf-data-avail", {detail: data}));}
-    spectrum.addData(data);
-  } catch (e) {
-    //console.log(e);
-  }
-}
 /**
  * Setwaterfall colormap array by index
  * @param {number} index colormap index to use
@@ -32,4 +29,4 @@ export function setColormap(index) {
   if (isNaN(index)) index = 0;
   //console.log("Setting waterfall colormap to " + index)
   spectrum.setColorMap(index);
-}
+}