OVMS3/OVMS.V3/components/vehicle_vweup/utils/statusmon.htm

206 lines
7.2 KiB
HTML

<!--
Web page plugin: VW e-Up Status Monitor
- Live display for status metrics & indicators
- Log monitor
- Command buttons for log level switching
-->
<style>
.indicator {
display: inline-block;
}
.indicator > .label {
font-size: 100%;
line-height: 150%;
margin: 10px;
padding: 10px;
display: inline-block;
border-radius: 15px;
}
.metric.number {
display: block;
float: none;
text-align: center;
}
.metric.number .label {
min-width: 8em;
font-size: 110%;
}
.metric.number .unit {
font-size: 110%;
}
.metric.number .value {
font-size: 130%;
font-family: monospace;
}
#log {
height: 300px; resize: vertical;
}
.log { font-size: 87%; color: gray; }
.log.log-I { color: green; }
.log.log-W { color: darkorange; }
.log.log-E { color: red; }
</style>
<div class="panel panel-primary">
<div class="panel-heading">VW e-Up Status Monitor</div>
<div class="panel-body">
<div class="receiver" id="my-receiver">
<div class="row">
<div class="col-sm-6">
<div class="metric number" data-metric="xvu.e.lv.pwrstate" data-prec="0">
<span class="label">LVPwrState:</span>
<span class="value">?</span>
<span class="unit"></span>
</div>
<div class="metric number" data-metric="xvu.e.lv.autochg" data-prec="0">
<span class="label">LVAutoChg:</span>
<span class="value">?</span>
<span class="unit"></span>
</div>
<div class="metric number" data-metric="xvu.e.hv.chgmode" data-prec="0">
<span class="label">HVChgMode:</span>
<span class="value">?</span>
<span class="unit"></span>
</div>
<div class="metric number" data-metric="v.b.12v.voltage" data-prec="1">
<span class="label">12V:</span>
<span class="value">?</span>
<span class="unit">V</span>
</div>
<div class="metric number" data-metric="v.c.12v.voltage" data-prec="1">
<span class="label">DCDC U:</span>
<span class="value">?</span>
<span class="unit">V</span>
</div>
<div class="metric number" data-metric="v.c.12v.current" data-prec="1">
<span class="label">DCDC I:</span>
<span class="value">?</span>
<span class="unit">A</span>
</div>
<div class="metric number" data-metric="xvu.c.eff.ecu" data-prec="1">
<span class="label">ChgEff:</span>
<span class="value">?</span>
<span class="unit">%</span>
</div>
<div class="metric number" data-metric="v.b.voltage" data-prec="1">
<span class="label">MainBat U:</span>
<span class="value">?</span>
<span class="unit">V</span>
</div>
<div class="metric number" data-metric="v.b.current" data-prec="1">
<span class="label">MainBat I:</span>
<span class="value">?</span>
<span class="unit">A</span>
</div>
<br class="clearfix"/>
</div>
<div class="col-sm-6 text-center">
<div class="indicator" data-metric="v.e.aux12v">
<span class="label label-default">12V AUX</span>
</div>
<div class="indicator" data-metric="v.e.charging12v">
<span class="label label-default">12V CHG</span>
</div>
<div class="indicator" data-metric="v.e.awake">
<span class="label label-default">AWAKE</span>
</div>
<div class="indicator" data-metric="v.e.on">
<span class="label label-default">ON</span>
</div>
<br class="clearfix"/>
<div class="indicator" data-metric="v.d.cp">
<span class="label label-default">CHG PORT</span>
</div>
<div class="indicator" data-metric="v.c.pilot">
<span class="label label-default">CHG PILOT</span>
</div>
<div class="indicator" data-metric="v.c.charging">
<span class="label label-default">CHARGING</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<pre id="log"></pre>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="menu">
<span class="cmd-stat">
<a class="btn btn-default" data-target="#cmdres" data-cmd="stat">stat</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="metrics list xvu">metrics xvu</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="metrics list 12v">metrics 12v</a>
</span>
<span class="cmd-event">
<a class="btn btn-default" data-target="#cmdres" data-cmd="event trace on">event trace on</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="event trace off">event trace off</a>
</span>
<span class="cmd-vweup">
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level debug v-vweup">vweup log debug</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level verbose v-vweup">vweup log verbose</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level info v-vweup">vweup log info</a>
</span>
<span class="cmd-vehicle">
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level debug vehicle">vehicle log debug</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level info vehicle">vehicle log info</a>
</span>
<span class="cmd-canlog">
<a class="btn btn-default" data-target="#cmdres" data-cmd="log level verbose canlog-monitor&#10;can log start mon crtd">can log on</a>
<a class="btn btn-default" data-target="#cmdres" data-cmd="can log stop">can log off</a>
</span>
</div>
<pre id="cmdres" />
</div>
<style>
.menu .btn { margin-bottom: 5px; }
.cmd-event .btn { color: #00a; }
.cmd-vweup .btn { color: #050; }
.cmd-vehicle .btn { color: #066; }
.cmd-canlog .btn { color: #600; }
</style>
</div>
<script>
(function(){
/* Indicators: */
$('#my-receiver').on('msg:metrics', function(e, update) {
$(this).find('.indicator').each(function() {
var $el = $(this), metric = $el.data("metric"), val = update[metric];
if (val == null)
return;
else if (val != 0)
$el.children().removeClass('label-default').addClass('label-success');
else if (val == 0)
$el.children().removeClass('label-success').addClass('label-default');
});
});
/* Log monitor: */
const maxlinecnt = 500;
var $output = $('#log'), _output = $output.get(0);
function add_output(addhtml) {
var autoscroll = (_output.scrollTop + $output.innerHeight()) >= _output.scrollHeight;
while (_output.childElementCount >= maxlinecnt) _output.removeChild(_output.firstChild);
$output.append(addhtml);
if (autoscroll) $output.scrollTop(_output.scrollHeight);
};
for (msg of loghist) {
add_output('<div class="log log-'+msg[0]+'">'+encode_html(unwrapLogLine(msg))+'</div>');
}
$('#my-receiver').on("msg:log", function(ev, msg) {
add_output('<div class="log log-'+msg[0]+'">'+encode_html(unwrapLogLine(msg))+'</div>');
});
})();
</script>