diff --git a/docs/system/status.md b/docs/system/status.md
index ba0cfd49..194f32f9 100644
--- a/docs/system/status.md
+++ b/docs/system/status.md
@@ -2,7 +2,7 @@
-* π **Performance**: loops per second: nr of times main loop is executed
+* π **Performance**: loops per second: for effects, for drivers and overall. π Effects and drivers is the theoretical speed, if nothing else runs. overall lps is the really measured overall speed.
* π **Safe Mode**: After a crash, the device will start in Safe Mode disabling possible causes of crashes. See also [MoonLight](https://moonmodules.org/MoonLight/moonlight/overview/). In case of safe mode, the statusbar will show a shield: π‘οΈ. Try to find the reason of the crash and correct and restart the device. If no crash, it will go out of safe mode.
* π **Firmware Target**: Which firmware has been installed, see [MoonLight Installer](https://moonmodules.org/MoonLight/gettingstarted/installer/)
* π **Firmware Date**: What is the date the firmware is created (format YYYYMMDDHH)
diff --git a/interface/src/lib/components/moonbase/FieldRenderer.svelte b/interface/src/lib/components/moonbase/FieldRenderer.svelte
index 9669576e..c1dfb06e 100644
--- a/interface/src/lib/components/moonbase/FieldRenderer.svelte
+++ b/interface/src/lib/components/moonbase/FieldRenderer.svelte
@@ -13,6 +13,7 @@
+
+
+
+ {#if open}
+
+
+
+
+
+
+ {#if hasCategoryRow}
+
+
+ {#each categories as cat (cat)}
+
+ {/each}
+
+ {/if}
+
+ {#if hasTagRow}
+
+ {#each tags as tag (tag)}
+
+ {/each}
+
+ {/if}
+
+ {#each filtered as val (val._sd_idx)}
+
+ {/each}
+ {#if filtered.length === 0}
+
No matches
+ {/if}
+
+ {/if}
+
diff --git a/interface/src/lib/stores/analytics.ts b/interface/src/lib/stores/analytics.ts
index e029dca8..cca5fa26 100644
--- a/interface/src/lib/stores/analytics.ts
+++ b/interface/src/lib/stores/analytics.ts
@@ -11,7 +11,9 @@ let analytics_data = {
fs_used: [],
fs_total: [],
core_temp: [],
- lps: [], // π
+ lps_all: [], // π
+ lps_effects: [], // π
+ lps_drivers: [], // π
free_psram: [],
used_psram: [],
psram_size: [],
@@ -42,7 +44,9 @@ function createAnalytics() {
fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
- lps: [...analytics_data.lps, content.lps].slice(-maxAnalyticsData), // π
+ lps_all: [...analytics_data.lps_all, content.lps_all].slice(-maxAnalyticsData), // π
+ lps_effects: [...analytics_data.lps_effects, content.lps_effects].slice(-maxAnalyticsData), // π
+ lps_drivers: [...analytics_data.lps_drivers, content.lps_drivers].slice(-maxAnalyticsData), // π
free_psram: [...analytics_data.free_psram, content.free_psram / 1000].slice(-maxAnalyticsData),
used_psram: [...analytics_data.used_psram, content.used_psram / 1000].slice(-maxAnalyticsData),
psram_size: [...analytics_data.psram_size, content.psram_size / 1000].slice(-maxAnalyticsData),
diff --git a/interface/src/lib/stores/moonbase_utilities.ts b/interface/src/lib/stores/moonbase_utilities.ts
index a1378a26..5c7dda1b 100644
--- a/interface/src/lib/stores/moonbase_utilities.ts
+++ b/interface/src/lib/stores/moonbase_utilities.ts
@@ -23,6 +23,54 @@ export function initCap(s: string) {
return result;
}
+/**
+ * Positions a fixed dropdown list relative to a trigger button, scrolling to the selected item.
+ * Reused by palette dropdown and selectFile (node selector) dropdown.
+ */
+export function positionDropdown(
+ triggerEl: HTMLElement,
+ listEl: HTMLElement,
+ selectedSelector: string = '[aria-selected="true"]'
+) {
+ const triggerRect = triggerEl.getBoundingClientRect();
+ const vh = window.innerHeight;
+
+ listEl.style.position = 'fixed';
+ listEl.style.top = '-9999px';
+ listEl.style.left = `${triggerRect.left}px`;
+ listEl.style.maxHeight = `${vh}px`;
+ void listEl.offsetHeight; // force reflow
+
+ const selectedEl = listEl.querySelector(selectedSelector) as HTMLElement | null;
+
+ if (selectedEl) {
+ const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+ const idealTop = triggerCenterY - selectedEl.offsetTop - selectedEl.offsetHeight / 2;
+ const clampedTop = Math.max(4, idealTop);
+ const naturalBottom = idealTop + listEl.scrollHeight;
+ const clampedBottom = Math.min(vh - 4, naturalBottom);
+ listEl.style.top = `${clampedTop}px`;
+ listEl.style.maxHeight = `${clampedBottom - clampedTop}px`;
+ listEl.scrollTop = Math.max(
+ 0,
+ clampedTop + selectedEl.offsetTop + selectedEl.offsetHeight / 2 - triggerCenterY
+ );
+ } else {
+ listEl.style.top = `${triggerRect.bottom + 2}px`;
+ listEl.style.maxHeight = `${vh - triggerRect.bottom - 8}px`;
+ }
+}
+
+/**
+ * Extracts unique emoji characters from a string. Used for tag cloud in node selector.
+ */
+export function extractEmojis(text: string): string[] {
+ const emojiRegex =
+ /[\p{Emoji_Presentation}\p{Extended_Pictographic}]\uFE0F?(\u200D[\p{Emoji_Presentation}\p{Extended_Pictographic}]\uFE0F?)*/gu;
+ const matches = text.match(emojiRegex);
+ return matches ? [...new Set(matches)] : [];
+}
+
export function getTimeAgo(timestamp: number, currentTime: number = Date.now()): string {
const diff = Math.abs(currentTime - timestamp * 1000); // Convert seconds to milliseconds (abs to avoid -1)
diff --git a/interface/src/lib/types/models.ts b/interface/src/lib/types/models.ts
index e9d9a455..72536543 100644
--- a/interface/src/lib/types/models.ts
+++ b/interface/src/lib/types/models.ts
@@ -98,7 +98,9 @@ export type Analytics = {
fs_total: number;
fs_used: number;
uptime: number;
- lps: number; // π
+ lps_all: number; // π
+ lps_effects: number; // π
+ lps_drivers: number; // π
};
export type RSSI = {
diff --git a/interface/src/routes/moonbase/module/Module.svelte b/interface/src/routes/moonbase/module/Module.svelte
index 9edee52f..37222b67 100644
--- a/interface/src/routes/moonbase/module/Module.svelte
+++ b/interface/src/routes/moonbase/module/Module.svelte
@@ -12,6 +12,7 @@
import RowRenderer from '$src/lib/components/moonbase/RowRenderer.svelte';
import { initCap } from '$lib/stores/moonbase_utilities';
import type { ModuleProperty, ModuleData } from '$lib/types/moonbase_models';
+ import { updateRecursive } from './module';
let definition: ModuleProperty[] = $state([]);
let data: ModuleData = $state({});
@@ -118,85 +119,6 @@
}
}
- function updateRecursive(
- oldData: Record,
- newData: Record,
- pruneMissing = false
- ) {
- //loop over properties
- for (let key in newData) {
- // if (typeof newData[key] != 'object') {
- // if (newData[key] != oldData[key]) {
- // // console.log("updateRecursive", key, newData[key], oldData[key]);
- // oldData[key] = newData[key]; //trigger reactiveness
- // }
- // } else {
- if (Array.isArray(newData[key])) {
- //loop over array
- if (!Array.isArray(oldData[key])) oldData[key] = []; //normalize to array
- const oldArr = oldData[key] as unknown[];
- const newArr = newData[key] as unknown[];
- for (let i = 0; i < newArr.length; i++) {
- if (oldArr[i] == undefined) {
- // console.log("add row", key, i, newArr[i]);
- oldArr[i] = newArr[i]; //create new row if not existed, trigger reactiveness
- } else {
- // console.log("change row", key, i, oldArr[i], newArr[i]);
- const oldItem = oldArr[i];
- const newItem = newArr[i];
- const bothObjects =
- oldItem !== null &&
- typeof oldItem === 'object' &&
- newItem !== null &&
- typeof newItem === 'object';
- if (bothObjects) {
- const oldObj = oldItem as Record;
- const newObj = newItem as Record;
- // If 'p' or 'name' changed, this is a different control in the same slot β replace entirely
- if (
- (newObj.p !== undefined && oldObj.p !== newObj.p) ||
- (newObj.name !== undefined && oldObj.name !== newObj.name)
- ) {
- oldArr[i] = newItem; // Full replacement β no stale key bleed
- } else {
- updateRecursive(oldObj, newObj, pruneMissing);
- }
- } else if (oldItem !== newItem) {
- oldArr[i] = newItem;
- }
- }
- }
- if (oldArr.length > newArr.length) {
- oldArr.splice(newArr.length);
- }
- } else if (newData[key] !== null && typeof newData[key] === 'object') {
- // passing a partial object acts as a patch and missing siblings should be preserved. (MoonModules/MoonLight Module::update() + compareRecursive)
- if (
- oldData[key] === null ||
- typeof oldData[key] !== 'object' ||
- Array.isArray(oldData[key])
- ) {
- oldData[key] = {};
- }
- updateRecursive(
- oldData[key] as Record,
- newData[key] as Record,
- pruneMissing
- );
- } else if (newData[key] !== oldData[key]) {
- // console.log("updateRecursive", key, newData[key], oldData[key]);
- oldData[key] = newData[key]; //trigger reactiveness
- }
- // }
- }
- //remove properties that are not in newData (e.g. control min and max)
- if (pruneMissing) {
- for (let key in oldData) {
- if (!(key in newData)) delete oldData[key];
- }
- }
- }
-
const handleState = (state: ModuleData) => {
// console.log("handleState", state);
updateRecursive(data, state);
diff --git a/interface/src/routes/moonbase/module/module.ts b/interface/src/routes/moonbase/module/module.ts
new file mode 100644
index 00000000..f2bfc322
--- /dev/null
+++ b/interface/src/routes/moonbase/module/module.ts
@@ -0,0 +1,76 @@
+/**
+ * Pure utility functions extracted from Module.svelte for testability.
+ */
+
+/**
+ * Recursively merges newData into oldData in-place, preserving Svelte reactivity.
+ *
+ * - Arrays: patched element by element; shrunk if newData is shorter.
+ * - Array items: fully replaced when 'p' or 'name' changes (different control in same slot).
+ * - Objects: merged recursively (partial patch β siblings not in newData are kept).
+ * - Primitives: assigned only when the value actually changed.
+ * - pruneMissing: when true, keys present in oldData but absent from newData are deleted.
+ */
+export function updateRecursive(
+ oldData: Record,
+ newData: Record,
+ pruneMissing = false
+) {
+ for (const key in newData) {
+ if (Array.isArray(newData[key])) {
+ if (!Array.isArray(oldData[key])) oldData[key] = [];
+ const oldArr = oldData[key] as unknown[];
+ const newArr = newData[key] as unknown[];
+ for (let i = 0; i < newArr.length; i++) {
+ if (oldArr[i] == undefined) {
+ oldArr[i] = newArr[i];
+ } else {
+ const oldItem = oldArr[i];
+ const newItem = newArr[i];
+ const bothObjects =
+ oldItem !== null &&
+ typeof oldItem === 'object' &&
+ newItem !== null &&
+ typeof newItem === 'object';
+ if (bothObjects) {
+ const oldObj = oldItem as Record;
+ const newObj = newItem as Record;
+ if (
+ (newObj.p !== undefined && oldObj.p !== newObj.p) ||
+ (newObj.name !== undefined && oldObj.name !== newObj.name)
+ ) {
+ oldArr[i] = newItem;
+ } else {
+ updateRecursive(oldObj, newObj, pruneMissing);
+ }
+ } else if (oldItem !== newItem) {
+ oldArr[i] = newItem;
+ }
+ }
+ }
+ if (oldArr.length > newArr.length) {
+ oldArr.splice(newArr.length);
+ }
+ } else if (newData[key] !== null && typeof newData[key] === 'object') {
+ if (
+ oldData[key] === null ||
+ typeof oldData[key] !== 'object' ||
+ Array.isArray(oldData[key])
+ ) {
+ oldData[key] = {};
+ }
+ updateRecursive(
+ oldData[key] as Record,
+ newData[key] as Record,
+ pruneMissing
+ );
+ } else if (newData[key] !== oldData[key]) {
+ oldData[key] = newData[key];
+ }
+ }
+ if (pruneMissing) {
+ for (const key in oldData) {
+ if (!(key in newData)) delete oldData[key];
+ }
+ }
+}
diff --git a/interface/src/routes/moonbase/monitor/Monitor.svelte b/interface/src/routes/moonbase/monitor/Monitor.svelte
index 1b37c46c..99137b04 100644
--- a/interface/src/routes/moonbase/monitor/Monitor.svelte
+++ b/interface/src/routes/moonbase/monitor/Monitor.svelte
@@ -7,7 +7,8 @@
createScene,
updateScene,
setMatrixDimensions
- } from './monitor';
+ } from './monitor_webgl';
+ import { normalizePosition } from './monitor';
import SettingsCard from '$lib/components/SettingsCard.svelte';
import { socket } from '$lib/stores/socket';
import ControlIcon from '~icons/tabler/adjustments';
@@ -64,6 +65,7 @@
const handleHeader = (header: Uint8Array) => {
console.log('Monitor.handleHeader', header);
+ // done = false; // causes continues onLayoutChanged !
let view = new DataView(header.buffer);
@@ -90,7 +92,7 @@
height = view.getInt32(4, true);
depth = view.getInt32(8, true);
- setMatrixDimensions(width, height);
+ setMatrixDimensions(width, height, depth);
// let nrOfLights = header[4] + 256 * header[5];
@@ -116,9 +118,7 @@
//set to -1,1 coordinate system of webGL
//width -1 etc as 0,0 should be top left, not bottom right
- x = width == 1 ? 0 : (x / (width - 1)) * 2.0 - 1.0;
- y = height == 1 ? 0 : ((height - 1 - y) / (height - 1)) * 2.0 - 1.0;
- z = depth == 1 ? 0 : ((depth - 1 - z) / (depth - 1)) * 2.0 - 1.0;
+ [x, y, z] = normalizePosition(x, y, z, width, height, depth);
vertices.push(x, y, z);
}
@@ -147,7 +147,7 @@
}
}
- updateScene(vertices, colors);
+ updateScene();
};
onMount(() => {
diff --git a/interface/src/routes/moonbase/monitor/monitor.ts b/interface/src/routes/moonbase/monitor/monitor.ts
index d8bd8e4f..c86db0f6 100644
--- a/interface/src/routes/moonbase/monitor/monitor.ts
+++ b/interface/src/routes/moonbase/monitor/monitor.ts
@@ -1,192 +1,23 @@
-//based on https://github.com/jasonsturges/threejs-sveltekit/blob/main/src/lib/scene.ts
-// also check https://github.com/threlte/threlte
-
-import { mat4 } from 'gl-matrix';
-
-let uMVPLocation: WebGLUniformLocation | null = null;
-
-let gl: WebGLRenderingContext | null = null;
-let program: WebGLProgram;
-let positionBuffer: WebGLBuffer;
-
-export let vertices: number[] = [];
-export let colors: number[] = [];
-
-// Store LED matrix dimensions
-let matrixWidth: number = 1;
-let matrixHeight: number = 1;
-let matrixDepth: number = 1;
-
-let colorBuffer: WebGLBuffer; // Buffer for color data
-
-export function createScene(el: HTMLCanvasElement) {
- // Initialize WebGL
- gl = el.getContext('webgl');
- if (!gl) {
- console.error('WebGL not supported');
- return;
- }
-
- clearVertices();
-
- // Set up shaders
- const vertexShaderSource = `
- precision mediump float;
- attribute vec3 aPosition;
- attribute vec4 aColor; // Color attribute
- uniform mat4 uMVP; // Model-View-Projection matrix
- varying vec4 vColor; // Pass color to the fragment shader
-
- void main() {
- gl_PointSize = 10.0;
- gl_Position = uMVP * vec4(aPosition, 1.0);
- vColor = aColor; // Pass the color to the fragment shader
- }
- `;
- const fragmentShaderSource = `
- precision mediump float;
- varying vec4 vColor;
-
- void main() {
- gl_FragColor = vColor;
- }
- `;
-
- const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
- const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
-
- program = createProgram(gl, vertexShader, fragmentShader);
- gl.useProgram(program);
-
- uMVPLocation = gl.getUniformLocation(program, 'uMVP');
-
- // Set up position buffer
- positionBuffer = gl.createBuffer();
- const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
- gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
- gl.enableVertexAttribArray(positionAttributeLocation);
- gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
-
- // Set up color buffer
- colorBuffer = gl.createBuffer();
- const colorAttributeLocation = gl.getAttribLocation(program, 'aColor');
- gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
- gl.enableVertexAttribArray(colorAttributeLocation);
- gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);
-
- // Set up WebGL viewport
- gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
- gl.clearColor(0, 0, 0, 1);
- gl.enable(gl.DEPTH_TEST);
-}
-
-const createShader = (gl: WebGLRenderingContext, type: number, source: string): WebGLShader => {
- const shader = gl.createShader(type);
- if (shader) {
- gl.shaderSource(shader, source);
- gl.compileShader(shader);
- if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
- console.error(gl.getShaderInfoLog(shader));
- gl.deleteShader(shader);
- throw new Error('Shader compilation failed');
- }
- return shader;
- } else throw new Error('Unable to create shader');
-};
-
-const createProgram = (
- gl: WebGLRenderingContext,
- vertexShader: WebGLShader,
- fragmentShader: WebGLShader
-): WebGLProgram => {
- const program = gl.createProgram();
- gl.attachShader(program, vertexShader);
- gl.attachShader(program, fragmentShader);
- gl.linkProgram(program);
- if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
- console.error(gl.getProgramInfoLog(program));
- gl.deleteProgram(program);
- throw new Error('Program linking failed');
- }
- return program;
-};
-
-export function clearColors() {
- colors = [];
-}
-
-export function clearVertices() {
- vertices = [];
-}
-
-export function setMatrixDimensions(width: number, height: number, depth: number = 1) {
- matrixWidth = width;
- matrixHeight = height;
- matrixDepth = depth;
-}
-
-export const updateScene = (vertices: number[], colors: number[]) => {
- if (!gl) return;
-
- // Set the MVP matrix
- const mvp = getMVPMatrix();
- gl.uniformMatrix4fv(uMVPLocation, false, mvp);
-
- // Bind the position buffer and upload the vertex data
- gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-
- // Bind the color buffer and upload the color data
- gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
- // Clear the canvas
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- // Draw the points
- gl.drawArrays(gl.POINTS, 0, vertices.length / 3);
-};
-
-function getMVPMatrix(): mat4 {
- const canvas = gl!.canvas as HTMLCanvasElement;
- const canvasAspect = canvas.width / canvas.height;
-
- const fov = Math.PI / 6; // 30 degrees
- const near = 0.1;
- const far = 100.0;
-
- const projection = mat4.create();
- mat4.perspective(projection, fov, canvasAspect, near, far);
-
- // Normalize dimensions
- const maxDim = Math.max(matrixWidth, matrixHeight, matrixDepth);
- const normalizedWidth = matrixWidth / maxDim;
- const normalizedHeight = matrixHeight / maxDim;
- const normalizedDepth = matrixDepth / maxDim;
-
- // Calculate required distance for vertical fit
- const verticalSize = normalizedHeight;
- const distanceForHeight = verticalSize / (2 * Math.tan(fov / 2));
-
- // Calculate required distance for horizontal fit
- const horizontalFov = 2 * Math.atan(Math.tan(fov / 2) * canvasAspect);
- const horizontalSize = normalizedWidth;
- const distanceForWidth = horizontalSize / (2 * Math.tan(horizontalFov / 2));
-
- // Use the larger distance to ensure both dimensions fit
- const cameraDistance = Math.max(distanceForHeight, distanceForWidth) * 2.5;
-
- const view = mat4.create();
- mat4.lookAt(view, [0, 0, cameraDistance], [0, 0, 0], [0, 1, 0]);
-
- const model = mat4.create();
-
- // Scale by ALL normalized dimensions β
- mat4.scale(model, model, [normalizedWidth, normalizedHeight, normalizedDepth]);
-
- const mvp = mat4.create();
- mat4.multiply(mvp, projection, view);
- mat4.multiply(mvp, mvp, model);
-
- return mvp;
+/**
+ * Pure utility functions extracted from Monitor.svelte for testability.
+ */
+
+/**
+ * Maps pixel coordinates [0, dim-1] to WebGL clip space [-1, 1].
+ * Y and Z are inverted so that (0,0) is top-left in screen space.
+ * When a dimension is 1, the coordinate collapses to 0 (centre).
+ */
+export function normalizePosition(
+ x: number,
+ y: number,
+ z: number,
+ width: number,
+ height: number,
+ depth: number
+): [number, number, number] {
+ return [
+ width === 1 ? 0 : (x / (width - 1)) * 2.0 - 1.0,
+ height === 1 ? 0 : ((height - 1 - y) / (height - 1)) * 2.0 - 1.0,
+ depth === 1 ? 0 : ((depth - 1 - z) / (depth - 1)) * 2.0 - 1.0
+ ];
}
diff --git a/interface/src/routes/moonbase/monitor/monitor_webgl.ts b/interface/src/routes/moonbase/monitor/monitor_webgl.ts
new file mode 100644
index 00000000..a8f6e6c9
--- /dev/null
+++ b/interface/src/routes/moonbase/monitor/monitor_webgl.ts
@@ -0,0 +1,212 @@
+//based on https://github.com/jasonsturges/threejs-sveltekit/blob/main/src/lib/scene.ts
+// also check https://github.com/threlte/threlte
+
+import { mat4 } from 'gl-matrix';
+
+let uMVPLocation: WebGLUniformLocation | null = null;
+
+let gl: WebGLRenderingContext | null = null;
+let program: WebGLProgram;
+let positionBuffer: WebGLBuffer;
+
+export let vertices: number[] = [];
+export let colors: number[] = [];
+
+// Store LED matrix dimensions
+let matrixWidth: number = 1;
+let matrixHeight: number = 1;
+let matrixDepth: number = 1;
+
+let colorBuffer: WebGLBuffer; // Buffer for color data
+
+export function createScene(el: HTMLCanvasElement) {
+ // Initialize WebGL
+ const newGl = el.getContext('webgl');
+ if (!newGl) {
+ console.error('WebGL not supported');
+ return;
+ }
+
+ // Same canvas/context: already initialized, nothing to do.
+ if (gl === newGl) return;
+
+ // Different canvas: release resources on the previous context before switching.
+ if (gl) {
+ gl.deleteBuffer(positionBuffer);
+ gl.deleteBuffer(colorBuffer);
+ const shaders = gl.getAttachedShaders(program);
+ if (shaders)
+ shaders.forEach((s) => {
+ gl!.deleteShader(s);
+ });
+ gl.deleteProgram(program);
+ }
+
+ gl = newGl;
+ clearVertices();
+
+ // Set up shaders
+ const vertexShaderSource = `
+ precision mediump float;
+ attribute vec3 aPosition;
+ attribute vec4 aColor; // Color attribute
+ uniform mat4 uMVP; // Model-View-Projection matrix
+ varying vec4 vColor; // Pass color to the fragment shader
+
+ void main() {
+ gl_PointSize = 10.0;
+ gl_Position = uMVP * vec4(aPosition, 1.0);
+ vColor = aColor; // Pass the color to the fragment shader
+ }
+ `;
+ const fragmentShaderSource = `
+ precision mediump float;
+ varying vec4 vColor;
+
+ void main() {
+ gl_FragColor = vColor;
+ }
+ `;
+
+ const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+ const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+
+ program = createProgram(gl, vertexShader, fragmentShader);
+ gl.useProgram(program);
+
+ uMVPLocation = gl.getUniformLocation(program, 'uMVP');
+
+ // Set up position buffer
+ positionBuffer = gl.createBuffer();
+ if (!positionBuffer) throw new Error('Failed to create position buffer');
+ const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ gl.enableVertexAttribArray(positionAttributeLocation);
+ gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+ // Set up color buffer
+ colorBuffer = gl.createBuffer();
+ if (!colorBuffer) throw new Error('Failed to create color buffer');
+ const colorAttributeLocation = gl.getAttribLocation(program, 'aColor');
+ gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+ gl.enableVertexAttribArray(colorAttributeLocation);
+ gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);
+
+ // Set up WebGL viewport
+ gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+ gl.clearColor(0, 0, 0, 1);
+ gl.enable(gl.DEPTH_TEST);
+}
+
+const createShader = (gl: WebGLRenderingContext, type: number, source: string): WebGLShader => {
+ const shader = gl.createShader(type);
+ if (shader) {
+ gl.shaderSource(shader, source);
+ gl.compileShader(shader);
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ console.error(gl.getShaderInfoLog(shader));
+ gl.deleteShader(shader);
+ throw new Error('Shader compilation failed');
+ }
+ return shader;
+ } else throw new Error('Unable to create shader');
+};
+
+const createProgram = (
+ gl: WebGLRenderingContext,
+ vertexShader: WebGLShader,
+ fragmentShader: WebGLShader
+): WebGLProgram => {
+ const program = gl.createProgram();
+ if (!program) throw new Error('Unable to create program');
+ gl.attachShader(program, vertexShader);
+ gl.attachShader(program, fragmentShader);
+ gl.linkProgram(program);
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+ console.error(gl.getProgramInfoLog(program));
+ gl.deleteProgram(program);
+ throw new Error('Program linking failed');
+ }
+ return program;
+};
+
+export function clearColors() {
+ colors = [];
+}
+
+export function clearVertices() {
+ vertices = [];
+}
+
+export function setMatrixDimensions(width: number, height: number, depth: number = 1) {
+ matrixWidth = width;
+ matrixHeight = height;
+ matrixDepth = depth;
+}
+
+export const updateScene = () => {
+ if (!gl) return;
+
+ // Set the MVP matrix
+ const mvp = getMVPMatrix();
+ gl.uniformMatrix4fv(uMVPLocation, false, mvp);
+
+ // Bind the position buffer and upload the vertex data
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+ // Bind the color buffer and upload the color data
+ gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+ // Clear the canvas
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // Draw the points
+ gl.drawArrays(gl.POINTS, 0, vertices.length / 3);
+};
+
+function getMVPMatrix(): mat4 {
+ const canvas = gl!.canvas as HTMLCanvasElement;
+ const canvasAspect = canvas.width / canvas.height;
+
+ const fov = Math.PI / 6; // 30 degrees
+ const near = 0.1;
+ const far = 100.0;
+
+ const projection = mat4.create();
+ mat4.perspective(projection, fov, canvasAspect, near, far);
+
+ // Normalize dimensions
+ const maxDim = Math.max(matrixWidth, matrixHeight, matrixDepth);
+ const normalizedWidth = matrixWidth / maxDim;
+ const normalizedHeight = matrixHeight / maxDim;
+ const normalizedDepth = matrixDepth / maxDim;
+
+ // Calculate required distance for vertical fit
+ const verticalSize = normalizedHeight;
+ const distanceForHeight = verticalSize / (2 * Math.tan(fov / 2));
+
+ // Calculate required distance for horizontal fit
+ const horizontalFov = 2 * Math.atan(Math.tan(fov / 2) * canvasAspect);
+ const horizontalSize = normalizedWidth;
+ const distanceForWidth = horizontalSize / (2 * Math.tan(horizontalFov / 2));
+
+ // Use the larger distance to ensure both dimensions fit
+ const cameraPadding = 2.5; // 5 makes it too small
+ const cameraDistance = Math.max(distanceForHeight, distanceForWidth) * cameraPadding;
+
+ const view = mat4.create();
+ mat4.lookAt(view, [0, 0, cameraDistance], [0, 0, 0], [0, 1, 0]);
+
+ const model = mat4.create();
+
+ // Scale by ALL normalized dimensions β
+ mat4.scale(model, model, [normalizedWidth, normalizedHeight, normalizedDepth]);
+
+ const mvp = mat4.create();
+ mat4.multiply(mvp, projection, view);
+ mat4.multiply(mvp, mvp, model);
+
+ return mvp;
+}
diff --git a/interface/src/routes/system/metrics/SystemMetrics.svelte b/interface/src/routes/system/metrics/SystemMetrics.svelte
index 0e8509fc..eadb5e04 100644
--- a/interface/src/routes/system/metrics/SystemMetrics.svelte
+++ b/interface/src/routes/system/metrics/SystemMetrics.svelte
@@ -117,13 +117,29 @@
labels: $analytics.uptime,
datasets: [
{
- label: 'Loops/s',
- borderColor: daisyColor('--color-primary'),
- backgroundColor: daisyColor('--color-primary', 50),
+ label: 'All lps',
+ borderColor: 'rgb(30, 80, 200)',
+ backgroundColor: 'rgba(30, 80, 200, 0.15)',
+ borderWidth: 2,
+ data: $analytics.lps_all,
+ yAxisID: 'y'
+ },
+ {
+ label: 'Effects lps',
+ borderColor: 'rgb(200, 30, 30)',
+ backgroundColor: 'rgba(200, 30, 30, 0.15)',
borderWidth: 2,
- data: $analytics.lps,
+ data: $analytics.lps_effects,
yAxisID: 'y'
},
+ {
+ label: 'Drivers lps',
+ borderColor: 'rgb(30, 160, 30)',
+ backgroundColor: 'rgba(30, 160, 30, 0.15)',
+ borderWidth: 2,
+ data: $analytics.lps_drivers,
+ yAxisID: 'y'
+ }
]
},
options: {
@@ -166,7 +182,7 @@
},
position: 'left',
min: 0,
- max: Math.round(Math.max(...$analytics.lps)),
+ max: Math.round(Math.max(...$analytics.lps_all, ...$analytics.lps_effects, ...$analytics.lps_drivers)),
grid: { color: daisyColor('--color-base-content', 10) },
ticks: {
color: daisyColor('--color-base-content')
@@ -398,9 +414,11 @@
function updateData() {
// π
lpsChart.data.labels = $analytics.uptime;
- lpsChart.data.datasets[0].data = $analytics.lps;
+ lpsChart.data.datasets[0].data = $analytics.lps_all;
+ lpsChart.data.datasets[1].data = $analytics.lps_effects;
+ lpsChart.data.datasets[2].data = $analytics.lps_drivers;
if (lpsChart.options.scales?.y) {
- lpsChart.options.scales.y.max = Math.round(Math.max(...$analytics.lps));
+ lpsChart.options.scales.y.max = Math.round(Math.max(...$analytics.lps_all, ...$analytics.lps_effects, ...$analytics.lps_drivers));
}
lpsChart.update('none');
diff --git a/interface/src/routes/system/status/SystemStatus.svelte b/interface/src/routes/system/status/SystemStatus.svelte
index 8200f4c4..2676ff01 100644
--- a/interface/src/routes/system/status/SystemStatus.svelte
+++ b/interface/src/routes/system/status/SystemStatus.svelte
@@ -200,8 +200,8 @@