Home Elements Boards Recipes

Embedded Web Site for IoT Devices

Every device using the HomeDing library has an embedded web site and a built-in web server so it can be directly reached by using a standard browser.

The files available through the web server are available for devices with 4MByte flash providing the full functionality.

A subset of the files fit into 128k file space to support even devices with small flash sizes.

Implementing a web site that fits into the very limited space of the flash memory is a challenge on its own but can be solved by using the power of the current browsers.

To make development of this web site less painful a nodejs based web site project is available at https://github.com/HomeDing/WebFiles to build the target files and also simulating configured elements to a certain degree.

Technology selection

Some reasonable decisions were made so that all current browsers can be used to run the embedded web site.

In general the standard features available in modern browsers are used in favour of using a standard framework.

Images are implemented using SVG format wherever possible. It is nicely supported by all browsers today so no fallback needs to be implemented. They are combined into a icon template file (icons.svg) As a welcome effect the SVG files for icons are smaller than bitmap based images.

Scripts are implemented in JavaScript using the ES5 version or by using Typescript that is compiled and minified to ES5 version.

CSS Style sheets are implemented by using SCSS files beeing compiled to standard CSS. This allows structuring and commending the source code as well as minimizing the output.

The development source for this web site can be found on github in the repository https://github.com/HomeDing/WebFiles.

In the examples you can find the data folders that come with the library that include the files as they need to be stored on the device. It is a standard nodejs based project helps creating these files and also give you a useful nodejs-express based server to make development easier.

The files are also available on github to be transferred directly to devices using the /$update utility.

The embedded web site itself is implemented using the modern Single Page Applications (SPA) approach for web applications:

To make this fit into the limited space a micro implementation approach is used that provides minimal HTML, JavaScript and CSS. They run smoothly even on mobile devices because they also need not much network bandwidth.

Implemented features

This is an overview of the WebUI implementation that is uploaded and stored on the HomeDing device.

This main features of the web site implementation supports

The reduced implementation is available to support minimal devices with a minimal flash memory.

The following files are part of the web UI implementation on devices:

File Description
/index.htm Static startup page[1]
/board.htm Dashboard with configured elements[1:1]
/microide.htm IDE for modifying configuration
/log.htm system log viewer[1:2]
/ding.htm reduced Dashboard implementation for minimal devices
/panel.htm elements and actions as graph[1:3]
/favicon*.* icons for the device support
/updateicons.htm Dialog to configure and load a device icon
/*.js supporting javascript implementation files
/*.css supporting style implementation files
/*.svg icons
/$setup setup a network connection
/$update load a published set of WebUI files from github
/$upload upload files to the root of the filesystem

These UI pages are hosted on the device itself. They are implemented respecting the small available memory but provide some powerful functions to even configure and customize the device.

HomePage configuration

By default the integrated web server redirects to the /index.htm page. By specifying a different homepage in the configuration of the Device element using the homeding configuration another page e.g. the dashboard /board.htm can be configured to be opened by default.

Static startup page

This static homepage of a device is just showing the capabilities of the full size web UI including a brief information about the runtime statistics. It can be reached by using the direct link /index.htm on standard devices.

can vary because the web server will redirect the request without specifying the page name to the page specified in the configuration of the Device element.

GET http://homeding/[2]

With no configuration the System-Info page will be opened.

System-Info

GET http://homeding/index.htm[2:1]

This is a technical landing page with useful links to some information about the system. It contains links to the available pages and offers insights to some technical runtime parameters.

This page is not very useful when a device is finally operating the implemented configuration and left the development phase.

Board

GET http://homeding/board.htm[2:2]

On this page every configured element is shown on a card and shows the actual runtime parameters like sensor values.

In the standard view the system related elements are not visualized. By using the [sys] button they can be shown as well.

On this page it is possible to create new elements based on the available elements in the collection that has been compiled.

For existing elements the config parameters can be modified.

Device specific UI

GET http://homeding/ding.htm[2:3]

For some typical use cases very special UI pages can be created or downloaded from the repository. This is especially useful when a device with a 1MByte flash memory chip is used to save the place from unused element templates.

Today only one of these pages exists, implementing the UI for a remote switch with some automation elements.

On the backlog https://github.com/HomeDing/WebFiles/issues you can find more device specific requests.

Integrated Development Environment (IDE)

GET http://homeding/microide.htm[2:4]

A minimal UI for changing text based files like HTML, CSS and JavaScript and the config.json file.

See also Micro IDE

Logging Output

GET http://homeding/log.htm[2:5]

This pages shows the latest logging messages of the device. Problems and Information that occurs while the device is operating can be found here.

See also Device Logging.

Panel

GET http://homeding/panel.htm[2:6]

The panel offers a different view to the configured elements in the device by linking them using the configured actions.

File Upload utility.

GET http://homeding/$upload.htm[2:7]

Minimal Upload Form

This very bare implemented file upload utility supports uploading using drag & drop of files from a local folder onto the device.

Dropping multiple files at the same time is supported.

In standard mode the files will be stored in the root folder. To upload icon files into the folders 2 links are provided to switch the current folder. This adds a parameter to the URL.

This page is available even when no files exist in the filesystem.

See also


  1. This is not available on minimal devices. ↩︎ ↩︎ ↩︎ ↩︎

  2. replace homeding with the network name of your device to use this link. ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