Smart-Monitoring Tutorial

In this tutorial, we will be using a generic Smart Monitoring system for tracking sensor data on gateways at multiple locations, configuring alerts, and managing users and security for a company.

The tutorial consists of the following sections:

  • Setup - A quick guide on how to setup the System
  • Assets - A brief description of the assets within the System
  • Usage - A deeper understanding of how to use the System
  • Customize - A quick guide on how to customize the System

Setup

The setup involves the following steps:

Getting Started

  1. Create an account here if you have not done it already
  2. Once you login, you are directed to the ClearBlade Console, where you can create and develop your IoT solutions.
  3. To get started, click ‘+ Add System’ on the homepage or ‘+ Add’ in the side navigation bar.
  4. Search for smart-monitoring.
  5. Click ‘view’ on the smart-monitoring template. It should give you information about the template.

  6. Click ‘Create’ to create a new system with the smart-monitoring template
    s

    Configure Security

Define your security model by specifying permissions for various Roles. See documentation. Add employees into the system as Users and assign them Roles to grant them permissions.

To begin, let’s create a User:

  1. Go to ‘Users’ page and click ‘+ Add User’
    ** There are customizable fields to add extra information about the user that are not required and can be removed by removing the columns or ignored. Fields can also be added by adding columns.
    Note: Removing the existing columns may cause errors in the system.

  2. Enter a email address and password & sample information for other fields. The email and password will be your user login to the Portal page.

  3. Click ‘Create’.

  4. A window will come up to add specific roles to the user. ‘Authenticated’ is the default role.

  5. Click ‘Update Roles’ and the user should now show up in the table.

You now have your first user!

Configure Edges

In the console, click the Edges tab on the left to go to the Edges page. Define and configure your gateways in the Edges table that will be housing sensors. This is to retrieve the data for the visualizations in the portal.

When you go to the “Edges” page in your console, you will see 2 default edges that have not been set up and it is not connected. There can be up to 8 edges with smart monitoring and each has a specific location.

To set up the edges:

Click on ‘Setup instructions’ In the installation window:

  • Choose where you want the edge installed (ex. MacOs 64bit)
  • Copy and paste the Install command into your terminal (There is also an option to visualize how it’s functioning by adding the console)
    Run the command
  • Copy and paste the Startup Command into your terminal to start up the edge. Run the command

Configure Devices

In the console, click the Devices tab on the left to go to the Devices page. Define your sensors in the Devices table, specifying the Edge each belongs to.

Configure Alerts

This configuration allows user to create rules on how alerts can be triggered. To do so, the user needs to login into the smart_monitoring portal on the portal page of the console. After logging in, the alert configuration rules can be defined on the alert configurations page. User can go to the Alert Configurations page by clicking the hamburger icon on the top left corner of the portal and selecting the Alert Configurations tab.

Here, the user can define rules for alert configurations that will be used when processing sensor data to send alerts via test, email, or through internal messages to designated employees. Structure for Rules: { “sensor_id”: “111111”, “operator”: “GT”, - “GT”(greater than), “LT”(less than), “EQ”(equal) “value”: “32”, “property”: “sensor_reading” }

Assets

You should have all the following pre-packaged assets for the IPM available in your new system: Commands and API can be found here

Assets Use
Code Services Existing microservices to use in the smart-monitoring system
Libraries Existing reusable code to use in code services
Collections Data structures with data included
Edges Gateways that can be defined and configured in the edges table that will be housing the sensors
Portals A single instance of a web application with preconfigured integrations with the ClearBlade System
Devices Defining sensors in the Devices table and specifying the edge each will belong to

Usage

The asset which is mainly used by the end user is the portal so, that’s what we will be discussing in this section.

Portals

For this exercise we will be using the ‘smart_monitoring’ portal. This portal has premade widgets for location, alerts, messages, and data visualizations. To begin:

  1. Navigate to the ‘Portals’ tab on the left menu. You should see a list of three portals available: ‘mobile_alerts’, ‘smart_monitoring’, and ‘smart_monitoring_edge’.

  2. Click on the gear next to ‘smart_monitoring’. Navigate to ‘Edit Permissions’ and a window will appear allowing you to edit user permissions. Make sure that ‘Authenticated’ role has the ‘Read’ permission.

  3. Click ‘Update Permissions’ to save your changes.

  4. Click on the ‘smart_monitoring’ portal. This should redirect you to another tab/window with the web application containing the widgets.

  5. Next, you’ll be presented with a login page. Login with the email address and password you had created earlier. Note: The ‘Sign Up’ tab will create an ‘Anonymous’ user that may not be able to see the page. This can be editted using steps 1-3.

