207 lines
7.2 KiB
HTML
207 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 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>
|