1 of 18

How to connect Pano2VR with Excel?

Espacio para imagen

2 of 18

Requirements

  • Pano2VR (7+)
  • A basic project created in Pano2VR
  • Google account

3 of 18

  • Inicialmente, tendremos que definir una variable por cada contenido dinámico que deseemos actualizar.
  • Adicionalmente, crearemos una variable “is_loaded” del tipo True/False.
  1. Declare variables

4 of 18

2. Assign variables

  • Asignaremos cada variable a sus respectivos componentes en la skin de Pano2VR.
    • Para hacerlo, siempre usaremos un bloque lógico, haciendo que cuando nuestra variable “is_loaded” sea igual a “true”, se cambie al texto respectivo.

5 of 18

3. Create a new Google Sheet

  • El objetivo es usar una hoja de Google Sheets como base de datos, desde donde obtendremos los valores correspondientes para cada una de las variables creadas en Pano2VR.

6 of 18

  • Crearemos dos columnas, “variable” y “valor”,
  • Tendremos que crear la misma cantidad de variables de texto que creamos en Pano2VR, con sus respectivos nombres.

7 of 18

Ahora, para obtener los datos desde nuestra hoja de Google Sheets, tendremos que hacerlo mediante su API.

Aunque Google proporciona un API para obtener datos de sus servicios, todo el tema de configuración y seguridad puede ser muy complejo para lo poco que necesitamos, así que tenemos la opción de usar servicios externos que hacen esto por nosotros.

4. Google Sheets API

8 of 18

sheetdb.io

sheet.best

Sheety

Google Cloud

9 of 18

5. Create API in sheetdb.io

  • Add our existing Google Spreadsheet URL

10 of 18

  • Disable all permissions except “Read (GET)”

11 of 18

  • Copy and save our API endpoint url

12 of 18

6. Code Element in Pano2VR

From version 7 of Pano2VR, the Code Element can be found in the component toolbar.

13 of 18

Tendremos que insertar el code element en nuestra skin, es un componente invisible, pero se encargará de manejar nuestro código.

14 of 18

7. Create our code file

  • Crear archivo llamado “getData.js” en la carpeta de nuestro recorrido de Pano2VR.
    • Enlace
  • Insertaremos el contenido del archivo en nuestro code element, marcando el campo “From file

15 of 18

  • En la primera sección del código, definiremos una propiedad para nuestro code element, la cual usaremos para añadir nuestro API endpoint URL.

16 of 18

  • En la segunda sección, haremos una solicitud a nuestro API endpoint, pidiendo los datos de nuestro Google Sheets.
    • Luego, usaremos la función “pano.setVariableValue()” del Pano2VR JavaScript API para asignar el valor correspondiente a cada una de las variables.
    • Finalmente, cambiaremos el valor de la variable “is_loaded” para internamente saber cuando finalice la carga de los datos.

17 of 18

8. Export project!

Finally, if we open or export our project, we will be able to see that the data is getting successfully!

18 of 18

www.perspektiva360.com

Para más información, puedes contactarnos a través de los siguientes medios:

(+57) 315 578 1254

info@perspektiva360.com