How to Create a Mashup for Arduino Uno - Step 1 How to Display the Temperature and Humidity values on the gauges and LEDs

Revision #

Date

ThingWorx Revision Changes Owner Veronica 1.0 - Current 09-03-15 5.1.0.433 MIHAI

Key terms for this tutorial: Entity – A way for ThingWorx to store data that can later be used in a mashup Service – Something that directs data, telling it where to go and what to do (i.e. “display this data on this widget”) Event – Something that triggers a service (i.e clicking) Mashup – An application that uses content from more than one source to create a single new service displayed in a single GUI

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

2

1. Once you have completed the “How to Read Temperature and Humidity from HTU21D Sensor Using Rest Calls in C for Arduino Uno” tutorial, you will be able to utilize your input data in a Mashup. The first step to creating this Mashup is to locate the search field in the top left corner of your screen:

In the search, type “+Mashup” and click the option that matches. This will bring you to a screen that looks like this:

2. Select “Page” for the Mashup type, and “Responsive” under Layout Options, then click “Done”. You will now be brought to another page that looks like this:

NOTE: The static and responsive options refer to the sizing and visualization of your Mashup. A static Mashup will always show up in a browser window the exact same size that it is designed for whereas a responsive Mashup will automatically fill the window. How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

3

Next you’ll save the project and give it a name so you can retain your work throughout this tutorial. To do that, locate and click the button towards the top-middle part of the page; doing so will bring you here:

Make sure to add a name that follows the naming conventions (You can find a listing of these conventions here). I named my Mashup “HTU21DMashup” so I could easily locate it at any time. Also, it is very important that you tag this Mashup with the same tag you used for the HTU21DThing in the “How to Read Temperature and Humidity from HTU21D Sensor Using Rest Calls in C for Arduino Uno” tutorial; if you don’t do this you will be unable to transfer your project to any other servers (i.e. your friend would not be able to look at/run your mashup on his Thingworx instance). To complete this step, click 3. Next, go to the right part of the screen where there are three tabs labeled “Data”, “Session” and “User”. Click the “Data” tab (because you’re dealing with data pushed into Thingworx by a sensor connected to an Arduino Uno board), then click the to add an entity (something in ThingWorx that holds information). You will be brought to this screen :

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

4

4. Next to implement data from your Thing into this Mashup, select the dropdown get the following menu:

to

5. Select “Things” and then click the wand:

6. Selecting the wand will allow you to search for the HTU21DThing you made in the last tutorial “How to Read Temperature and Humidity from HTU21D Sensor Using Rest Calls in C for Arduino Uno”. Find the Thing you made and select it:

7. Selecting the Thing will give you a list of services that you can implement. Services are basically actions that the entity will perform. For this tutorial, you want to perform an action that retrieves the numerical values for temperature and humidity. To do this, you add a service called “GetProperties”. In order to add “GetProperties” as a service, enter “GetProperties into the “Select Services” field and click the :

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

5

8. Also make sure to check the box that says “Mashup Loaded”. What this means is that you are telling the Mashup to “perform this service when you start (load) up” . If you did not check this box, you would have to identify another trigger or event (i.e. clicking). When this is completed, go ahead and click

, also make sure to

your work!

9. Now you can begin the fun part – using widgets! Widgets are visual applications that perform specific actions – they will be used to display your data. To begin, locate the “Widgets” tab on the left part of your screen:

10. Where it says “Filter Widgets” type “Panel” to get a responsive panel (a responsive widget will occupy all the available space, whereas a non-responsive one will occupy only the

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

6

space it needs to display) to house other widgets:

11. Click, hold and drag the “Panel” onto the preview pane located to the right of the widgets pane: 12. Next, go back to where it says “Filter Widgets” type “LED” to get a widget that simulates an LED display (like a digital alarm clock) 13. Click, hold and drag the “LED Display” onto the preview pane :

14. Go back to the “Data” tab on the right part of the screen and expand “GetProperties” and then drag and drop “Temperature” onto the LED Display. This next display will be:

Click “#Data”, doing this binds the selected data (the temperature value) to a specific action that the widget performs; in this example, the LED performs the action of displaying numerical data How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

7

NOTE: Notice how the connections pane below changes – this is a good visual representation of what is going on in ThingWorx:

15. Next, you will display the temperature value in another widget called a “Gauge”. To do this, again find the widgets tab and type “Gauge” – drag and drop this into your preview pane, under the LED Display:

16. Drag and drop “Temperature” from your “GetProperties” service like you did in step 14. 17. Next, you will follow the same steps to display the Humidity value. Add another LED Display and Gauge and drag and drop the Humidity from the GetProperties service on each of the two widgets, choosing Data as an option for binding. How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

8

You should be able to see the following bindings in your connections tab, when clicking on the GetProperties Service

Next click save and view mashup.

If both your LEDs and Gauges display zero, make sure your REST API sketch application is running with no errors on your Arduino Uno.

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

9

©2015 PTC Inc. The information contained herein is provided for informational use and is subject to change without notice. The only warranties for PTC products and services are set forth in the express warranty statements accompanying such products and services and nothing herein should be construed as constituting an additional warranty. PTC shall not be liable for technical or editorial errors or omissions contained herein. Important Copyright, Trademark, Patent, and Licensing Information: See the About Box, or copyright notice, of your PTC software. 01012015

How to Create a Mashup for Arduino Uno - Step 1

PTC Inc.

10