<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class="">Great idea! Someone please make this soon, as I just got my new Kia e-Niro ðŸ™‚ Need to do some work on the e-Niro-support.<div class=""><br class=""></div><div class="">Geir<br class=""><div><br class=""><blockquote type="cite" class=""><div class="">13. feb. 2019 kl. 13:05 skrev Mark Webb-Johnson <<a href="mailto:mark@webb-johnson.net" class="">mark@webb-johnson.net</a>>:</div><br class="Apple-interchange-newline"><div class=""><meta http-equiv="Content-Type" content="text/html; charset=utf-8" class=""><div style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class=""><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 face="Andale Mono" class=""><span style="font-size: 12px;" class="">+----------------------------------------------------------------------------------------------------+</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|                                                                                                    |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| +----------+  +------+-------+------------------------------------+------+  +--------------------+ |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  | hdr1 |  hdr2 |                  hdr3              | hdr4 |  |                    | |</span></font></div><font face="Andale Mono" class=""><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 face="Andale Mono" class=""><span style="font-size: 12px;" class="">| | Controls |  |      |       |                                    |      |  |        Info        | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  | col1 |  col2 |                  col3              | col4 |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| +----------+  |      |       |                                    |      |  +--------------------+ |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| +----------+  |      |       |                                    |      |  +--------------------+ |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |  Status  |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |             TABLE                  |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |        Extra       | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| |          |  |      |       |                                    |      |  |                    | |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">| +----------+  |      |       |                                    |      |  +--------------------+ |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></div><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               |      |       |                                    |      |                         |</span></font></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" class=""><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|               +------+-------+------------------------------------+------+                         |</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">|                                                                                                    |</span></font></div><div class=""><font face="Andale Mono" class=""><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="">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 face="Andale Mono" class=""><span style="font-size: 12px;" class="">OVMS# re dbc list</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">key                     records     ms last</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">can1/100:0081                 2  22000 01 02 03 04 05          | .....</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">can1/101                      1  44000 01 02 03 04             | ....</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">  dbc/DI_Signal1: 129 km</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">  dbc/DI_Signal2: 1 km</span></font></div><div class=""><font face="Andale Mono" class=""><span style="font-size: 12px;" class="">  dbc/DI_Signal3: 130 kWh</span></font></div><div class=""><font face="Andale Mono" class=""><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></div>_______________________________________________<br class="">OvmsDev mailing list<br class=""><a href="mailto:OvmsDev@lists.openvehicles.com" class="">OvmsDev@lists.openvehicles.com</a><br class="">http://lists.openvehicles.com/mailman/listinfo/ovmsdev<br class=""></div></blockquote></div><br class=""></div></body></html>