${ovenData.science.reflect}

${ovenData.science.absorb}

`; } /** * Builds the configuration tab inputs from ovenData */ function buildConfig() { configMaterials.value = ovenData.materials.join("\n"); configSteps.value = ovenData.steps.join("\n"); configScienceTrap.value = ovenData.science.trap; configScienceReflect.value = ovenData.science.reflect; configScienceAbsorb.value = ovenData.science.absorb; } /** * Saves the data from the config tab back to ovenData */ window.saveOvenConfig = function () { ovenData.materials = configMaterials.value.split("\n").filter(Boolean); ovenData.steps = configSteps.value.split("\n").filter(Boolean); ovenData.science.trap = configScienceTrap.value; ovenData.science.reflect = configScienceReflect.value; ovenData.science.absorb = configScienceAbsorb.value; buildGuide(); // Re-build all UI parts if (saveMessage) { saveMessage.style.display = "inline"; setTimeout(() => { saveMessage.style.display = "none"; }, 2000); } showOvenTab("oven-tab-guide"); // Switch back to dashboard }; /** * Switches the active tab * (Spec II.B.4) */ window.showOvenTab = function (tabId) { tabContents.forEach((content) => { content.classList.remove("active"); }); tabButtons.forEach((button) => { button.classList.remove("active"); }); const contentToShow = document.getElementById(tabId); const buttonToActivate = document.querySelector( `[onclick="showOvenTab('${tabId}')"]` ); if (contentToShow) contentToShow.classList.add("active"); if (buttonToActivate) buttonToActivate.classList.add("active"); if (tabId === "oven-tab-config") { buildConfig(); } }; /** * Navigates between tabs using Next/Previous buttons * (Spec II.B.4.o) */ window.navigateOvenTabs = function (direction) { let currentIndex = -1; tabButtons.forEach((button, index) => { if (button.classList.contains("active")) { currentIndex = index; } }); if (currentIndex === -1) return; let nextIndex; if (direction === "next") { nextIndex = (currentIndex + 1) % tabButtons.length; } else { nextIndex = (currentIndex - 1 + tabButtons.length) % tabButtons.length; } const nextButton = tabButtons[nextIndex]; const onclickAttr = nextButton.getAttribute("onclick"); const tabId = onclickAttr.match(/'([^']*)'/)[1]; if (tabId) showOvenTab(tabId); }; // Make tab functions global for inline onclick window.showOvenTab = showOvenTab; window.navigateOvenTabs = navigateOvenTabs; /** * Downloads the output as a PDF * (Spec II.C) */ function downloadOvenPDF() { if ( typeof jspdf === "undefined" || typeof html2canvas === "undefined" ) { console.error("PDF libraries not loaded."); return; } if (!pdfGuideContent.innerHTML) { console.error("No guide content to download."); return; } const { jsPDF } = jspdf; const pdfOutputElement = document.getElementById("pdf-output-content"); pdfOutputElement.style.display = "block"; pdfOutputElement.style.position = "absolute"; pdfOutputElement.style.left = "-9999px"; html2canvas(pdfOutputElement, { scale: 2, backgroundColor: "#ffffff", }).then((canvas) => { pdfOutputElement.style.display = "none"; pdfOutputElement.style.position = "static"; const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF({ orientation: "p", unit: "px", format: "a4", }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; const imgWidth = pdfWidth - 40; // 20px margin const imgHeight = imgWidth / ratio; const pageMargin = 20; if (imgHeight <= pdfHeight - 2 * pageMargin) { pdf.addImage(imgData, "PNG", pageMargin, pageMargin, imgWidth, imgHeight); } else { // Handle multiple pages let heightLeft = canvasHeight; let canvasPosition = 0; const pageHeightInPixels = (pdfHeight - 2 * pageMargin) * (canvasWidth / imgWidth); while (heightLeft > 0.1) { const pageHeight = Math.min(heightLeft, pageHeightInPixels); const pageImgHeight = (pageHeight * imgWidth) / canvasWidth; const tempCanvas = document.createElement("canvas"); tempCanvas.width = canvasWidth; tempCanvas.height = pageHeight; const ctx = tempCanvas.getContext("2d"); ctx.drawImage( canvas, 0, canvasPosition, canvasWidth, pageHeight, 0, 0, canvasWidth, pageHeight ); const pageImgData = tempCanvas.toDataURL("image/png"); pdf.addImage( pageImgData, "PNG", pageMargin, pageMargin, imgWidth, pageImgHeight ); heightLeft -= pageHeight; canvasPosition += pageHeight; if (heightLeft > 0.1) pdf.addPage(); } } pdf.save("diy-solar-oven-guide.pdf"); }); } // --- 5. Event Listeners (Spec IV.C) --- saveConfigBtn.addEventListener("click", window.saveOvenConfig); pdfDownloadBtn.addEventListener("click", downloadOvenPDF); // --- 6. Initialization --- buildGuide(); buildConfig(); showOvenTab("oven-tab-guide"); // Start on the dashboard/guide tab });