CAD

src/pages/faq/erstellung-energieausweise/index.astro

@@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro";
 </div>
 
 
-<div class="controls">
+ <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Points and Lines:</strong>
+    <strong>Captured Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -81,10 +81,11 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const gridSize = 10; // Size of each grid cell in pixels
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
     let capturedLines = [];
-    let firstStartPoint = null; // Tracks the start point of the first line
-    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -112,110 +113,65 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset everything
+    // Clear the canvas and reset logs
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      firstStartPoint = null;
-      lastEndPoint = null;
-      drawGrid();
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
 
-    // Update the captured points and lines log
+    // Update the captured lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const isPoint = line.startX === line.endX && line.startY === line.endY;
-          if (isPoint) {
-            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
-          }
-          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line
-    function calculateLineLength(x1, y1, x2, y2) {
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      return Math.sqrt(dx * dx + dy * dy);
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
     }
 
-    // Mouse event for drawing lines and points
+    // Mouse events
     canvas.addEventListener('mousedown', (e) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine starting point for the line or point
-      let startX, startY;
-
-      if (!lastEndPoint) {
-        // For the first line or point, set the start point anywhere
-        startX = clickX;
-        startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
-      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else {
-        // Invalid starting point for a line
-        return;
-      }
-
-      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Check if the end point is valid:
-      // - Must not be the same as the start point
-      // - Must be a valid grid point or the start point of the first line
-      const isValidEndPoint =
-        (endX !== startX || endY !== startY) &&
-        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || true);
-
-      if (!isValidEndPoint) {
-        return;
-      }
-
-      // If it's a point, draw a point
-      if (startX === endX && startY === endY) {
-        drawPoint(startX, startY);
-      } else {
-        // Otherwise, draw the line
+      if (startX !== null && startY !== null) {
+        // Draw the final line
         drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
       }
 
-      // Update the last endpoint
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line or point details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
     });
 
-    // Function to draw a line
+    // Drawing functions
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black lines
-      ctx.lineWidth = 2;
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Function to draw a point
-    function drawPoint(x, y) {
-      ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Black point
-      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
-      ctx.fill();
-    }
-
-    // Initialize the canvas
-    drawGrid();
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
   </script>
 
 </Layout>