In the home page you will see all of the visualizations divided into different panes.

There is also a flyout plane that has access to other portal pages such as ‘Employees’

Following up is overview of the pages in the Smart Monitoring Portal:

Pages

The smart monitoring portal has the following pages:

Home Page

In the home page you will find:

  • Map of the locations of the edges
  • List of the alerts
  • Messages received and the ability to reply
  • List of edges and their information
  • A line graph of the edges data retrieving history

Alert Configuration

Messaging alerts and their priority can be added on this page. The example used in the demo is an alert for high temperature (above 32F)

There are options in the right pane to:

  • add a label to the alert
  • change the level of priority (High, Medium, or Low)
  • choose an edge (sensors)
  • add a rule (temperature in Fahrenheit or percentage of battery)
  • add an employee to contact (can be sent through text or email)
  • Write a message to be sent

Read
The bottom pane shows a collection data on what alerts were sent. This table has an option to be cleared

Sensor Analytics

Admin Pages

User can perform the following operations on the admin pages: * Create/Update * Delete

Create/Update

In all pages of the portal (except for edges), items can be created in the right pane. The items can also be clicked on the left and updated on the right pane.

Delete

Click on the trash symbol next to the items in the left pane (except edge page).

The admin pages consist of the following sub-pages:

Sensors Page

This pages is to add sensors and assign them to an edge

Sensor information includes:

  • a label
  • what type of sensor (temperature/pressure)
  • a unique ID number
  • which edge it will be assigned to
  • information from the last sensor reading
  • the date of last reading

Sensor Type Page

Choose what type of data the sensor will be collecting

Sensor Type information includes:

  • mame of sensor type
  • what units the data will be in (degrees Fahrenheit)
  • a unique ID number
  • which edge it will be assigned to
  • information from the last sensor reading
  • the date of last reading

Edges Page

Edges that get added to the edge page of the platform is also added on this page. The location and description of the edges are editable on this page.

Locations Page

Locations of snesors can be added on this page.

Location information includes:

  • Name of location
  • Description of location
  • Latitude and Longitude points
  • Address
  • What type of location (i.e. building)

Employees Page

This page provides the user to create/update or delete an employee record.

Employee information includes:

  • a valid email
  • First & Last name of employee
  • phone number to receive text alerts
  • option to add a photo to appear on record in the left pane
  • pin
  • password to log in
  • location

Customize

The system’s assets can be customized. The most common configuration happens within the portals, which is being discussed here. The users can login into the portals as a user with administrator role (or any other role which has update permissions for portals). This can be done by creating a new user on the user’s page using the method mentioned in the configure security section of the setup. The user should be assigned an administrator role.

Once logged in, the user can see perform the following Customizations:

the Portal’s homepage with a Flyout Pane (discussed below) on the side.

Portal Content Management

After loggin in the user lands on the Portal’s homepage with a Flyout Pane on the side. A flyout pane lists the information for:

  • Datasources
  • Pages
  • Internal Resources
  • External Resources

The user can customize the above and save the changes that have been made by clicking on the red icon in the top toolbar of the flyout pane.

For details on how to work with portals, please see documentation

Default Styling

There is the option to change the default ClearBlade logo to your own. Hover over the logo and click on the wrench to open the widget editor. Click on ‘Edit static data’ and will show 3 customizable parser sections: HTML, CSS, and JavaScript. In the HTML section replace the image source with the image link of your choice.

Go back to the Theme editor in the flyout pane. Under ‘Change palette’, go to ‘Secondary’ to change the color of the pane headers.

The panes are movable if you drag them and can be placed in the spot of your choice

Make sure to save the changes that have been made by clicking on the red icon in the top toolbar of the flyout pane.

There is also an option to change the theme colors of the portal.

Responsive Web Design

The portal’s homepage (when logged in as a administrator), has what is called as CSS Breakpoints at the very top of the page. The user can customize how the portal appears on different devices by managing the appearance on desired breakpoints.