Skip to content

Commit

Permalink
Feat: Intial dynamic addition of component to UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Grabt234
Grabt234 committed Nov 24, 2023
1 parent 6d4db97 commit bb03ec8
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 111 deletions.
125 changes: 61 additions & 64 deletions src/lib/SensorGroup.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
<script lang="ts" context="module">
<script lang="ts">
import Chart from 'chart.js/auto';

Check warning on line 2 in src/lib/SensorGroup.svelte

View workflow job for this annotation

GitHub Actions / lint 

'Chart' is defined but never used
// Time domain vars
export let timeSampleRate;
export let timeChunkSize;
// Define the props expected by SensorGroup
export let timeSampleRate: number = -1;

Check failure on line 5 in src/lib/SensorGroup.svelte

View workflow job for this annotation

GitHub Actions / lint 

Type number trivially inferred from a number literal, remove type annotation
export let timeChunkSize: number = -1;

Check failure on line 6 in src/lib/SensorGroup.svelte

View workflow job for this annotation

GitHub Actions / lint 

Type number trivially inferred from a number literal, remove type annotation
export let freqSampleRate: number = -1;

Check failure on line 7 in src/lib/SensorGroup.svelte

View workflow job for this annotation

GitHub Actions / lint 

Type number trivially inferred from a number literal, remove type annotation
export let freqChunkSize: number = -1;

Check failure on line 8 in src/lib/SensorGroup.svelte

View workflow job for this annotation

GitHub Actions / lint 

Type number trivially inferred from a number literal, remove type annotation
// Frequency domain vars
export let freqSampleRate;
export let freqChunkSize;
// export let TimeDomainChart;
// export let TimeDomainYValues = [0];
// export let TimeDomainXValues = [0];
// export let ctxTime;
export let TimeDomainChart;
export let TimeDomainYValues = [0];
export let TimeDomainXValues = [0];
export let ctxTime;
// export let FreqDomainChart;
// export let FreqDomainYValues = [0];
// export let FreqDomainXValues = [0];
// export let ctxFreq;
export let FreqDomainChart;
export let FreqDomainYValues = [0];
export let FreqDomainXValues = [0];
export let ctxFreq;
export function InitialiseTimeGraph() {
return (TimeDomainChart = new Chart(ctxTime, {
type: 'line',
data: {
labels: TimeDomainXValues,
datasets: [
{
data: TimeDomainYValues,
borderColor: 'red',
fill: false
}
]
},
options: {
legend: { display: false },
animation: {
// Disable animations
duration: 1 // Set the duration to 0 for all animations
}
}
}));
}
export function InitialiseFreqGraph() {
return (FreqDomainChart = new Chart(ctxFreq, {
type: 'line',
data: {
labels: FreqDomainXValues,
datasets: [
{
data: FreqDomainYValues,
borderColor: 'red',
fill: false
}
]
},
options: {
legend: { display: false },
animation: {
duration: 1
}
}
}));
}
// export function InitialiseTimeGraph() {
// return (TimeDomainChart = new Chart(ctxTime, {
// type: 'line',
// data: {
// labels: TimeDomainXValues,
// datasets: [
// {
// data: TimeDomainYValues,
// borderColor: 'red',
// fill: false
// }
// ]
// },
// options: {
// legend: { display: false },
// animation: {
// // Disable animations
// duration: 1 // Set the duration to 0 for all animations
// }
// }
// }));
// }
// export function InitialiseFreqGraph() {
// return (FreqDomainChart = new Chart(ctxFreq, {
// type: 'line',
// data: {
// labels: FreqDomainXValues,
// datasets: [
// {
// data: FreqDomainYValues,
// borderColor: 'red',
// fill: false
// }
// ]
// },
// options: {
// legend: { display: false },
// animation: {
// duration: 1
// }
// }
// }));
// }
</script>

<div class-="sensorGroup">
Expand All @@ -73,18 +70,18 @@
<p class="parameter">Sample Rate: {timeSampleRate}</p>
<p class="parameter">Chunk Size: {timeChunkSize}</p>
</div>
<div>
<!-- <div>
<canvas class="canvas" bind:this={TimeDomainChart} id="TimeDomainChart" />
</div>
</div> -->
</div>
<div class="graphGroup">
<div class="parameterContainer">
<p class="parameter">Sample Rate: {freqSampleRate}</p>
<p class="parameter">Chunk Size: {freqChunkSize}</p>
</div>
<div>
<!-- <div>
<canvas class="canvas" bind:this={FreqDomainChart} id="FreqDomainChart" />
</div>
</div> -->
</div>
</div>
</div>
Expand Down
121 changes: 74 additions & 47 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import Chart from 'chart.js/auto';

Check warning on line 2 in src/routes/+page.svelte

View workflow job for this annotation

GitHub Actions / lint 

