popov/scripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix print

Browse Source
This commit is contained in:
Dobromir Popov
2025-08-08 15:16:28 +03:00
parent 164616f803
commit 84d83bb947
1 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
HTML/STICKERS/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>4 cm Sticker Sheet – Hex vs Grid</title>
<title>4 cm Sticker Sheet – Hex vs Grid (Print-Fixed)</title>
<style>
:root {
--sticker-diameter-cm: 4; /* Content circle diameter */
@ -16,6 +16,8 @@
--page-height-cm: 29.7;
}
/* Base @page; the exact size is injected dynamically so the printer uses
the selected paper & orientation without scaling. */
@page { margin: 0; }
* { box-sizing: border-box; }
@ -85,6 +87,8 @@
gap: 12px;
}
/* On-screen preview uses px so it fits the viewport nicely.
For print we override width/height to exact cm below. */
.page {
background: white;
margin: 0 auto;
@ -123,13 +127,14 @@
user-select: none;
}
/* Print: force exact physical size (cm) so PDF printers don't scale or clip. */
@media print {
body { background: white; }
.controls { display: none !important; }
.pages { padding: 0; }
.page {
width: auto !important;
height: auto !important;
width: calc(var(--page-width-cm) * 1cm) !important;
height: calc(var(--page-height-cm) * 1cm) !important;
box-shadow: none !important;
outline: none !important;
page-break-after: always;
@ -141,6 +146,8 @@
.page { width: 100%; height: auto; aspect-ratio: var(--page-width-cm) / var(--page-height-cm); }
}
</style>
<!-- This style tag will be populated dynamically to set @page size -->
<style id="page-size-style"></style>
</head>
<body>
@ -206,7 +213,7 @@
<span class="stats" id="stats">–</span>
</div>
<div class="row">
<span class="hint">Print at 100% scale with “Print backgrounds/graphics” enabled. If edges clip, increase Printer margin slightly (e.g., 0.3–0.5 cm).</span>
<span class="hint">Print to PDF at 100% scale (or “Actual size”) with backgrounds enabled. If edges clip, increase Printer margin slightly (0.3–0.5 cm).</span>
</div>
</div>
@ -232,7 +239,8 @@
pages: document.getElementById('pages'),
generate: document.getElementById('generate'),
print: document.getElementById('print'),
stats: document.getElementById('stats')
stats: document.getElementById('stats'),
pageSizeStyle: document.getElementById('page-size-style')
};
let imageDataURL = null;
@ -273,7 +281,7 @@
const isLandscape = el.orientation.value === 'landscape';
if (isLandscape) [w, h] = [h, w];
// Push CSS variables for preview
// Push CSS variables
document.documentElement.style.setProperty('--sticker-diameter-cm', d);
document.documentElement.style.setProperty('--gutter-cm', g);
document.documentElement.style.setProperty('--margin-cm', m);
@ -282,7 +290,10 @@
document.documentElement.style.setProperty('--outline-on', outlineOn);
document.documentElement.style.setProperty('--fit-mode', fit);
// Build one page (duplicate in print dialog for more)
// Force the printer page to use exactly this size (prevents the "quarter page" issue).
el.pageSizeStyle.textContent = `@page { size: ${w}cm ${h}cm; margin: 0; }`;
// Build page
el.pages.innerHTML = '';
const page = document.createElement('div');
page.className = 'page';
@ -291,7 +302,7 @@
page.appendChild(canvas);
el.pages.appendChild(page);
// Dimensions inside margins
// Dimensions inside margins (cm)
const W = w - 2*m;
const H = h - 2*m;
@ -299,30 +310,30 @@
const outlineWidthCm = outlineOn ? (getCssNumber('--outline-mm') / 10) : 0; // mm -> cm
const outerD = d + 2*outlineWidthCm;
// Generate placements for selected layout
const placements = layout === 'grid'
// Generate placements
const placements = (layout === 'grid')
? packGrid(W, H, outerD, g)
: packHex(W, H, outerD, g);
// Render stickers
placements.forEach(p => {
const s = createSticker(imageDataURL);
// Offset by outline so the content circle sits at p.x..p.x+outerD
// Align content circle; outline is border around it
s.style.left = cm(p.x + outlineWidthCm);
s.style.top = cm(p.y + outlineWidthCm);
canvas.appendChild(s);
});
// Compute comparison stats for both layouts
const hexCount = packHex(W, H, outerD, g).length;
// Compare both layouts
const hexCount = packHex(W, H, outerD, g).length;
const gridCount = packGrid(W, H, outerD, g).length;
const used = placements.length;
const areaCanvas = W * H;
const areaCircle = Math.PI * Math.pow(outerD/2, 2); // using outer diameter for sheet usage
const areaCircle = Math.PI * Math.pow(outerD/2, 2);
const coverage = areaCanvas > 0 ? (used * areaCircle / areaCanvas) : 0;
const gain = hexCount - gridCount;
const gainText = gain === 0 ? 'same' : (gain > 0 ? `+${gain} with Hex` : `+${-gain} with Grid`);
const gainText = gain === 0 ? 'same'
: (gain > 0 ? `+${gain} with Hex` : `+${-gain} with Grid`);
el.stats.innerHTML =
`<strong>${layout.toUpperCase()}</strong> layout: ${used} stickers • ` +
@ -331,7 +342,6 @@
` • Coverage ${(coverage*100).toFixed(1)}%` +
` — Compare ⇒ Hex: ${hexCount}, Grid: ${gridCount} (${gainText})`;
// If none fit, show a helpful message
if (placements.length === 0) {
const msg = document.createElement('div');
msg.style.position = 'absolute';
@ -345,18 +355,16 @@
}
}
// Hexagonal packing (odd rows offset by half pitch)
// Hexagonal packing
function packHex(W, H, outerD, gutter) {
const res = [];
const pitchX = outerD + gutter;
const pitchY = (Math.sqrt(3) / 2) * outerD + gutter;
const halfStep = 0.5 * (outerD + gutter);
let y = 0;
let row = 0;
let y = 0, row = 0;
while (y + outerD <= H + 1e-6) {
const startX = (row % 2 === 1) ? halfStep : 0;
let x = startX;
let x = (row % 2 === 1) ? halfStep : 0;
while (x + outerD <= W + 1e-6) {
res.push({ x, y });
x += pitchX;
@ -366,10 +374,9 @@
if (row > 5000) break;
}
return res;
// Note: This is edge-to-edge packing using the outer diameter (includes outline if enabled).
}
// Simple rows & columns grid
// Rows & columns grid
function packGrid(W, H, outerD, gutter) {
const res = [];
const pitchX = outerD + gutter;