fix: Update text descriptions in Cross and Home components for clarity

This commit is contained in:
2025-07-01 12:07:20 +02:00
parent 38970430a0
commit 32672387a6
3 changed files with 170 additions and 49 deletions

View File

@@ -43,34 +43,49 @@ export default function Generator() {
const getPath = (e, path) => { const getPath = (e, path) => {
let newLines = []; let newLines = [];
const lines = path.split("\n");
for (let line of path.split("\n")) { // Parse the data more accurately
if (line[0] == "P") continue; for (let line of lines) {
if (line[0] == "S") continue; line = line.trim();
if (line[0] == "X") continue; // Skip header lines, segment lines, and empty lines
if (line.startsWith("Próbkowanie") ||
line.startsWith("Segment") ||
line.startsWith("X:") ||
line === "") {
continue;
}
newLines.push(line); newLines.push(line);
} }
let xs = [], ys = [], zs = []; if (newLines.length === 0) {
let toti = 0, al = 0; console.log("No valid coordinate data found");
return;
for (let line of newLines) {
al += 1;
let theLine = line.split(",");
if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
continue;
if (al > 2) {
let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
toti += Math.round(dist);
}
xs.push(parseFloat(theLine[0]));
ys.push(parseFloat(theLine[1]));
zs.push(parseFloat(theLine[2]));
} }
let points = [];
// Parse coordinates more reliably
for (let line of newLines) {
const coords = line.split(/[,\t]+/).map(s => s.trim());
if (coords.length >= 3) {
const x = parseFloat(coords[0]);
const y = parseFloat(coords[1]);
const z = parseFloat(coords[2]);
if (!isNaN(x) && !isNaN(y) && !isNaN(z)) {
points.push({ x, y, z });
}
}
}
if (points.length === 0) {
console.log("No valid points parsed");
return;
}
console.log(`Parsed ${points.length} points`);
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
console.log("Canvas element:", canvas); console.log("Canvas element:", canvas);
if (!canvas || !canvas.getContext) { if (!canvas || !canvas.getContext) {
@@ -81,32 +96,138 @@ export default function Generator() {
} }
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 700, 500); const canvasWidth = 800; // Match the canvas width
ctx.strokeStyle = "#3B82F6"; const canvasHeight = 400; // Match the canvas height
ctx.lineWidth = 2; const padding = 50;
let scaleFactor = 100000 / 2000; // Clear canvas
let totalH = Math.max(...zs); ctx.clearRect(0, 0, canvasWidth, canvasHeight);
let minH = Math.min(...zs);
for (let line = 0; line < xs.length - 1; line++) { // Calculate bounds
let x1 = line * scaleFactor; const xCoords = points.map(p => p.x);
let y1 = zs[line]; const yCoords = points.map(p => p.y);
let x2 = (line + 1) * scaleFactor; const zCoords = points.map(p => p.z);
let y2 = zs[line + 1];
const minX = Math.min(...xCoords);
const maxX = Math.max(...xCoords);
const minY = Math.min(...yCoords);
const maxY = Math.max(...yCoords);
const minZ = Math.min(...zCoords);
const maxZ = Math.max(...zCoords);
// Calculate distances along the path
let distances = [0];
let totalDistance = 0;
for (let i = 1; i < points.length; i++) {
const dx = points[i].x - points[i-1].x;
const dy = points[i].y - points[i-1].y;
const distance = Math.sqrt(dx * dx + dy * dy);
totalDistance += distance;
distances.push(totalDistance);
}
console.log(`Total distance: ${totalDistance.toFixed(2)}m, Height range: ${minZ.toFixed(2)}m - ${maxZ.toFixed(2)}m`);
// Set up drawing area
const drawWidth = canvasWidth - 2 * padding;
const drawHeight = canvasHeight - 2 * padding;
// Draw coordinate system
ctx.strokeStyle = "#E5E7EB";
ctx.lineWidth = 1;
// Draw grid
const gridLines = 10;
for (let i = 0; i <= gridLines; i++) {
const x = padding + (i / gridLines) * drawWidth;
const y = padding + (i / gridLines) * drawHeight;
let b0 = 50, b1 = 450; // Vertical grid lines
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x12, z1); ctx.moveTo(x, padding);
ctx.lineTo(x22, z2); ctx.lineTo(x, canvasHeight - padding);
ctx.stroke();
// Horizontal grid lines
ctx.beginPath();
ctx.moveTo(padding, y);
ctx.lineTo(canvasWidth - padding, y);
ctx.stroke(); ctx.stroke();
} }
// Draw axes
ctx.strokeStyle = "#6B7280";
ctx.lineWidth = 2;
// X-axis (bottom)
ctx.beginPath();
ctx.moveTo(padding, canvasHeight - padding);
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
ctx.stroke();
// Y-axis (left)
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, canvasHeight - padding);
ctx.stroke();
// Draw labels
ctx.fillStyle = "#374151";
ctx.font = "12px sans-serif";
ctx.textAlign = "center";
// Distance labels (bottom)
for (let i = 0; i <= 5; i++) {
const distance = (totalDistance * i) / 5;
const x = padding + (i / 5) * drawWidth;
ctx.fillText(`${distance.toFixed(0)}m`, x, canvasHeight - padding + 20);
}
// Height labels (left)
ctx.textAlign = "right";
for (let i = 0; i <= 5; i++) {
const height = minZ + ((maxZ - minZ) * i) / 5;
const y = canvasHeight - padding - (i / 5) * drawHeight;
ctx.fillText(`${height.toFixed(1)}m`, padding - 10, y + 4);
}
// Draw profile line
ctx.strokeStyle = "#3B82F6";
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
for (let i = 0; i < points.length; i++) {
const x = padding + (distances[i] / totalDistance) * drawWidth;
const y = canvasHeight - padding - ((points[i].z - minZ) / (maxZ - minZ)) * drawHeight;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// Draw elevation points
ctx.fillStyle = "#3B82F6";
for (let i = 0; i < points.length; i++) {
const x = padding + (distances[i] / totalDistance) * drawWidth;
const y = canvasHeight - padding - ((points[i].z - minZ) / (maxZ - minZ)) * drawHeight;
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
}
// Add title
ctx.fillStyle = "#1F2937";
ctx.font = "16px sans-serif";
ctx.textAlign = "center";
ctx.fillText("Profil terenu", canvasWidth / 2, 30);
setPreviewVisible(true); setPreviewVisible(true);
}; };
@@ -265,9 +386,9 @@ export default function Generator() {
<div className="bg-gray-50 rounded-lg p-4"> <div className="bg-gray-50 rounded-lg p-4">
<canvas <canvas
id="canvas" id="canvas"
height="500" height="400"
width="700" width="800"
className="border border-gray-200 rounded bg-white" className="border border-gray-200 rounded bg-white w-full max-w-full"
style={{ display: previewVisible ? 'block' : 'none' }} style={{ display: previewVisible ? 'block' : 'none' }}
/> />
{!previewVisible && ( {!previewVisible && (

View File

@@ -77,7 +77,7 @@ export default function Cross() {
</div> </div>
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1> <h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
<p className="text-gray-600">Przekształć pliki DXF na siatki instalacyjne</p> <p className="text-gray-600">Dodaj siatkę do mapy w pliku DXF</p>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -20,7 +20,7 @@ export default function Home() {
Generator profilu przekroju terenu Generator profilu przekroju terenu
</h1> </h1>
<p className="text-gray-600"> <p className="text-gray-600">
Twórz profesjonalne profile terenowe na podstawie danych z Geoportalu lub wprowadzonych ręcznie Stwórz profil terenu
</p> </p>
</div> </div>
@@ -54,7 +54,7 @@ export default function Home() {
</Card> </Card>
{/* Info Cards */} {/* Info Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card> <Card>
<CardContent> <CardContent>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@@ -98,7 +98,7 @@ export default function Home() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div> */}
</div> </div>
</Layout> </Layout>
); );