simview 3.2__py3-none-any.whl

simview/static/js/ui/Legend.js

@@ -0,0 +1,87 @@
+export class Legend {
+    constructor(app) {
+        this.app = app;
+        this.container = this.createContainer();
+        document.body.appendChild(this.container);
+        this.update();
+    }
+
+    createContainer() {
+        const container = document.createElement("div");
+        container.id = "terrain-legend";
+        container.style.position = "absolute";
+        container.style.bottom = "20px";
+        container.style.left = "20px";
+        container.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+        container.style.color = "white";
+        container.style.padding = "10px";
+        container.style.borderRadius = "5px";
+        container.style.fontFamily = "sans-serif";
+        container.style.fontSize = "12px";
+        container.style.pointerEvents = "none";
+        container.style.zIndex = "1000";
+        container.style.display = "flex";
+        container.style.flexDirection = "column";
+        container.style.minWidth = "150px";
+        container.style.border = "1px solid rgba(255, 255, 255, 0.2)";
+        return container;
+    }
+
+    update() {
+        if (!this.app.terrain) {
+            this.container.style.display = "none";
+            return;
+        }
+
+        this.container.style.display = "flex";
+        const mode = this.app.uiState.terrainColorMode || "height";
+        const cmapName = this.app.uiState.terrainColorMap || "viridis";
+
+        let minVal, maxVal, unit, title;
+
+        if (mode === "height") {
+            minVal = this.app.terrain.bounds.minZ;
+            maxVal = this.app.terrain.bounds.maxZ;
+            unit = "m";
+            title = "Height";
+        } else if (mode === "friction") {
+            minVal = this.app.terrain.bounds.minFriction ?? 0.0;
+            maxVal = this.app.terrain.bounds.maxFriction ?? 1.0;
+            unit = "";
+            title = "Friction";
+        } else if (mode === "stiffness") {
+            minVal = this.app.terrain.bounds.minStiffness ?? 100000.0;
+            maxVal = this.app.terrain.bounds.maxStiffness ?? 500000.0;
+            unit = "N/m";
+            title = "Stiffness";
+        }
+
+        const decimals = (mode === "stiffness" && maxVal > 1000) ? 0 : 2;
+        this.container.innerHTML = `
+            <div style="font-weight: bold; margin-bottom: 5px; text-align: center;">${title} ${unit ? `(${unit})` : ""}</div>
+            <div id="legend-gradient" style="height: 20px; width: 100%; margin-bottom: 5px; border: 1px solid white;"></div>
+            <div style="display: flex; justify-content: space-between;">
+                <span>${minVal.toFixed(decimals)}</span>
+                <span>${maxVal.toFixed(decimals)}</span>
+            </div>
+        `;
+
+        const gradientDiv = this.container.querySelector("#legend-gradient");
+        const callableColormap = this.app.terrain.getCallableFromColorMapName(cmapName);
+
+        // Generate CSS gradient
+        const steps = 10;
+        const colors = [];
+        for (let i = 0; i <= steps; i++) {
+            const color = callableColormap(i / steps);
+            colors.push(`rgb(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)})`);
+        }
+        gradientDiv.style.background = `linear-gradient(to right, ${colors.join(", ")})`;
+    }
+
+    dispose() {
+        if (this.container && this.container.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+    }
+}

simview/static/js/ui/PlaybackControls.js

@@ -0,0 +1,314 @@
+import { FREQ_CONFIG } from "../config.js";
+import { isMp4RecordingSupported } from "../components/AnimationController.js";
+
+const buttonHeight = 25;
+export class PlaybackControls {
+    constructor(animationController) {
+        this.animationController = animationController;
+        this.minRenderDelay = 1000 / FREQ_CONFIG.playbackControls;
+        this.lastRenderTime = Number.NEGATIVE_INFINITY;
+        this.container = document.createElement("div");
+        Object.assign(this.container.style, {
+            position: "absolute",
+            bottom: "20px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "5px",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            padding: "10px 20px",
+            borderRadius: "5px",
+        });
+
+        this.controlsRow = document.createElement("div");
+        Object.assign(this.controlsRow.style, {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "row",
+            gap: "15px",
+        });
+
+        // **Cache listener functions**
+        this.recordButtonClick = () => {
+            if (this.animationController.isRecording) {
+                this.animationController.stopRecording();
+                this.recordButton.textContent = "⚫ REC";
+                this.recordButton.style.backgroundColor = "#444";
+            } else {
+                this.animationController.startRecording();
+                this.recordButton.textContent = "⬛ STOP";
+                this.recordButton.style.backgroundColor = "#aa0000";
+            }
+        };
+
+        this.formatSelectChange = (e) => {
+            this.animationController.setRecordingFormat(e.target.value);
+        };
+
+        this.screenshotButtonClick = () => {
+            this.animationController.captureScreenshot();
+        };
+
+        this.playButtonClick = () => {
+            if (this.animationController.isPlaying) {
+                this.animationController.pause();
+                this.playButton.textContent = "Play";
+            } else {
+                this.animationController.play();
+                this.playButton.textContent = "Pause";
+            }
+        };
+
+        this.stepBackButtonClick = () => {
+            this.animationController.pause();
+            this.animationController.stepBackward();
+            this.playButton.textContent = "Play";
+        };
+
+        this.stepForwardButtonClick = () => {
+            this.animationController.pause();
+            this.animationController.stepForward();
+            this.playButton.textContent = "Play";
+        };
+
+        this.speedSelectChange = (e) => {
+            console.debug("Speed changed to", e.target.value);
+            this.animationController.setSpeed(parseFloat(e.target.value));
+        };
+
+        this.progressBarContainerClick = (event) => {
+            const rect = this.progressBarContainer.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const progress = x / rect.width;
+            const targetTime = progress * this.animationController.getTotalTime();
+
+            if (event.altKey) {
+                this.animationController.pause();
+                this.playButton.textContent = "Play";
+            }
+            this.animationController.goToTime(targetTime);
+        };
+
+        this.keydownListener = (event) => {
+            const key = event.key;
+
+            // Handle arrow keys with Alt modifier for timeline stepping
+            if (event.altKey) {
+                if (key === "ArrowRight") {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.animationController.stepForward();
+                    return;
+                }
+                if (key === "ArrowLeft") {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.animationController.stepBackward();
+                    return;
+                }
+            }
+
+            // Other keys (only if no modifiers are pressed)
+            if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+                return;
+
+            switch (key) {
+                case "r":
+                    this.recordButton.click();
+                    break;
+                case "s":
+                    this.screenshotButton.click();
+                    break;
+                case " ":
+                    this.playButton.click();
+                    event.target.blur();
+                    break;
+            }
+        };
+
+        // **Create elements and attach cached listeners**
+        this.recordButton = this.#createButton(
+            "⚫ REC",
+            this.recordButtonClick,
+            "100px"
+        );
+
+        this.screenshotButton = this.#createButton(
+            "📷",
+            this.screenshotButtonClick,
+            "40px"
+        );
+        this.screenshotButton.title = "Screenshot (S)";
+
+        this.formatSelect = document.createElement("select");
+        // "mp4" is only offered when this browser's MediaRecorder can
+        // actually produce it (see isMp4RecordingSupported) -- webm is
+        // always available wherever MediaRecorder is, so it's the
+        // unconditional default/fallback.
+        const formats = isMp4RecordingSupported() ? ["webm", "mp4", "png"] : ["webm", "png"];
+        const formatLabels = { webm: "WEBM", mp4: "MP4", png: "PNG" };
+        formats.forEach((format) => {
+            const option = document.createElement("option");
+            option.value = format;
+            option.text = formatLabels[format];
+            this.formatSelect.appendChild(option);
+        });
+        Object.assign(this.formatSelect.style, {
+            width: "100px",
+            textAlign: "center",
+            height: buttonHeight + "px",
+        });
+        this.formatSelect.addEventListener("change", this.formatSelectChange);
+
+        this.playButton = this.#createButton("Play", this.playButtonClick, "70px");
+
+        this.stepBackButton = this.#createButton(
+            "←",
+            this.stepBackButtonClick,
+            "40px"
+        );
+
+        this.stepForwardButton = this.#createButton(
+            "→",
+            this.stepForwardButtonClick,
+            "40px"
+        );
+
+        this.speedSelect = document.createElement("select");
+        [0.1, 0.25, 0.5, 1, 2, 5].forEach((speed) => {
+            const option = document.createElement("option");
+            option.value = speed;
+            option.text = `${speed}x`;
+            if (speed === 1) option.selected = true;
+            this.speedSelect.appendChild(option);
+        });
+        Object.assign(this.speedSelect.style, {
+            width: "80px",
+            textAlign: "center",
+            height: buttonHeight + "px",
+        });
+        this.speedSelect.addEventListener("change", this.speedSelectChange);
+
+        this.frameCounter = document.createElement("span");
+        Object.assign(this.frameCounter.style, {
+            color: "white",
+            display: "flex",
+            alignItems: "center",
+            height: "30px",
+            marginLeft: "5px",
+            fontFamily: "monospace",
+        });
+
+        this.progressBarContainer = document.createElement("div");
+        Object.assign(this.progressBarContainer.style, {
+            width: "100%",
+            marginLeft: "15px",
+            marginRight: "15px",
+            display: "flex",
+            height: "8px",
+            backgroundColor: "#222",
+            borderRadius: "4px",
+            cursor: "pointer",
+            marginTop: "5px",
+        });
+
+        this.progressBar = document.createElement("div");
+        Object.assign(this.progressBar.style, {
+            width: "0%",
+            height: "100%",
+            backgroundColor: "#888",
+            borderRadius: "4px",
+        });
+        this.progressBarContainer.appendChild(this.progressBar);
+        this.progressBarContainer.addEventListener(
+            "click",
+            this.progressBarContainerClick
+        );
+
+        // Assemble controls row
+        [
+            this.recordButton,
+            this.formatSelect,
+            this.screenshotButton,
+            this.stepBackButton,
+            this.playButton,
+            this.stepForwardButton,
+            this.speedSelect,
+            this.frameCounter,
+        ].forEach((element) => this.controlsRow.appendChild(element));
+
+        this.container.appendChild(this.controlsRow);
+        this.container.appendChild(this.progressBarContainer);
+        document.body.appendChild(this.container);
+
+        // Attach document-level listener
+        document.addEventListener("keydown", this.keydownListener);
+
+        this.updateElements();
+    }
+
+    updateElements() {
+        const currentTime = this.animationController.getCurrentTime().toFixed(3);
+        const totalTime = this.animationController.getTotalTime().toFixed(3);
+        this.frameCounter.textContent = `time: ${currentTime} / ${totalTime}`;
+        const progress = currentTime / totalTime;
+        this.progressBar.style.width = `${(progress * 100).toFixed(1)}%`;
+        this.lastRenderTime = Number.NEGATIVE_INFINITY;
+    }
+
+    forceRedraw() {
+        this.updateElements();
+        this.lastRenderTime = Number.NEGATIVE_INFINITY;
+    }
+
+    animate(now) {
+        if (now - this.lastRenderTime < this.minRenderDelay) return;
+        this.updateElements();
+        this.lastRenderTime = now;
+    }
+
+    dispose() {
+        // Remove the container from the DOM
+        this.container.remove();
+
+        // Remove all event listeners using cached functions
+        this.recordButton.removeEventListener("click", this.recordButtonClick);
+        this.formatSelect.removeEventListener("change", this.formatSelectChange);
+        this.screenshotButton.removeEventListener("click", this.screenshotButtonClick);
+        this.playButton.removeEventListener("click", this.playButtonClick);
+        this.stepBackButton.removeEventListener("click", this.stepBackButtonClick);
+        this.stepForwardButton.removeEventListener(
+            "click",
+            this.stepForwardButtonClick
+        );
+        this.speedSelect.removeEventListener("change", this.speedSelectChange);
+        this.progressBarContainer.removeEventListener(
+            "click",
+            this.progressBarContainerClick
+        );
+        document.removeEventListener("keydown", this.keydownListener);
+    }
+
+    #createButton(text, onClick, width = "auto") {
+        const button = document.createElement("button");
+        Object.assign(button.style, {
+            padding: "5px 5px",
+            backgroundColor: "#444",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            width: width,
+            minWidth: "40px",
+            height: buttonHeight + "px",
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+        });
+        button.textContent = text;
+        button.addEventListener("click", onClick);
+        return button;
+    }
+}