How to Build an Interactive Dashboard App

A dashboard app is a visual graphical, real-time representation of a report. Examples include a visual representation of financial systems or a visual representation and a controller for embedded devices such as industrial equipment.

Learn how to quickly design a fully fledged web application by using one of our two ready to use dashboard templates without requiring extensive HTML and CSS skills. Both dashboard templates can be downloaded from GitHub.


Server Generated Dashboard App

Figure 1: The light dashboard template

CSS and Responsive Web Design

Responsive web design simply means that the web app scales from working on small displays, such as a on a phone, to large desktop monitors. Responsive web design is about creating web pages that look good on all devices.

Easy CSS:
If you are an engineer, learning HTML and JavaScript is relatively easy; however, you will most likely be frustrated with getting the visible layout working using CSS. The two templates we provide simplify the layout and the responsive design by relying on easy to use CSS frameworks. One template is based on AdminLTE and uses Bootstrap; the other template uses Pure.css.

Snappy Dynamic Web Page Rendering

You may be familiar with client side JavaScript powered rendering frameworks such as AngularJS, ReactJS, and Vue.js. These framework enable designing the entire web application as one client side JavaScript powered page using a technology called Single Page Application or SPA for short. If you have extensive experience in one of these frameworks, you may be interested in our SPA tutorial. However, this tutorial focuses on rendering the web pages on the server side, which we believe is the best choice when using the Mako Server due to easy and fast development and snappy HTML rendering. The Mako Server is just really good at creating dynamic content on the server side as we will show below.

Note that rendering the page layout on the server side does not exclude rendering HTML dynamically on the client side using JavaScript. In fact, one of our ready to use templates shows how to update a gauge in real time on the client side by using data received via WebSockets.

Server Side Rendering to the Rescue

Dynamically rendering small components and widgets in the browser using JavaScript is easy. Rendering the complete application, including the page routing using JavaScript, is complex. A hybrid design provides the best solution since it is both faster and easier to build and maintain.

Figure 2 below shows the AdminLTE dashboard template and how the various components are generated on the server side. The server side logic separates the page content from the "site theme". The section framed in brown in figure 2 shows the page content. This content is injected at the server side, inserted into the main content, and sent to the browser. The "theme" includes everything except the page content. The theme also includes dynamically generated content framed in green in figure 2, including the menu to the left, the page title, and the breadcrumb.

Server Generated AdminLTE App

Figure 2: AdminLTE converted to a server side generated dashboard app

Lua Server Pages and Server Side Routing Framework

Lua Server Pages, or LSP for short, is a technology similar to PHP that uses the Lua language on the server side for HTML rendering. In a previous article, we explained how to dynamically build a navigation menu for a web site using LSP by having each page include a common header and footer element. Although the basic dashboard presented in this tutorial is easy to implement, it may not be the best solution for a server rendered web application framework.

Instead of having each page include common components, a more elegant solution is to implement what is known as a routing system. You may be familiar with routing managed by client side JavaScript powered SPA frameworks. However, in the context of a server-side web application, a routing system is the part of the server side web application that maps an HTTP request (URL) to a request handler. In our case, the request handler is a directory function, which is installed as a Lua callback function in a directory object. A directory object can cover a set of pages (URLs) or all pages accessible on the server side, including non existing pages.

The routing and server side content generation works as follows:

  1. When the server receives an HTTP request, the application's default directory object, which is an instance of a resource reader triggers.
  2. The resource reader tries to find the requested resource, which it will do for all static content such as CSS files, JavaScript files, etc. If found, the resource is returned to the client (the browser).
  3. The resource reader delegates the request to the installed directory object if the resource is not found.
  4. The directory object triggers the directory callback function (explained above)
  5. The directory callback function validates the request and if the requested page is part of the dashboard app.
  6. The directory callback function then parses the requested page if found or it parses a dedicated 404 page if not found.
  7. The parsed page, which is a Lua function, is saved as a variable in the ephemeral request/response environment.
  8. The directory callback function calls a pre-parsed LSP page function called template.lsp.
  9. The template.lsp page renders the common parts of the web site, including the navigation menu.
  10. The template.lsp page calls the LSP page stored in the request/response environment.
  11. The template.lsp page finishes by rendering all the closing HTML tags part of the common theme.

