Print Size Chart Generator

Print Size Chart Generator

Visual Comparison

Dimensions Table

Size Name Dimensions (Inches) Dimensions (Centimeters)

Standard Sizes

Select the standard sizes you want to include in the chart.

Custom Sizes

No sizes selected. Go to the Configuration tab to add some.

"; dataTableBody.innerHTML = "No sizes selected."; return; } // 2. Render Visual Chart const containerWidth = visualChartContainer.clientWidth; const containerHeight = visualChartContainer.clientHeight; // Find max dimensions to set scale (portrait orientation) let maxWidth = 0; let maxHeight = 0; allSelectedSizes.forEach(s => { if (s.w > maxWidth) maxWidth = s.w; if (s.h > maxHeight) maxHeight = s.h; }); const scaleX = containerWidth / maxWidth; const scaleY = containerHeight / maxHeight; const scale = Math.min(scaleX, scaleY) * 0.95; // Use 95% to leave a small margin allSelectedSizes.sort((a, b) => (b.w * b.h) - (a.w * a.h)); // Sort largest to smallest allSelectedSizes.forEach((size, index) => { const w = size.w * scale; const h = size.h * scale; const color = chartColors[index % chartColors.length]; const box = document.createElement("div"); box.className = "psg-size-box"; box.style.width = `${w}px`; box.style.height = `${h}px`; box.style.background = `${color}40`; // Add alpha box.style.boxShadow = `0 0 0 2px ${color} inset`; box.innerHTML = `${size.name}`; visualChartContainer.appendChild(box); // 3. Render Data Table Row const tr = document.createElement("tr"); tr.innerHTML = ` ${size.name} ${size.w.toFixed(2)} in x ${size.h.toFixed(2)} in ${(size.w * 2.54).toFixed(2)} cm x ${(size.h * 2.54).toFixed(2)} cm `; dataTableBody.appendChild(tr); }); } // --- Event Handlers --- // Update Dashboard Button updateBtn.addEventListener("click", () => { // 1. Read all checkboxes const selected = []; standardList.querySelectorAll("input[type='checkbox']:checked").forEach(cb => { selected.push(cb.value); }); appState.selectedStandard = selected; // 2. Save state saveState(); // 3. Render dashboard renderDashboardTab(); // 4. Switch to dashboard tab showTab(0); }); // Add Custom Size customForm.addEventListener("submit", (e) => { e.preventDefault(); const name = customName.value.trim(); let w = parseFloat(customWidth.value); let h = parseFloat(customHeight.value); const unit = customUnit.value; if (!name || isNaN(w) || isNaN(h) || w <= 0 || h <= 0) { alert("Please enter a valid name, width, and height."); return; } if (appState.customSizes.some(s => s.name === name)) { alert("A custom size with this name already exists."); return; } // Convert to inches if necessary if (unit === "cm") { w = w / 2.54; h = h / 2.54; } appState.customSizes.push({ name: name, w: w, h: h }); saveState(); renderConfigTab(); // Clear form customName.value = ""; customWidth.value = ""; customHeight.value = ""; }); // Remove Custom Size (Event Delegation) customList.addEventListener("click", (e) => { if (e.target.classList.contains("psg-remove-btn")) { const name = e.target.dataset.name; appState.customSizes = appState.customSizes.filter(s => s.name !== name); saveState(); renderConfigTab(); } }); // PDF Download pdfBtn.addEventListener("click", () => { const { jsPDF } = window.jspdf; const fileName = 'Print_Size_Chart.pdf'; html2canvas(exportArea, { scale: 2, // Improve resolution useCORS: true, backgroundColor: '#ffffff' }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = doc.internal.pageSize.getWidth(); const pdfHeight = doc.internal.pageSize.getHeight(); const imgProps = doc.getImageProperties(imgData); const imgWidth = imgProps.width; const imgHeight = imgProps.height; const margin = 40; const usableWidth = pdfWidth - (2 * margin); const ratio = usableWidth / imgWidth; const scaledHeight = imgHeight * ratio; doc.addImage(imgData, 'PNG', margin, margin, usableWidth, scaledHeight); doc.save(fileName); }).catch(err => { console.error("PSG PDF Error:", err); // alert("An error occurred while generating the PDF."); // Per spec }); }); // --- Local Storage --- function saveState() { try { localStorage.setItem("psgAppState", JSON.stringify(appState)); } catch (e) { console.warn("PSG: Could not save state to localStorage."); } } function loadState() { try { const storedState = localStorage.getItem("psgAppState"); if (storedState) { appState = JSON.parse(storedState); } } catch (e) { console.warn("PSG: Could not load state, using defaults."); } } // --- Initial Load --- loadState(); renderConfigTab(); renderDashboardTab(); showTab(0); // Start on Dashboard });
Scroll to Top