From 8950ff8397f1518d4ff7de2e1199bd66660d7b79 Mon Sep 17 00:00:00 2001
From: Sebastian Mohr <sebastian@mohrenclan.de>
Date: Wed, 19 Mar 2025 13:45:41 +0100
Subject: [PATCH] Allow to render grid from data. Seems like we dont need to
compute the grid our-self.
---
packages/snips/src/uprp/stampy.ts | 123 ++++++++++++++++++------------
1 file changed, 75 insertions(+), 48 deletions(-)
diff --git a/packages/snips/src/uprp/stampy.ts b/packages/snips/src/uprp/stampy.ts
index c64bdbc6..dddb06c0 100644
--- a/packages/snips/src/uprp/stampy.ts
+++ b/packages/snips/src/uprp/stampy.ts
@@ -190,64 +190,84 @@ export class StampySnip extends BaseSnip {
return this.stampy.measurement.volume;
}
+ get grid() {
+ return this.stampy.measurement.grid;
+ }
+
// TODO: Make this dynamic
get width(): number {
- return 700;
+ return 400;
}
get height(): number {
- return 700;
+ return 400;
}
- private computeScale(): number {
- // compute scale from given data to fit into
- // the width and height of the canvas
- // TODO: Implement this
- return 150;
+ /** Compute the scale such that
+ * the max values fits inside
+ * the width and height
+ */
+ private computeScale(width: number, height: number, max: number): number {
+ return Math.min(width, height) / max;
}
public render(ctx: RenderContext): void {
+ // Apply translate, rotate and mirror
+ // see base.ts
+ const transform = ctx.getTransform();
+ this.transform(ctx);
+
+ this.renderGrid(ctx);
+
+ ctx.setTransform(transform);
+ }
+
+ public renderGrid(ctx: RenderContext): void {
+ const gridWidth = 500;
+ const gridHeight = 500;
+
// Draw rect around the area
- ctx.rect(0, 0, this.width, this.height);
+ ctx.rect(0, 0, gridWidth, gridHeight);
ctx.stroke();
- // Render sample circle
- const s = this.computeScale();
- this.drawCircle(
- ctx,
- this.width / 2,
- this.height / 2,
- (this.volume.diameter / 2) * s,
- {
+ ctx.translate(gridHeight / 2, gridHeight / 2);
+ const s = this.computeScale(
+ gridWidth,
+ gridHeight,
+ this.volume.diameter * 2.5,
+ );
+
+ // Render grid
+ const r = (this.volume.fovw * s) / 2;
+ const positions = this.grid.values;
+ for (let i = 0; i < positions.length; i++) {
+ const x = positions[i]![0]!;
+ const y = positions[i]![1]!;
+ this.drawCircle(ctx, x * s, y * s, r, {
stroke: "#000",
- fill: "red",
+ fill: "#000",
fill_alpha: 0.2,
- },
- );
+ });
+ }
+
+ // Render sample circle
+ this.drawCircle(ctx, 0, 0, (this.volume.diameter / 2) * s, {
+ stroke: "#000",
+ fill: "red",
+ fill_alpha: 0.2,
+ });
// Render scale
- this.drawScale(ctx, s);
-
- // Render grid points
- const grid = new HexagonalGrid(
- 0,
- 0,
- 0,
- 50,
- this.width / 2,
- this.height / 2,
- );
+ this.drawScale(ctx, s, gridWidth / 2, gridHeight / 2);
- for (let i = -1; i < 2; i++) {
- for (let j = -1; j < 2; j++) {
- const { x, y } = grid.axialToPixel(i, j);
- this.drawCircle(ctx, x, y, 2, {
- stroke: "#000",
- fill: "#000",
- });
- const txt = `${i}, ${j}`;
- ctx.fillText(txt, x + 5, y + 5);
- }
- }
+ // Label
+ ctx.font = "bold 18px Arial";
+ ctx.fillStyle = "#000";
+ ctx.textBaseline = "top";
+ ctx.fillText(
+ `Grid (${this.grid.method})`,
+ -gridWidth / 2 + 5,
+ -gridHeight / 2 + 5,
+ );
}
private drawCircle(
@@ -306,25 +326,31 @@ export class StampySnip extends BaseSnip {
* If the scale is too small, the scale will be multiplied until it is
* at least 150px.
*/
- private drawScale(ctx: RenderContext, scale: number) {
+ private drawScale(
+ ctx: RenderContext,
+ scale: number,
+ x: number = 0,
+ y: number = 0,
+ padding: number = 10,
+ ) {
+ ctx.save();
let mm = 1;
let s = scale;
- while (s < 150) {
+ while (s < 50) {
mm *= 2;
s *= 2;
}
// pos
- const padding = 10;
const rectHeight = 5;
- const x = this.width - s - padding;
- const y = this.height - rectHeight - padding - 18; //18=font size
+ const _x = x - s - padding;
+ const _y = y - rectHeight - padding - 18; //18=font size
// Render scale rect
ctx.globalAlpha = 0.8;
ctx.fillStyle = "#000";
ctx.beginPath();
- ctx.fillRect(x, y, s, rectHeight);
+ ctx.fillRect(_x, _y, s, rectHeight);
ctx.stroke();
// Render text
@@ -333,7 +359,8 @@ export class StampySnip extends BaseSnip {
ctx.font = "18px Arial";
ctx.textBaseline = "top";
const ts = ctx.measureText(`${mm} mm`);
- ctx.fillText(`${mm} mm`, x + s / 2 - ts.width / 2, y + rectHeight);
+ ctx.fillText(`${mm} mm`, _x + s / 2 - ts.width / 2, _y + rectHeight);
+ ctx.restore();
}
}
--
GitLab