Using NotebookLM & Pano2VR Javascript API to deliver location data

This is the finished project showing buttons to different locations that open a Google Map, source the Time and Date as well as current temperature ( Celcius & Farenheit) and display it in an information field.

NotebookLM has generated the podcast below based on the sources provided and conversations between AI and me.

Here is a detailed timeline of the main events described in the sources provided to NotebookLM including the following:

Sources

Worldtime: https://www.api-ninjas.com/api/worldtime

Open Source Weather: https://open-meteo.com/

Pano2VR Documentation: Javascript API: https://ggnome.com/doc/pano2vr/reference/javascript-api/

Pano2VR Documentation Code Element: https://ggnome.com/doc/pano2vr/workspace/skin-editor/elements/code/

A cast of characters with brief bios follows it:

Timeline of Events

1 Initial Pano2VR Skin Development:

  • The user is working within the Pano2VR environment, designing a custom skin.

  • The user needs to display dynamic date and temperature information in the skin.

  • The user learns they will use JavaScript within a "Code Element" to achieve this.

2 Fetching the Date:

  • The user learns that standard Javascript Date methods are needed to get the current date components (day, month, year) and standard javascript methods to handle time.

  • The getDate(), getMonth(), and getFullYear() methods of the JavaScript Date object are identified as the tools to get these date values.

  • The user learns that getMonth() is zero-indexed, requiring an adjustment (+1) to show the correct month number.

  • The user is instructed to use Pano2VR's player.setVariableValue() (or pano.setVariableValue() outside of the skin editor) to save these values into skin variables.

  • The user learns they can use a "Code Element" within the Pano2VR skin to run the javascript code that does this.

  • The user learns that it will be necessary to define variable names, such as currentDay, currentMonth, and currentYear.

3 Fetching Temperature Data:

  • The user researches the use of external weather APIs to get real-time temperature data, noting the need to obtain an API key, and construct requests to the API.

  • The user identifies the Open-Meteo API as a suitable option, noting it does not require a key for the free plan.

  • The user realizes that the Open-Meteo API returns temperature in degrees Celsius and is free for non-commercial use, but that usage limits exist

  • The user learns that they need to use JavaScript's fetch function to request data from the Open-Meteo API.

  • The user understands that the temperature data will be available in the data.current.temperature_2m of the API's response.

  • The user learns that they need to use the player.setVariableValue() (or pano.setVariableValue() outside of the skin editor) function to update a skin variable with the temperature value.

4 Fetching Time Data:

  • The user researches and selects the World Time API as their external source for real-time time data.

  • The user learns that the World Time API does require an API key and that this key needs to be sent as part of the request headers.

  • The user creates a Javascript fetch request to the World Time API.

  • The user reviews the structure of the returned json data object and finds the following properties that will be used to extract the current time data: year, month, day, hour, and minute.

  • The user learns that the month property is string and needs to be parsed as an integer and that its zero indexed nature means that 1 will need to be subtracted.

  • The user notes that the hour and minute properties must be parsed and that the hour needs to be converted to 12 hour format with the addition of an AM/PM suffix.

  • The user uses string interpolation to create a string object containing the date and time and uses Pano2VR's player.setVariableValue() function to save it to a skin variable.

5 Implementing the Code:

  • The user writes Javascript code that fetches temperature and time data from the Open-Meteo and World Time APIs.

  • The user's code makes use of API keys.

  • The user places this javascript code within a "Code Element" in Pano2VR.

  • The user makes use of Pano2VR's pano.getVariableValue() method to get the location's latitude and longitude as variables, allowing a different location to be chosen in Pano2VR, and displayed in the skin.

  • The user makes use of Pano2VR's player.setVariableValue() to set skin variables with the real-time date, time, and temperature.

  • The user notes that error handling is included to catch and log any issues encountered during the data fetching process.

6 Initial Testing and Implementation:

  • The user has problems getting the Open-Meteo API working correctly.

  • The user notices a need to update the name of the variable that holds the temperature to currentTemperatureC.

7 Final Implementation and Debugging:

  • The user corrects their code to correctly use the Open-Meteo API to get the temperature and makes sure the correct variables are being used.

  • The user confirms the date, time and temperature are updating correctly using data from the APIs.

Cast of Characters

  • The User: The primary actor in these sources. They are a Pano2VR user who is developing a custom skin and needs to integrate real-time temperature and date information. They are learning the required Javascript and Pano2VR's API as they go.

  • Pano2VR Player: The software which is displaying the 360° panorama and the custom skin.

  • World Time API: An external web service that provides the current date and time for locations based on latitude and longitude coordinates. This is used to get the time and date.

  • Open-Meteo API: An external web service that provides weather data, including current temperature, based on latitude and longitude coordinates. This is used to get the temperature.

  • Garden Gnome: The company or team that develops and maintains Pano2VR. They provide the API and documentation that makes the project described in these sources possible.