Generic dashboard setup

This guide provides step-by-step instructions on how to create a dashboard with multiple widgets. It covers creating a new board, adding and editing widgets, and customising titles and descriptions. By following this guide, users can easily create a personalised dashboard to visualise data and monitor various metrics in one place.

We will create three widgets:

• Map view of your vessel.
• One sensor data value.
• Chart view of fuel consumption or another sensor data source.

TIP

If you are opening the page for the first time there will be a default board called "Dashboard 1" in you dropdown list. To edit this board skip to step 4.

Before creating a new dashboard, view the list you already have and inspect all the different boards to reduce the chance of creating duplicates.

Create New Dashboard

1. Click the "NEW BOARD" to add another board to your list.

2. Click the "Dashboard label" field and name your board according to your preference.

3. Click "CONFIRM" to create it.

Edit dashboard

4. Click "EDIT BOARD" to open "Edit Mode". Without opening this, you will be set to view only.

5. Click "EDIT BOARD" to open "Edit Mode". Without opening this, you will be set to view only.

Create/Edit widget

6. To add a widget, click "Add widget". A new widget will then be added to your dashboard.

7. Hold and drag in the bottom right corner of the widget to adjust the size of the widget to what ever size you want

8. Click and hold anywhere on the heading board to move the widget to the desired location

9. Click "EDIT" in the top right corner of the widget you want to edit.

10. Click the "TITLE" field to name your widget. The widget we are creating now will contain a map with the vessel location.

11. Click the "DESCRIPTION" field to give the widget a good description. You can also write any other specific information on the widget.

TIP

You can also write a use-case or a tip for anyone else viewing the description.

12. Click the dropdown to select a "Panel Type".

TIP

The options for the panel type dropdown is:

1. "Simple stat" - This only shows one number and is therefore a simple statistic. This can be useful to show the current speed, temperature, fuel consumption, heading etc from the sensor you choose, or you can add simple text by not selecting datasources and instead fill out the "Free text" field.

2. "Chart" - This will show the data points from a sensor in a graph. What is shown in the graph is depending on the Aggregate function you choose later in this tutorial. If the sensor has any alarm thresholds attached to it, these will also show in the graph. This panel type can therefore be useful to monitor specific sensors of your choosing that you have a high interest of monitoring closely. (Currently the graph is set to a 1 hour window).
3. "Map" - This will show a map and display the vessels location with its heading and a trail of its geographical history. It is possible to zoom in or out in the map, move around and find your current location by clicking the icons on the right side of the map widget. This widget will only show data if there is a NMEA node connected to the system, however if it is connected to the system, you will not need to select it as a datasource. That will automatically be done

13. Choose the panel type you'd like.

TIP

If you have chosen Panel type "Map" you are now done with adding the widget and can either add other widgets or skip to step 27.

14. On "Data originates from a query", click the toggle to "YES". This will allow you to choose data sources for the widget. This is important or no data will be shown. Exception is the "Map" widget.

15. If you dont want to add a datasource, set the toggle to "NO" and click the "Free text" field to edit what text is shown in the widget

TIP

If you dont want to add datasources, you are now done and can skip to step 27.

Otherwise continue with the guide.

16. Click the "EDIT" button that is shown when the toggle is set to "YES".

17. Choose your sensor data source.

WARNING

For "Simple stat" widgets, only choose one data source.

For "Chart" widgets, choose as many data sources you want to but be aware that the chart can become confusing to read if you choose data sources with different measurement types.

TIP

All your sensor will show in this list and it can be somewhat confusing when there are sensor with the same name in the list.

The reason for this is that some sensors reports more than one parameter. In the example above we can see that "6D:7C Fridge Mess" reports both temperature and humidity.

18. Save your selected data sources

19. Now you should choose the "Aggregate function" that you want. Click the dropdown menu.

TIP

Aggregate function is how you want to display the data from the sensor you have chosen as a datasource. The options are:

1. "Current" - This will provide one data point and that is what the sensor is currently reporting. Good to show in "Simple stat" widgets.
2. "Difference" - This will show the difference between two sensors, for example two temperature sensors. Good to show in "Simple stat" widgets.
3. "Average" - This will provide the average reported value from the sensor for a set periode. Good to show in "Chart" widgets.
4. "Max" - This will show the maximum reported value from the sensor. Good to show in "Chart" widgets or "Simple stat" widgets.
5. "Min" - This will show the lowest (minimum) reported value from the sensor. Good to show in "Chart" widgets or "Simple stat" widgets.

WARNING

It is currently possible to choose nothing in the "Aggregate function".

The default is then "Current" for "Simple stat" widgets, and "Average" for "Chart" widgets.

20. For this example, you can click "Current".

21. Click "Save" or "Edit board" to save the changes you have done

Examples of widget that we can create

Map widget

22. Click the "Edit board" button.

23. Add another widget to the board by clicking the "Add widget" button.

24. Write a title for your Map widget. In this example we have chosen to write "Map.

25. Write a description. In this example we have chosen to write "This is the vessels location".

26. Select panel type by clicking the dropdown.

27. Select "Map" from the dropdown options.

28. Either click the "Save" button or the "Edit board" button to save your new widget

29. Now you can resize and move the widget as you want as explained in steps 7 and 8.

Simple stat widget- Temperature value

30. Add another widget to your dashboard.

31. Name it according to the secondary widget you will be adding. We're naming this one "Mess Fridge"

32. Click the "DESCRIPTION" field and add your description for this widget. We've named ours "This widget displays the current temperature in the mess fridge".

33. Click the "Data Originates From a Query" toggle to toggle it from "NO" to "YES".

34. Click "EDIT"

35. Choose your sensor data source.

36. Save your configuration.

Chart widget - Fuel data

37. Add another widget.

38. Click "EDIT" and give your widget a title.

39. We named ours "Fuel Consumption".

40. Click the "Description" field. We wrote "This widget displays the vessel's current fuel consumption" in our description field.

41. Click "Simple stat" to get a dropdown menu to choose your panel type.

42. Choose "Chart" to get a nice and clear chart for your sensor data source.

43. Toggle the "Data Originates from a Query" toggle from "NO" to "YES".

44. Click "EDIT" to choose your data sources.

45. Our data source is a Fuji Flowmeter.

46. "SAVE" to choose your data source.

47. Click "SAVE" to save your widget configuration.

TIP

Fill out your dashboard with all the widgets you want by adding more. You can pull and move the widgets around on the dashboard.