{"id":6207,"date":"2023-12-18T16:51:29","date_gmt":"2023-12-18T15:51:29","guid":{"rendered":"https:\/\/myhomedesign.at\/?page_id=6207"},"modified":"2024-02-05T18:22:09","modified_gmt":"2024-02-05T17:22:09","slug":"configurator","status":"publish","type":"page","link":"https:\/\/myhomedesign.at\/en\/configurator\/","title":{"rendered":"TopoVision Konfigurator"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h1 style=\"text-align: center;\">TopoVision Configurator<\/h1>\n<p style=\"text-align: center;\">For your unique TopoVision table with the landscape of your choice, you can send us a request with the selected region here.<\/p>\n<p style=\"text-align: center;\">To do this, you can mark your desired region on the map below.<\/p>\n<p style=\"text-align: center;\">Then select the type of table, size and frame color and you are ready to send us your request.<\/p>\n<p style=\"text-align: center;\">If you have any special requests for your table, you are welcome to enter them in the notes and we will take them into account.<\/p>\n<p style=\"text-align: center;\">After receiving your request, we will contact you to discuss a detailed offer for your unique table.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid vc_custom_1702922008596\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<script src=\"https:\/\/polyfill.io\/v3\/polyfill.min.js?features=default\"><\/script>\n<script>\n    function initMap() {\n\n        \/\/ ***************** FORM FIELDS *****************\n        const FFtopleft = document.querySelector('#topleft');\n        const FFtopright = document.querySelector('#topright');\n        const FFbottomleft = document.querySelector('#bottomleft');\n        const FFbottomright = document.querySelector('#bottomright');\n        const FFcenter = document.querySelector('#center');\n        const FFscreenshot = document.querySelector('#screenshot');\n        const FFsubmitBtn = document.querySelector('input[type=\"submit\"]');\n\n        const distancePlus = document.querySelector('#distancePlus');\n        const distanceMinus = document.querySelector('#distanceMinus');\n        const distanceInput = document.querySelector('#distanceInput');\n        const distanceOutput = document.querySelector('#distanceOutput');\n        const shape = document.querySelector('#shape');\n\n        let distance = 40;\n        let distanceSteps = 5;\n        distanceInput.value = distance;\n        distanceOutput.innerHTML = distanceInput.value;\n\n        distanceInput.oninput = _ => updateDistance(distanceInput.value);\n        distancePlus.onclick = _ => updateDistance(distance + distanceSteps);\n        distanceMinus.onclick = _ => updateDistance(distance - distanceSteps);\n        shape.onchange = _ => updateDistance(distance);\n\n        if(document.getElementsByTagName('html')[0].getAttribute('lang') == 'de-DE') {\n            shape.innerHTML = `\n                <option value=\"square\">Quadrat<\/option>\n                <option value=\"rectangle\">Rechteck (5:4)<\/option>\n            `;\n        }\n        else {\n            shape.innerHTML = `\n                <option value=\"square\">Square<\/option>\n                <option value=\"rectangle\">Rectangle (5:4)<\/option>\n            `;\n        }\n        \n\n\n\n        \/\/ ***************** FUNCTIONS *****************\n        function updateDistance(value) {\n            if(value < 8) {\n                distance = 8;\n            }\n            else if(value > 100) {\n                distance = 100;\n            }\n            else {\n                distance = value;\n            }\n\n            distanceOutput.innerHTML = distance;\n            distanceInput.value = distance;\n\n            if(shape.value == 'square') {\n                polygon.setPaths(calcSquare(distance));\n            }\n            else {\n                polygon.setPaths(calcRectangle(distance));\n            }\n        }\n\n        function calcSquare(distanceInKm) {\n            const tl = calcCorners(centerCoordinate, distanceInKm, 315, false);\n            const tr = calcCorners(centerCoordinate, distanceInKm, 45, false);\n            const br = calcCorners(centerCoordinate, distanceInKm, 135, false);\n            const bl = calcCorners(centerCoordinate, distanceInKm, 225, false);\n\n            return [tl, tr, br, bl];\n        }\n\n        function calcRectangle(distanceInKm) {\n            const tl = calcCorners(centerCoordinate, distanceInKm, 315, true);\n            const tr = calcCorners(centerCoordinate, distanceInKm, 45, true);\n            const br = calcCorners(centerCoordinate, distanceInKm, 135, true);\n            const bl = calcCorners(centerCoordinate, distanceInKm, 225, true);\n\n            return [tl, tr, br, bl];\n        }\n\n        function calcCorners(center, distanceInKm, bearing, isRectangle) {\n            const earthRadius = 6371; \/\/ Earth radius in kilometers\n\n            \/\/ Convert distance to radians\n            const distanceRadians = distanceInKm \/ earthRadius;\n\n            \/\/ bearing in degrees - convert bearing to radians\n            const bearingRadians = (bearing * Math.PI) \/ 180;\n\n            \/\/ Convert center coordinates to radians\n            const centerLatRadians = (center.lat * Math.PI) \/ 180;\n            const centerLngRadians = (center.lng * Math.PI) \/ 180;\n\n            \/\/ Calculate new latitude\n            const newLatRadians = Math.asin(\n                Math.sin(centerLatRadians) * Math.cos(distanceRadians) +\n                Math.cos(centerLatRadians) * Math.sin(distanceRadians) * Math.cos(bearingRadians)\n            );\n\n            \/\/ Calculate new longitude\n            const newLngRadians =\n                centerLngRadians +\n                Math.atan2(\n                    Math.sin(bearingRadians) * Math.sin(distanceRadians) * Math.cos(centerLatRadians),\n                    Math.cos(distanceRadians) - Math.sin(centerLatRadians) * Math.sin(newLatRadians)\n                );\n\n            \/\/ Convert back to degrees\n            const newLat = (newLatRadians * 180) \/ Math.PI;\n            const newLng = (newLngRadians * 180) \/ Math.PI;\n\n            \/\/ If isRectangle is true, adjust the longitude to create a rectangle with a 5:4 aspect ratio\n            if (isRectangle) {\n                const aspectRatioAdjustment = (5 \/ 4) ** 0.5;\n                const lngDifference = newLng - center.lng;\n                const adjustedLng = center.lng + lngDifference * aspectRatioAdjustment;\n                return { lat: newLat, lng: adjustedLng };\n            }\n\n            return { lat: newLat, lng: newLng };\n        }\n\n        function setFormData() {\n            \/\/ get polygon coordinates\n            let coordinates = getPolygonCoordinates(polygon);\n            FFtopleft.value = formatCoordinate(coordinates[1]);\n            FFtopright.value = formatCoordinate(coordinates[0]);\n            FFbottomleft.value = formatCoordinate(coordinates[2]);\n            FFbottomright.value = formatCoordinate(coordinates[3]);\n\n            \/\/ get center coordinates\n            centerCoordinate = getPolygonCenter(polygon);\n            circle.setCenter(centerCoordinate);\n            FFcenter.value = formatCoordinate(centerCoordinate);\n\n            \/\/ get screenshot\n            FFsubmitBtn.disabled = true;\n            screenshot(center, polygon).then(b64 => {\n                FFscreenshot.value = b64;\n                FFsubmitBtn.disabled = false;\n            })\n                .catch(error => {\n                    console.error('Error loading image:', error);\n                    FFsubmitBtn.disabled = false;\n                });\n        }\n\n        function getPolygonCenter() {\n            let center = polygon.getPaths().getArray().reduce((bounds, path) => (path.forEach(point => bounds.extend(point)), bounds), new google.maps.LatLngBounds()).getCenter();\n            return {\n                lat: center.lat(),\n                lng: center.lng()\n            }\n        }\n\n        function getPolygonCoordinates() {\n            return polygon.getPath().getArray().flatMap(coord => ({ lat: coord.lat(), lng: coord.lng() }));\n        }\n\n        function formatCoordinate(coordinate) {\n            return `${coordinate.lat.toFixed(3)},${coordinate.lng.toFixed(3)}`;\n        }\n\n        function formatCoordinates(coordinate) {\n            return coordinate.map(coord => `${coord.lat},${coord.lng}`).join('|');\n        }\n\n        function screenshot() {\n            const mapUrl = `https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=${centerCoordinate.lat},${centerCoordinate.lng}&zoom=${currentZoom}&size=640x400&maptype=terrain&path=fillcolor:blue|color:white|weight:1|${formatCoordinates(getPolygonCoordinates())}&key=AIzaSyCgVCkUpta966_5oRAFPAOxo1ItVaHzDds`;\n            return convertBase64(mapUrl);\n        }\n\n        function convertBase64(url) {\n            return new Promise((resolve, reject) => {\n                const img = new Image();\n                img.crossOrigin = 'Anonymous';\n                img.onload = () => {\n                    const canvas = Object.assign(document.createElement('canvas'), { width: img.width, height: img.height });\n                    const ctx = canvas.getContext('2d');\n                    ctx.drawImage(img, 0, 0);\n                    resolve(canvas.toDataURL('image\/png'));\n                };\n                img.onerror = reject;\n                img.src = url;\n            });\n        }\n\n\n\n        \/\/ ***************** LOGIC *****************\n\n        \/\/ center default\n        let centerCoordinate = { lat: 48.210033, lng: 16.363449 };\n        let currentZoom = 9;\n\n        \/\/ map\n        const map = new google.maps.Map(document.getElementById(\"map\"), {\n            zoom: currentZoom,\n            center: centerCoordinate,\n            mapTypeId: \"terrain\",\n        });\n\n\n        \/\/ blue square\n        const polygon = new google.maps.Polygon({\n            map,\n            paths: calcSquare(distance),\n            strokeColor: \"#0000FF\",\n            strokeOpacity: 0.8,\n            strokeWeight: 2,\n            fillColor: \"#0000FF\",\n            fillOpacity: 0.35,\n            draggable: true,\n            geodesic: false,\n        });\n\n        \/\/ red center circle\n        const circle = new google.maps.Circle({\n            strokeColor: 'red',\n            strokeOpacity: 0.8,\n            strokeWeight: 2,\n            fillColor: 'red',\n            fillOpacity: 0.35,\n            map: map,\n            center: getPolygonCenter(polygon),\n            radius: 100 \/\/ the radius of the circle in meters\n        });\n\n        \/\/ listen to changes\n        [\"bounds_changed\", \"dragend\"].forEach((eventName) => {\n            polygon.addListener(eventName, () => {\n                setFormData();\n            });\n        });\n\n        \/\/ Handle the zoom change here\n        google.maps.event.addListener(map, 'zoom_changed', _ => {\n            currentZoom = map.getZoom();\n        });\n\n        \/\/initial call\n        setFormData();\n    }\n\n    window.initMap = initMap;\n<\/script>\n<style>\n    #map {\n        height: 500px;\n    }\n<\/style>\n<div id=\"map\"><\/div>\n<div style=\"display: flex; align-items: center; justify-content: center; flex-direction: column; width: 180px; margin: auto;padding-top: 15px;\">\n    <div style=\"display: flex; align-items: center; justify-content: center;\">\n        <button id=\"distanceMinus\" style=\"margin-right: 10px; background-color: transparent;border: 1px solid #999; color: #999;height: 25px;width: 25px;\">-<\/button>\n        <a id=\"distanceOutput\" style=\"color: #999;text-align: center;margin-right:3px;\"><\/a><a style=\"color: #999;\">km<\/a>\n        <button id=\"distancePlus\" style=\"margin-left: 10px; background-color: transparent;border: 1px solid #999; color: #999;height: 25px;width: 25px;\">+<\/button>\n    <\/div>\n    <input id=\"distanceInput\" type=\"range\" min=\"8\" max=\"100\" style=\"margin-top: 5px;\">\n    <select id=\"shape\"><\/select>\n<\/div>\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCgVCkUpta966_5oRAFPAOxo1ItVaHzDds&callback=initMap&v=weekly\" defer><\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid vc_custom_1468808610243\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column vc_column_container vc_col-sm-12\" id=\"topo-vision-konfigurator\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f6211-o1\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/6207#wpcf7-f6211-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\" data-trp-original-action=\"\/en\/wp-json\/wp\/v2\/pages\/6207#wpcf7-f6211-o1\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"6211\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.9.5\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f6211-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/div>\n<div class=\"row\">\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"Typ\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" id=\"typ\" aria-required=\"true\" aria-invalid=\"false\" name=\"Typ\"><option value=\"\">&#8212;Please choose an option&#8212;<\/option><option value=\"Couchtisch\">Couchtisch<\/option><option value=\"Stehtisch\">Stehtisch<\/option><option value=\"Esstisch\">Esstisch<\/option><\/select><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"Dimension\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" id=\"dimension\" aria-required=\"true\" aria-invalid=\"false\" name=\"Dimension\"><option value=\"\">&#8212;Please choose an option&#8212;<\/option><option value=\"60x60cm\">60x60cm<\/option><option value=\"80x80cm\">80x80cm<\/option><option value=\"60x100cm\">60x100cm<\/option><\/select><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"Rahmenfarbe\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" id=\"rahmenfarbe\" aria-required=\"true\" aria-invalid=\"false\" name=\"Rahmenfarbe\"><option value=\"\">&#8212;Please choose an option&#8212;<\/option><option value=\"Wei\u00df\">Wei\u00df<\/option><option value=\"Grau\">Grau<\/option><option value=\"Schwarz\">Schwarz<\/option><\/select><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"topleft\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"topleft\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"topleft\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"topright\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"topright\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"topright\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"bottomleft\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"bottomleft\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"bottomleft\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"bottomright\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"bottomright\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"bottomright\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"center\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"center\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"center\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"screenshot\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text hidden\" id=\"screenshot\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"screenshot\" \/><\/span>\n\t<\/p>\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"cname\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Name\" value=\"\" type=\"text\" name=\"cname\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-Mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-4 col-sm-4 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"tel\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Phone\" value=\"\" type=\"tel\" name=\"tel\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-12 col-sm-12 col-xs-12\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Anmerkungen\" name=\"message\"><\/textarea><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-12 col-sm-12 col-xs-12\">\n\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Absenden\" \/>\n\t\t<\/p>\n\t<\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"vc_empty_space\"   style=\"height: 80px\"><span class=\"vc_empty_space_inner\"><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"TopoVision Configurator For your unique TopoVision table with the landscape of your choice, you can send us a request with the selected region here. To do this, you can mark&hellip;","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-full-width.php","meta":{"footnotes":""},"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/pages\/6207"}],"collection":[{"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/comments?post=6207"}],"version-history":[{"count":60,"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/pages\/6207\/revisions"}],"predecessor-version":[{"id":6411,"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/pages\/6207\/revisions\/6411"}],"wp:attachment":[{"href":"https:\/\/myhomedesign.at\/en\/wp-json\/wp\/v2\/media?parent=6207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}