You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Click **Add widget** and select a widget type to create a new widget on your workspace.
51
+
See [widget types](#widget-types) for more information about each type.
55
52
56
-
Click **Add widget** and add a **GPS** widget for any position-reporting sensor, a **stat** widget for current readings from a sensor, or a **time series** widget to graph data for any component that supports capturing numeric data.
57
-
Use the widget header to configure the panel.
58
-
Repeat as many times as necessary.
53
+
1. To configure the widget, click the pencil icon in the top right of your widget:
59
54
60
-
{{% /tablestep %}}
61
-
{{% tablestep number=3 %}}
62
-
**Select a machine**
55
+
{{<imgprocsrc="/services/data/visualize-widget-configure.png"alt="Click the pencil icon to configure your widget."style="width:500px"resize="1200x"class="imgzoom fill shadow" >}}
63
56
64
-
Now, select a machine with which to make your teleop workspace come to life.
65
-
Click **Select machine** and select your configured machine.
57
+
{{% alert title="Tip" color="tip" %}}
58
+
Select a location and machine for your workspace to populate the widget configuration dropdowns using sensor names and data from that machine.
59
+
{{% /alert %}}
66
60
67
-
Your dashboard now shows the configured widget for the data from your machine.
68
-
For example, a time series graph measuring noise over time for a sensor component:
61
+
You can mix and match multiple widgets to visualize many kinds of data collected by your machine:
69
62
70
-
{{<imgproc src="/services/data/time-series.png" alt="Time series widget measuring noise over time." style="width:500px" resize="1200x" class="imgzoom fill shadow" >}}
To arrange widgets on your workspace, click and drag the grid icon in the top left of your widget:
66
+
67
+
{{<imgprocsrc="/services/data/visualize-widget-move.png"alt="Click the grid icon to move a widget."style="width:500px"resize="1200x"class="imgzoom fill shadow" >}}
68
+
69
+
### Widget types
70
+
71
+
Viam provides the following types of widgets that you can customize to visualize data synced from your machines:
72
+
73
+
#### Camera stream
74
+
75
+
The camera stream widget displays a live feed of the most recent image captured by a camera component:
76
+
77
+
{{<imgprocsrc="/services/data/visualize-widget-camera.png"resize="800x"style="width: 500px"class="fill imgzoom shadow"declaredimensions=truealt="A camera widget displaying a live camera feed.">}}
78
+
79
+
#### GPS
80
+
81
+
The GPS widget displays the current GPS location of any sensor that reports a position:
82
+
83
+
{{<imgprocsrc="/services/data/visualize-widget-gps.png"resize="800x"style="width: 500px"class="fill imgzoom shadow"declaredimensions=truealt="A GPS widget displaying a live location.">}}
84
+
85
+
#### Stat
86
+
87
+
The stat widget displays the most recent reading recorded by any sensor that produces tabular data:
88
+
89
+
{{<imgprocsrc="/services/data/visualize-widget-stat.png"resize="800x"style="width: 500px"class="fill imgzoom shadow"declaredimensions=truealt="A stat widget displaying a live sensor reading.">}}
90
+
91
+
To configure the stat widget:
92
+
93
+
1. Choose a sensor from the **Sensor name** dropdown.
94
+
1. Select the reading you would like to display from the **Path** dropdown.
95
+
1. Assign a title, a unit suffix, and a refresh rate.
96
+
97
+
#### Time series
98
+
99
+
The time series widget creates a graph of tabular data. You can add multiple lines to the time series widget to compare multiple readings over the same time period:
100
+
101
+
{{<imgprocsrc="/services/data/visualize-widget-time-series.png"resize="1000x"style="width: 500px"class="fill imgzoom shadow"declaredimensions=truealt="A time series widget displaying a live graph of sensor data over time.">}}
102
+
103
+
To configure the time series widget, define the following attributes for each line in the time series:
104
+
105
+
1. From the **Resource name** dropdown, choose a sensor you would like to visualize.
106
+
1. From the **Capture method** dropdown, choose a method of data capture (for example **Readings**).
107
+
1. From the **Path** dropdown, choose the field of data that this line should visualize.
108
+
109
+
Use the other fields to customize the title, unit, duration, and other aspects of your visualization.
110
+
111
+
The **window method** allows you to aggregate sensor readings over specified time intervals instead of displaying raw data points.
112
+
Select a window method from the following options:
113
+
114
+
-**None**: shows raw data with the path specified with no aggregation
115
+
-**Count**: shows the number of readings within the window
116
+
-**Average**: calculates the average value throughout the window
117
+
-**Minimum**: shows the minimum value within the window
118
+
-**Maximum**: shows the maximum value within the window
119
+
-**Custom**: shows the result of a custom MQL aggregation pipeline that you define
120
+
121
+
#### Table
122
+
123
+
The table widget displays a grid of historic tabular data values. You can display multiple fields simultaneously in a single table.
124
+
Each row in the table represents a separate historic reading; each column represents a field.
125
+
126
+
{{<imgprocsrc="/services/data/visualize-widget-table.png"resize="800x"style="width: 500px"class="fill imgzoom shadow"declaredimensions=truealt="A table widget displaying a grid of sensor readings.">}}
127
+
128
+
To configure the table widget, define the following attributes:
129
+
130
+
1. From the **Resource name** dropdown, choose a sensor you would like to visualize.
131
+
1. From the **Capture method** dropdown, choose a method of data capture (for example **Readings**).
132
+
1. From the **Path** dropdown, choose the data that this table should visualize.
133
+
134
+
Use a custom MQL aggregation pipeline stage (or series of stages) to transform your sensor data into a flat object where each field corresponds to a column in the table.
135
+
Consider the following sensor data, which contains information about air quality in a field named `readings`:
136
+
137
+
```json
138
+
"data" {
139
+
"readings": {
140
+
"gas_resistance": 114978.66606781945,
141
+
"temperature": 22.96,
142
+
"pressure": 1016.18,
143
+
"humidity": 48.318
144
+
}
145
+
```
146
+
147
+
To visualize this data in a table with columns titled "gas_resistance," "temperature," "pressure," and "humidity," use the following custom MQL stage:
148
+
149
+
```mql
150
+
{
151
+
"$project": {
152
+
"data": 1
153
+
}
154
+
}
155
+
```
156
+
157
+
Alternatively, specify individual fields in your `$project` stage to customize the titles of your columns:
158
+
159
+
```mql
160
+
{
161
+
"$project": {
162
+
"Air Quality": "$data.readings.gas_resistance",
163
+
"Humidity": "$data.readings.humidity",
164
+
"Temperature": "$data.readings.temperature"
165
+
}
166
+
}
167
+
```
168
+
169
+
For more information about MQL aggregation operators, see the [MongoDB documentation](https://www.mongodb.com/docs/manual/reference/operator/aggregation/).
0 commit comments