Dynamic Greenhouse Drawing<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n margin: 20px;\r\n background-color: #f4f4f9;\r\n color: #333;\r\n }\r\n h1 {\r\n text-align: center;\r\n }\r\n .controls {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n }\r\n .controls label {\r\n margin-right: 10px;\r\n margin-bottom: 5px;\r\n }\r\n .controls select, .controls input {\r\n margin-right: 20px;\r\n padding: 5px;\r\n width: 100px;\r\n }\r\n button {\r\n padding: 10px 20px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n button:hover {\r\n background-color: #0056b3;\r\n }\r\n canvas {\r\n display: block;\r\n margin: 0 auto;\r\n border: 2px solid #555;\r\n background-color: #fff;\r\n }\r\n table {\r\n margin: 20px auto;\r\n border-collapse: collapse;\r\n width: 50%;\r\n }\r\n table, th, td {\r\n border: 1px solid #ddd;\r\n }\r\n th, td {\r\n padding: 8px;\r\n font-size: small;\r\n text-align: left;\r\n }\r\n th {\r\n background-color: #f4f4f9;\r\n }\r\n\r\n table td:first-child {\r\n text-align: left; \/* Align description to the left *\/\r\n padding-left: 10px; \/* Add some padding for better spacing *\/\r\n }\r\n table td:last-child {\r\n text-align: right; \/* Align numbers to the right *\/\r\n padding-right: 10px; \/* Add some padding for better spacing *\/\r\n }\r\n \/* Adjust font size for input fields *\/\r\n input[type=\"number\"], select {\r\n font-size: 12px; \/* Set font size for input and dropdown fields *\/\r\n height: 30px; \/* Adjust height for better alignment *\/\r\n }\r\n\r\n \/* Adjust font size for labels *\/\r\n label {\r\n font-size: 12px; \/* Set font size for labels *\/\r\n }\r\n\r\n \/* Optional: Adjust font size for the button *\/\r\n button {\r\n font-size: 12px;\r\n padding: 5px 15px; \/* Adjust padding for better button appearance *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1>Dynamic Greenhouse Drawing<\/h1>\r\n\r\n <div class=\"controls\">\r\n <table style=\"margin: 0; border-spacing: 0px\">\r\n <tr>\r\n <td><label for=\"width\">Nr. of Sections (width):<\/label><\/td>\r\n <td><input type=\"number\" id=\"width\" value=\"12\" step=\"1\" style=\"height: 10px;\"><\/td>\r\n <td><label for=\"sectionWidth\">Section Width (m):<\/label><\/td>\r\n <td><input type=\"number\" id=\"sectionWidth\" value=\"8\" step=\"0.1\" style=\"height: 10px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"length\">Nr. of Sections (length):<\/label><\/td>\r\n <td><input type=\"number\" id=\"length\" value=\"21\" step=\"1\" style=\"height: 10px;\"><\/td>\r\n <td><label for=\"sectionLength\">Section Length (m):<\/label><\/td>\r\n <td>\r\n <select id=\"sectionLength\" style=\"height: 25px;\">\r\n <option value=\"4.0\" selected>4.0<\/option>\r\n <option value=\"4.5\">4.5<\/option>\r\n <option value=\"5.0\">5.0<\/option>\r\n <\/select>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"walkwayWidth\">Walkway Width (m):<\/label><\/td>\r\n <td>\r\n <select id=\"walkwayWidth\" style=\"height: 25px;\">\r\n <option value=\"2.5\">2.5<\/option>\r\n <option value=\"3.0\" selected>3.0<\/option>\r\n <option value=\"3.5\">3.5<\/option>\r\n <\/select>\r\n <\/td>\r\n <td><label for=\"walkwayPosition\">Walkway Position:<\/label><\/td>\r\n <td>\r\n <select id=\"walkwayPosition\" style=\"height: 25px;\">\r\n <option value=\"middle\" selected>Middle<\/option>\r\n <option value=\"endWall\">End Wall<\/option>\r\n <\/select>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"girts\">Number of Girts:<\/label><\/td>\r\n <td><input type=\"number\" id=\"girts\" value=\"0\" step=\"1\" style=\"height: 20px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"xBraces\">Number of X-Braces:<\/label><\/td>\r\n <td><input type=\"number\" id=\"xBraces\" value=\"0\" step=\"1\" style=\"height: 20px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"4\" style=\"text-align: center;\">\r\n <button onclick=\"drawGreenhouse()\" style=\"height: 35px; padding: 5px 20px;\">Draw<\/button>\r\n <\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n \r\n <canvas id=\"greenhouse\" width=\"800\" height=\"600\"><\/canvas>\r\n\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Property<\/th>\r\n <th>Value<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Length (m)<\/td>\r\n <td id=\"lengthValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Width (m)<\/td>\r\n <td id=\"widthValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><b>Area (m\u00b2)<\/b> <\/td>\r\n <b> <td id=\"areaValue\">-<\/td><\/b>\r\n \r\n <\/tr>\r\n <tr>\r\n <td>Total Perimeter (m)<\/td>\r\n <td id=\"perimeterValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Inner Columns<\/td>\r\n <td id=\"innerColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>End Wall Columns<\/td>\r\n <td id=\"endWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Side Wall Columns<\/td>\r\n <td id=\"sideWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Intermediate Side Wall Columns<\/td>\r\n <td id=\"intermediateSideWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Number of Trusses<\/td>\r\n <td id=\"trussesValue\">-<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td>Meters of Ridges<\/td>\r\n <td id=\"ridgesValue\">-<\/td>\r\n <\/tr> \r\n \r\n <tr>\r\n <td>Meters of Gutters<\/td>\r\n <td id=\"guttersValue\">-<\/td>\r\n <\/tr> \r\n \r\n \r\n <\/tbody>\r\n <\/table>\r\n\r\n <script>\r\n function drawGreenhouse() {\r\n \/\/ Get input values\r\n const widthSections = parseInt(document.getElementById('width').value);\r\n const lengthSections = parseInt(document.getElementById('length').value);\r\n const sectionWidth = parseFloat(document.getElementById('sectionWidth').value);\r\n const sectionLength = parseFloat(document.getElementById('sectionLength').value);\r\n const walkwayWidth = parseFloat(document.getElementById('walkwayWidth').value);\r\n const walkwayPosition = document.getElementById('walkwayPosition').value;\r\n\r\n const totalWidth = widthSections * sectionWidth;\r\n const totalLength = lengthSections * sectionLength;\r\n\r\n \/\/ Calculations\r\n const innerColumns = (widthSections - 1) * (lengthSections - 1);\r\n const endWallColumns = 2 * ((widthSections * 2) + 1); \/\/ Two end walls\r\n const sideWallColumns = 2 * (lengthSections - 1);\r\n const intermediateSideWallColumns = 2 * lengthSections;\r\n const trusses = widthSections * (lengthSections - 1);\r\n const ridges = 1 * (widthSections * 2) * (totalLength+1);\r\n const gutters = 1 * ((widthSections * 2)+1) * (totalLength+1);\r\n const totalArea = totalWidth * totalLength;\r\n const totalPerimeter = 2 * (totalWidth + totalLength);\r\n\r\n \/\/ Update table\r\n document.getElementById('lengthValue').textContent = totalLength.toFixed(1);\r\n document.getElementById('widthValue').textContent = totalWidth.toFixed(1);\r\n document.getElementById('areaValue').textContent = totalArea.toFixed(1);\r\n document.getElementById('perimeterValue').textContent = totalPerimeter.toFixed(1);\r\n document.getElementById('innerColumns').textContent = innerColumns;\r\n document.getElementById('endWallColumns').textContent = endWallColumns;\r\n document.getElementById('sideWallColumns').textContent = sideWallColumns;\r\n document.getElementById('intermediateSideWallColumns').textContent = intermediateSideWallColumns;\r\n document.getElementById('trussesValue').textContent = trusses;\r\n document.getElementById('ridgesValue').textContent = ridges;\r\n document.getElementById('guttersValue').textContent = gutters;\r\n\r\n \r\n\r\n \/\/ Canvas setup\r\n const canvas = document.getElementById('greenhouse');\r\n const ctx = canvas.getContext('2d');\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Scale calculations\r\n const maxCanvasWidth = canvas.width - 100;\r\n const maxCanvasHeight = canvas.height - 100;\r\n const scaleWidth = maxCanvasWidth \/ totalWidth;\r\n const scaleHeight = maxCanvasHeight \/ totalLength;\r\n const scale = Math.min(scaleWidth, scaleHeight);\r\n\r\n const scaledWidth = totalWidth * scale;\r\n const scaledHeight = totalLength * scale;\r\n const circleDiameter = 20;\r\n const circleRadius = circleDiameter \/ 2;\r\n\r\n \/\/ Draw outer rectangle\r\n ctx.strokeStyle = \"#007BFF\";\r\n ctx.lineWidth = 2;\r\n ctx.strokeRect(50, 50, scaledWidth, scaledHeight);\r\n\r\n \/\/ Grid lines\r\n ctx.strokeStyle = \"#ccc\";\r\n ctx.lineWidth = 0.25;\r\n\r\n for (let i = 1; i < widthSections; i++) {\r\n const x = 50 + i * (scaledWidth \/ widthSections);\r\n ctx.beginPath();\r\n ctx.moveTo(x, 50);\r\n ctx.lineTo(x, 50 + scaledHeight);\r\n ctx.stroke();\r\n }\r\n for (let i = 1; i < lengthSections; i++) {\r\n const y = 50 + i * (scaledHeight \/ lengthSections);\r\n ctx.beginPath();\r\n ctx.moveTo(50, y);\r\n ctx.lineTo(50 + scaledWidth, y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Stramien circles and labels\r\n ctx.fillStyle = \"#D9D9D9\";\r\n ctx.strokeStyle = \"#000\";\r\n ctx.font = \"12px Arial\";\r\n ctx.textAlign = \"center\";\r\n\r\n for (let i = 0; i <= widthSections; i++) {\r\n const x = 50 + i * (scaledWidth \/ widthSections);\r\n ctx.beginPath();\r\n ctx.arc(x, 50 - circleDiameter, circleRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n const label = i > 25 ? getColumnLabel(i) : String.fromCharCode(65 + i);\r\n ctx.fillStyle = \"#000\";\r\n ctx.fillText(label, x, 50 - circleDiameter);\r\n ctx.fillStyle = \"#D9D9D9\";\r\n }\r\n\r\n for (let i = 0; i <= lengthSections; i++) {\r\n const y = 50 + i * (scaledHeight \/ lengthSections);\r\n ctx.beginPath();\r\n ctx.arc(50 - circleDiameter, y, circleRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.fillStyle = \"#000\";\r\n ctx.fillText(i + 1, 50 - circleDiameter, y);\r\n ctx.fillStyle = \"#D9D9D9\";\r\n }\r\n\r\n \/\/ Draw walkway\r\n ctx.fillStyle = \"#A9A9A9\"; \/\/ Darker grey\r\n const scaledWalkwayWidth = walkwayWidth * scale;\r\n\r\n if (walkwayPosition === \"middle\") {\r\n const walkwayStart = 50 + (scaledHeight - scaledWalkwayWidth) \/ 2;\r\n ctx.fillRect(50, walkwayStart, scaledWidth, scaledWalkwayWidth);\r\n } else if (walkwayPosition === \"endWall\") {\r\n const walkwayStart = 50 + scaledHeight - scaledWalkwayWidth;\r\n ctx.fillRect(50, walkwayStart, scaledWidth, scaledWalkwayWidth);\r\n }\r\n }\r\n\r\n function getColumnLabel(index) {\r\n const base = 26;\r\n let label = \"\";\r\n let num = index;\r\n while (num >= 0) {\r\n label = String.fromCharCode(65 + (num % base)) + label;\r\n num = Math.floor(num \/ base) - 1;\r\n }\r\n return label;\r\n }\r\n\r\n drawGreenhouse();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic Greenhouse Drawing Dynamic Greenhouse Drawing Nr. of Sections (width): Section Width (m): Nr. of Sections (length): Section Length (m): 4.04.55.0 Walkway Width (m): 2.53.03.5 Walkway Position: MiddleEnd Wall Number of Girts: Number of X-Braces: Draw Property Value Length (m) – Width (m) – Area (m\u00b2) – Total Perimeter (m) – Inner Columns – End […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-15477","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/comments?post=15477"}],"version-history":[{"count":7,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477\/revisions"}],"predecessor-version":[{"id":15485,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477\/revisions\/15485"}],"wp:attachment":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/media?parent=15477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Dynamic Greenhouse Drawing<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n margin: 20px;\r\n background-color: #f4f4f9;\r\n color: #333;\r\n }\r\n h1 {\r\n text-align: center;\r\n }\r\n .controls {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n }\r\n .controls label {\r\n margin-right: 10px;\r\n margin-bottom: 5px;\r\n }\r\n .controls select, .controls input {\r\n margin-right: 20px;\r\n padding: 5px;\r\n width: 100px;\r\n }\r\n button {\r\n padding: 10px 20px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n }\r\n button:hover {\r\n background-color: #0056b3;\r\n }\r\n canvas {\r\n display: block;\r\n margin: 0 auto;\r\n border: 2px solid #555;\r\n background-color: #fff;\r\n }\r\n table {\r\n margin: 20px auto;\r\n border-collapse: collapse;\r\n width: 50%;\r\n }\r\n table, th, td {\r\n border: 1px solid #ddd;\r\n }\r\n th, td {\r\n padding: 8px;\r\n font-size: small;\r\n text-align: left;\r\n }\r\n th {\r\n background-color: #f4f4f9;\r\n }\r\n\r\n table td:first-child {\r\n text-align: left; \/* Align description to the left *\/\r\n padding-left: 10px; \/* Add some padding for better spacing *\/\r\n }\r\n table td:last-child {\r\n text-align: right; \/* Align numbers to the right *\/\r\n padding-right: 10px; \/* Add some padding for better spacing *\/\r\n }\r\n \/* Adjust font size for input fields *\/\r\n input[type=\"number\"], select {\r\n font-size: 12px; \/* Set font size for input and dropdown fields *\/\r\n height: 30px; \/* Adjust height for better alignment *\/\r\n }\r\n\r\n \/* Adjust font size for labels *\/\r\n label {\r\n font-size: 12px; \/* Set font size for labels *\/\r\n }\r\n\r\n \/* Optional: Adjust font size for the button *\/\r\n button {\r\n font-size: 12px;\r\n padding: 5px 15px; \/* Adjust padding for better button appearance *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1>Dynamic Greenhouse Drawing<\/h1>\r\n\r\n <div class=\"controls\">\r\n <table style=\"margin: 0; border-spacing: 0px\">\r\n <tr>\r\n <td><label for=\"width\">Nr. of Sections (width):<\/label><\/td>\r\n <td><input type=\"number\" id=\"width\" value=\"12\" step=\"1\" style=\"height: 10px;\"><\/td>\r\n <td><label for=\"sectionWidth\">Section Width (m):<\/label><\/td>\r\n <td><input type=\"number\" id=\"sectionWidth\" value=\"8\" step=\"0.1\" style=\"height: 10px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"length\">Nr. of Sections (length):<\/label><\/td>\r\n <td><input type=\"number\" id=\"length\" value=\"21\" step=\"1\" style=\"height: 10px;\"><\/td>\r\n <td><label for=\"sectionLength\">Section Length (m):<\/label><\/td>\r\n <td>\r\n <select id=\"sectionLength\" style=\"height: 25px;\">\r\n <option value=\"4.0\" selected>4.0<\/option>\r\n <option value=\"4.5\">4.5<\/option>\r\n <option value=\"5.0\">5.0<\/option>\r\n <\/select>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"walkwayWidth\">Walkway Width (m):<\/label><\/td>\r\n <td>\r\n <select id=\"walkwayWidth\" style=\"height: 25px;\">\r\n <option value=\"2.5\">2.5<\/option>\r\n <option value=\"3.0\" selected>3.0<\/option>\r\n <option value=\"3.5\">3.5<\/option>\r\n <\/select>\r\n <\/td>\r\n <td><label for=\"walkwayPosition\">Walkway Position:<\/label><\/td>\r\n <td>\r\n <select id=\"walkwayPosition\" style=\"height: 25px;\">\r\n <option value=\"middle\" selected>Middle<\/option>\r\n <option value=\"endWall\">End Wall<\/option>\r\n <\/select>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"girts\">Number of Girts:<\/label><\/td>\r\n <td><input type=\"number\" id=\"girts\" value=\"0\" step=\"1\" style=\"height: 20px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td><label for=\"xBraces\">Number of X-Braces:<\/label><\/td>\r\n <td><input type=\"number\" id=\"xBraces\" value=\"0\" step=\"1\" style=\"height: 20px;\"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"4\" style=\"text-align: center;\">\r\n <button onclick=\"drawGreenhouse()\" style=\"height: 35px; padding: 5px 20px;\">Draw<\/button>\r\n <\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/div>\r\n \r\n \r\n \r\n \r\n \r\n <canvas id=\"greenhouse\" width=\"800\" height=\"600\"><\/canvas>\r\n\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Property<\/th>\r\n <th>Value<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Length (m)<\/td>\r\n <td id=\"lengthValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Width (m)<\/td>\r\n <td id=\"widthValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><b>Area (m\u00b2)<\/b> <\/td>\r\n <b> <td id=\"areaValue\">-<\/td><\/b>\r\n \r\n <\/tr>\r\n <tr>\r\n <td>Total Perimeter (m)<\/td>\r\n <td id=\"perimeterValue\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Inner Columns<\/td>\r\n <td id=\"innerColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>End Wall Columns<\/td>\r\n <td id=\"endWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Side Wall Columns<\/td>\r\n <td id=\"sideWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Intermediate Side Wall Columns<\/td>\r\n <td id=\"intermediateSideWallColumns\">-<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Number of Trusses<\/td>\r\n <td id=\"trussesValue\">-<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td>Meters of Ridges<\/td>\r\n <td id=\"ridgesValue\">-<\/td>\r\n <\/tr> \r\n \r\n <tr>\r\n <td>Meters of Gutters<\/td>\r\n <td id=\"guttersValue\">-<\/td>\r\n <\/tr> \r\n \r\n \r\n <\/tbody>\r\n <\/table>\r\n\r\n <script>\r\n function drawGreenhouse() {\r\n \/\/ Get input values\r\n const widthSections = parseInt(document.getElementById('width').value);\r\n const lengthSections = parseInt(document.getElementById('length').value);\r\n const sectionWidth = parseFloat(document.getElementById('sectionWidth').value);\r\n const sectionLength = parseFloat(document.getElementById('sectionLength').value);\r\n const walkwayWidth = parseFloat(document.getElementById('walkwayWidth').value);\r\n const walkwayPosition = document.getElementById('walkwayPosition').value;\r\n\r\n const totalWidth = widthSections * sectionWidth;\r\n const totalLength = lengthSections * sectionLength;\r\n\r\n \/\/ Calculations\r\n const innerColumns = (widthSections - 1) * (lengthSections - 1);\r\n const endWallColumns = 2 * ((widthSections * 2) + 1); \/\/ Two end walls\r\n const sideWallColumns = 2 * (lengthSections - 1);\r\n const intermediateSideWallColumns = 2 * lengthSections;\r\n const trusses = widthSections * (lengthSections - 1);\r\n const ridges = 1 * (widthSections * 2) * (totalLength+1);\r\n const gutters = 1 * ((widthSections * 2)+1) * (totalLength+1);\r\n const totalArea = totalWidth * totalLength;\r\n const totalPerimeter = 2 * (totalWidth + totalLength);\r\n\r\n \/\/ Update table\r\n document.getElementById('lengthValue').textContent = totalLength.toFixed(1);\r\n document.getElementById('widthValue').textContent = totalWidth.toFixed(1);\r\n document.getElementById('areaValue').textContent = totalArea.toFixed(1);\r\n document.getElementById('perimeterValue').textContent = totalPerimeter.toFixed(1);\r\n document.getElementById('innerColumns').textContent = innerColumns;\r\n document.getElementById('endWallColumns').textContent = endWallColumns;\r\n document.getElementById('sideWallColumns').textContent = sideWallColumns;\r\n document.getElementById('intermediateSideWallColumns').textContent = intermediateSideWallColumns;\r\n document.getElementById('trussesValue').textContent = trusses;\r\n document.getElementById('ridgesValue').textContent = ridges;\r\n document.getElementById('guttersValue').textContent = gutters;\r\n\r\n \r\n\r\n \/\/ Canvas setup\r\n const canvas = document.getElementById('greenhouse');\r\n const ctx = canvas.getContext('2d');\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Scale calculations\r\n const maxCanvasWidth = canvas.width - 100;\r\n const maxCanvasHeight = canvas.height - 100;\r\n const scaleWidth = maxCanvasWidth \/ totalWidth;\r\n const scaleHeight = maxCanvasHeight \/ totalLength;\r\n const scale = Math.min(scaleWidth, scaleHeight);\r\n\r\n const scaledWidth = totalWidth * scale;\r\n const scaledHeight = totalLength * scale;\r\n const circleDiameter = 20;\r\n const circleRadius = circleDiameter \/ 2;\r\n\r\n \/\/ Draw outer rectangle\r\n ctx.strokeStyle = \"#007BFF\";\r\n ctx.lineWidth = 2;\r\n ctx.strokeRect(50, 50, scaledWidth, scaledHeight);\r\n\r\n \/\/ Grid lines\r\n ctx.strokeStyle = \"#ccc\";\r\n ctx.lineWidth = 0.25;\r\n\r\n for (let i = 1; i < widthSections; i++) {\r\n const x = 50 + i * (scaledWidth \/ widthSections);\r\n ctx.beginPath();\r\n ctx.moveTo(x, 50);\r\n ctx.lineTo(x, 50 + scaledHeight);\r\n ctx.stroke();\r\n }\r\n for (let i = 1; i < lengthSections; i++) {\r\n const y = 50 + i * (scaledHeight \/ lengthSections);\r\n ctx.beginPath();\r\n ctx.moveTo(50, y);\r\n ctx.lineTo(50 + scaledWidth, y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Stramien circles and labels\r\n ctx.fillStyle = \"#D9D9D9\";\r\n ctx.strokeStyle = \"#000\";\r\n ctx.font = \"12px Arial\";\r\n ctx.textAlign = \"center\";\r\n\r\n for (let i = 0; i <= widthSections; i++) {\r\n const x = 50 + i * (scaledWidth \/ widthSections);\r\n ctx.beginPath();\r\n ctx.arc(x, 50 - circleDiameter, circleRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n const label = i > 25 ? getColumnLabel(i) : String.fromCharCode(65 + i);\r\n ctx.fillStyle = \"#000\";\r\n ctx.fillText(label, x, 50 - circleDiameter);\r\n ctx.fillStyle = \"#D9D9D9\";\r\n }\r\n\r\n for (let i = 0; i <= lengthSections; i++) {\r\n const y = 50 + i * (scaledHeight \/ lengthSections);\r\n ctx.beginPath();\r\n ctx.arc(50 - circleDiameter, y, circleRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.fillStyle = \"#000\";\r\n ctx.fillText(i + 1, 50 - circleDiameter, y);\r\n ctx.fillStyle = \"#D9D9D9\";\r\n }\r\n\r\n \/\/ Draw walkway\r\n ctx.fillStyle = \"#A9A9A9\"; \/\/ Darker grey\r\n const scaledWalkwayWidth = walkwayWidth * scale;\r\n\r\n if (walkwayPosition === \"middle\") {\r\n const walkwayStart = 50 + (scaledHeight - scaledWalkwayWidth) \/ 2;\r\n ctx.fillRect(50, walkwayStart, scaledWidth, scaledWalkwayWidth);\r\n } else if (walkwayPosition === \"endWall\") {\r\n const walkwayStart = 50 + scaledHeight - scaledWalkwayWidth;\r\n ctx.fillRect(50, walkwayStart, scaledWidth, scaledWalkwayWidth);\r\n }\r\n }\r\n\r\n function getColumnLabel(index) {\r\n const base = 26;\r\n let label = \"\";\r\n let num = index;\r\n while (num >= 0) {\r\n label = String.fromCharCode(65 + (num % base)) + label;\r\n num = Math.floor(num \/ base) - 1;\r\n }\r\n return label;\r\n }\r\n\r\n drawGreenhouse();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic Greenhouse Drawing Dynamic Greenhouse Drawing Nr. of Sections (width): Section Width (m): Nr. of Sections (length): Section Length (m): 4.04.55.0 Walkway Width (m): 2.53.03.5 Walkway Position: MiddleEnd Wall Number of Girts: Number of X-Braces: Draw Property Value Length (m) – Width (m) – Area (m\u00b2) – Total Perimeter (m) – Inner Columns – End […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-15477","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/comments?post=15477"}],"version-history":[{"count":7,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477\/revisions"}],"predecessor-version":[{"id":15485,"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/pages\/15477\/revisions\/15485"}],"wp:attachment":[{"href":"https:\/\/shareddocs.net\/index.php\/wp-json\/wp\/v2\/media?parent=15477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}