arbeiten

web/index.html

@@ -17,7 +17,7 @@
 
         #posBox {
             margin: 20px auto;
-            width: 300px;
+            width: 406px;
             padding: 15px;
             background: #333;
             border-radius: 10px;
@@ -26,7 +26,7 @@
 
         .btnGrid {
             display: grid;
-            grid-template-columns: repeat(3, 120px);
+            grid-template-columns: repeat(5, 80px);
             gap: 10px;
             justify-content: center;
             margin-top: 30px;
@@ -45,6 +45,35 @@
         button:hover {
             background: #666;
         }
+
+        
+        .gcodeRow {
+            display: inline-flex;
+            gap: 8px;
+            align-items: stretch;
+            margin-top: 16px;
+        }
+
+        .controlInput {
+            height: 48px;                 /* gleiche Höhe wie Button */
+            font-size: 18px;
+            padding: 0 10px;              /* vertikal 0, dadurch exakte Höhe */
+            box-sizing: border-box;
+            border-radius: 8px;
+            border: 1px solid #555;
+            background: #fff;
+            color: #000;
+            min-width: 260px;             /* optional: Breite ähnlich wie vorher */
+        }
+
+        .controlButton {
+            height: 48px;                 /* gleiche Höhe wie Input */
+            padding: 0 18px;              /* vertikal 0, zentriert via flex */
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
     </style>
 </head>
 
@@ -61,17 +90,32 @@
 
     <div class="btnGrid">
         <button onclick="jog('X', -10)">X -10</button>
+        <button onclick="jog('X', -1)">X -1</button>
         <button></button>
+        <button onclick="jog('X', 1)">X +1</button>
         <button onclick="jog('X', 10)">X +10</button>
 
-        <button onclick="jog('Z', 10)">Z +10</button>
-        <button></button>
         <button onclick="jog('Z', -10)">Z -10</button>
+        <button onclick="jog('Z', -1)">Z -1</button>
+        <button></button>
+        <button onclick="jog('Z', 1)">Z +1</button>
+        <button onclick="jog('Z', 10)">Z +10</button>
+    </div>
+
+       
+    <h2>G‑Code Eingabe</h2>
+    <div class="gcodeRow">
+    <input id="gcodeInput" class="controlInput" type="text"
+            placeholder="G0 X10 Z-5"
+            onkeydown="if (event.key === 'Enter') { sendGcodeFeld(); this.select(); }"
+            autofocus>
+    <button class="controlButton" onclick="sendGcodeFeld()">Senden</button>
+    </div>
+    <br/><br/>
+    <div class="gcodeRow">
+    <button class="controlButton" onclick="setZero()">Zurücksetzen auf 0</button>
     </div>
 
-        <h2>G‑Code Eingabe</h2>
-    <input id="gcodeInput" type="text" placeholder="G0 X10 Z-5" style="width:250px; padding:5px;">
-    <button onclick="sendGcode()">Senden</button>
 
     <script>
         let ws;
@@ -121,32 +165,62 @@
         }
 
         // --- GRBL Status Parser ---
-        function handleStatus(line) {
+     
+        function handleStatus(rawLine) {
+            const line = String(rawLine).trim();
 
-            let match = line.match(/WPos:([^|>]+)/);
-            if (!match) {
-                match = line.match(/MPos:([^|>]+)/);
-                if (!match) return; // Keiner von beiden vorhanden
+            // 1) Versuche WPos direkt zu lesen
+            const wposMatch = line.match(/WPos:([^|>]+)/);
+            if (wposMatch) {
+                const [x, , z] = wposMatch[1].split(",").map(Number);
+                updateXZ(x, z);
+                return;
             }
 
+            // 2) Kein WPos vorhanden → MPos und WCO lesen und WPos = MPos - WCO berechnen
+            const mposMatch = line.match(/MPos:([^|>]+)/);
+            const wcoMatch  = line.match(/WCO:([^|>]+)/);
 
-            const coords = match[1].split(",").map(Number);
+            if (mposMatch && wcoMatch) {
+                const mpos = mposMatch[1].split(",").map(Number);
+                const wco  = wcoMatch[1].split(",").map(Number);
 
-            // Nur X (Index 0) und Z (Index 2) anzeigen
-            const x = coords[0];
-            const z = coords[2];
-                    
+                const x = (mpos[0] ?? 0) - (wco[0] ?? 0);
+                const z = (mpos[2] ?? 0) - (wco[2] ?? 0);
 
-            document.getElementById("posX").textContent = x.toFixed(3);
-            document.getElementById("posZ").textContent = z.toFixed(3);
+                updateXZ(x, z);
+            }
+        }
+
+        function updateXZ(x, z) {
+            const elX = document.getElementById("posX");
+            const elZ = document.getElementById("posZ");
+            if (elX) elX.textContent = Number.isFinite(x) ? x.toFixed(3) : "—";
+            if (elZ) elZ.textContent = Number.isFinite(z) ? z.toFixed(3) : "—";
         }
 
         
-        function sendGcode() {
-            const cmd = document.getElementById("gcodeInput").value.trim();
+        
+        function sendGcodeFeld() {
+            const el = document.getElementById("gcodeInput");          // ← neu
+            const cmd = el.value.trim();
+            sendGcode("G90");
+            sendGcode(cmd);
+            
+            el.value = "";                                              // ← neu
+            el.focus();   
+        }
+
+        function sendGcode(cmd) {
             if (!cmd) return;
             ws.send(JSON.stringify({ type: "gcode", cmd }));
+               
         }
+        
+        function setZero() {
+            sendGcode("G92 X0 Z0");
+        }
+
 
     </script>