<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body dir="auto"><div dir="ltr"></div><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">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">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>
  

</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">OvmsDev@lists.openvehicles.com</a></span><br><span><a href="http://lists.openvehicles.com/mailman/listinfo/ovmsdev">http://lists.openvehicles.com/mailman/listinfo/ovmsdev</a></span><br></div></blockquote></body></html>