{"id":2385,"date":"2025-07-02T14:21:58","date_gmt":"2025-07-02T14:21:58","guid":{"rendered":"https:\/\/drainvi.be\/?page_id=2385"},"modified":"2026-07-09T07:32:54","modified_gmt":"2026-07-09T07:32:54","slug":"calculator","status":"publish","type":"page","link":"https:\/\/drainvi.be\/index.php\/calculator\/","title":{"rendered":"calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2385\" class=\"elementor elementor-2385\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01303de e-flex e-con-boxed e-con e-parent\" data-id=\"01303de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a3c8c5b e-con-full e-flex e-con e-child\" data-id=\"a3c8c5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1ebae5 elementor-widget elementor-widget-heading\" data-id=\"f1ebae5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Calculator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c09b8cd elementor-widget elementor-widget-text-editor\" data-id=\"c09b8cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<span style=\"text-decoration: underline;\">Geef het aantal benodigde meters in.<\/span>\n\nHierbij wordt automatisch 1x <a href=\"https:\/\/drainvi.be\/index.php\/tf-drainvi-access-pro\/\" target=\"_blank\" rel=\"noopener\">Drainvi Access Pro<\/a> (inspectieluik) voorzien per 10 lopende meter.\n\nOptioneel kan je de volgende onderdelen toevoegen:\n<ul>\n \t<li>Extra <a href=\"https:\/\/drainvi.be\/index.php\/tf-drainvi-access-pro\/\" target=\"_blank\" rel=\"noopener\">Drainvi Access Pro<\/a> (inspectieluik)<\/li>\n \t<li><a href=\"https:\/\/drainvi.be\/index.php\/tf-drainvi-easy-entry\/\" target=\"_blank\" rel=\"noopener\">Drainvi Easy Entry<\/a> (toegangsluik)<\/li>\n \t<li><a href=\"https:\/\/drainvi.be\/index.php\/tf-drainvi-corner-90\/\" target=\"_blank\" rel=\"noopener\">Drainvi Corner 90<\/a> (vaste hoek)<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b86f9bf e-con-full e-flex e-con e-child\" data-id=\"b86f9bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-318dd4a elementor-button-align-start elementor-mobile-button-align-center elementor-widget elementor-widget-form\" data-id=\"318dd4a\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"goot-calculator-form\" data-settings=\"{&quot;button_width&quot;:&quot;40&quot;,&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" id=\"gootcalculatorform\" name=\"Newsletter Form\" aria-label=\"Newsletter Form\" novalidate=\"\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"2385\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"318dd4a\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"calculator - Drainvi\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"2385\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-number elementor-field-group elementor-column elementor-field-group-lengte elementor-col-100 elementor-sm-100 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-lengte\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tTotale lengte afwateringsgoot in meter: (Drainvi Invisible)\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t<input type=\"number\" name=\"form_fields[lengte]\" id=\"form-field-lengte\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"0\" required=\"required\" min=\"0\" max=\"\" >\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-number elementor-field-group elementor-column elementor-field-group-extra_inspectieluiken elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-extra_inspectieluiken\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tAantal EXTRA inspectieluiken: (Drainvi Access Pro), er is automatisch al 1 voorzien per 10 lopende meter\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t<input type=\"number\" name=\"form_fields[extra_inspectieluiken]\" id=\"form-field-extra_inspectieluiken\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"0\" min=\"0\" max=\"\" >\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-number elementor-field-group elementor-column elementor-field-group-toegangsluiken elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-toegangsluiken\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tAantal toegangsluiken: (Drainvi Easy Entry)\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t<input type=\"number\" name=\"form_fields[toegangsluiken]\" id=\"form-field-toegangsluiken\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"0\" min=\"0\" max=\"\" >\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-number elementor-field-group elementor-column elementor-field-group-vastehoeken elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-vastehoeken\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tAantal hoeken 90\u00b0: (Drainvi Corner 90)\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t<input type=\"number\" name=\"form_fields[vastehoeken]\" id=\"form-field-vastehoeken\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"0\" min=\"0\" max=\"\" >\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-40 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Berekenen<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eac7d0b elementor-widget elementor-widget-html\" data-id=\"eac7d0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* Algemene styling voor de resultaten met Poppins *\/\r\n#goot-calculator-result-wrapper {\r\n    margin: 20px 0;\r\n    padding: 20px;\r\n    background-color: #f9f9f9;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    font-family: 'Poppins', sans-serif; \/* Poppins toegepast op de wrapper *\/\r\n}\r\n\r\n#goot-calculator-result p {\r\n    font-family: 'Poppins', sans-serif;\r\n    font-weight: 600;\r\n    color: #333;\r\n    font-size: 1.2em;\r\n    text-align: left;\r\n}\r\n\r\n#goot-calculator-result ul {\r\n    list-style-type: none;\r\n    padding: 0;\r\n    margin-top: 20px;\r\n}\r\n\r\n#goot-calculator-result li {\r\n    background-color: #fff;\r\n    border: 1px solid #ccc;\r\n    border-radius: 8px;\r\n    padding: 15px;\r\n    text-align: left;\r\n    margin-bottom: 15px;\r\n    display: flex;\r\n    flex-direction: column; \/* Standaard naar 'column' voor mobiel *\/\r\n    align-items: center;\r\n    gap: 15px;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n#goot-calculator-result a {\r\n    text-decoration: none;\r\n    color: #000;\r\n    font-weight: 400;\r\n    display: flex;\r\n    flex-direction: column; \/* Standaard naar 'column' voor mobiel *\/\r\n    align-items: center;\r\n    width: 100%;\r\n    gap: 15px;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n#goot-calculator-result .item-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-align: center; \/* Gecentreerde tekst voor mobiel *\/\r\n}\r\n\r\n#goot-calculator-result .item-title {\r\n    font-family: 'Poppins', sans-serif;\r\n    font-weight: 600;\r\n    font-size: 1.1em;\r\n    color: #333;\r\n}\r\n\r\n#goot-calculator-result .item-accessories {\r\n    font-family: 'Poppins', sans-serif;\r\n    font-weight: 400;\r\n    margin-top: 5px;\r\n    text-align: center; \/* Gecentreerde tekst voor mobiel *\/\r\n    line-height: 1.4;\r\n    word-wrap: break-word; \/* Voorkomt overloop van lange woorden *\/\r\n}\r\n\r\n#goot-calculator-result img {\r\n    width: 100px;\r\n    height: auto;\r\n}\r\n\r\n\/* Media Query voor grotere schermen (desktop\/tablet) *\/\r\n@media (min-width: 768px) {\r\n    #goot-calculator-result li {\r\n        flex-direction: row; \/* Terug naar 'row' voor desktop *\/\r\n        text-align: left;\r\n        align-items: center;\r\n    }\r\n\r\n    #goot-calculator-result a {\r\n        flex-direction: row; \/* Terug naar 'row' voor desktop *\/\r\n        text-align: left;\r\n        align-items: center;\r\n    }\r\n\r\n    #goot-calculator-result .item-content {\r\n        text-align: left; \/* Links uitgelijnd voor desktop *\/\r\n    }\r\n\r\n    #goot-calculator-result .item-accessories {\r\n        text-align: left; \/* Links uitgelijnd voor desktop *\/\r\n    }\r\n}\r\n\r\n\/* PDF-knop styling *\/\r\n#pdf-button {\r\n    display: block;\r\n    margin-top: 20px;\r\n    padding: 10px 20px;\r\n    background-color: white;\r\n    color: black;\r\n    border: solid 1px black;\r\n    border-radius: 0;\r\n    cursor: pointer;\r\n    font-family: 'Poppins', sans-serif;\r\n    font-size: 16px;\r\n    font-weight: 400;\r\n    transition: background-color 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n#pdf-button:hover {\r\n    background-color: black;\r\n    color: white;\r\n}\r\n<\/style>\r\n\r\n<div id=\"goot-calculator-result-wrapper\">\r\n    <div id=\"goot-calculator-result\"><\/div>\r\n    <button id=\"pdf-button\" style=\"display: none;\">Exporteer als PDF<\/button>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    var params = new URLSearchParams(window.location.search);\r\n    var lengte = parseFloat(params.get('lengte'));\r\n    var toegangsluiken = Math.max(0, parseInt(params.get('toegangsluiken')) || 0);\r\n    var vastehoeken = Math.max(0, parseInt(params.get('vastehoeken')) || 0);\r\n    var extra_inspectieluiken = Math.max(0, parseInt(params.get('extra_inspectieluiken')) || 0);\r\n\r\n    var resultContainer = document.getElementById('goot-calculator-result');\r\n    var pdfButton = document.getElementById('pdf-button');\r\n\r\n    \/\/ Helper: maakt een li-item met link, afbeelding en content\r\n    function createItem(href, imgSrc, imgAlt, titleText, accessories) {\r\n        var li = document.createElement(\"li\");\r\n        var a = document.createElement(\"a\");\r\n        a.href = href;\r\n        a.target = \"_blank\";\r\n\r\n        var img = document.createElement(\"img\");\r\n        img.src = imgSrc;\r\n        img.alt = imgAlt;\r\n\r\n        var contentDiv = document.createElement(\"div\");\r\n        contentDiv.className = \"item-content\";\r\n\r\n        var titleSpan = document.createElement(\"span\");\r\n        titleSpan.className = \"item-title\";\r\n        titleSpan.textContent = titleText;\r\n\r\n        contentDiv.appendChild(titleSpan);\r\n\r\n        if (accessories) {\r\n            var accSpan = document.createElement(\"span\");\r\n            accSpan.className = \"item-accessories\";\r\n            accSpan.innerHTML = accessories;\r\n            contentDiv.appendChild(accSpan);\r\n        }\r\n\r\n        a.appendChild(img);\r\n        a.appendChild(contentDiv);\r\n        li.appendChild(a);\r\n\r\n        return li;\r\n    }\r\n\r\n    if (params.has('lengte')) {\r\n        if (isNaN(lengte) || lengte <= 0) {\r\n            resultContainer.textContent = \"Voer een geldige lengte in.\";\r\n            pdfButton.style.display = 'none';\r\n            return;\r\n        }\r\n\r\n        var gootLengte = 1;\r\n        var gootelementen = Math.ceil(lengte \/ gootLengte);\r\n        \r\n        \/\/ --- STAFFEL LOGICA VOOR BASIS INSPECTION LUIKEN ---\r\n        var basisInspectieluiken = 1;\r\n        if (lengte >= 10) {\r\n            basisInspectieluiken = 1 + Math.floor(lengte \/ 10);\r\n        }\r\n        \r\n        var totaal_inspectieluiken = basisInspectieluiken + extra_inspectieluiken;\r\n\r\n        \/\/ Dynamische tekst bouwen voor het onderscheid\r\n        var inspectieluikTitel = totaal_inspectieluiken + \"x Inspectieluik (Drainvi Access Pro)\";\r\n        if (extra_inspectieluiken > 0) {\r\n            inspectieluikTitel += \" (\" + basisInspectieluiken + \"x standaard + \" + extra_inspectieluiken + \"x extra handmatig toegevoegd)\";\r\n        } else {\r\n            inspectieluikTitel += \" (\" + basisInspectieluiken + \"x standaard)\";\r\n        }\r\n        \/\/ -----------------------------------------------------------\r\n\r\n        resultContainer.innerHTML = \"\"; \/\/ leegmaken\r\n        \r\n        \/\/ Uitgebreide header met de uitleg over de staffelregel\r\n        var header = document.createElement(\"p\");\r\n        header.innerHTML = \"<strong>Benodigdheden voor \" + lengte + \" meter Drainvi afwateringsgoot:<\/strong><br>\" +\r\n                           \"<span style='font-weight: normal; font-size: 0.85em; color: #666; display: block; margin-top: 5px;'>\" +\r\n                           \"Hierbij wordt automatisch \" + basisInspectieluiken + \"x Drainvi Access Pro (inspectieluik) voorzien volgens de regel: 1 per (begonnen) 10 lopende meter.\" +\r\n                           \"<\/span>\";\r\n        resultContainer.appendChild(header);\r\n\r\n        var ul = document.createElement(\"ul\");\r\n\r\n        \/\/ Goot\r\n        ul.appendChild(\r\n            createItem(\r\n                \"https:\/\/drainvi.be\/index.php\/tf-drainvi-invisible\/\",\r\n                \"https:\/\/drainvi.be\/wp-content\/uploads\/2025\/04\/Adobe-Express-file-3.png\",\r\n                \"Goot\",\r\n                gootelementen + \"x Drainvi Invisible 1m inclusief verbindingsstuk\"\r\n            )\r\n        );\r\n\r\n        \/\/ Inspectieluik\r\n        ul.appendChild(\r\n            createItem(\r\n                \"https:\/\/drainvi.be\/index.php\/tf-drainvi-access-pro\/\",\r\n                \"https:\/\/drainvi.be\/wp-content\/uploads\/2025\/04\/Adobe-Express-file-2-1.png\",\r\n                \"Inspectieluik\",\r\n                inspectieluikTitel,\r\n                \"<em style='color: #555; font-style: normal;'>Hierbij wordt automatisch \" + basisInspectieluiken + \"x Drainvi Access Pro (inspectieluik) voorzien per 10 lopende meter.<\/em><br><br>\" +\r\n                \"Verpakt in doos met volgende toebehoren:<br>\" +\r\n                \"- 1x Tool<br>\" +\r\n                \"- 2x eindstoppen, 1x dia 50 mm en 1x dia 75 mm<br>\" +\r\n                \"- 2x eindstukken<br>\" +\r\n                \"- 1x verbindingsstuk<br>\" +\r\n                \"- Mal voor aftekenen tegel\"\r\n            )\r\n        );\r\n\r\n        \/\/ Toegangsluiken\r\n        if (toegangsluiken > 0) {\r\n            ul.appendChild(\r\n                createItem(\r\n                    \"https:\/\/drainvi.be\/index.php\/tf-drainvi-easy-entry\/\",\r\n                    \"https:\/\/drainvi.be\/wp-content\/uploads\/2025\/04\/Adobe-Express-file-3-1.png\",\r\n                    \"Toegangsluik\",\r\n                    toegangsluiken + \"x Toegangsluik (Drainvi Easy Entry) inclusief verbindingsstuk\"\r\n                )\r\n            );\r\n        }\r\n\r\n        \/\/ Vaste hoeken\r\n        if (vastehoeken > 0) {\r\n            ul.appendChild(\r\n                createItem(\r\n                    \"https:\/\/drainvi.be\/index.php\/tf-drainvi-corner-90\/\",\"https:\/\/drainvi.be\/wp-content\/uploads\/2025\/04\/Adobe-Express-file-5.png\",\r\n                    \"Vaste hoek\",\r\n                    vastehoeken + \"x Vaste hoek inclusief 2 verbindingsstukken (Drainvi corner 90)\"\r\n                )\r\n            );\r\n        }\r\n\r\n        resultContainer.appendChild(ul);\r\n\r\n        \/\/ Automatisch scrollen\r\n        resultContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n\r\n        pdfButton.style.display = 'block';\r\n    }\r\n});\r\n\r\n\/\/ PDF-downloadfunctionaliteit\r\ndocument.getElementById('pdf-button').addEventListener('click', function () {\r\n    var target = document.getElementById('goot-calculator-result');\r\n    if (!target || target.innerHTML.trim() === '') {\r\n        alert(\"Er is geen resultaat om te exporteren.\");\r\n        return;\r\n    }\r\n\r\n    var btn = this;\r\n    var originalBtnText = btn.innerText;\r\n    btn.innerText = \"Bezig met genereren...\";\r\n    btn.disabled = true;\r\n\r\n    \/\/ Directe link met cache-buster tegen CORS problemen\r\n    var logoUrl = 'https:\/\/drainvi.be\/wp-content\/uploads\/2026\/07\/zwart-groen-1-1.jpg?t=' + new Date().getTime(); \r\n    var logo = new Image();\r\n    logo.removeAttribute('crossOrigin'); \r\n    logo.crossOrigin = 'Anonymous';\r\n\r\n    function startPDFGeneration(loadedLogo) {\r\n        var jsPDF = window.jspdf.jsPDF;\r\n        var pdf = new jsPDF('p', 'mm', 'a4');\r\n        \r\n        \/\/ Registreer en configureer Poppins specifiek voor de PDF-omgeving\r\n    \r\n\r\n        var pageWidth = pdf.internal.pageSize.getWidth();\r\n        var pageHeight = pdf.internal.pageSize.getHeight();\r\n        var margin = 10;\r\n        var topOffset = margin;\r\n\r\n        if (loadedLogo) {\r\n            var logoWidth = 50;\r\n            var logoHeight = (loadedLogo.height * logoWidth) \/ loadedLogo.width;\r\n            var logoX = (pageWidth - logoWidth) \/ 2;\r\n            var logoY = 10;\r\n            var spaceUnderLogo = 15;\r\n            topOffset = logoY + logoHeight + spaceUnderLogo;\r\n        }\r\n\r\n        html2canvas(target, { \r\n            scale: 2, \r\n            useCORS: true, \r\n            logging: false,\r\n            onclone: function(clonedDoc) {\r\n                \/\/ Zorg ervoor dat het gekloonde element voor de PDF ook expliciet Poppins gebruikt\r\n                var clonedTarget = clonedDoc.getElementById('goot-calculator-result');\r\n                if(clonedTarget) {\r\n                    clonedTarget.style.fontFamily = \"'Poppins', sans-serif\";\r\n                }\r\n            }\r\n        }).then(function(canvas) {\r\n            var imgWidth = canvas.width;\r\n            var imgHeight = canvas.height;\r\n\r\n            var pdfWidth = pageWidth - margin * 2;\r\n            var pdfHeight = pageHeight - topOffset - margin;\r\n            var ratio = Math.min(pdfWidth \/ imgWidth, pdfHeight \/ imgHeight);\r\n\r\n            var finalWidth = imgWidth * ratio;\r\n            var finalHeight = imgHeight * ratio;\r\n\r\n            var posX = (pageWidth - finalWidth) \/ 2;\r\n            var posY = topOffset;\r\n\r\n            var remainingHeight = finalHeight;\r\n            var sourceY = 0;\r\n            var pageCanvasHeight = (pdfHeight \/ finalHeight) * imgHeight;\r\n\r\n            while (remainingHeight > 0) {\r\n                var canvasSlice = document.createElement(\"canvas\");\r\n                canvasSlice.width = canvas.width;\r\n                canvasSlice.height = Math.min(pageCanvasHeight, imgHeight - sourceY);\r\n                var ctx = canvasSlice.getContext(\"2d\");\r\n\r\n                ctx.drawImage(\r\n                    canvas,\r\n                    0, sourceY,\r\n                    canvas.width, canvasSlice.height,\r\n                    0, 0,\r\n                    canvas.width, canvasSlice.height\r\n                );\r\n\r\n                var sliceData = canvasSlice.toDataURL(\"image\/jpeg\", 1.0);\r\n                var sliceHeightInPDF = (canvasSlice.height \/ imgHeight) * finalHeight;\r\n\r\n                if (loadedLogo) {\r\n                    try {\r\n                        pdf.addImage(loadedLogo, \"JPEG\", logoX, logoY, logoWidth, logoHeight);\r\n                    } catch (e) {\r\n                        console.error(\"Kon logo niet toevoegen:\", e);\r\n                    }\r\n                }\r\n                \r\n                pdf.addImage(sliceData, \"JPEG\", posX, posY, finalWidth, sliceHeightInPDF);\r\n\r\n                remainingHeight -= sliceHeightInPDF;\r\n                sourceY += canvasSlice.height;\r\n\r\n                if (remainingHeight > 0) {\r\n                    pdf.addPage();\r\n                    posY = topOffset;\r\n                }\r\n            }\r\n\r\n            pdf.save(\"afwateringsgoot-berekening.pdf\");\r\n            btn.innerText = originalBtnText;\r\n            btn.disabled = false;\r\n        }).catch(function(err) {\r\n            console.error(\"Fout bij genereren PDF:\", err);\r\n            alert(\"Er is iets misgegaan bij het maken van de PDF.\");\r\n            btn.innerText = originalBtnText;\r\n            btn.disabled = false;\r\n        });\r\n    }\r\n\r\n    logo.onload = function() {\r\n        startPDFGeneration(logo);\r\n    };\r\n\r\n    logo.onerror = function() {\r\n        console.warn(\"Logo kon niet laden via CORS. PDF wordt gemaakt zonder logo.\");\r\n        startPDFGeneration(null); \r\n    };\r\n\r\n    logo.src = logoUrl;\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculator Geef het aantal benodigde meters in. Hierbij wordt automatisch 1x Drainvi Access Pro (inspectieluik) voorzien per 10 lopende meter. Optioneel kan je de volgende onderdelen toevoegen: Extra Drainvi Access Pro (inspectieluik) Drainvi Easy Entry (toegangsluik) Drainvi Corner 90 (vaste hoek) Exporteer als PDF<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-2385","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>calculator - Drainvi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/drainvi.be\/index.php\/calculator\/\" \/>\n<meta property=\"og:locale\" content=\"nl_BE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"calculator - Drainvi\" \/>\n<meta property=\"og:description\" content=\"Calculator Geef het aantal benodigde meters in. Hierbij wordt automatisch 1x Drainvi Access Pro (inspectieluik) voorzien per 10 lopende meter. Optioneel kan je de volgende onderdelen toevoegen: Extra Drainvi Access Pro (inspectieluik) Drainvi Easy Entry (toegangsluik) Drainvi Corner 90 (vaste hoek) Exporteer als PDF\" \/>\n<meta property=\"og:url\" content=\"https:\/\/drainvi.be\/index.php\/calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"Drainvi\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/drainvi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T07:32:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/drainvi.be\/wp-content\/uploads\/2024\/10\/rect1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"288\" \/>\n\t<meta property=\"og:image:height\" content=\"131\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/drainvi.be\\\/index.php\\\/calculator\\\/\",\"url\":\"https:\\\/\\\/drainvi.be\\\/index.php\\\/calculator\\\/\",\"name\":\"calculator - Drainvi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/drainvi.be\\\/#website\"},\"datePublished\":\"2025-07-02T14:21:58+00:00\",\"dateModified\":\"2026-07-09T07:32:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/drainvi.be\\\/index.php\\\/calculator\\\/#breadcrumb\"},\"inLanguage\":\"nl-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/drainvi.be\\\/index.php\\\/calculator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/drainvi.be\\\/index.php\\\/calculator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/drainvi.be\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"calculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/drainvi.be\\\/#website\",\"url\":\"https:\\\/\\\/drainvi.be\\\/\",\"name\":\"Drainvi\",\"description\":\"Onzichtbare afwateringsgoot\",\"publisher\":{\"@id\":\"https:\\\/\\\/drainvi.be\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/drainvi.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-BE\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/drainvi.be\\\/#organization\",\"name\":\"Drainvi\",\"url\":\"https:\\\/\\\/drainvi.be\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-BE\",\"@id\":\"https:\\\/\\\/drainvi.be\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/drainvi.be\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/zwart-groen-1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/drainvi.be\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/zwart-groen-1-1.jpg\",\"width\":2526,\"height\":1091,\"caption\":\"Drainvi\"},\"image\":{\"@id\":\"https:\\\/\\\/drainvi.be\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/drainvi\",\"https:\\\/\\\/www.instagram.com\\\/drainvi_be\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"calculator - Drainvi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/drainvi.be\/index.php\/calculator\/","og_locale":"nl_BE","og_type":"article","og_title":"calculator - Drainvi","og_description":"Calculator Geef het aantal benodigde meters in. Hierbij wordt automatisch 1x Drainvi Access Pro (inspectieluik) voorzien per 10 lopende meter. Optioneel kan je de volgende onderdelen toevoegen: Extra Drainvi Access Pro (inspectieluik) Drainvi Easy Entry (toegangsluik) Drainvi Corner 90 (vaste hoek) Exporteer als PDF","og_url":"https:\/\/drainvi.be\/index.php\/calculator\/","og_site_name":"Drainvi","article_publisher":"https:\/\/www.facebook.com\/drainvi","article_modified_time":"2026-07-09T07:32:54+00:00","og_image":[{"width":288,"height":131,"url":"https:\/\/drainvi.be\/wp-content\/uploads\/2024\/10\/rect1.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/drainvi.be\/index.php\/calculator\/","url":"https:\/\/drainvi.be\/index.php\/calculator\/","name":"calculator - Drainvi","isPartOf":{"@id":"https:\/\/drainvi.be\/#website"},"datePublished":"2025-07-02T14:21:58+00:00","dateModified":"2026-07-09T07:32:54+00:00","breadcrumb":{"@id":"https:\/\/drainvi.be\/index.php\/calculator\/#breadcrumb"},"inLanguage":"nl-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/drainvi.be\/index.php\/calculator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/drainvi.be\/index.php\/calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/drainvi.be\/"},{"@type":"ListItem","position":2,"name":"calculator"}]},{"@type":"WebSite","@id":"https:\/\/drainvi.be\/#website","url":"https:\/\/drainvi.be\/","name":"Drainvi","description":"Onzichtbare afwateringsgoot","publisher":{"@id":"https:\/\/drainvi.be\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/drainvi.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-BE"},{"@type":"Organization","@id":"https:\/\/drainvi.be\/#organization","name":"Drainvi","url":"https:\/\/drainvi.be\/","logo":{"@type":"ImageObject","inLanguage":"nl-BE","@id":"https:\/\/drainvi.be\/#\/schema\/logo\/image\/","url":"https:\/\/drainvi.be\/wp-content\/uploads\/2026\/07\/zwart-groen-1-1.jpg","contentUrl":"https:\/\/drainvi.be\/wp-content\/uploads\/2026\/07\/zwart-groen-1-1.jpg","width":2526,"height":1091,"caption":"Drainvi"},"image":{"@id":"https:\/\/drainvi.be\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/drainvi","https:\/\/www.instagram.com\/drainvi_be"]}]}},"_links":{"self":[{"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/pages\/2385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/comments?post=2385"}],"version-history":[{"count":353,"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/pages\/2385\/revisions"}],"predecessor-version":[{"id":4208,"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/pages\/2385\/revisions\/4208"}],"wp:attachment":[{"href":"https:\/\/drainvi.be\/index.php\/wp-json\/wp\/v2\/media?parent=2385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}