[Ovmsdev] RETOOLS web
Michael Balzer
dexter at expeedo.de
Sat Feb 16 20:43:34 HKT 2019
Mark,
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.
DataTables adds a lot of features and simplifies manipulations of the data. I like the automatic responsive drilldown shown here:
https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
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.
What do others think? And which of the extensions should be included?
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.
Regards,
Michael
Am 13.02.19 um 13:05 schrieb Mark Webb-Johnson:
>
> Michael, this is probably for you - but if anybody else can help please do…
>
> 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:
>
> +----------------------------------------------------------------------------------------------------+
> | |
> | +----------+ +------+-------+------------------------------------+------+ +--------------------+ |
> | | | | hdr1 | hdr2 | hdr3 | hdr4 | | | |
> | | | +------+-------+------------------------------------+------+ | | |
>
> | | Controls | | | | | | | Info | |
> | | | | col1 | col2 | col3 | col4 | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | +----------+ | | | | | +--------------------+ |
> | | | | | | |
> | +----------+ | | | | | +--------------------+ |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | Status | | | | | | | | |
> | | | | | | TABLE | | | | |
> | | | | | | | | | Extra | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | | | | | | | | | | |
> | +----------+ | | | | | +--------------------+ |
> | | | | | | |
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | | | | | | |
>
> | +------+-------+------------------------------------+------+ |
> | |
> +----------------------------------------------------------------------------------------------------+
>
>
> 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.
>
> 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.
>
> 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
> datatables.net <http://datatables.net>).
>
> For example, look at this output:
>
> OVMS# re dbc list
> key records ms last
> can1/100:0081 2 22000 01 02 03 04 05 | .....
> can1/101 1 44000 01 02 03 04 | ....
> dbc/DI_Signal1: 129 km
> dbc/DI_Signal2: 1 km
> dbc/DI_Signal3: 130 kWh
> dbc/DI_Signal4: 122 Degrees
>
>
> 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.
>
> 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)?
>
> Any idea how complex this is?
>
> Regards, Mark.
>
>
> _______________________________________________
> OvmsDev mailing list
> OvmsDev at lists.openvehicles.com
> http://lists.openvehicles.com/mailman/listinfo/ovmsdev
--
Michael Balzer * Helkenberger Weg 9 * D-58256 Ennepetal
Fon 02333 / 833 5735 * Handy 0176 / 206 989 26
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openvehicles.com/pipermail/ovmsdev/attachments/20190216/1d26e55c/attachment-0001.html>
More information about the OvmsDev
mailing list