Platten-Planer
Einfacher Platten-Planer
Plattenplan • ${new Date().toLocaleDateString()}
`);
}
function draw() {
const rW = parseFloat(document.getElementById('roomW').value);
const rH = parseFloat(document.getElementById('roomH').value);
const area = rW * rH;
const plateOptions = choosePlateSizes(area);
const c = document.getElementById('plan');
const ctx = c.getContext('2d');
const scale = Math.min(c.width / rW, c.height / rH);
ctx.clearRect(0, 0, c.width, c.height);
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.strokeRect(10, 10, rW * scale, rH * scale);
let totalPlates = 0;
plateOptions.forEach((plate) => {
const cols = Math.ceil(rW / plate.w);
const rows = Math.ceil(rH / plate.h);
totalPlates += cols * rows;
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
const px = 10 + x * plate.w * scale;
const py = 10 + y * plate.h * scale;
const fullWidth = plate.w;
const fullHeight = plate.h;
let actualW = (x === cols - 1) ? Math.min(fullWidth, rW - x * fullWidth) : fullWidth;
let actualH = (y === rows - 1) ? Math.min(fullHeight, rH - y * fullHeight) : fullHeight;
const cut = actualW < fullWidth || actualH < fullHeight;
ctx.strokeStyle = cut ? 'red' : 'green';
ctx.lineWidth = 2;
ctx.strokeRect(px, py, actualW * scale, actualH * scale);
ctx.fillStyle = '#000';
ctx.font = `${14}px Arial`;
ctx.fillText(`${actualW} x ${actualH} cm`, px + (actualW * scale)/2 - 40, py + (actualH * scale)/2);
if (x < cols - 1) {
ctx.fillStyle = 'blue';
ctx.fillRect(px + actualW * scale - 3, py + (actualH * scale)/2 - 3, 6, 6);
}
}
}
});
ctx.font = '16px Arial';
ctx.fillStyle = '#333';
ctx.fillText(`Raumfläche: ${(area/10000).toFixed(2)} m²`, 10, rH * scale + 30);
ctx.fillText(`Platten: ${plateOptions.map(p=>p.w+'x'+p.h+' cm').join(', ')}`, 10, rH * scale + 55);
ctx.fillText(`Benötigte Platten: ${totalPlates}`, 10, rH * scale + 80);
}
draw();
