<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
Mark,<br>
<br>
the crash was no memory corruption, it was a race condition in the
RE init (the queue was created after the task).<br>
<br>
DataTables integration and the first draft of the RE tools web UI is
now in the hub. It's already usable but far from finished, so I
didn't include it as a standard page. Install "web/retools.htm" as a
plugin to use & work on it.<br>
<br>
The layout is following your draft, and I've added some rules for
small devices.<br>
<br>
I've added some control buttons and status output, the table stream
updates and a detail call on row clicks. Btw: it may be better to
send detail info to the browser using the stream updates (for
example in hidden columns), so the browser doesn't need to request
them.<br>
<br>
The table is mostly standard DataTable, I've only enabled the
responsive plugin, that does dynamic hiding & drilldown of
columns. I've included most of the plugins, so there are many
additional options:<br>
<ul>
<li>Included libraries:</li>
<ul>
<li>DataTables 1.10.18, Buttons 1.5.4, Column visibility 1.5.4,
ColReorder 1.5.0, FixedColumns 3.2.5, FixedHeader 3.1.4,
KeyTable 2.5.0, Responsive 2.2.2, RowGroup 1.1.0, RowReorder
1.2.4, Scroller 1.5.0, Select 1.2.6</li>
</ul>
<li>see <a class="moz-txt-link-freetext" href="https://datatables.net/extensions/index">https://datatables.net/extensions/index</a><br>
</li>
</ul>
The web UI listens to stream updates for the table and the text
displays using this scheme:<br>
<ul>
<li>Subtype "retools/list/set" → replace list by payload<br>
</li>
<li>Subtype "retools/list/update" → update/extend list by payload</li>
<li>Subtype "retools/<boxid>" → set payload as text content
in box <boxid>, boxid e.g. "status", "info" or "extra"<br>
</li>
</ul>
Example: notify raise text stream retools/extra "hi there"<br>
<br>
Text boxes are currently <samp> with monospace font & text
to html conversion. If you'd like to display HTML, replace "<tt>$('<div/>').text(msg.value).html()</tt>"
by just "<tt>msg.value</tt>" on line 175.<br>
<br>
Table updates are sent as JSON arrays with HTML markup for the
changed/discovered highlighting. This currently uses <b> &
<u>, which are styled accordingly. Command "re stream list"
creates a message with all rows (no highlighting), "re stream
changed" includes only changed rows (with highlighting).<br>
<br>
I've added a first stream sender on the per second ticker. That
currently simply sends all changed rows and could be optimized to
only send those changed since the last tx. It could also make sense
to raise the update frequency then.<br>
<br>
The status box monitors some "retools" events I introduced, the
stream ticker also updates the box -- if the stream subscription
& updating is going to be permanent (as now), the event coupling
can be removed.<br>
<br>
Regards,<br>
Michael<br>
<br>
<br>
<div class="moz-cite-prefix">Am 23.02.19 um 10:18 schrieb Michael
Balzer:<br>
</div>
<blockquote type="cite"
cite="mid:28e770e9-49ee-925e-2c3c-50826519e43d@expeedo.de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Side note: starting the RE server from the web shell currently
consistently results in a crash from <tt>xQueueReceive()</tt>
that looks like our "old friend", the memory corruption.<br>
<br>
Starting from the async console or ssh or via MP works. No idea
yet how that could make a difference for xQueueReceive(), I'll
assume it's the PSRAM bug for now.<br>
<br>
<br>
<tt>D (38792) webcommand: HttpCommandStream[0x3fa2c358] init:
handler=0x3fa2f6a0 command='re start' verbosity=65535</tt><tt><br>
</tt><tt>I (38812) webcommand: HttpCommandStream[0x3fa2c358]:
1996204 bytes free, executing: re start</tt><tt><br>
</tt><b><tt>assertion "res == coreID || res == portMUX_FREE_VAL"
failed: file
"/home/balzer/esp/esp-idf/components/freertos/portmux_impl.inc.h",
line 105, function: vPortCPUAcquireMutexIntsDisabledExtram</tt></b><tt><br>
</tt><tt>abort() was called at PC 0x40112f67 on core 1</tt><tt><br>
</tt><tt><br>
</tt><tt>Backtrace: 0x40091188:0x3ffea650 0x40091383:0x3ffea670
0x40112f67:0x3ffea690 0x40093ce3:0x3ffea6c0
0x40095ac0:0x3ffea6f0 0x4016c08a:0x3ffea730
0x4016c0c1:0x3ffea770</tt><tt><br>
</tt><tt><br>
</tt><tt>Rebooting...</tt><tt><br>
</tt><br>
<br>
<br>
<div class="moz-cite-prefix">Am 16.02.19 um 14:00 schrieb Mark
Webb-Johnson:<br>
</div>
<blockquote type="cite"
cite="mid:3700E7C1-6156-467F-8977-EC7AB5F06FD8@webb-johnson.net">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<div dir="ltr">Thanks, Michael.</div>
<div dir="ltr"><br>
</div>
<div dir="ltr">I can handle the RE side of things - just haven’t
done a lot of work in JavaScript (too many people better at it
than me at my day job, so I leave it to them). I can also
probably extend it once the basics are working.</div>
<div dir="ltr"><br>
</div>
<div dir="ltr">Just need a basic UI framework, and some way to
push the data from RE.</div>
<div dir="ltr"><br>
</div>
<div dir="ltr">No hurry.</div>
<div dir="ltr"><br>
</div>
<div dir="ltr">Regards, Mark</div>
<div dir="ltr"><br>
</div>
<div dir="ltr">On 16 Feb 2019, at 8:43 PM, Michael Balzer <<a
href="mailto:dexter@expeedo.de" moz-do-not-send="true">dexter@expeedo.de</a>>
wrote:<br>
<br>
</div>
<blockquote type="cite">
<div dir="ltr">
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
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"
moz-do-not-send="true">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" moz-do-not-send="true">OvmsDev@lists.openvehicles.com</a>
<a class="moz-txt-link-freetext" href="http://lists.openvehicles.com/mailman/listinfo/ovmsdev" moz-do-not-send="true">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>
</div>
</blockquote>
<blockquote type="cite">
<div dir="ltr"><span>_______________________________________________</span><br>
<span>OvmsDev mailing list</span><br>
<span><a href="mailto:OvmsDev@lists.openvehicles.com"
moz-do-not-send="true">OvmsDev@lists.openvehicles.com</a></span><br>
<span><a
href="http://lists.openvehicles.com/mailman/listinfo/ovmsdev"
moz-do-not-send="true">http://lists.openvehicles.com/mailman/listinfo/ovmsdev</a></span><br>
</div>
</blockquote>
<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" moz-do-not-send="true">OvmsDev@lists.openvehicles.com</a>
<a class="moz-txt-link-freetext" href="http://lists.openvehicles.com/mailman/listinfo/ovmsdev" moz-do-not-send="true">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>
<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>