diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro index 5bd5a18c..3d95006c 100644 --- a/src/pages/faq/erstellung-energieausweise/index.astro +++ b/src/pages/faq/erstellung-energieausweise/index.astro @@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro"; -
+
- Captured Points and Lines: + Captured Lines:
@@ -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 `
  • Point: (${line.startX}, ${line.startY})
  • `; - } - const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY); - return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px
  • `; + const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY); + return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m
  • `; }) .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 \ No newline at end of file