Smart Life


IoT platform provides a ready-made tool set to non-programmer users to create scenarios which enhance their connected lifestyle. This includes adding their connected hubs and devices under user profiles and creating rules to manage them.

The following section describes the features and functionalities provided by the IoT web frontend which enable the above capability.

User Journey Overview

IoT web portal enables following high level functionalities;

  • User account management

  • Managing devices & ownership

  • Managing rules

Following figure 1 provides the sub features provided under each section

User Account Management

User Registration

In order to do the user registration, click on the ‘Register’ on the bottom left corner as shown in the image below on the IoT web.

Figure 2

Once the user click on the ‘Register’ the user will be guided to another new form where the user is required to input all the details and click on ‘Create’ button in order to get registered.

Figure 3

System Login

The user should provide the login credentials (user name and password) to log in to the system.

Figure 4

User Dashboard

Once the logs into the system, the dashboard shown in Figure 5 below will be displayed. The dashboard will accommodate shortcuts to the user added devices and actions.

Further, logged in user name will be displayed in the top right hand corner of the portal.

Figure 5

Password Reset

If a user forgets the password, click on ‘Forgot password’ link on the bottom right corner, afterwards a mail will be sent to the user’s email address to reset the password.

Figure 6


By clicking on ‘Log out’ user can sign out from the system.

Figure 7

My Account

User Profile Management

My Account tab will permit the user to define his/her own profile by entering phone number and email address. The username field cannot be edited. Moreover, user is allowed to change the password as well.

Figure 8


Under My Account tab, user is able to add common rooms. Enter the room name and click on ‘Submit ‘to save. Select on the defined room and a pop up appears allowing the user to edit the room name.

Figure 9

To delete, select pre-defined location and click on ‘Delete’ button.

Figure 10

Device Management

User can add devices (IoT platform compatible) by going to the Add Device tab.

To initiate it is required to configure and add smart home devices. As shown below, the startup screen has mentioned instructions on how to proceed forward in adding a device.

Figure 11

In order to add a new device, follow this below procedure;

  1. Click on ‘Add a Device’ button

  2. Select a particular brand. (The brands displayed on the screen are ones that were defined by the administrator. There are sub devices and direct devices attached under each defined device)

  3. Once you select a brand click on Next button to proceed.

Figure 12

A device can be a Hub, a Hub connected device or a directly platform connected device.

Type Example
Hub Eg: Xuan Hub
Hub connected device Eg: WeMo Plug, Belkin Plug, Phillips Hue bulb, Yeelight bulb
Directly platform connected device Eg: TK 102 tracker, Dialog button
  1. Select the type

Figure 13

  1. Add Device Details

It is required to enter Device name, Select the room and MAC address. User can also tick on ‘Favorite’ so that it will be displayed in the startup dashboard for easy access.

Figure 14

  1. Finally the device will be added.

Figure 15

  1. User is facilitated to amend device details by simply selecting the predefined device, then following view appears.

Figure 16

Scene Management

Add Scene

Initially a user will have this look at the first glance which describes the purpose and example of a Scene.

Figure 17

  1. To add a scene click on ‘Add a Scene’ button.

  2. Enter Scene Name and select an Image. To proceed further click on ‘Next’ button.

Figure 18

User will be directed to the following screen displaying three instances for a user to manage a scene and they are;

  1. Manual scene

  2. Event based scene

  3. Schedule scene

Manual Scene Creation

To create a Manual scene, follow this procedure;

  • Click on the ‘Add Action’

Figure 19

  • Select either ‘Device’

Figure 20

  • Configure actions based on the device selection

Figure 21

Event Based Scene Creation

In order to create an Event based scene, follow this procedure;

Figure 22

  • Event based devices will be displayed, select a device

Figure 23

  • Select the action to be performed

Figure 24

  • Can select global or device specific actions

Figure 25

By Time Scene Creation

Under Schedule scene the device gets triggered based on a particular time frame defined. To generate a Schedule scene, select a date and time.

Figure 26

Edit Scene

Click on a scene to edit.

Figure 27

User can click on the Execute button to forcefully execute a particular device when required.

Mobile Application

After configuring the web portal, automatically those configured devices/scenes will be synchronized to the user’s mobile application. The user’s login for the mobile app would be equivalent to the user’s web login credentials.

User login

The user needs to provide the same credentials as the web login.

User Register

Once the user click on the ‘Register’ the user will be guided to another new form where the user is required to input all the details and click on ‘Register’ button in order to get registered.

Forgot Password

If a user forgets the password, click on ‘Forgot password’ link on the bottom left corner, the following interface will appear to enter the username.

Click on ‘Reset’ button.

Afterwards a mail will be sent to the user’s email address with a new password, using that user can log into the app.

User Dashboard

The dashboard will be loaded upon authentication of the user login. The favorites that are added from the web portal will be loaded to this mobile app’s dashboard.

Figure 31

By clicking on each item the user will be navigated to the respective device settings.

User Menu

On the top left corner the user’s menu is located. By clicking on the horizontal bars the menu will be dropped down and the user is able to navigate through the menu.

Figure 32

The user can minimize the menu either by clicking the back arrow on the top left corner or by hitting the back button on the phone.


The added devices from the web portal will be visible in the mobile app. By clicking on the device, the device actions can be performed.

Figure 33

The following shows the steps to add a new direct device.

App requests if want to add a QR code. Click ‘Yes’ to scan, ‘No’ to omit

Figure 34

Select a Brand

Figure 35

Select a Type

Add Device Details

Figure 36

Figure 37

Enter the details and click ‘Ok’ button. Success message appears as below

Figure 38

Figure 39

Device Details are displayed as below. User can Edit device details when required When clicking on edit icon, user is permitted to delete the device

Figure 40

Figure 41


This view shows the scenes created. User can select a scene to amend any actions. Click on the ‘Next’ button to add a scene.

Figure 42

The following shows how to add a new scene. Enter Name and image and click ‘Next’ Select Scene Instance. To execute manually select ‘Manual’

Figure 43

Figure 44

Select Scene Action, either ‘Device’ or ‘Global’

Figure 45

Add actions to your scene

Figure 26

Adding Scene to occur By time

Figure 47

Schedule time for the scene to occur

Figure 27

Adding Scene to occur by Device Event

Figure 49

Add Device and Event for the Scene

Figure 50

Selecting Scene as ‘Global’

Figure 51

Add action to the scene

Figure 52

User can manually execute by clicking on the following

Figure 53

My Account

By navigating to My Account user is able to edit login details.

Figure 55


This interface allows the user to add, edit or delete locations. Click on this icon ‘’ to proceed.

Add New Location

Figure 56

Edit/Delete Location

Figure 57


On the navigation menu, click on Logout, then the following pop up screen will appear. Click on ‘Yes’ to log out.

Figure 58

Last updated on 9th Nov 2017