<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
Mark,<br>
<br>
I haven't seen the necessity for a complex plugin just for table
views up to now. Normally it's pretty simple to make dynamic tables
just using HTML5 and jQuery. For example, see the file selector
widget I created. That uses a table to display the file entries,
it's dynamic, sortable & responsive with just a few lines of
code.<br>
<br>
DataTables adds a lot of features and simplifies manipulations of
the data. I like the automatic responsive drilldown shown here:<br>
<a class="moz-txt-link-freetext" href="https://datatables.net/extensions/responsive/examples/styling/bootstrap.html">https://datatables.net/extensions/responsive/examples/styling/bootstrap.html</a><br>
<br>
It's got some weight of course (about half of the charts lib with
just the most basic extensions), so we would add it as an optional
asset. On a first look it will need some customization for us, as it
uses the glyphicons for the bootstrap 3 variant, which we don't
include for size reasons.<br>
<br>
What do others think? And which of the extensions should be
included?<br>
<br>
Overall, the UI as drafted shouldn't be hard to implement. I'll see
if I can create a first version, but probably won't have the time
before next weekend.<br>
<br>
Regards,<br>
Michael<br>
<br>
<br>
<div class="moz-cite-prefix">Am 13.02.19 um 13:05 schrieb Mark
Webb-Johnson:<br>
</div>
<blockquote type="cite"
cite="mid:6468ACDE-F656-41BC-A868-92985B5DE2B8@webb-johnson.net">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class=""><br class="">
</div>
<div class="">Michael, this is probably for you - but if anybody
else can help please do…</div>
<div class=""><br class="">
</div>
<div class="">I am trying to see how hard it would be to do a web
based interface to the RETOOLS system. Presumably this would
appear in the menu as Tools / Reverse Engineering (or some such
abbreviation if that is too long). The basic screen would look
something like this:</div>
<div class=""><br class="">
</div>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class="">
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">+----------------------------------------------------------------------------------------------------+</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">|
|</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| +----------+
+------+-------+------------------------------------+------+
+--------------------+ |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | hdr1 |
hdr2 | hdr3 | hdr4 | |
| |</span></font></div>
<font class="" face="Andale Mono"><span style="font-size: 12px;"
class="">| | |
+------+-------+------------------------------------+------+
| </span></font><span style="font-family: "Andale
Mono"; font-size: 12px;" class=""> </span><span
style="font-family: "Andale Mono"; font-size: 12px;"
class=""> </span><span style="font-size: 12px; font-family:
"Andale Mono";" class=""> |</span><span
style="font-size: 12px; font-family: "Andale Mono";"
class=""> |</span></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class="">
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | Controls | | |
| | | |
Info | |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | col1 |
col2 | col3 | col4 | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| +----------+ | |
| |
| +--------------------+ |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| +----------+ | |
| |
| +--------------------+ |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | Status | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| TABLE | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
Extra | |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | | | |
| | | |
| |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| +----------+ | |
| |
| +--------------------+ |</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></div>
<font class="" face="Andale Mono"><span style="font-size: 12px;"
class="">| | | |
| | |</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">| | |
| | |
|</span></font></blockquote>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class="">
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">|
+------+-------+------------------------------------+------+
|</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">|
|</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">+----------------------------------------------------------------------------------------------------+</span></font></div>
</blockquote>
<div class=""><br class="">
</div>
<div class="">The controls are just a set of controls - things
that bring up dialogs for more information or perform actions.
Like start/stop RE, switch modes, manipulate DBC files, etc.
Left justified in the frame, and perhaps 10% of the width.
Height can dynamically adjust with the text content.</div>
<div class=""><br class="">
</div>
<div class="">The Status, Info, and Extra panes are just a
dynamically updated text panes. Main code needs to be able to
send text here and have it shown in the appropriate pane. Right
justified in the frame and perhaps 30% of the width. Height can
dynamically adjust with the text content.</div>
<div class=""><br class="">
</div>
<div class="">The TABLE is a table. Probably 5 columns by many
rows (anywhere from 20 to 200 or so). Either paged, scrolling,
or just very tall. Paged is probably preferable. Would need a
simple mechanism to dynamically add/update a row (identified by
‘key’ column and in sorted order), presumably using the web
socket. Also need something to be able to dynamically clear the
entire table. The RETOOLS code would use this to update the
table in realtime (presumably over a web socket). It would be
good if the table could do things like search filtering of
displayed rows, column sorting, etc (all client side - something
like <a href="http://datatables.net" class=""
moz-do-not-send="true">datatables.net</a>).</div>
<div class=""><br class="">
</div>
<div class="">For example, look at this output:</div>
<div class=""><br class="">
</div>
<blockquote style="margin: 0 0 0 40px; border: none; padding:
0px;" class="">
<div class="">
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">OVMS# re dbc list</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">key
records ms last</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">can1/100:0081
2 22000 01 02 03 04 05 | .....</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class="">can1/101
1 44000 01 02 03 04 | ....</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class=""> dbc/DI_Signal1: 129
km</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class=""> dbc/DI_Signal2: 1 km</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class=""> dbc/DI_Signal3: 130
kWh</span></font></div>
<div class=""><font class="" face="Andale Mono"><span
style="font-size: 12px;" class=""> dbc/DI_Signal4: 122
Degrees</span></font></div>
</div>
</blockquote>
<div class=""><br class="">
</div>
<div class="">The idea is to be able to show the key, records, ms,
last, and ascii dump in the main table. Then, clicking on a row
would show the statistics for that message in the Info pane, and
DBC signals in the Extra pane.</div>
<div class=""><br class="">
</div>
<div class="">I can handle the RETOOLS side, but the javascript is
beyond me. I also had a look at the ovms web server framework,
but it doesn’t seem to be able to do the table part (yet)?</div>
<div class=""><br class="">
</div>
<div class="">Any idea how complex this is?</div>
<div class=""><br class="">
</div>
<div class="">Regards, Mark.</div>
<div class=""><br class="">
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<pre class="moz-quote-pre" wrap="">_______________________________________________
OvmsDev mailing list
<a class="moz-txt-link-abbreviated" href="mailto:OvmsDev@lists.openvehicles.com">OvmsDev@lists.openvehicles.com</a>
<a class="moz-txt-link-freetext" href="http://lists.openvehicles.com/mailman/listinfo/ovmsdev">http://lists.openvehicles.com/mailman/listinfo/ovmsdev</a>
</pre>
</blockquote>
<br>
<pre class="moz-signature" cols="160">--
Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal
Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
</pre>
</body>
</html>