✨ Adds heading chart
This commit is contained in:
Rune Harlyk
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
heading?: number
|
||||
size?: string
|
||||
}
|
||||
|
||||
let { heading = 0, size = 'w-48 h-48' }: Props = $props()
|
||||
|
||||
const getCardinalDirection = (h: number) => {
|
||||
if (h >= 337.5 || h < 22.5) return 'N'
|
||||
if (h >= 22.5 && h < 67.5) return 'NE'
|
||||
if (h >= 67.5 && h < 112.5) return 'E'
|
||||
if (h >= 112.5 && h < 157.5) return 'SE'
|
||||
if (h >= 157.5 && h < 202.5) return 'S'
|
||||
if (h >= 202.5 && h < 247.5) return 'SW'
|
||||
if (h >= 247.5 && h < 292.5) return 'W'
|
||||
return 'NW'
|
||||
}
|
||||
|
||||
const ticks = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative {size}">
|
||||
<svg viewBox="0 0 200 200" class="w-full h-full">
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="90"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
class="opacity-30"
|
||||
/>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="70"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
class="opacity-20"
|
||||
/>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="50"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
class="opacity-20"
|
||||
/>
|
||||
|
||||
<text x="100" y="20" text-anchor="middle" class="fill-current text-sm font-bold">N</text>
|
||||
<text x="180" y="105" text-anchor="middle" class="fill-current text-sm font-bold">E</text>
|
||||
<text x="100" y="190" text-anchor="middle" class="fill-current text-sm font-bold">S</text>
|
||||
<text x="20" y="105" text-anchor="middle" class="fill-current text-sm font-bold">W</text>
|
||||
|
||||
{#each ticks as tick}
|
||||
<line
|
||||
x1={100 + 85 * Math.sin((tick * Math.PI) / 180)}
|
||||
y1={100 - 85 * Math.cos((tick * Math.PI) / 180)}
|
||||
x2={100 + 78 * Math.sin((tick * Math.PI) / 180)}
|
||||
y2={100 - 78 * Math.cos((tick * Math.PI) / 180)}
|
||||
stroke="currentColor"
|
||||
stroke-width={tick % 90 === 0 ? 2 : 1}
|
||||
class="opacity-50"
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<g transform="rotate({heading}, 100, 100)">
|
||||
<polygon points="100,25 93,100 100,90 107,100" class="fill-error" />
|
||||
<polygon points="100,175 93,100 100,110 107,100" class="fill-base-300" />
|
||||
</g>
|
||||
|
||||
<circle cx="100" cy="100" r="8" class="fill-base-content" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-2xl font-mono font-bold mt-2">{heading.toFixed(1)}°</div>
|
||||
<div class="text-sm opacity-70">{getCardinalDirection(heading)}</div>
|
||||
</div>
|
||||
@@ -1,11 +1,12 @@
|
||||
<script lang="ts">
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte'
|
||||
import Compass from '$lib/components/Compass.svelte'
|
||||
import { imu } from '$lib/stores/imu'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { cubicOut } from 'svelte/easing'
|
||||
import { slide } from 'svelte/transition'
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { socket } from '$lib/stores'
|
||||
import { socket, mpu } from '$lib/stores'
|
||||
import { useFeatureFlags } from '$lib/stores/featureFlags'
|
||||
import { Rotate3d } from '$lib/components/icons'
|
||||
|
||||
@@ -21,10 +22,12 @@
|
||||
let angleChartElement: HTMLCanvasElement = $state()!
|
||||
let tempChartElement: HTMLCanvasElement = $state()!
|
||||
let altitudeChartElement: HTMLCanvasElement = $state()!
|
||||
let headingChartElement: HTMLCanvasElement = $state()!
|
||||
|
||||
let angleChart: Chart
|
||||
let tempChart: Chart
|
||||
let altitudeChart: Chart
|
||||
let headingChart: Chart
|
||||
|
||||
const getChartColors = () => {
|
||||
const style = getComputedStyle(document.body)
|
||||
@@ -180,6 +183,41 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (headingChartElement) {
|
||||
headingChart = new Chart(headingChartElement, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Heading',
|
||||
borderColor: colors.accent,
|
||||
backgroundColor: colors.accent,
|
||||
borderWidth: 2,
|
||||
data: $imu.map(datapoint => datapoint.heading),
|
||||
yAxisID: 'y'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...baseConfig,
|
||||
scales: {
|
||||
...baseConfig.scales,
|
||||
y: {
|
||||
...baseConfig.scales.y,
|
||||
min: 0,
|
||||
max: 360,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Heading [°]',
|
||||
color: colors.background,
|
||||
font: { size: 16, weight: 'bold' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const updateChartData = (chart: Chart, data: number[]) => {
|
||||
@@ -217,6 +255,17 @@
|
||||
$imu.map(datapoint => datapoint.altitude)
|
||||
)
|
||||
}
|
||||
|
||||
if ($features.mag && headingChart) {
|
||||
const headingData = $imu.map(datapoint => datapoint.heading)
|
||||
headingChart.data.labels = headingData
|
||||
headingChart.data.datasets[0].data = headingData
|
||||
headingChart.update('none')
|
||||
|
||||
if ($imu.length > 0) {
|
||||
mpu.set({ heading: $imu[$imu.length - 1].heading })
|
||||
}
|
||||
}
|
||||
}
|
||||
onMount(() => {
|
||||
imu.listen()
|
||||
@@ -284,7 +333,23 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $features.mag}
|
||||
<div class="divider">Magnetometer</div>
|
||||
<div class="flex flex-col lg:flex-row gap-4 items-center">
|
||||
<Compass heading={$mpu.heading} />
|
||||
<div class="flex-1 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={headingChartElement}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $features.bmp}
|
||||
<div class="divider">Barometer</div>
|
||||
<div class="w-full overflow-x-auto">
|
||||
<div
|
||||
class="flex w-full flex-col space-y-1 h-60"
|
||||
|
||||
Reference in New Issue
Block a user