[Tutorial] Easy IoT: Smart Office Kitchen Timer For Coffee Breaks

Introduction

This article is part of a series to show how to easily get into IoT using Gravio in a low code environment. Every article builds on a different use case which anyone may encounter daily and how Gravio turns a normal space into an interactive one.

Imagine having a coffee break at work, but instead of wandering off to the kitchen or texting your colleagues asking them to have a coffee, you press a button. On the wall, a LED Matrix display will display an image of a coffee, letting everyone know it’s coffee time! At the same time, the Gravio Light will turn red and a countdown will start to keep track of the break time. At the end of break time, the Gravio Light will turn off and the LED Matrix display will show the current time, letting everyone know the last coffee break was.

Approach

tldr; we are creating an interactive environment in an office kitchen using a simple Button, Light and LED matrix to let other team members know when it’s time for a coffee break.

We’re using the Gravio Light, Gravio Button and Gravio LED Matrix because: we want to show how easy it is to get started in IoT with a low code environment, and without the need for an internet connection.

We’ll be sharing other examples of ‘Easy IoT’ in future posts, follow us on Twitter or join our Gravio Slack community to find out when.

Tutorial

Requirements

• Gravio HubKit setup - the Gravio Edge server
• Gravio Studio installed (available on MacOS and Windows)
• Gravio Standard account - sign up here (note: we use Standard Account to qualify for  renting the LED Matrix)
• Devices: 1x Aqara Button, 1x Gravio LED Matrix, 1x Gravio Hub OR 1 x Gravio Dongle, 1x Gravio Light
• Devices to be paired and layers to be set up in Gravio Studio - setup info here

Steps

Part 1: Setting Up Devices

Step 1:

Log in to Gravio Studio and select the Devices view.

Note: If you know how to pair devices or have already paired the devices in Gravio Studio, skip to Part 2.

Step 2:

Start the pairing process by clicking on the ‘Start Pairing’ button. Then, press the pairing button on the Button or LED Matrix. When the pairing is successful, you will see the device paired listed in the device list. Repeat step 2 to pair more devices in Gravio Studio.

Part 2: Creating Areas and Layers

Step 1:

Now that we have paired our devices, we need to create an area and layers. 

Note: If you know how to create areas and layers, please skip to part 3.

*Areas represent the physical space you are monitoring and Layers represent the sensor being binded to retrieve data from.

At the main page you can:

1. Add a new Area
2. Add a new Layer
3. Bind the sensor device to the layer

For this project, I have named the Area ‘Office Pantry’ as that is where the sensors will be located though ‘Office Kitchen’ may be more appropriate.

Step 2:

Please make sure the device bound to the Layer checkbox is checked. This determines whether we would like the sensor data to be streamed into Gravio Studio.

Part 3: Creating Actions

Step 1:

The next step is to create the Actions and Triggers to complete the application. Go into the Actions page and create a new Action.

Tip: Labelling the Actions according to the intent of what it should do, helps with organizing other Actions in the future!

Step 2:

In the Action editor, you can add various components to create a chain of sequences to eventually build a ‘micro program’. We will be using the LED Matrix, Gravio Light and Sleep components to build this Action, a total of 5 components will make up the Action.

Let us add it in this sequence:

1. Gravio LED Matrix
2. Gravio Light
3. Sleep
4. Gravio Light
5. Gravio LED Matrix

We will also need to input the right properties in each component. It should turn out something like this.

Step 3: 

Inputting the Gravio Matrix LED Properties: 

1. Base Property - None
2. Physical ID - Note: You can find your physical device ID in the device list page.
3. Input - 16x16 bmp file Note: It is 16x16 because it maps each pixel to the LED Matrix pixels.
4. Content - icons/filename.bmp
5. Text Colour - Auto

Important: To create your own 16x16 BMP files use the following two websites:

1. https://www.xiconeditor.com/
2. https://cloudconvert.com/ico-to-bmp

In the first link, draw your desired 16x16 icon. Then, download it as an .ico file. Use the second link as a converter to convert the .ico file into a .bmp file.

Then, we’ll need to store the icon in the correct folder. The file paths are similar through the various OS but this reference is from a Windows OS.

C:\ProgramData\HubKit\actmgr\data\icons

Note: The ProgramData folder may be a hidden folder on Windows, please enable to view hidden folders in case you cannot find it.

We have completed the first component! This part of the Action will display your customized 16x16 bmp icon on the Gravio Matrix LED Display. 😄

Step 4:

Inputting Gravio Light properties:

1. Base Property - None
2. Physical Device ID - can be found in Device List
3. On - Make sure checkbox is checked
4. Color - Red (Feel free to use other colors such as Green)
5. Brightness - 100

This component will now ensure that Gravio Light turns Red.

Step 5:

Inputting Sleep properties:

1. Time - 3000

This is where you decide how long you want your coffee break to be! Please take note that the value you input is in milliseconds(ms) e.g. 3000 = 3 seconds.

This component will create a delay/pause in the Action and will continue on to the next step after the time specified has elapsed.

Step 6:

Inputting Gravio Light properties:

1. On - Checkbox unticked

The only property required is for us to untick the checkbox under ‘On’. This will then turn off the Gravio Light.

Step 7:

Last but not least - Inputting Gravio LED Matrix properties:

1. Input - Template:Time

We will need to add a ‘pre-mapping’ to display the current time on the Matrix LED Display.

1. cp.Content = Now()

Press the ‘Play’ button to check for any errors, if successful, we will see the sequence of events unfolding! Now that we have successfully created an Action, let us move on to Triggers.

Part 3: Creating Triggers

Step 1:

In your home page, look for the ‘Trigger’ tab. In it you can add a new Trigger by selecting the ‘+’ icon.

Step 2:

Configure the Trigger by

1. Selecting an appropriate name
2. Selecting the right Conditions:

• Area: Office Pantry (or your Area name)
• Key Layer: Button (or your Layer button name)
• Physical Device ID: Checked
• Button Press: Any Value

3. Selecting the Action to run

• Action: LED Matrix Display (or your Action name)

Step 3:

After saving, remember to turn on your Trigger by ticking the checkbox. Now, your Trigger and Action is ready!

Part 4: Application At A Glance

‍

‍

Summary

Overall it was a very short and straightforward project. As you have experienced, Gravio’s low code environment proves to be user friendly and agile, giving users flexibility in their work while not requiring any software engineering experience. Definitely one to try out as it makes creating applications simple.

For some bonus points, you could also pair a Bluetooth speaker with your HubKit environment, then you will be able to use the ‘Sound’ component in Actions to play a sound whenever it’s coffee time. This will add more physical elements to the work space, creating new experiences. Check out our similar article here where we use a bluetooth speaker for doorbell notifications! See you in our next instalment!