Mesh 201 Tutorial Chapter 5: Get live weather data

Artikkeli
08/21/2024

In this chapter, we move forward to Station 4 where you'll learn how to use Mesh Cloud Scripting to get data from internal or public sources and then visualize it in a 3D context in your scene. As we discussed in Chapter 1, the premise here is that attendees in your experience can use this station to learn about weather conditions in three locations where they're considering building a wind farm. The attendees will be able to click an interactive globe and view live weather data from the three locations.

Stations 4 and 5 are located on the other end of the Sphere Terrace from the previous stations.

__________________________________

Setting up for this station

In order to complete this station, you'll need to insert a key into some code that'll enable you to access the weather data API. Let's get this key now so that you don't have to interrupt your workflow later on.

Navigate to the weatherapi.com sign-up page.
On that page, follow the instructions to sign up for the trial plan.

You'll need to open the email they send you, activate your account, and then log in on their site.
On the Welcome Back page, click "Pro Plus Plan".
For this tutorial, it's not necessary to have a paid plan. Click the Downgrade button under "Free", and then in the dialog that pops up, click Close.
In the left-side menu under Dashboard, select API.
Select the Copy button next to the API Key field, then paste the key into a text editor, and then save the text file.

If the copy operation is successful, the text on the Copy button changes to Copied.

Add the Mesh Cloud Scripting prefab

Open the StartingPoint scene.
In the Hierarchy, right-click in an empty space and then, in the context menu, select Mesh Toolkit > Set up Cloud Scripting.

This adds a GameObject named Mesh Cloud Scripting which has a component with the same name attached.

Any GameObject that you intend to have under the control of cloud scripting must be added as a child to the Mesh Cloud Scripting GameObject.

Note: The Mesh Cloud Scripting component contains a property named Enable Visual Scripting. This enables Mesh cloud scripts to communicate with visual scripts. You can leave this unselected.

Add the prefab for Station 4

In the Project folder, navigate to Assets > MeshCloudScripting and then drag 4 - GlobeWithCloudScripting to the Hierarchy and place it as a child object to Mesh Cloud Scripting.

This prefab provides the text information box and a nested prefab named Earth that contains the model for the globe.
Adjust your view so that you're directly in front of and looking at Station 4.

Insert the API key for weatherapi.com

In the Hierarchy, select the Mesh Cloud Scripting GameObject.
In the Inspector, navigate to the Mesh Cloud Scripting component and then click Open application folder.

This opens the folder that contains the files for Mesh Cloud Scripting in the Windows File Explorer.
Open the file named appsettings.UnityLocalDev.json in your code editor. The last four lines of code in the file contain configuration settings.

You don't need to do anything for this first line ...

"WEATHER_API_URI": "http://api.weatherapi.com/v1/current.json?key="

... but in the next line, replace the "Paste Weather API key here" text with the API key you copied earlier.

You can ignore the last two lines--we'll be working with those in the next chapter.
Save and close the JSON file.

Update the csproj file

In the File Explorer window that displays the Mesh Cloud Scripting files, open the file named StartingPoint.csproj in your code editor.
Copy the following text:

<ItemGroup> <Folder Include="WeatherAPI\" /> </ItemGroup>

... and then paste it into the file just above </Project> at the end of the file.

This ensures that we include some scripts from the local WeatherAPI folder.
Save and close the file.

Add code that makes the globe interactive

In the File Explorer window that displays the Mesh Cloud Scripting files, open the file named App.cs in your code editor.

The first thing we'll do is ensure that when an attendee clicks on the globe, the displays of the weather data are refreshed.
In the App.cs file, find the first "Paste code here" comment located inside the StartAsync() method.

Copy the code below.

    var refreshButton = _app.Scene.FindFirstChild("Earth", true) as TransformNode;
    var refreshButtonNode = refreshButton?.FindFirstChild<InteractableNode>(true);

    if (refreshButtonNode != null)
    {
        refreshButtonNode.Selected += async (_, _) =>
        {
            await GetCurrentWeather(_latlong);
        };
    }

Replace the "Paste code here" comment you just found with the code you copied.

The code does the following:
- Initializes the refreshButton variable with the Earth GameObject in the scene.
- Initializes the refreshButtonNode variable with the InteractableNode attached to the Earth GameObject. (If a GameObject in the scene has a Mesh Interactable Setup component attached, which Earth does, the component adds a Mesh Cloud Scripting InteractableNode).
- When an attendee clicks on the globe, it fires the InteractableNode's Selected event and calls the GetCurrentWeather method. This generates an HTTP request to get the weather data.
Save the file.

Test your work

In the Unity Editor, save the project and then press the Play button.
Your avatar is spawned on the side of the Sphere Terrace that contains the first three stations. Navigate to the opposite side of the Sphere Terrace and then position yourself in front of Station 4.
To see the weather data, click anywhere on the globe. The temperature, average wind speed, and peak wind speed are shown for three cities: 1) Lagos, Nigeria, 2) Dublin, Ireland, and 3) Redmond, WA.
When you're finished, press the Play button again to exit Play mode.

Next Steps

Chapter 6: Get answers to questions using Azure OpenAI

Jaa