6.3 KiB
Notes about generic-table
@section gtint What is generic-table?
Generic-table is a JSON schema and client-side JS file that makes it easy to display live, table structured HTML over a ws link.
An example plugin and index.html using it are provided, but lwsgt itself doesn't have its own plugin, it's just a JSON schema and client-side JS that other plugins can use to simplify displaying live, table-based data without having to reinvent the wheel each time.
The ws protocol sends JSON describing the table, and then JSON updating the table contents when it chooses, the brower table is updated automatically, live.
\image html lwsgt-overview.png
-
Example protocol plugin (displays directory contents): https://github.com/warmcat/libwebsockets/tree/master/plugins/generic-table/protocol_table_dirlisting.c
-
Example HTML: https://github.com/warmcat/libwebsockets/tree/master/plugins/generic-table/assets/index.html
-
lwsgt.js (client-side table rendering / ws link management): https://github.com/warmcat/libwebsockets/tree/master/plugins/generic-table/assets/lwsgt.js
@section gteb Enabling for build
Enable the demo plugin at CMake with -DLWS_WITH_PLUGINS=1
@section gtinth Integrating with your html
- In your HEAD section, include lwsgt.js
<script src="lwsgt.js"></script>
- Also in your HEAD section, style the lwsgt CSS, eg
<style>
.lwsgt_title { font-size: 24; text-align:center }
.lwsgt_breadcrumbs { font-size: 18; text-align:left }
.lwsgt_table { font-size: 14; padding:12px; margin: 12px; align:center }
.lwsgt_hdr { font-size: 18; text-align:center;
background-color: rgba(40, 40, 40, 0.8); color: white }
.lwsgt_tr { padding: 10px }
.lwsgt_td { padding: 3px }
</style>
You can skip this but the result will be less beautiful until some CSS is provided.
- In your body section, declare a div with an id (can be whatever you want)
<tr><td><div id="lwsgt1" class="group1"></div></td></tr>
lwsgt JS will put its content there.
- Finally in a