CAD

src/pages/energieausweis-erstellen/index.astro

@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/layoutCAD.astro";
+import Layout from "#layouts/layout.astro";
 import Widget2 from "#components/Widget.svelte";
 
 ---
@@ -15,133 +15,6 @@ import Widget2 from "#components/Widget.svelte";
 </div>
 
 
-<div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 10; // Size of each grid cell in pixels
-    let lastEndPoint = null;
-    let lastStartPoint = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      ctx.stroke();
-    }
-
-    // Clear the canvas and reset logs
-    function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      lastEndPoint = null;
-      lastStartPoint = null;
-      drawGrid(); // Redraw the grid after clearing
-      updateLineLog();
-    }
-
-    // Update the captured lines log
-    function updateLineLog() {
-      lineLog.innerHTML = capturedLines
-        .map((line, index) => {
-          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 in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine the starting point for the new line
-      let startX, startY;
-
-      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Snap to the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
-        // Snap to the last starting point
-        startX = lastStartPoint.x;
-        startY = lastStartPoint.y;
-      } else if (!capturedLines.length) {
-        // First line can start anywhere
-        startX = clickX;
-        startY = clickY;
-      } else {
-        // If click doesn't match a valid connection, do nothing
-        return;
-      }
-
-      // Determine the endpoint
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      // Draw the line
-      drawLine(startX, startY, endX, endY);
-
-      // Update the last start and end points
-      lastStartPoint = { x: startX, y: startY };
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
 
 </Layout>
 

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

@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/Layout.astro";
+import Layout from "#layouts/layoutCAD.astro";
 
 ---
 
@@ -66,4 +66,138 @@ import Layout from "#layouts/Layout.astro";
    
 </div>
 </div>
+
+
+<div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 10; // Size of each grid cell in pixels
+    let lastEndPoint = null;
+    let lastStartPoint = null;
+    let capturedLines = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value) {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid() {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      lastEndPoint = null;
+      lastStartPoint = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          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 in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Determine the starting point for the new line
+      let startX, startY;
+
+      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Snap to the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
+        // Snap to the last starting point
+        startX = lastStartPoint.x;
+        startY = lastStartPoint.y;
+      } else if (!capturedLines.length) {
+        // First line can start anywhere
+        startX = clickX;
+        startY = clickY;
+      } else {
+        // If click doesn't match a valid connection, do nothing
+        return;
+      }
+
+      // Determine the endpoint
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      // Draw the line
+      drawLine(startX, startY, endX, endY);
+
+      // Update the last start and end points
+      lastStartPoint = { x: startX, y: startY };
+      lastEndPoint = { x: endX, y: endY };
+
+      // Capture the line details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
+    });
+
+    // Drawing functions
+    function drawLine(x1, y1, x2, y2) {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
+
+
+
+
 </Layout>