Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-19 00:41:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamically import echarts and three.js (#2349)

Browse Source
This commit is contained in:
Gold856
2026-02-02 11:06:48 -05:00
committed by GitHub
parent 798b01c3a6
commit f4b30da6b3
5 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
photon-client/src/components/app/photon-3d-visualizer.vue
View File

@@ -44,7 +44,7 @@ let renderer: WebGLRenderer | undefined;
let controls: TrackballControls | undefined;
let previousTargets: Object3D[] = [];
const drawTargets = (targets: PhotonTarget[]) => {
const drawTargets = async (targets: PhotonTarget[]) => {
// Check here, since if we check in watchEffect this never gets called
if (!scene || !camera || !renderer || !controls) {
return;
@@ -89,7 +89,11 @@ const drawTargets = (targets: PhotonTarget[]) => {
if (calibrationCoeffs) {
// And show camera frustum
const calibCamera = createPerspectiveCamera(calibrationCoeffs.resolution, calibrationCoeffs.cameraIntrinsics, 10);
const calibCamera = await createPerspectiveCamera(
calibrationCoeffs.resolution,
calibrationCoeffs.cameraIntrinsics,
10
);
const helper = new CameraHelper(calibCamera);
const helperGroup = new Group();
helperGroup.add(helper);

4
photon-client/src/components/app/photon-calibration-visualizer.vue
View File

@@ -65,7 +65,7 @@ const createChessboard = (obs: BoardObservation, cal: CameraCalibrationResult):
let previousTargets: Object3D[] = [];
let baseAspect: number | undefined;
const drawCalibration = (cal: CameraCalibrationResult | null) => {
const drawCalibration = async (cal: CameraCalibrationResult | null) => {
// Check here, since if we check in watchEffect this never gets called
if (!cal || !scene || !camera || !renderer || !controls) {
return;
@@ -95,7 +95,7 @@ const drawCalibration = (cal: CameraCalibrationResult | null) => {
});
// And show camera frustum
const calibCamera = createPerspectiveCamera(props.resolution, cal.cameraIntrinsics);
const calibCamera = await createPerspectiveCamera(props.resolution, cal.cameraIntrinsics);
const helper = new CameraHelper(calibCamera);
// Flip to +Z forward

24
photon-client/src/components/settings/DeviceCard.vue
View File

@@ -376,21 +376,33 @@ watch(metricsHistorySnapshot, () => {
<span>CPU Usage</span>
<span>{{ Math.round(cpuUsageData.at(-1)?.value ?? 0) }}%</span>
</div>
<MetricsChart id="chart" :data="cpuUsageData" type="percentage" :min="0" :max="100" color="blue" />
<Suspense>
<!-- Allows us to import echarts when it's actually needed -->
<MetricsChart id="chart" :data="cpuUsageData" type="percentage" :min="0" :max="100" color="blue" />
<template #fallback> Loading... </template>
</Suspense>
</v-card-text>
<v-card-text class="pt-0 flex-0-0 pb-2">
<div class="d-flex justify-space-between pb-3 pt-3">
<span>CPU Memory Usage</span>
<span>{{ Math.round(cpuMemoryUsageData.at(-1)?.value ?? 0) }}%</span>
</div>
<MetricsChart id="chart" :data="cpuMemoryUsageData" type="percentage" :min="0" :max="100" color="purple" />
<Suspense>
<!-- Allows us to import echarts when it's actually needed -->
<MetricsChart id="chart" :data="cpuMemoryUsageData" type="percentage" :min="0" :max="100" color="purple" />
<template #fallback> Loading... </template>
</Suspense>
</v-card-text>
<v-card-text class="pt-0 flex-0-0 pb-2">
<div class="d-flex justify-space-between pb-3 pt-3">
<span>CPU Temperature</span>
<span>{{ cpuTempData.at(-1)?.value == -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
</div>
<MetricsChart id="chart" :data="cpuTempData" type="temperature" color="red" />
<Suspense>
<!-- Allows us to import echarts when it's actually needed -->
<MetricsChart id="chart" :data="cpuTempData" type="temperature" color="red" />
<template #fallback> Loading... </template>
</Suspense>
</v-card-text>
<v-card-text class="pt-0 flex-0-0">
<div class="d-flex justify-space-between pb-3 pt-3">
@@ -404,7 +416,11 @@ watch(metricsHistorySnapshot, () => {
>{{ networkUsageData.at(-1)?.value == -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3) }} Mb/s</span
>
</div>
<MetricsChart id="chart" :data="networkUsageData" type="mb" :min="0" :max="10" color="green" />
<Suspense>
<!-- Allows us to import echarts when it's actually needed -->
<MetricsChart id="chart" :data="networkUsageData" type="mb" :min="0" :max="10" color="green" />
<template #fallback> Loading... </template>
</Suspense>
</v-card-text>
</v-card>
</v-col>

4
photon-client/src/components/settings/MetricsChart.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, onBeforeUnmount, watch } from "vue";
import { useTheme } from "vuetify";
@@ -198,7 +197,8 @@ const props = defineProps<{
color?: string;
}>();
onMounted(() => {
onMounted(async () => {
const echarts = await import("echarts");
chart = echarts.init(chartRef.value);
chart.setOption(getOptions(props.data));

5
photon-client/src/lib/ThreeUtils.ts
View File

@@ -1,5 +1,5 @@
import type { JsonMatOfDouble, Resolution } from "@/types/SettingTypes";
const { PerspectiveCamera } = await import("three");
const three = import("three");
/**
* Convert a camera intrinsics matrix and image resolution to a Three.js PerspectiveCamera. This assumes no skew and square pixels (same focal length in x and y), which is a sane assumption for most FRC cameras
@@ -8,11 +8,12 @@ const { PerspectiveCamera } = await import("three");
* @param intrinsicsCore camera intrinsics from the backend, row-major
* @returns a Three.js PerspectiveCamera matching the provided intrinsics
*/
export const createPerspectiveCamera = (
export const createPerspectiveCamera = async (
resolution: Resolution,
intrinsicsCore: JsonMatOfDouble,
frustumMax: number = 1
) => {
const { PerspectiveCamera } = await three;
const imageWidth = resolution.width;
const imageHeight = resolution.height;
const focalLengthY = intrinsicsCore.data[4];