<style>

    /* Styles for the popup */

    .center {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

 

    body {

        overflow: hidden;

        /* Hide scrollbars */

    }

 

    #launchButton {

        background-color: #0074d9;

        /* Set the background color to a blue shade */

        color: #fff;

        /* Set the text color to white */

        padding: 5px 10px;

        /* Add some padding to the button */

        border: none;

        /* Remove the button border */

        cursor: pointer;

        /* Change the cursor to a hand pointer on hover */

        font-size: 20px;

        /* Set the font size */

        border-radius: 0;

        /* Remove border radius */

    }

</style>

<div class="center">

    <button id="launchButton">Get Measurements</button>

</div>

 

<script>

    // Button to launch the Photo To Measurement Web App

    const launchButton = document.getElementById("launchButton");

 

    function getToken() {

        return new Promise((resolve, reject) => {

            const tokenURL = "https://api-p2s.3dmeasureup.ai/domain-auth-token/";

            const xhttp = new XMLHttpRequest();

            xhttp.open("GET", tokenURL, true);

            xhttp.onreadystatechange = function () {

                if (this.readyState == 4) {

                    if (this.status == 200) {

                        const res = JSON.parse(this.responseText);

                        console.log(res.token);

                        resolve(res.token);

                    } else {

                        reject(new Error(`Error: ${this.status} - ${this.responseText}`));

                    }

                }

            };

            xhttp.send();

        });

    }

 

    // Event listener to launch and receive data from the Photo To Measure App

    launchButton.addEventListener("click", () => {

        getToken();

        const tokenURL = "https://api-p2s.3dmeasureup.ai/domain-auth-token";

        var xhttp = new XMLHttpRequest();

        xhttp.open("GET", tokenURL, true);

        xhttp.send();

 

        xhttp.onreadystatechange = function () {

            if (this.readyState == 4) {

                if (this.status == 200) {

                    const res = JSON.parse(this.responseText);

                    const childWindow = window.open(`https://app-p2s.3dmeasureup.ai/index.html?auth_handler=${res.token}`, '_blank');

                    // const childWindow = window.open(`http://127.0.0.1:6591/index.html?auth_handler=${res.token}`, '_blank');

 

                    // Listen for messages from the child window

                    window.addEventListener("message", (event) => {

                        if (event.origin === "https://app-p2s.3dmeasureup.ai") {

                            // Handle data received from the child window

                            const data = event.data;

                            if (data.status == false) {

                                launchButton.textContent = "Try Again...";

 

                                // Set a timeout to revert the text back to "Get Measurements" after 3 seconds

                                setTimeout(() => {

                                    launchButton.textContent = "Get Measurements";

                                }, 3000);

                            } else {

                                const measurement = {};

                                data.forEach(item => {

                                    // Convert label to lowercase and remove spaces

                                    const key = item.label.toLowerCase().replace(/\s/g, '');

                                    // Round length to 2 decimal places

                                    const value = Math.round(item.length * 100) / 100;

                                    // Assign key-value pair to the measurement object

                                    measurement[key] = value;

                                });

                                // Store data in session storage

                                sessionStorage.setItem('measurementData', JSON.stringify(measurement));

                            }

                        }

                    });

                    const parentURL = window.location.href;

                    childWindow.postMessage(parentURL, "*");

                } else if (this.status == 403) {

                    console.log(this.responseText);

                } else if (this.status == 500) {

                    console.log(this.responseText);

                } else if (this.status == 0) {

                    console.log("Request failed");

                }

            }

        };

    });

</script>
Scroll to Top