'Chart' is defined but never used
import SensorGroup from '$lib/SensorGroup.svelte';
import { onMount } from 'svelte';
// Setting up of time domain plot
// let TimeDomainChart;
// let TimeDomainYValues = [0];
Expand All @@ -19,14 +20,25 @@
// export let freqSampleRate = 'X';
// export let freqChunkSize = 'X';
let sensorGroup = [
// $: sensorGroup = [];
// Define your sensorGroup array
let sensorGroup: {
timeSampleRate: number;
timeChunkSize: number;
freqSampleRate: number;
freqChunkSize: number;
}[] = [
{
timeSampleRate: 1000,
timeChunkSize: 512,
FreqDomainChart: SensorGroup.InitialiseTimeGraph(),
TimeDomainChart: SensorGroup.InitialiseFreqGraph()
freqSampleRate: 1000,
freqChunkSize: 512
}
// Add more objects as needed for multiple SensorGroup components
// ...
];
// Callback function used to connect to the websocket, retrieve data
// and update the time domain plot
$: {
Expand All @@ -40,46 +52,60 @@
// Create the time domain chart and link mount it to the HTML canvas
onMount(() => {
// const TimeWebSocket = new WebSocket('ws://localhost:10100/DataTypes/TimeChunk');
// let parsedData = null;
// let datasets = [];
// TimeWebSocket.addEventListener('message', async (event) => {
// // Check if parsed data exists, otherwise parse it once
// if (!parsedData) {
// const receivedMessage = event.data;
// parsedData = JSON.parse(receivedMessage);
// // Create datasets array
// const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];
// for (
// let channelIndex = 0;
// channelIndex < parsedData['TimeChunk']['NumChannels'];
// channelIndex++
// ) {
// const dataset = {
// labels: undefined,
// data: [],
// borderColor: colors[channelIndex],
// fill: false
// };
// datasets.push(dataset);
// }
// }
// const newData = JSON.parse(event.data)['TimeChunk']['Channels'];
// const numChannels = JSON.parse(event.data)['TimeChunk']['NumChannels'];
// for (let channelIndex = 0; channelIndex < numChannels; channelIndex++) {
// datasets[channelIndex].data = newData[channelIndex];
// }
// // Update chart data efficiently
// TimeDomainChart.data.datasets = datasets;
// TimeDomainChart.data.labels = Array.from({ length: 512 }, (_, index) => index + 1);
// TimeDomainChart.update();
// if (timeSampleRate !== JSON.parse(event.data)['TimeChunk']['SampleRate']) {
// timeSampleRate = JSON.parse(event.data)['TimeChunk']['SampleRate'];
// }
// if (timeChunkSize !== JSON.parse(event.data)['TimeChunk']['ChunkSize']) {
// timeChunkSize = JSON.parse(event.data)['TimeChunk']['ChunkSize'];
// }
// });
const TimeWebSocket = new WebSocket('ws://localhost:10100/DataTypes/TimeChunk');
let parsedData = null;
let datasets = [];
// sensorGroup = [
// ...sensorGroup,
// {
// timeSampleRate: 1000,
// timeChunkSize: 512,
// freqSampleRate: 1000,
// freqChunkSize: 512
// }
// ];
// console.log(sensorGroup);
TimeWebSocket.addEventListener('message', async (event) => {
// Check if parsed data exists, otherwise parse it once
if (!parsedData) {
const receivedMessage = event.data;
parsedData = JSON.parse(receivedMessage);
// Create datasets array
const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];
for (
let channelIndex = 0;
channelIndex < parsedData['TimeChunk']['NumChannels'];
channelIndex++
) {
const dataset = {
labels: undefined,
data: [],
borderColor: colors[channelIndex],
fill: false
};
datasets.push(dataset);
}
}
// const newData = JSON.parse(event.data)['TimeChunk']['Channels'];
// const numChannels = JSON.parse(event.data)['TimeChunk']['NumChannels'];
// for (let channelIndex = 0; channelIndex < numChannels; channelIndex++) {
// datasets[channelIndex].data = newData[channelIndex];
// }
// // Update chart data efficiently
// TimeDomainChart.data.datasets = datasets;
// TimeDomainChart.data.labels = Array.from({ length: 512 }, (_, index) => index + 1);
// TimeDomainChart.update();
// if (timeSampleRate !== JSON.parse(event.data)['TimeChunk']['SampleRate']) {
// timeSampleRate = JSON.parse(event.data)['TimeChunk']['SampleRate'];
// }
// if (timeChunkSize !== JSON.parse(event.data)['TimeChunk']['ChunkSize']) {
// timeChunkSize = JSON.parse(event.data)['TimeChunk']['ChunkSize'];
// }
});
// const FreqWebSocket = new WebSocket('ws://localhost:10100/DataTypes/FFTMagnitudeChunk');
// let FreqParsedData = null;
// let freqDatasets = [];
Expand Down Expand Up @@ -150,10 +176,11 @@
</svelte:head>

<div>
<div id="sensors" />
{#each sensorGroup as sensor}
<sensorGroup {...sensor} />
{/each}
<div id="sensors">
{#each sensorGroup as sensor}
<SensorGroup {...sensor} />
{/each}
</div>
</div>

<style>
Expand Down

0 comments on commit bb03ec8

Please sign in to comment.