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

ollama notes; grid

Browse Source
This commit is contained in:
Dobromir Popov
2025-08-13 00:28:05 +03:00
parent 84d83bb947
commit 145f906a20
4 changed files with 80 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
HTML/STICKERS/index.html
View File

@ -3,21 +3,20 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>4 cm Sticker Sheet – Hex vs Grid (Print-Fixed)</title>
<title>4 cm Sticker Sheet – Hex vs Grid (Negative Gutter)</title>
<style>
:root {
--sticker-diameter-cm: 4; /* Content circle diameter */
--gutter-cm: 0; /* Space between outer edges */
--gutter-cm: 0; /* Can be negative for overlap */
--margin-cm: 0; /* Safety/printer margin */
--outline-on: 0; /* 1 show outline, 0 none */
--outline-mm: 0.3; /* Outline width when enabled */
--fit-mode: cover; /* cover|contain */
--page-width-cm: 21; /* A4 by default */
--page-width-cm: 21; /* A4 default */
--page-height-cm: 29.7;
}
/* Base @page; the exact size is injected dynamically so the printer uses
the selected paper & orientation without scaling. */
/* Printer page size is injected dynamically based on chosen paper/orientation. */
@page { margin: 0; }
* { box-sizing: border-box; }
@ -54,7 +53,7 @@
white-space: nowrap;
}
.controls input[type="number"] {
width: 6.5em;
width: 7.5em;
padding: 6px 8px;
}
.controls select, .controls button, .controls input[type="file"] {
@ -87,15 +86,14 @@
gap: 12px;
}
/* On-screen preview uses px so it fits the viewport nicely.
For print we override width/height to exact cm below. */
/* On-screen preview in px; print overrides to cm below. */
.page {
background: white;
margin: 0 auto;
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
outline: 1px dashed #e5e7eb;
width: calc(var(--page-width-cm) * 37.8px); /* screen preview only */
width: calc(var(--page-width-cm) * 37.8px);
height: calc(var(--page-height-cm) * 37.8px);
}
@ -127,7 +125,7 @@
user-select: none;
}
/* Print: force exact physical size (cm) so PDF printers don't scale or clip. */
/* Print: exact physical size to avoid the “quarter page” issue. */
@media print {
body { background: white; }
.controls { display: none !important; }
@ -146,7 +144,6 @@
.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>
@ -162,11 +159,12 @@
</label>
<label>
Sticker Ø (cm)
<input id="diameter" type="number" step="0.1" min="1" value="4">
<input id="diameter" type="number" step="0.05" min="1" value="4">
</label>
<label>
Gutter (cm)
<input id="gutter" type="number" step="0.1" min="0" value="0">
<!-- Allow negative input; code will clamp to a safe minimum based on diameter. -->
<input id="gutter" type="number" step="0.05" min="-5" value="0">
</label>
<label>
Printer margin (cm)
@ -213,7 +211,7 @@
<span class="stats" id="stats">–</span>
</div>
<div class="row">
<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>
<span class="hint">Gutter can be negative for slight overlap. Print at 100% with backgrounds enabled. If edges clip, increase Printer margin (e.g., 0.3–0.5 cm).</span>
</div>
</div>
@ -245,7 +243,7 @@
let imageDataURL = null;
// Update on any change
// Live updates
['change','input'].forEach(evt => {
[el.layout, el.diameter, el.gutter, el.margin, el.outline, el.paper, el.orientation, el.fit].forEach(ctrl => {
ctrl.addEventListener(evt, render);
@ -266,13 +264,12 @@
setTimeout(() => window.print(), 50);
});
// Initial render
render();
render(); // initial
function render() {
const layout = el.layout.value; // 'hex' or 'grid'
const d = clampNum(parseFloat(el.diameter.value), 1, 100); // content diameter (cm)
const g = clampNum(parseFloat(el.gutter.value), 0, 5); // gutter (cm)
const gInput = parseFloat(el.gutter.value); // can be negative
const m = clampNum(parseFloat(el.margin.value), 0, 5); // margin (cm)
const outlineOn = el.outline.value === '1' ? 1 : 0;
const fit = el.fit.value === 'contain' ? 'contain' : 'cover';
@ -281,16 +278,15 @@
const isLandscape = el.orientation.value === 'landscape';
if (isLandscape) [w, h] = [h, w];
// Push CSS variables
// Push CSS variables for preview
document.documentElement.style.setProperty('--sticker-diameter-cm', d);
document.documentElement.style.setProperty('--gutter-cm', g);
document.documentElement.style.setProperty('--margin-cm', m);
document.documentElement.style.setProperty('--page-width-cm', w);
document.documentElement.style.setProperty('--page-height-cm', h);
document.documentElement.style.setProperty('--outline-on', outlineOn);
document.documentElement.style.setProperty('--fit-mode', fit);
// Force the printer page to use exactly this size (prevents the "quarter page" issue).
// Force printer page size
el.pageSizeStyle.textContent = `@page { size: ${w}cm ${h}cm; margin: 0; }`;
// Build page
@ -302,15 +298,22 @@
page.appendChild(canvas);
el.pages.appendChild(page);
// Dimensions inside margins (cm)
// Dimensions inside margins
const W = w - 2*m;
const H = h - 2*m;
// Outer diameter (content + outline on both sides)
// Outline width in cm
const outlineWidthCm = outlineOn ? (getCssNumber('--outline-mm') / 10) : 0; // mm -> cm
const outerD = d + 2*outlineWidthCm;
// Generate placements
// Allow negative gutter but keep step positive (pitch > 0).
// Minimum safe gutter is just above -outerD so that pitch stays positive.
const MIN_EPS = 0.01; // 0.01 cm = 0.1 mm
const gSafeMin = -(outerD - MIN_EPS);
const g = clampNum(isNaN(gInput) ? 0 : gInput, gSafeMin, 5); // upper bound 5 cm
document.documentElement.style.setProperty('--gutter-cm', g);
// Generate placements with the sanitized gutter
const placements = (layout === 'grid')
? packGrid(W, H, outerD, g)
: packHex(W, H, outerD, g);
@ -318,13 +321,12 @@
// Render stickers
placements.forEach(p => {
const s = createSticker(imageDataURL);
// 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);
});
// Compare both layouts
// Compare both layouts (using the same safe gutter)
const hexCount = packHex(W, H, outerD, g).length;
const gridCount = packGrid(W, H, outerD, g).length;
const used = placements.length;
@ -332,13 +334,15 @@
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`);
// If user requested a gutter below safe min, indicate clamping.
const clampedNote = gInput < gSafeMin ? ` (clamped to ${g.toFixed(2)} cm)` : '';
el.stats.innerHTML =
`<strong>${layout.toUpperCase()}</strong> layout: ${used} stickers • ` +
`Ø ${d.toFixed(1)} cm${outlineOn ? ` + ${Math.round(outlineWidthCm*10)} mm outline` : ''}` +
(g > 0 ? ` • Gutter ${g.toFixed(1)} cm` : ' • No gutter') +
`Ø ${d.toFixed(2)} cm${outlineOn ? ` + ${Math.round(outlineWidthCm*10)} mm outline` : ''}` +
` • Gutter ${g.toFixed(2)} cm${clampedNote}` +
` • Coverage ${(coverage*100).toFixed(1)}%` +
` — Compare ⇒ Hex: ${hexCount}, Grid: ${gridCount} (${gainText})`;
@ -350,21 +354,23 @@
msg.style.placeItems = 'center';
msg.style.color = '#6b7280';
msg.style.fontSize = '14px';
msg.textContent = 'No stickers fit with current settings. Reduce margins/gutter or switch orientation.';
msg.textContent = 'No stickers fit with current settings. Reduce margins or adjust gutter/orientation.';
canvas.appendChild(msg);
}
}
// Hexagonal packing
function packHex(W, H, outerD, gutter) {
function packHex(W, H, outerD, g) {
const res = [];
const pitchX = outerD + gutter;
const pitchY = (Math.sqrt(3) / 2) * outerD + gutter;
const halfStep = 0.5 * (outerD + gutter);
const pitchX = outerD + g;
const pitchY = (Math.sqrt(3) / 2) * outerD + g;
const halfStep = 0.5 * (outerD + g);
if (pitchX <= 0 || pitchY <= 0) return res; // safety
let y = 0, row = 0;
while (y + outerD <= H + 1e-6) {
let x = (row % 2 === 1) ? halfStep : 0;
let x = (row % 2 === 1) ? Math.max(0, halfStep) : 0;
while (x + outerD <= W + 1e-6) {
res.push({ x, y });
x += pitchX;
@ -377,10 +383,12 @@
}
// Rows & columns grid
function packGrid(W, H, outerD, gutter) {
function packGrid(W, H, outerD, g) {
const res = [];
const pitchX = outerD + gutter;
const pitchY = outerD + gutter;
const pitchX = outerD + g;
const pitchY = outerD + g;
if (pitchX <= 0 || pitchY <= 0) return res; // safety
let y = 0;
while (y + outerD <= H + 1e-6) {