126 lines
4 KiB
HTML
126 lines
4 KiB
HTML
<!--
|
|
Web UI page plugin: DataTables metrics widget demonstration
|
|
-->
|
|
|
|
<style>
|
|
td i {
|
|
font-style: normal;
|
|
font-size: 140%;
|
|
line-height: 90%;
|
|
font-weight: bold;
|
|
}
|
|
td i.warning { color: orange; }
|
|
td i.danger { color: red; }
|
|
</style>
|
|
|
|
|
|
<div class="panel panel-primary panel-single receiver" id="my-receiver">
|
|
<div class="panel-heading">Metrics Table Widget Example</div>
|
|
<div class="panel-body">
|
|
|
|
<p>The following table shows a live view of the battery cell voltages along with their recorded
|
|
minimum, maximum, maximum deviation and current warning/alert state.</p>
|
|
<p>Try resizing the window or using a mobile phone to see how the table adapts to the screen
|
|
width. The table will also keep the selected sorting over data updates.</p>
|
|
<p>Hint: if you don't have live battery cell data, click the generator button to create
|
|
some random values. The random data is only generated in your browser, not on the module.</p>
|
|
|
|
<div class="metric table"
|
|
data-metric="v.b.c.voltage,v.b.c.voltage.min,v.b.c.voltage.max,v.b.c.voltage.dev.max,v.b.c.voltage.alert">
|
|
<table class="table table-striped table-bordered table-hover" id="v-table" />
|
|
</div>
|
|
|
|
<p>See <a target="_blank" href="https://datatables.net/manual/">DataTables manual</a> for all
|
|
options and API methods available.</p>
|
|
|
|
</div>
|
|
<div class="panel-footer">
|
|
<p><button type="button" class="btn btn-default action-gendata">Generate random data</button></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
(function(){
|
|
|
|
// Utilities:
|
|
var alertMap = {
|
|
0: '',
|
|
1: '<i class="warning">⚐</i>',
|
|
2: '<i class="danger">⚑</i>',
|
|
};
|
|
|
|
function fmtCode(value, map) {
|
|
return (map[value] !== undefined) ? map[value] : null;
|
|
}
|
|
function fmtNumber(value, prec) {
|
|
return (value !== undefined) ? Number(value).toFixed(prec) : null;
|
|
}
|
|
|
|
// Init table:
|
|
$('#v-table').table({
|
|
responsive: true,
|
|
paging: true,
|
|
searching: false,
|
|
info: false,
|
|
autoWidth: false,
|
|
columns: [
|
|
{ title: "#", className: "dt-body-center", width: "6%", responsivePriority: 1 },
|
|
{ title: "Voltage", className: "dt-body-right", width: "22%", responsivePriority: 3 },
|
|
{ title: "Minimum", className: "dt-body-right", width: "22%", responsivePriority: 4 },
|
|
{ title: "Maximum", className: "dt-body-right", width: "22%", responsivePriority: 5 },
|
|
{ title: "Max.Dev.", className: "dt-body-right", width: "22%", responsivePriority: 2 },
|
|
{ title: "Alert", className: "dt-body-center", width: "6%", responsivePriority: 1 },
|
|
],
|
|
rowId: 0,
|
|
onUpdate: function(update) {
|
|
// Get vector metrics to display:
|
|
var v = [
|
|
metrics["v.b.c.voltage"] || [],
|
|
metrics["v.b.c.voltage.min"] || [],
|
|
metrics["v.b.c.voltage.max"] || [],
|
|
metrics["v.b.c.voltage.dev.max"] || [],
|
|
metrics["v.b.c.voltage.alert"] || [],
|
|
];
|
|
var lcnt = 0;
|
|
v.map(el => lcnt = Math.max(lcnt, el.length));
|
|
// Transpose vectors to columns:
|
|
var l, d = [];
|
|
for (l = 0; l < lcnt; l++) {
|
|
d.push([
|
|
l+1,
|
|
fmtNumber(v[0][l], 2),
|
|
fmtNumber(v[1][l], 2),
|
|
fmtNumber(v[2][l], 2),
|
|
fmtNumber(v[3][l], 3),
|
|
fmtCode(v[4][l], alertMap),
|
|
]);
|
|
}
|
|
// Display new data:
|
|
this.clear().rows.add(d).draw();
|
|
},
|
|
});
|
|
|
|
|
|
// Test data generator:
|
|
$('.action-gendata').on('click', function() {
|
|
var td = {};
|
|
var m_vlt = [], m_min = [], m_max = [], m_devmax = [], m_alert = [];
|
|
for (var i = 1; i <= 16; i++) {
|
|
m_vlt.push(3.6 + Math.random() * 0.5);
|
|
m_min.push(3.4 + Math.random() * 0.2);
|
|
m_max.push(3.8 + Math.random() * 0.2);
|
|
m_devmax.push(-0.2 + Math.random() * 0.4);
|
|
m_alert.push(Math.floor(Math.random() * 3));
|
|
}
|
|
td["v.b.c.voltage"] = m_vlt;
|
|
td["v.b.c.voltage.min"] = m_min;
|
|
td["v.b.c.voltage.max"] = m_max;
|
|
td["v.b.c.voltage.dev.max"] = m_devmax;
|
|
td["v.b.c.voltage.alert"] = m_alert;
|
|
$('.receiver').trigger('msg:metrics', $.extend(metrics, td));
|
|
});
|
|
|
|
})();
|
|
</script>
|