nicoaspra/G-code_Programming_Assistant

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <title>G-code Viewer</title>6    <style>7        body {8            margin: 0;9            overflow: hidden;10        }11        canvas {12            display: block;13        }14    </style>15    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>16</head>17<body>18    <script>19        // Set up the scene, camera, and renderer20        const scene = new THREE.Scene();21        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);22        const renderer = new THREE.WebGLRenderer();23        renderer.setSize(window.innerWidth, window.innerHeight);24        document.body.appendChild(renderer.domElement);25 26        // Add a simple grid for reference27        const gridHelper = new THREE.GridHelper(200, 50);28        scene.add(gridHelper);29 30        // Load and parse G-code31        function loadGCode(gcode) {32            const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });33            const points = [];34            const lines = gcode.split("\n");35 36            let currentX = 0, currentY = 0, currentZ = 0;37            let isRelative = false; // Tracks whether positioning is G90 (absolute) or G91 (relative)38 39            lines.forEach((line) => {40                line = line.trim();41                if (line.startsWith("G90")) {42                    isRelative = false; // Absolute positioning43                } else if (line.startsWith("G91")) {44                    isRelative = true; // Incremental positioning45                }46 47                const matchX = line.match(/X([-+]?\d*\.?\d+)/);48                const matchY = line.match(/Y([-+]?\d*\.?\d+)/);49                const matchZ = line.match(/Z([-+]?\d*\.?\d+)/);50 51                let newX = currentX;52                let newY = currentY;53                let newZ = currentZ;54 55                if (matchX) {56                    const deltaX = parseFloat(matchX[1]);57                    newX = isRelative ? currentX + deltaX : deltaX;58                }59                if (matchY) {60                    const deltaY = parseFloat(matchY[1]);61                    newY = isRelative ? currentY + deltaY : deltaY;62                }63                if (matchZ) {64                    const deltaZ = parseFloat(matchZ[1]);65                    newZ = isRelative ? currentZ + deltaZ : deltaZ;66                }67 68                points.push(new THREE.Vector3(newX, newY, newZ));69 70                currentX = newX;71                currentY = newY;72                currentZ = newZ;73            });74 75            const geometry = new THREE.BufferGeometry().setFromPoints(points);76            const line = new THREE.Line(geometry, material);77            scene.add(line);78        }79 80        // Add camera controls81        camera.position.set(0, 50, 200);82        camera.lookAt(0, 0, 0);83 84        // Animation loop85        function animate() {86            requestAnimationFrame(animate);87            renderer.render(scene, camera);88        }89        animate();90 91        // Load G-code from global variable92        if (window.gcode) {93            loadGCode(window.gcode);94        } else {95            console.error("No G-code provided");96        }97    </script>98</body>99</html>