Contents


Introduction

Pretty much all topics on this page are related to deep learning, robotics and a bit of data science. How does some simple JavaScript and HTML fit in here? The answer is simple. Sometimes a quick production protoype is required to list/display results with live updates. Using websockets, server-side-events (SSE) or simply plain old AJAX (Asynchronous JavaScript and XML) with some crappy HTML table is enough for a quick proof of concept (PoC) and sometimes even for a minimum viable product (MVP). And quite frankly there is not always a software engineer with web programming skills in reach when in need of a very quick visualization or adding another person would simply cause additional (time,cost,complexity) overhead.

That sounds like a topic covered on a million sites, right? Well, it seems like most tutorials include a ton of JavaScript libraries, require node.js and other things really not needed for a quick prototype or in production. Keeping it simple, lean and maintainable should always be our goal. There is nothing simpler to maintain than plain HTML and Javascript that conforms wit their respective standards.

Vanilla HTML and JavaScript approach

If we want to update some data, either adding or removing, or even modifying, then we need some HTML element to use. Tables might be not the nicest and most modern approach but they are super effective for quick prototyping. A fundamental advantage is that we know a lot of their structure before hand and while updating.

A simple table would look like this:

<table id="table_identifier">
    <tr>
        <!-- header row -->
        <th>Message</th>
        <th>Timestamp</th>
    </tr>
    <!-- content row -->
    <tr>
        <td> MSG </td>
        <td>xxxx-xx-xx xx:xx:xx</td>
    </tr>
</table>

The table id (id="table_identifier") is very important for updating our table. We can create a variable to access the table using this id:

let table = document.getElementById("table_identifier");

Depending if we want to add or remove content, we can either add rows (table.insertRow(PositionNumber)) or delete them (table.deleteRow(PositionNumber)).
If we create a new row, then this new row contains no cells. Therefore, a new cell with its position id given needs to be created. In order to do so, we need a variable which allows to modify the content of the newly added row:

let new_row = table.insertRow(1);

This row variable allows to add cells using the insertCell function which takes the column id as argument. Since we need to access and modify this empty cell as well, we create a new variable as well:

let new_cell = new_row.insertCell(0);

We can set any HTML content we want by updating it’s inner HTML new_cell.innerHTML(<b>Some Text</b>).

These are all the building blocks we need to create a very simple dashboard/event log.

Example using actix-web

To avoid writing a full introduction to SSE, we’re going to use this simple (modified) SSE example using the actix ecosystem which is programmed in Rust.

If we replace the body element in index.html with

<body>
    <table id="table_identifier">
        <tr>
            <!-- header row -->
            <th>Message</th>
            <th>Timestamp</th>
        </tr>
    </table>
    <script>
        let table = document.getElementById("table_identifier");
        let events = new EventSource("/events");
        events.onmessage = (event) => {
            // insert after header row -> row position id = 1
            let new_row = table.insertRow(1);
            let cell_msg = new_row.insertCell(0);
            cell_msg.innerHTML = event.data;
            let cell_timestamp = new_row.insertCell(1);
            let time = new Date().toLocaleTimeString();
            cell_timestamp.innerText = time;

            // removing all old messages
            while (Number(table.rows.length)  > 6) {
                table.deleteRow(Number(table.rows.length)-1);
            }
        }
    </script>
</body>

then we are only displaying the last 5 events.

This is a simple and straight forward approach to create some very simple dashboard for testing and displaying results/event updates.

NB!: If you want to deploy such an extremely simple dashboard as MVP for a demo, then consider using AJAX. It may cause a bit more overhead on the network but seems to be more stable in many cases and is much simpler to implement on any webserver.