🧃 Adds IMU orientations indicator
This commit is contained in:
Rune Harlyk
@@ -0,0 +1,78 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount, onDestroy } from 'svelte'
|
||||||
|
import * as THREE from 'three'
|
||||||
|
import { imu } from '$lib/stores/imu'
|
||||||
|
import SceneBuilder from '$lib/sceneBuilder'
|
||||||
|
|
||||||
|
let canvas: HTMLCanvasElement = $state()
|
||||||
|
let sceneBuilder: SceneBuilder
|
||||||
|
let cube: THREE.Mesh
|
||||||
|
let targetRotation = new THREE.Euler()
|
||||||
|
let lastUpdateTime = 0
|
||||||
|
const LERP_SPEED = 5 // rotations per second
|
||||||
|
|
||||||
|
const initThreeJS = () => {
|
||||||
|
sceneBuilder = new SceneBuilder()
|
||||||
|
.addRenderer({ canvas: canvas, antialias: true, alpha: true })
|
||||||
|
.addPerspectiveCamera({ x: 2, y: 0, z: 2 })
|
||||||
|
.addOrbitControls(1, 10, false)
|
||||||
|
.addAmbientLight({ color: 0x404040, intensity: 0.5 })
|
||||||
|
.addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
|
||||||
|
.fillParent()
|
||||||
|
|
||||||
|
const geometry = new THREE.BoxGeometry(1, 1, 1)
|
||||||
|
const material = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x00ff00,
|
||||||
|
transparent: true,
|
||||||
|
opacity: 0.8
|
||||||
|
})
|
||||||
|
cube = new THREE.Mesh(geometry, material)
|
||||||
|
sceneBuilder.scene.add(cube)
|
||||||
|
|
||||||
|
sceneBuilder.addRenderCb(() => {
|
||||||
|
if (!cube) return
|
||||||
|
const currentTime = performance.now()
|
||||||
|
const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
|
||||||
|
lastUpdateTime = currentTime
|
||||||
|
|
||||||
|
const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
|
||||||
|
cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
|
||||||
|
cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
|
||||||
|
cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
|
||||||
|
})
|
||||||
|
|
||||||
|
sceneBuilder.startRenderLoop()
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateOrientation = () => {
|
||||||
|
if (!cube) return
|
||||||
|
|
||||||
|
const y = -$imu.x[$imu.x.length - 1] || 0
|
||||||
|
const x = $imu.y[$imu.y.length - 1] || 0
|
||||||
|
const z = -$imu.z[$imu.z.length - 1] || 0
|
||||||
|
|
||||||
|
targetRotation.set(
|
||||||
|
THREE.MathUtils.degToRad(x),
|
||||||
|
THREE.MathUtils.degToRad(y),
|
||||||
|
THREE.MathUtils.degToRad(z)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
initThreeJS()
|
||||||
|
})
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
sceneBuilder?.renderer?.dispose()
|
||||||
|
})
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if ($imu) {
|
||||||
|
updateOrientation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="h-60 w-60 border-2 border-base-300 rounded-md">
|
||||||
|
<canvas class="w-full h-full" bind:this={canvas}></canvas>
|
||||||
|
</div>
|
||||||
@@ -1,310 +1,253 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SettingsCard from "$lib/components/SettingsCard.svelte";
|
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||||
import { imu } from '$lib/stores/imu';
|
import { imu } from '$lib/stores/imu'
|
||||||
import { Chart, registerables } from 'chart.js';
|
import { Chart, registerables } from 'chart.js'
|
||||||
import { cubicOut } from "svelte/easing";
|
import { cubicOut } from 'svelte/easing'
|
||||||
import { slide } from "svelte/transition";
|
import { slide } from 'svelte/transition'
|
||||||
import { onDestroy, onMount } from "svelte";
|
import { onDestroy, onMount } from 'svelte'
|
||||||
import { daisyColor } from "$lib/utilities";
|
import { socket } from '$lib/stores'
|
||||||
import { socket } from "$lib/stores";
|
import type { IMU } from '$lib/types/models'
|
||||||
import type { IMU } from "$lib/types/models";
|
import { useFeatureFlags } from '$lib/stores/featureFlags'
|
||||||
import { useFeatureFlags } from "$lib/stores/featureFlags";
|
import { Rotate3d } from '$lib/components/icons'
|
||||||
import { Rotate3d } from "$lib/components/icons";
|
|
||||||
|
|
||||||
const features = useFeatureFlags();
|
Chart.register(...registerables)
|
||||||
|
|
||||||
Chart.register(...registerables);
|
const features = useFeatureFlags()
|
||||||
|
let intervalId: number
|
||||||
|
|
||||||
let angleChartElement: HTMLCanvasElement = $state();
|
let angleChartElement: HTMLCanvasElement = $state()
|
||||||
let angleChart: Chart;
|
let tempChartElement: HTMLCanvasElement = $state()
|
||||||
|
let altitudeChartElement: HTMLCanvasElement = $state()
|
||||||
|
|
||||||
let tempChartElement: HTMLCanvasElement = $state();
|
let angleChart: Chart
|
||||||
let tempChart: Chart;
|
let tempChart: Chart
|
||||||
|
let altitudeChart: Chart
|
||||||
|
|
||||||
let altitudeChartElement: HTMLCanvasElement = $state();
|
const getChartColors = () => {
|
||||||
let altitudeChart: Chart;
|
const style = getComputedStyle(document.body)
|
||||||
|
return {
|
||||||
const handleImu = (data: IMU) => {
|
primary: style.getPropertyValue('--color-primary'),
|
||||||
console.log(data);
|
secondary: style.getPropertyValue('--color-secondary'),
|
||||||
|
accent: style.getPropertyValue('--color-accent'),
|
||||||
imu.addData(data);
|
background: style.getPropertyValue('--color-background')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
const createBaseChartConfig = (bgColor: string) => ({
|
||||||
socket.on('imu', handleImu);
|
maintainAspectRatio: false,
|
||||||
angleChart = new Chart(angleChartElement, {
|
responsive: true,
|
||||||
type: 'line',
|
plugins: {
|
||||||
data: {
|
legend: { display: true },
|
||||||
datasets: [
|
tooltip: { mode: 'index', intersect: false }
|
||||||
{
|
},
|
||||||
label: 'x',
|
elements: { point: { radius: 1 } },
|
||||||
borderColor: daisyColor('--p'),
|
scales: {
|
||||||
backgroundColor: daisyColor('--p', 50),
|
x: {
|
||||||
borderWidth: 2,
|
grid: { color: bgColor },
|
||||||
data: $imu.x,
|
ticks: { color: bgColor },
|
||||||
yAxisID: 'y'
|
display: false
|
||||||
},
|
},
|
||||||
{
|
y: {
|
||||||
label: 'y',
|
type: 'linear',
|
||||||
borderColor: daisyColor('--s'),
|
position: 'left',
|
||||||
backgroundColor: daisyColor('--s', 50),
|
min: 0,
|
||||||
borderWidth: 2,
|
max: 10,
|
||||||
data: $imu.y,
|
grid: { color: bgColor },
|
||||||
yAxisID: 'y'
|
ticks: { color: bgColor },
|
||||||
},
|
border: { color: bgColor }
|
||||||
{
|
}
|
||||||
label: 'z',
|
}
|
||||||
borderColor: daisyColor('--a'),
|
})
|
||||||
backgroundColor: daisyColor('--a', 50),
|
|
||||||
borderWidth: 2,
|
const initializeCharts = () => {
|
||||||
data: $imu.z,
|
const colors = getChartColors()
|
||||||
yAxisID: 'y'
|
const baseConfig = createBaseChartConfig(colors.background)
|
||||||
}
|
|
||||||
]
|
angleChart = new Chart(angleChartElement, {
|
||||||
},
|
type: 'line',
|
||||||
options: {
|
data: {
|
||||||
maintainAspectRatio: false,
|
datasets: [
|
||||||
responsive: true,
|
{
|
||||||
plugins: {
|
label: 'x',
|
||||||
legend: {
|
borderColor: colors.primary,
|
||||||
display: true
|
backgroundColor: colors.primary,
|
||||||
},
|
borderWidth: 2,
|
||||||
tooltip: {
|
data: $imu.x,
|
||||||
mode: 'index',
|
yAxisID: 'y'
|
||||||
intersect: false
|
},
|
||||||
}
|
{
|
||||||
},
|
label: 'y',
|
||||||
elements: {
|
borderColor: colors.secondary,
|
||||||
point: {
|
backgroundColor: colors.secondary,
|
||||||
radius: 1
|
borderWidth: 2,
|
||||||
}
|
data: $imu.y,
|
||||||
},
|
yAxisID: 'y'
|
||||||
scales: {
|
},
|
||||||
x: {
|
{
|
||||||
grid: {
|
label: 'z',
|
||||||
color: daisyColor('--bc', 10)
|
borderColor: colors.accent,
|
||||||
},
|
backgroundColor: colors.accent,
|
||||||
ticks: {
|
borderWidth: 2,
|
||||||
color: daisyColor('--bc')
|
data: $imu.z,
|
||||||
},
|
yAxisID: 'y'
|
||||||
display: false
|
}
|
||||||
},
|
]
|
||||||
y: {
|
},
|
||||||
type: 'linear',
|
options: {
|
||||||
title: {
|
...baseConfig,
|
||||||
display: true,
|
scales: {
|
||||||
text: 'Angle [°]',
|
...baseConfig.scales,
|
||||||
color: daisyColor('--bc'),
|
y: {
|
||||||
font: {
|
...baseConfig.scales.y,
|
||||||
size: 16,
|
title: {
|
||||||
weight: 'bold'
|
display: true,
|
||||||
}
|
text: 'Angle [°]',
|
||||||
},
|
color: colors.background,
|
||||||
position: 'left',
|
font: { size: 16, weight: 'bold' }
|
||||||
min: 0,
|
}
|
||||||
max: 10,
|
}
|
||||||
grid: { color: daisyColor('--bc', 10) },
|
}
|
||||||
ticks: { color: daisyColor('--bc') },
|
}
|
||||||
border: { color: daisyColor('--bc', 10) }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tempChart = new Chart(tempChartElement, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Barometer temperature',
|
|
||||||
borderColor: daisyColor('--s'),
|
|
||||||
backgroundColor: daisyColor('--s', 50),
|
|
||||||
borderWidth: 2,
|
|
||||||
data: $imu.bmp_temp,
|
|
||||||
yAxisID: 'y'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: true
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
color: daisyColor('--bc', 10)
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: daisyColor('--bc')
|
|
||||||
},
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
type: 'linear',
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Temperature [C°]',
|
|
||||||
color: daisyColor('--bc'),
|
|
||||||
font: {
|
|
||||||
size: 16,
|
|
||||||
weight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
position: 'left',
|
|
||||||
min: 0,
|
|
||||||
max: 10,
|
|
||||||
grid: { color: daisyColor('--bc', 10) },
|
|
||||||
ticks: { color: daisyColor('--bc') },
|
|
||||||
border: { color: daisyColor('--bc', 10) }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
altitudeChart = new Chart(altitudeChartElement, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Altitude',
|
|
||||||
borderColor: daisyColor('--p'),
|
|
||||||
backgroundColor: daisyColor('--p', 50),
|
|
||||||
borderWidth: 2,
|
|
||||||
data: $imu.altitude,
|
|
||||||
yAxisID: 'y'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: true
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
color: daisyColor('--bc', 10)
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: daisyColor('--bc')
|
|
||||||
},
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
type: 'linear',
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Altitude [M]',
|
|
||||||
color: daisyColor('--bc'),
|
|
||||||
font: {
|
|
||||||
size: 16,
|
|
||||||
weight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
position: 'left',
|
|
||||||
min: 0,
|
|
||||||
max: 10,
|
|
||||||
grid: { color: daisyColor('--bc', 10) },
|
|
||||||
ticks: { color: daisyColor('--bc') },
|
|
||||||
border: { color: daisyColor('--bc', 10) }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setInterval(() => {
|
|
||||||
updateData(), 200;
|
|
||||||
});
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onDestroy(() => {
|
tempChart = new Chart(tempChartElement, {
|
||||||
socket.off('imu', handleImu);
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Barometer temperature',
|
||||||
|
borderColor: colors.secondary,
|
||||||
|
backgroundColor: colors.secondary,
|
||||||
|
borderWidth: 2,
|
||||||
|
data: $imu.bmp_temp,
|
||||||
|
yAxisID: 'y'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
...baseConfig,
|
||||||
|
scales: {
|
||||||
|
...baseConfig.scales,
|
||||||
|
y: {
|
||||||
|
...baseConfig.scales.y,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Temperature [C°]',
|
||||||
|
color: colors.background,
|
||||||
|
font: { size: 16, weight: 'bold' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const updateData = () => {
|
altitudeChart = new Chart(altitudeChartElement, {
|
||||||
if ($features.imu) {
|
type: 'line',
|
||||||
angleChart.data.labels = $imu.x;
|
data: {
|
||||||
angleChart.data.datasets[0].data = $imu.x;
|
datasets: [
|
||||||
angleChart.data.datasets[1].data = $imu.y;
|
{
|
||||||
angleChart.data.datasets[2].data = $imu.z;
|
label: 'Altitude',
|
||||||
angleChart.options.scales!.y!.min = Math.min(Math.min(...$imu.x), Math.min(...$imu.y), Math.min(...$imu.z)) - 1;
|
borderColor: colors.primary,
|
||||||
angleChart.options.scales!.y!.max = Math.max(Math.max(...$imu.x), Math.max(...$imu.y), Math.max(...$imu.z)) + 1;
|
backgroundColor: colors.primary,
|
||||||
angleChart.update('none');
|
borderWidth: 2,
|
||||||
|
data: $imu.altitude,
|
||||||
|
yAxisID: 'y'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
...baseConfig,
|
||||||
|
scales: {
|
||||||
|
...baseConfig.scales,
|
||||||
|
y: {
|
||||||
|
...baseConfig.scales.y,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Altitude [M]',
|
||||||
|
color: colors.background,
|
||||||
|
font: { size: 16, weight: 'bold' }
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
if ($features.bmp) {
|
const updateChartData = (chart: Chart, data: number[], label: string) => {
|
||||||
tempChart.data.labels = $imu.bmp_temp;
|
chart.data.labels = data
|
||||||
tempChart.data.datasets[0].data = $imu.bmp_temp;
|
chart.data.datasets[0].data = data
|
||||||
tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
|
chart.options.scales!.y!.min = Math.min(...data) - 1
|
||||||
tempChart.options.scales!.y!.max = Math.max(...$imu.bmp_temp) + 1;
|
chart.options.scales!.y!.max = Math.max(...data) + 1
|
||||||
tempChart.update('none');
|
chart.update('none')
|
||||||
|
}
|
||||||
|
|
||||||
altitudeChart.data.labels = $imu.altitude;
|
const updateData = () => {
|
||||||
altitudeChart.data.datasets[0].data = $imu.altitude;
|
if ($features.imu) {
|
||||||
altitudeChart.options.scales!.y!.min = Math.min(Math.min(...$imu.altitude)) - 1;
|
angleChart.data.labels = $imu.x
|
||||||
altitudeChart.options.scales!.y!.max = Math.max(Math.max(...$imu.altitude)) + 1;
|
angleChart.data.datasets[0].data = $imu.x
|
||||||
altitudeChart.update('none');
|
angleChart.data.datasets[1].data = $imu.y
|
||||||
}
|
angleChart.data.datasets[2].data = $imu.z
|
||||||
|
|
||||||
|
const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
|
||||||
|
angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
|
||||||
|
angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
|
||||||
|
angleChart.update('none')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ($features.bmp) {
|
||||||
|
updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
|
||||||
|
updateChartData(altitudeChart, $imu.altitude, 'Altitude')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
socket.on('imu', (data: IMU) => {
|
||||||
|
console.log(data)
|
||||||
|
imu.addData(data)
|
||||||
|
})
|
||||||
|
|
||||||
|
initializeCharts()
|
||||||
|
intervalId = setInterval(updateData, 200)
|
||||||
|
})
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
socket.off('imu')
|
||||||
|
clearInterval(intervalId)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SettingsCard collapsible={false}>
|
<SettingsCard collapsible={false}>
|
||||||
{#snippet icon()}
|
{#snippet icon()}
|
||||||
<Rotate3d class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
<Rotate3d class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||||
{/snippet}
|
{/snippet}
|
||||||
{#snippet title()}
|
{#snippet title()}
|
||||||
<span >IMU</span>
|
<span>IMU</span>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
{#if $features.imu}
|
|
||||||
<div class="w-full overflow-x-auto">
|
{#if $features.imu}
|
||||||
<div
|
<div class="w-full overflow-x-auto">
|
||||||
class="flex w-full flex-col space-y-1 h-60"
|
<div
|
||||||
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
class="flex w-full flex-col space-y-1 h-60"
|
||||||
>
|
transition:slide|local={{ duration: 300, easing: cubicOut }}>
|
||||||
<canvas bind:this={angleChartElement}></canvas>
|
<canvas bind:this={angleChartElement}></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if $features.bmp}
|
|
||||||
<div class="w-full overflow-x-auto">
|
|
||||||
<div
|
|
||||||
class="flex w-full flex-col space-y-1 h-60"
|
|
||||||
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
|
||||||
>
|
|
||||||
<canvas bind:this={tempChartElement}></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full overflow-x-auto">
|
|
||||||
<div
|
|
||||||
class="flex w-full flex-col space-y-1 h-60"
|
|
||||||
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
|
||||||
>
|
|
||||||
<canvas bind:this={altitudeChartElement}></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<!-- <IMUSetting /> -->
|
|
||||||
|
{#if $features.bmp}
|
||||||
|
<div class="w-full overflow-x-auto">
|
||||||
|
<div
|
||||||
|
class="flex w-full flex-col space-y-1 h-60"
|
||||||
|
transition:slide|local={{ duration: 300, easing: cubicOut }}>
|
||||||
|
<canvas bind:this={tempChartElement}></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full overflow-x-auto">
|
||||||
|
<div
|
||||||
|
class="flex w-full flex-col space-y-1 h-60"
|
||||||
|
transition:slide|local={{ duration: 300, easing: cubicOut }}>
|
||||||
|
<canvas bind:this={altitudeChartElement}></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</SettingsCard>
|
</SettingsCard>
|
||||||
Reference in New Issue
Block a user