mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
Working spectrum in grid
This commit is contained in:
parent
db579504f0
commit
e6782b6aac
4 changed files with 33 additions and 45 deletions
|
@ -274,14 +274,16 @@ Spectrum.prototype.updateSpectrumRatio = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
Spectrum.prototype.resize = 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
|
// little helper for setting height of clientHeight is not working as expected
|
||||||
if (height == 0){
|
if (height == 0){
|
||||||
var height = 250
|
var height = 250
|
||||||
|
|
||||||
}
|
}
|
||||||
|
if (width == 0){
|
||||||
|
width=500;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.canvas.width != width || this.canvas.height != height) {
|
if (this.canvas.width != width || this.canvas.height != height) {
|
||||||
this.canvas.width = width;
|
this.canvas.width = width;
|
||||||
|
@ -473,7 +475,7 @@ export function Spectrum(id, options) {
|
||||||
|
|
||||||
// Create main canvas and adjust dimensions to match actual
|
// Create main canvas and adjust dimensions to match actual
|
||||||
this.canvas = document.getElementById(id);
|
this.canvas = document.getElementById(id);
|
||||||
|
this.parent = this.canvas.parentElement;
|
||||||
this.canvas.height = this.canvas.clientHeight;
|
this.canvas.height = this.canvas.clientHeight;
|
||||||
this.canvas.width = this.canvas.clientWidth;
|
this.canvas.width = this.canvas.clientWidth;
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// @ts-nocheck
|
// @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
|
// 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 { setActivePinia } from "pinia";
|
||||||
import pinia from "../store/index";
|
import pinia from "../store/index";
|
||||||
setActivePinia(pinia);
|
setActivePinia(pinia);
|
||||||
|
@ -22,7 +22,7 @@ import {
|
||||||
Legend,
|
Legend,
|
||||||
} from "chart.js";
|
} from "chart.js";
|
||||||
import { Line, Scatter } from "vue-chartjs";
|
import { Line, Scatter } from "vue-chartjs";
|
||||||
import { computed } from "vue";
|
import { computed, onMounted } from "vue";
|
||||||
|
|
||||||
function selectStatsControl(obj) {
|
function selectStatsControl(obj) {
|
||||||
switch (obj.delegateTarget.id) {
|
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
|
// This code will be executed after the component is mounted to the DOM
|
||||||
// You can access DOM elements or perform other initialization here
|
// You can access DOM elements or perform other initialization here
|
||||||
//const myElement = this.$refs.waterfall; // Access the DOM element with ref
|
//const myElement = this.$refs.waterfall; // Access the DOM element with ref
|
||||||
|
|
||||||
// init waterfall
|
// init waterfall
|
||||||
initWaterfall();
|
localSpectrum = initWaterfall("waterfall-grid");
|
||||||
},
|
window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false);
|
||||||
};
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100" >
|
<div class="card h-100" >
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="">
|
|
||||||
<div class="">
|
|
||||||
<div class="">
|
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
<div
|
<div
|
||||||
class="list-group bg-body-tertiary list-group-horizontal"
|
class="list-group bg-body-tertiary list-group-horizontal"
|
||||||
|
@ -331,16 +324,13 @@ export default {
|
||||||
data
|
data
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body w-100 h-100 overflow-auto">
|
<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
|
<div
|
||||||
class="tab-pane fade"
|
class="tab-pane fade h-100 w-100"
|
||||||
v-bind:class="{
|
v-bind:class="{
|
||||||
'show active': settings.local.spectrum === 'waterfall',
|
'show active': settings.local.spectrum === 'waterfall',
|
||||||
}"
|
}"
|
||||||
|
@ -349,10 +339,8 @@ export default {
|
||||||
aria-labelledby="list-waterfall-list"
|
aria-labelledby="list-waterfall-list"
|
||||||
>
|
>
|
||||||
<canvas
|
<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>
|
></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -170,7 +170,7 @@ const scatterChartData = computed(() => ({
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { initWaterfall } from "../js/waterfallHandler.js";
|
import { initWaterfall } from "../js/waterfallHandler.js";
|
||||||
|
var localSpectrum;
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
// This code will be executed after the component is mounted to the DOM
|
// 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
|
//const myElement = this.$refs.waterfall; // Access the DOM element with ref
|
||||||
|
|
||||||
// init waterfall
|
// init waterfall
|
||||||
initWaterfall();
|
localSpectrum = initWaterfall("waterfall-main");
|
||||||
|
window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -359,10 +360,10 @@ export default {
|
||||||
aria-labelledby="list-waterfall-list"
|
aria-labelledby="list-waterfall-list"
|
||||||
>
|
>
|
||||||
<canvas
|
<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>
|
></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -8,22 +8,19 @@ import { settingsStore as settings } from "../store/settingsStore.js";
|
||||||
|
|
||||||
var spectrum = new Object();
|
var spectrum = new Object();
|
||||||
|
|
||||||
export function initWaterfall() {
|
export function initWaterfall(id) {
|
||||||
spectrum = new Spectrum("waterfall", {
|
spectrum = new Spectrum(id, {
|
||||||
spectrumPercent: 0,
|
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) {
|
export function addDataToWaterfall(data) {
|
||||||
data = JSON.parse(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
|
* Setwaterfall colormap array by index
|
||||||
* @param {number} index colormap index to use
|
* @param {number} index colormap index to use
|
||||||
|
|
Loading…
Reference in a new issue