OVMS V3 is based on metrics. Metrics can be single numerical or textual values or complex values
like sets and arrays. The web framework keeps all metrics in a global object, which can be read
simply by e.g. metrics["v.b.soc"].
Metrics updates (as well as other updates) are sent to all DOM elements having the
receiver class. To hook into these updates, simply add an event listener for
msg:metrics. Listening to the event is not necessary if all you need is some metrics
display. This is covered by the metric class family as shown here.
All elements of class metric in a receiver are checked for the
data-metric attribute. If no specific metric class is given, the metric value
is simply set as the element text: ?
is your current network provider.
number & text displays get the metric value set in their child of
class value. They may additionally have labels and units. data-prec can
be used on number to set the precision, data-scale to scale the raw
values by a factor. They have fixed min widths and float by default, so you can simply put
multiple displays into the same container:
Bootstrap progress bars can be used as lightweight graphical indicators.
Labels and units are available, also data-prec and data-scale.
Again, all you need is a bit of markup:
The OVMS web framework has builtin support for the highly versatile Highcharts library
with loads of chart types and options. chart metric examples:
For charts, a little bit of scripting is necessary. The scripts for these charts contain the chart configuration, part of which is the update function you need to define. The update function translates metrics data into chart data. This is trivial for single values like the throttle, the cell voltage chart is an example on basic array processing.
Also, while charts can be defined with few options, you'll love to explore all the features and fine tuning options provided by Highcharts. For inspiration, have a look at the Highcharts demos and the Highcharts documentation. We're using styled mode, so some options don't apply, but everything can be styled by standard CSS.