Your own Cloud-IoT DIY project. Part 6: Data usage and visualization in UI.

This is the sixth part of “Your own Cloud-IoT DIY project”. Previous part can be found here.

TL;DR: Flutter was used as UI framework to support cross web-mobile development. Role Base Access Control (RBAC) is used to control access to data collected and commands send functionality. User is able to create and save dashboards rendering different types of data collected. UI application is simple and under development still.

General principles

UI typically is the least part for DIY projects. However any DIYer at some moment of type can benefit from serving others with functionality of her system. With this ‘minimal’ requirements the UI should have at least:

• publicly available yet secure web interface
• AutheNtication/AuthoriZation (AuthN/Z) subsystem to provide different access level to different users (roles)
• data visualization subsystem to make data useful for regular users
• command sending functionality for advanced users
• [ideally/optionally] mobile application with same functionality and push notification for alarms

Framework choice

Flutter was chosen as a framework for UI development due to multiple reasons:

1. Ability to deliver web, mobile and desktop application from same code
2. Flutter has some benefits in comparison with React Native (multiple comparisons can be found with simple google search)
3. Flutter framework (and dart language) is relatively new and it was interesting for me personally

Cloud-IoT DIY UI Application

Application design

In general the application is quite simple and consists of just three pages:

• main page which is also served as simplified account page
• dashboard page — highly dynamic page rendering historical and telemetry data with diagrams/gauges of user choice
• commands page — interface to send commands to devices

What makes the application more complicated — two ChangeNotifierPorviders used to control authorization (and how authorization affects the UI) and dashboard design updates.

When used with VSCode Flutter also has very powerful (and useful for documentation) DevTools with Widget Inspector. This can help not only to debug the application but also to understand the application structure.

Partially expanded widget tree of the running application

Some screenshots

Basic home screen for unauthenticated user

Authentication pop-up

Home screen for authenticated user

Example dashboard

Dashboard components can be configured

Dashboard can be saved and loaded

Next topic: Your own Cloud-IoT DIY project. Part 7: AI processes and plugins (coming soon).

Previous topic: Your own Cloud-IoT DIY project. Part 5: Helper tools and project config.