gcode_viewer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>G-code Viewer</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
    <script>
        // Set up the scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Add a simple grid for reference
        const gridHelper = new THREE.GridHelper(200, 50);
        scene.add(gridHelper);

        // Load and parse G-code
        function loadGCode(gcode) {
            const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
            const points = [];
            const lines = gcode.split("\n");

            let currentX = 0, currentY = 0, currentZ = 0;
            let isRelative = false; // Tracks whether positioning is G90 (absolute) or G91 (relative)

            lines.forEach((line) => {
                line = line.trim();
                if (line.startsWith("G90")) {
                    isRelative = false; // Absolute positioning
                } else if (line.startsWith("G91")) {
                    isRelative = true; // Incremental positioning
                }

                const matchX = line.match(/X([-+]?\d*\.?\d+)/);
                const matchY = line.match(/Y([-+]?\d*\.?\d+)/);
                const matchZ = line.match(/Z([-+]?\d*\.?\d+)/);

                let newX = currentX;
                let newY = currentY;
                let newZ = currentZ;

                if (matchX) {
                    const deltaX = parseFloat(matchX[1]);
                    newX = isRelative ? currentX + deltaX : deltaX;
                }
                if (matchY) {
                    const deltaY = parseFloat(matchY[1]);
                    newY = isRelative ? currentY + deltaY : deltaY;
                }
                if (matchZ) {
                    const deltaZ = parseFloat(matchZ[1]);
                    newZ = isRelative ? currentZ + deltaZ : deltaZ;
                }

                points.push(new THREE.Vector3(newX, newY, newZ));

                currentX = newX;
                currentY = newY;
                currentZ = newZ;
            });

            const geometry = new THREE.BufferGeometry().setFromPoints(points);
            const line = new THREE.Line(geometry, material);
            scene.add(line);
        }

        // Add camera controls
        camera.position.set(0, 50, 200);
        camera.lookAt(0, 0, 0);

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        // Load G-code from global variable
        if (window.gcode) {
            loadGCode(window.gcode);
        } else {
            console.error("No G-code provided");
        }
    </script>
</body>
</html>