This is a quick guide for setting up a data integration to drive real time graphics in your scene, using NodeRed,
- Install Node-RED:
- Download and install the latest node.js
- Run "npm install -g --unsafe-perm node-red" in cmd to install Node-RED
- Run Node-RED:
- Run "node-red" in cmd to run Node-RED
- Go to http://localhost:1880 in your web browser to see the app
- Download Protobuf nodes:
- In the app navigate to "Manage Palette" in the upper-right drop-down menu, and install the "node-red-contrib-protobuf" plugin
- We will be using "encode" and "decode" nodes to handle Protobuf messages coming from/to Data hub
- Get "messages.proto" file:
- This file will be used by Protobuf Encode and Decode nodes as a reference for the handling of our messages
- 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
- 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.
- Launch Node-Red in a command window
- If you have not installed node-red please refer to their documentation regarding how to install node-red (https://nodered.org/docs/getting-started/)
- Open Node-Red in a browser (http://localhost:1880/)
- Import DataIntegration.json into Node-Red
Select hamburger menu
Select “Select a file to import”
- Update DataValue IP address and Port Number
- Update IP address node IP Address and Port Number
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
Open City List Data Table
Select Add Row
Add Row Name, Latitude and Longitude information
Add the name spelled the same way in the city name drop down in the control panel.
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.
Format your CV file so that the title row is name City, Latitude, Longitude, country, capital
You can leave country and capital empty in your CVS file
Import your CSV and select the WorldCitizies structure
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.
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
Make sure that Node-Red is running.
Try to exit node-red via command line and restarting it
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
Open the Level Blueprint
Add local reference BP_Json
Inside the blueprint create an “Event BeginPlay” event
From BP_Json call Initialize and connect this to Event BeginPlay