Creating a Freeboard for the game

In this video, I will show how the dashboard was created in Freeboard.

I remind you that this example was created to demonstrate the use of Freeboard. Of course, Freeboard is not a tool for gaming development.

This is the basic msg object handled in Node-RED flow.

{
"topic": "none",
"payload": {
"value1": 99,
"value2": 15,
"runs": 1,
"win1": 1,
"win2": 0,
"light1": 1,
"light2": 0,
"light3": 0,
"winner": "open game"
},
"_msgid": "1ffefe4d.e00102"
}


"value1" and "value2" are the random numbers generated in each round and are associated with a Gauge widget.

We use the Text widget for these properties:
"runs" accumulates the number of rounds in the game.
"win1" and "win2" accumulates the number of times each Player scored in a round.
"winner" shows a string with the text "open game". This will change to Player1 or Player2 when the game is over.

The basic idea is to associate a Freeboard widget for each one of the relevant counters from a Node-RED flow.

Light indicator widgets are used to signal the winner of each round or the end of the game. The associated properties in the Red-Node flow are: "light1", "light2" and "light3".

When you access Freeboard the very first step is to create a datasource (we called it GAME). This datasource will appear on the list of available datasources only after you run the flow for the first time. Because we have a node Freeboard in the flow (we called it FREEBOARD-01) the Node-RED server in the cloud will communicate the Freeboard application in the cloud the structure of the msg object. It means that the properties of payload.msg will be available in the datasource.

As a second step, we added three panes in Freeboard.

And finally, we added widgets to each pane.

It is important that at the end of the configuration you save the dashboard and take note of the URL created (saving to your favorites), otherwise, you won't be able to access it later on.