This is a quick guide for setting up a data integration to drive real time graphics in your scene, using NodeRed,

Installing Node-Red

1. Install Node-RED:

1. Download and install the latest node.js
2. Run "npm install -g --unsafe-perm node-red" in cmd to install Node-RED

2. Run Node-RED:

1. Run "node-red" in cmd to run Node-RED
2. Go to http://localhost:1880 in your web browser to see the app

3. Download Protobuf nodes:

1. In the app navigate to "Manage Palette" in the upper-right drop-down menu, and install the "node-red-contrib-protobuf" plugin
2. We will be using "encode" and "decode" nodes to handle Protobuf messages coming from/to Data hub

4. Get "messages.proto" file:

1. This file will be used by Protobuf Encode and Decode nodes as a reference for the handling of our messages
2. Please find the file in Pixotope Editor installation files, at the following path: Engine\Plugins\Pixotope\DataHubClient\ThirdParty\protobuf\messages.proto

Be sure that you have all of the above palettes are in your Node-Red

In Pixotope

1. Add BP_Json into your scene.

 

 2. Add two text meshes to your scene, and rename them TM_cityName, and TM_temperature

 

4. Go to Settings ---> Plugins

 

5. Enable Sun Position Calculator

6. Enable VaRest Plugin

 7. Under View Options, select “Show Engine Content”

8. Under View Options, select “Show Plugin Content”

9. Add BP_SunPosition to your scene. This is found in the SunPosition Content folder. If you don't have a BP_ Sphere in your scene, add BP_Sphere.  This is found under Engine Content-->EngineSky--->BP_Sky_Sphere

10. Connect BP_Sphere to BP_SunPosition

  

11. Connect Directional Light Actor to a Direction Light Actor in your scene. If you don't have a directional light actor in your scene add a Direction Light Actor to your scene

12. In the scene select BP_Json and connect  BP_SunPosition, TM_CityName, and TM_Temperature to the local actors in your scene

 

Setting up Node-Red

If you haven’t installed Node-Red, instructions will be provided below.

1. Launch Node-Red in a command window

1. If you have not installed node-red please refer to their documentation regarding how to install node-red (https://nodered.org/docs/getting-started/)

2. Open Node-Red in a browser (http://localhost:1880/)
3. Import DataIntegration.json into Node-Red

1. Select hamburger menu

2. Select “Select a file to import”

3. Select DataIntegration.json

4. Update DataValue IP address and Port Number

5. Update IP address node IP Address and Port Number

6. Deploy

 

 

In Pixotope, again

 1. Play your scene

2. Open the Control Panel “Weather”

3. Select Initialize

4. Select a city in the dropdown and weather and time of day should update

How to add new cities to the List

1. Open City List Data Table

2. Select Add Row

3. Add Row Name, Latitude and Longitude information

4. Add the name spelled the same way in the city name drop down in the control panel.

1. This will now grab the weather information for the city based on the longitudinal and latitudinal data.

You can import your own CSV file into Pixotope with all the city information you want to use for your own project.

1. Format your CV file so that the title row is name City, Latitude, Longitude, country, capital

1. You can leave country and capital empty in your CVS file

2. Import your CSV and select the WorldCitizies structure

3. In BP_Json select your new data table

 

 

How it all Works

 

BP_Json grabs the data table you import upon initialization and turns it into a Name array.

When you select a city name via control panel it looks through this name array, and if it finds the equivalent name in the list, it grabs the row of the same name and passes the longitude and latitude data of this row.

This is packed into a string array. This string array is converted to a rest JSON. This is then sent out via localhost url to NodeRed. NodeRed parses the longitude and latitude info and adds it to a weather URL call that uses Longitude and latitude info to serve weather information.

This information is further parsed and the current temperature is packaged and sent back into Pixotope. The information passed back into Pixotope is parsed again to get just the weather temperature and weather data symbol. The weather temperature value is used to update the temperature text mesh.

The weather symbol data is parsed to determine which weather symbol to show. The longitude and latitude info of the city is passed to BP_SunPosition and it updates the position of the sun in the virtual scene to match the real location.

The city name of the city chosen via director is used to update the city name TextMesh.

The weather temperature is also used to adjust the color of the text of the temperature and city name.

 

 Troubleshooting

1. Select BP Json and be sure that under setting options the Sender Names has the same name as the sender name in Node-Red.

In this example, it is named DemoClient but you can name it whatever you like so long as the two names are the same in both places

 

2. Make sure that Node-Red is running.

1. Try to exit node-red via command line and restarting it

3. If you want to remove the need to Select “Initialize via the control panel every time you play the project you can add said functionality to the level blueprint

1. Open the Level Blueprint

1. Add local reference BP_Json

2. Inside the blueprint create an “Event BeginPlay” event

3. From BP_Json call Initialize and connect this to Event BeginPlay