Figure 3 below shows how template.lsp renders the common components (left) and then injects whatever page the user requested to the right by calling the LSP page function that is stored in the request/response environment.

Server Generated AdminLTE App

Figure 3: Dynamic server side composition of "theme" (left) and page content (right)

The benefit with the solution shown in figure 3 vs. server side includes, as explained in our Dynamic Navigation Menu tutorial, is that the "theme" can manage much more than just the navigation menu and the page content stays clean. The page content can be static or dynamically generated. Another cool feature is that LSP pages (the page content) do not have to have the .lsp extension. In our dashboard templates, we use the extension .html for both static and dynamic content.

Download the Dashboard Templates from GitHub


Content Management System

The two dashboard apps store the page content, including server side Lua code, as regular files. This construction makes the two dashboard apps compatible with Barracuda App Server powered products that do not include a database. In fact, the current design enables embedded systems to store the pages directly in flash memory without using a file system or database. However, the Mako Server includes the SQLite database engine, making it very easy and convenient to store the content in a database. You can easily convert one of the dashboard apps to a complete database driven Content Management System by applying the information provided in the URL to Database Mapping tutorial.

Example Dashboard Implementation

SharkTrustX is a product based on the AdminLTE template. The product includes support for authentication using its own SQL database and Single Sign On via Microsoft Azure Active Directory. The source code is available on Github. See the Mako Server SharkTrustX tutorial for details.

Discover More:

No matter what your background or project goals, we're here to help you find the perfect solution! Are you a maker looking for the right tools? A startup trying to get off the ground? A large business seeking new software solutions? We've got you covered.

If you have any questions or just aren't sure which product is right for you, don't hesitate to reach out. Our team is dedicated to helping you overcome your hardware/software challenges and find the best solution for your needs. Let us know how we can help - we'd love to lend a hand!


OPC-UA

OPC-UA Client & Server

An easy to use OPC UA stack that enables bridging of OPC-UA enabled industrial products with cloud services, IT, and HTML5 user interfaces.

Edge Controller

Edge Controller

Use our user programmable Edge-Controller as a tool to accelerate development of the next generation industrial edge products and to facilitate rapid IoT and IIoT development.

On-Premises IoT

On-Premises IoT Platform

Learn how to use the Barracuda App Server as your On-Premises IoT Foundation.

Embedded Web Server

Barracuda Embedded Web Server

The compact Web Server C library is included in the Barracuda App Server protocol suite but can also be used standalone.

WebSocket Server

Microcontroller Friendly

The tiny Minnow Server enables modern web server user interfaces to be used as the graphical front end for tiny microcontrollers. Make sure to check out the reference design and the Minnow Server design guide.

WebDAV Server

Network File System

Why use FTP when you can use your device as a secure network drive.

HTTP Client

Secure HTTP Client Library

PikeHTTP is a compact and secure HTTP client C library that greatly simplifies the design of HTTP/REST style apps in C or C++.

WebSocket Client

Microcontroller Friendly

The embedded WebSocket C library lets developers design tiny and secure IoT applications based on the WebSocket protocol.

SMTP Client

Secure Embedded SMTP Library

Send alarms and other notifications from any microcontroller powered product.

Crypto Library

RayCrypto C Library

The RayCrypto engine is an extremely small and fast embedded crypto library designed specifically for embedded resource-constrained devices.

Embedded PKI Service

Automatic SSL Certificate Management for Devices

Real Time Logic's SharkTrust™ service is an automatic Public Key Infrastructure (PKI) solution for products containing an Embedded Web Server.

Modbus

Modbus TCP client

The Modbus client enables bridging of Modbus enabled industrial products with modern IoT devices and HTML5 powered HMIs.

Posted in Tutorials