{"product_id":"pixlip-go-pdf-vorlagengenerator","title":"PIXLIP GO PDF-Druckvorlage erstellen","description":"\u003c!-- filepath: vis24-druckvorlage-generator.html --\u003e\n\u003cp\u003e\u003cspan\u003eWählen Sie die Größe Ihrer PIXLIP GO LED-Messewand und erstellen Sie automatisch die passende PDF-Druckvorlage. Die Vorlage enthält das korrekte Endformat sowie alle wichtigen Hinweise zur Anlage Ihrer Druckdaten.\u003c\/span\u003e\u003c\/p\u003e\n\u003c!-- VIS24 Druckvorlage Generator – Responsive \u0026 funktional (PIXLP\/Messewand-Version) --\u003e\n\u003cp\u003e\u003cbutton class=\"glass-button\" id=\"calculatorToggleVis24\"\u003eDruckvorlage generieren\u003c\/button\u003e\u003c\/p\u003e\n\u003cdiv style=\"display: none; margin-top: 20px;\" id=\"calculatorPanelVis24\"\u003e\n\u003cdiv style=\"display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 1rem;\"\u003e\n\u003cdiv style=\"flex: 1; min-width: 180px;\"\u003e\n\u003clabel\u003e\u003cstrong\u003eBreite (cm):\u003c\/strong\u003e\u003c\/label\u003e\u003cbr\u003e\n\u003cselect style=\"width: 100%; height: 44px; background-color: #efefef; padding: 10px; font-size: 16px;\" id=\"breiteSelect\"\u003e\n\u003coption value=\"85\"\u003e85\u003c\/option\u003e\n\u003coption value=\"100\" selected\u003e100\u003c\/option\u003e\n\u003coption value=\"185\"\u003e185\u003c\/option\u003e\n\u003coption value=\"200\"\u003e200\u003c\/option\u003e\n\u003coption value=\"285\"\u003e285\u003c\/option\u003e\n\u003coption value=\"300\"\u003e300\u003c\/option\u003e\n\u003c\/select\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"flex: 1; min-width: 180px;\"\u003e\n\u003clabel\u003e\u003cstrong\u003eHöhe (cm):\u003c\/strong\u003e\u003c\/label\u003e\u003cbr\u003e\n\u003cselect style=\"width: 100%; height: 44px; background-color: #efefef; padding: 10px; font-size: 16px;\" id=\"hoeheSelect\"\u003e\n\u003coption value=\"200\" selected\u003e200\u003c\/option\u003e\n\u003coption value=\"225\"\u003e225\u003c\/option\u003e\n\u003coption value=\"250\"\u003e250\u003c\/option\u003e\n\u003c\/select\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"margin-top: 1rem;\"\u003e\u003cbutton id=\"generatePdfVis24\" class=\"glass-button\"\u003ePDF mit Beschnitt generieren\u003c\/button\u003e\u003c\/div\u003e\n\u003c!-- Interaktive Legende (live Maße) — Pixlip\/Messewand --\u003e\n\u003cdiv id=\"legendPanel\" style=\"margin-top: 10px; line-height: 1.5;\"\u003e\n\u003cstrong\u003eProduktionsmaße:\u003c\/strong\u003e\n\u003cdiv\u003e\n\u003cspan style=\"color: red;\"\u003eROT\u003c\/span\u003e = Produktionsformat (inkl. 20 mm Beschnitt) \u003cspan id=\"rotOut\"\u003e–\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cspan style=\"color: blue;\"\u003eBLAU\u003c\/span\u003e = Endformat (sichtbar) \u003cspan id=\"blauOut\"\u003e–\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cspan style=\"color: green;\"\u003eGRÜN\u003c\/span\u003e = Sicherheitsbereich (1 cm innerhalb des Endformats) \u003cspan id=\"gruenOut\"\u003e–\u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- PDF-lib --\u003e\n\u003cp\u003e\u003cscript src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf-lib\/1.17.1\/pdf-lib.min.js\"\u003e\u003c\/script\u003e\u003cscript\u003e\/\/ \u003c![CDATA[\n  \/\/ Panel Toggle\n  document.getElementById('calculatorToggleVis24').addEventListener('click', () =\u003e {\n    const panel = document.getElementById('calculatorPanelVis24');\n    panel.style.display = panel.style.display === 'none' ? 'block' : 'none';\n  });\n\n  \/\/ --- Live-Legende (Pixlip\/Messewand) ---\n  const fmt = (n) =\u003e String(n).replace('.', ',');\n  const fmtPair = (b, h) =\u003e `${fmt(b)} × ${fmt(h)} cm`;\n\n  function updateLegend() {\n    const breite = parseInt(document.getElementById('breiteSelect').value, 10);\n    const hoehe  = parseInt(document.getElementById('hoeheSelect').value, 10);\n\n    \/\/ Pixlip: ROT = Endformat + 20 mm rundum (= +2 cm je Seite) =\u003e +4 cm in Breite\/Höhe\n    \/\/         BLAU = Endformat\n    \/\/         GRÜN = Sicherheitsbereich 10 mm rundum innerhalb des Endformats =\u003e -1 cm in Breite\/Höhe\n    const rotB   = breite + 4;\n    const rotH   = hoehe  + 4;\n    const blauB  = breite;\n    const blauH  = hoehe;\n    const gruenB = breite - 1;\n    const gruenH = hoehe  - 1;\n\n    document.getElementById('rotOut').textContent   = fmtPair(rotB, rotH);\n    document.getElementById('blauOut').textContent  = fmtPair(blauB, blauH);\n    document.getElementById('gruenOut').textContent = fmtPair(gruenB, gruenH);\n  }\n\n  ['breiteSelect', 'hoeheSelect'].forEach(id =\u003e {\n    document.getElementById(id).addEventListener('change', updateLegend);\n  });\n  updateLegend();\n\n  \/\/ --- PDF-Generierung (Pixlip\/Messewand) ---\n  document.getElementById('generatePdfVis24').addEventListener('click', async () =\u003e {\n    const breite = parseInt(document.getElementById('breiteSelect').value, 10); \/\/ Endformat (sichtbar)\n    const hoehe  = parseInt(document.getElementById('hoeheSelect').value, 10); \/\/ Endformat (sichtbar)\n\n    \/\/ Pixlip-Geometrie\n    const BLEED_CM = 2;        \/\/ ROT: +20 mm rundum\n    const GREEN_INSET_CM = 1;  \/\/ GRÜN: -10 mm rundum (innerhalb des Endformats)\n\n    const LINE_W = 3;          \/\/ Linienstärke\n\n    const mmToPt = (mm) =\u003e mm * 2.83465;\n    const cmToPt = (cm) =\u003e mmToPt(cm * 10);\n\n    const endWpt = cmToPt(breite);\n    const endHpt = cmToPt(hoehe);\n\n    \/\/ Dokumentgröße = Produktionsformat (ROT außen)\n    const bleedPt = cmToPt(BLEED_CM);\n    const totalWidthPt  = endWpt + 2 * bleedPt;\n    const totalHeightPt = endHpt + 2 * bleedPt;\n\n    if (!window.PDFLib) { alert('PDF-Bibliothek nicht geladen.'); return; }\n    const { PDFDocument, rgb, StandardFonts } = window.PDFLib;\n    const pdfDoc = await PDFDocument.create();\n    const font = await pdfDoc.embedFont(StandardFonts.HelveticaBold);\n    const page = pdfDoc.addPage([totalWidthPt, totalHeightPt]);\n\n    \/\/ ROT = Produktionsformat (inkl. 20 mm Beschnitt) – Außenrahmen\n    page.drawRectangle({\n      x: 0, y: 0, width: totalWidthPt, height: totalHeightPt,\n      borderColor: rgb(1,0,0), borderWidth: LINE_W\n    });\n\n    \/\/ BLAU = Endformat (sichtbar)\n    const blueX = bleedPt;\n    const blueY = bleedPt;\n    page.drawRectangle({\n      x: blueX, y: blueY, width: endWpt, height: endHpt,\n      borderColor: rgb(0,0,1), borderWidth: LINE_W\n    });\n\n    \/\/ GRÜN = Sicherheitsbereich (10 mm innerhalb des Endformats)\n    const greenInsetPt = cmToPt(GREEN_INSET_CM);\n    const greenX = blueX + greenInsetPt;\n    const greenY = blueY + greenInsetPt;\n    const greenW = endWpt - 2 * greenInsetPt;\n    const greenH = endHpt - 2 * greenInsetPt;\n    page.drawRectangle({\n      x: greenX, y: greenY, width: greenW, height: greenH,\n      borderColor: rgb(0,0.6,0), borderWidth: LINE_W\n    });\n\n    \/\/ Texte (nur Bezeichnungen \u0026 Maße; keine Rollup-Hinweise)\n    const headlineSize = 72;\n    const infoSize = 48;\n\n    const rotBreiteCm   = breite + 4;\n    const rotHoeheCm    = hoehe + 4;\n    const blauBreiteCm  = breite;\n    const blauHoeheCm   = hoehe;\n    const gruenBreiteCm = breite - 1;\n    const gruenHoeheCm  = hoehe - 1;\n\n    let yCursor = totalHeightPt - cmToPt(6);\n    const drawCenteredText = (text, size, y, color = rgb(0, 0, 0)) =\u003e {\n      \/\/ sanitize: ersetze Unicode-Minus durch ASCII, um WinAnsi-Probleme zu vermeiden\n      const safe = String(text).replace(\/[\\u2212\\u2013\\u2014]\/g, '-');\n      const textWidth = font.widthOfTextAtSize(safe, size);\n      const x = (totalWidthPt - textWidth) \/ 2;\n      page.drawText(safe, { x, y, size, font, color });\n    };\n\n    drawCenteredText('VIS24 Druckvorlage: Messewand', headlineSize, yCursor);\n    yCursor -= cmToPt(3.5);\n    drawCenteredText(`BLAU = Endformat (sichtbar): ${blauBreiteCm} × ${blauHoeheCm} cm`, infoSize, yCursor, rgb(0,0,1));\n    yCursor -= cmToPt(3.0);\n    drawCenteredText(`ROT = Produktionsformat inkl. 20 mm Beschnitt: ${rotBreiteCm} × ${rotHoeheCm} cm`, infoSize, yCursor, rgb(1,0,0));\n    yCursor -= cmToPt(3.0);\n    drawCenteredText(`GRÜN = Sicherheitsbereich (10 mm innerhalb): ${gruenBreiteCm} × ${gruenHoeheCm} cm`, infoSize, yCursor, rgb(0,0.6,0));\n\n    \/\/ Download\n    const pdfBytes = await pdfDoc.save();\n    const blob = new Blob([pdfBytes], { type: 'application\/pdf' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `VIS24_Messewand_${breite}x${hoehe}.pdf`;\n    document.body.appendChild(a);\n    a.click();\n    a.remove();\n    URL.revokeObjectURL(url);\n  });\n\/\/ ]]\u003e\u003c\/script\u003e\u003c\/p\u003e\n\u003c!-- Pixlip Go Anfrage-Kalkulator mit dynamischen Zeilen (nur Anfrage) --\u003e\n\u003cp\u003e\u003cbutton id=\"calculatorTogglePixlip\" class=\"glass-button\"\u003eBestpreis Anfragen\u003c\/button\u003e\u003c\/p\u003e\n\u003cdiv style=\"display: none; margin-top: 20px;\" id=\"calculatorPanelPixlip\"\u003e\n\u003cdiv id=\"lineContainerPixlip\"\u003e\u003c\/div\u003e\n\u003cbutton style=\"margin-top: 1rem;\" class=\"glass-button\" id=\"addLinePixlip\"\u003e+ Weitere Größe hinzufügen\u003c\/button\u003e\n\u003cdiv style=\"margin-top: 1.5rem; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;\"\u003e\n\u003cdiv\u003e\n\u003clabel for=\"lieferdatum\"\u003e\u003cstrong\u003eGewünschtes Lieferdatum:\u003c\/strong\u003e\u003c\/label\u003e\u003cbr\u003e \u003cinput style=\"height: 40px; background-color: #efefef; padding: 8px; width: 100%; max-width: 250px;\" name=\"lieferdatum\" id=\"lieferdatum\" type=\"date\"\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"margin-bottom: 4px;\"\u003e\u003ca style=\"color: #007aff; text-decoration: underline; font-weight: bold; white-space: nowrap;\" href=\"#\" id=\"mailtoLinkPixlip\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e Jetzt unverbindlich anfragen \u003c\/a\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cscript\u003e\/\/ \u003c![CDATA[\n  document.getElementById(\"calculatorTogglePixlip\").addEventListener(\"click\", () =\u003e {\n    const panel = document.getElementById(\"calculatorPanelPixlip\");\n    panel.style.display = panel.style.display === \"none\" ? \"block\" : \"none\";\n  });\n\n  const lineContainer = document.getElementById(\"lineContainerPixlip\");\n  const addLineButton = document.getElementById(\"addLinePixlip\");\n\n  function createLine(index) {\n    const line = document.createElement(\"div\");\n    line.className = \"line-row\";\n    line.style = \"display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem;\";\n    line.innerHTML = `\n      \u003cdiv style=\"flex: 1; min-width: 100px;\"\u003e\n        \u003clabel\u003eMenge:\u003c\/label\u003e\n        \u003cinput type=\"number\" name=\"menge\" value=\"1\" min=\"1\" style=\"width: 100%; height: 40px; background-color: #efefef;\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv style=\"flex: 1; min-width: 100px;\"\u003e\n        \u003clabel\u003eBreite (cm):\u003c\/label\u003e\n        \u003cselect name=\"breite\" style=\"width: 100%; height: 40px; background-color: #efefef; padding: 8px; line-height: 1.4;\"\u003e\n          \u003coption value=\"85\"\u003e85\u003c\/option\u003e\n          \u003coption value=\"100\"\u003e100\u003c\/option\u003e\n          \u003coption value=\"185\"\u003e185\u003c\/option\u003e\n          \u003coption value=\"200\"\u003e200\u003c\/option\u003e\n          \u003coption value=\"285\"\u003e285\u003c\/option\u003e\n          \u003coption value=\"300\"\u003e300\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n      \u003cdiv style=\"flex: 1; min-width: 100px;\"\u003e\n        \u003clabel\u003eHöhe (cm):\u003c\/label\u003e\n        \u003cselect name=\"hoehe\" style=\"width: 100%; height: 40px; background-color: #efefef; padding: 8px; line-height: 1.4;\"\u003e\n          \u003coption value=\"200\"\u003e200\u003c\/option\u003e\n          \u003coption value=\"225\"\u003e225\u003c\/option\u003e\n          \u003coption value=\"250\"\u003e250\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n      \u003cdiv style=\"flex: 1; min-width: 150px;\"\u003e\n        \u003clabel\u003eDruckoption: VS\/RS\u003c\/label\u003e\n        \u003cselect name=\"druck\" style=\"width: 100%; height: 40px; background-color: #efefef; padding: 8px; line-height: 1.4;\"\u003e\n          \u003coption value=\"ohne\"\u003eOhne Paneele\u003c\/option\u003e\n          \u003coption value=\"standard\"\u003eTextildruck \/ Textildruck\u003c\/option\u003e\n          \u003coption value=\"express\"\u003eTextildruck \/ Blockout\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    `;\n\n    line.querySelectorAll(\"input, select\").forEach(el =\u003e\n      el.addEventListener(\"input\", updateMailtoLink)\n    );\n\n    return line;\n  }\n\n  function collectLines() {\n    const lines = Array.from(document.querySelectorAll(\".line-row\"));\n    return lines.map(row =\u003e {\n      return {\n        menge: row.querySelector(\"[name='menge']\").value,\n        breite: row.querySelector(\"[name='breite']\").value,\n        hoehe: row.querySelector(\"[name='hoehe']\").value,\n        druck: row.querySelector(\"[name='druck']\").value\n      };\n    });\n  }\n\n  addLineButton.addEventListener(\"click\", () =\u003e {\n    lineContainer.appendChild(createLine(lineContainer.children.length));\n    updateMailtoLink();\n  });\n\n  document.getElementById(\"lieferdatum\").addEventListener(\"change\", updateMailtoLink);\n\n  function updateMailtoLink() {\n    const daten = collectLines();\n    const rawDate = document.getElementById(\"lieferdatum\").value;\n\n    const druckMapping = {\n      \"ohne\": \"Ohne Paneele\",\n      \"standard\": \"Textildruck \/ Textildruck\",\n      \"express\": \"Textildruck \/ Blockout Paneel\"\n    };\n\n    let body = \"Hallo VIS24-Team,%0D%0A%0D%0Aich möchte eine unverbindliche Anfrage zu Pixlip Go stellen:%0D%0A%0D%0A\";\n\n    daten.forEach((item, i) =\u003e {\n      const druckText = druckMapping[item.druck] || item.druck;\n      body += `Position ${i + 1}:%0D%0A`;\n      body += `- Menge: ${item.menge}%0D%0A`;\n      body += `- Breite: ${item.breite} cm%0D%0A`;\n      body += `- Höhe: ${item.hoehe} cm%0D%0A`;\n      body += `- Textildruck: ${druckText}%0D%0A%0D%0A`;\n    });\n\n    if (rawDate) {\n      const [yyyy, mm, dd] = rawDate.split(\"-\");\n      const formatted = `${dd}.${mm}.${yyyy}`;\n      body += `Gewünschtes Lieferdatum: ${formatted}%0D%0A%0D%0A`;\n    }\n\n    body += \"Bitte senden Sie mir ein passendes Angebot.%0D%0A\";\n\n    const mailtoLink = `mailto:vertrieb@vis24.de?subject=Anfrage Pixlip Go LED-Messesystem\u0026body=${body}`;\n    document.getElementById(\"mailtoLinkPixlip\").href = mailtoLink;\n  }\n\n  lineContainer.appendChild(createLine(0));\n  updateMailtoLink();\n\/\/ ]]\u003e\u003c\/script\u003e","brand":"VIS24","offers":[{"title":"Default Title","offer_id":55905044824329,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0516\/7949\/4302\/files\/pixlip-go-pdf-druckvorlage-erstellen-4508491.webp?v=1789571528","url":"https:\/\/vis24.de\/products\/pixlip-go-pdf-vorlagengenerator","provider":"VIS24","version":"1.0","type":"link"}