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 });