Visualize an Allen-Bradley PLC Part 1

[#1]

• GUIDE CONCEPT
• Step 1: Learning Path Overview
• Step 2: New Mashup
• Step 3: Add Widgets
• Step 4: Add Data

Learn how to create a web application to monitor and control an Allen-Bradley PLC.

GUIDE CONCEPT

This guide will create a ThingWorx Foundation Mashup GUI to monitor and control an Allen-Bradley PLC connected via ThingWorx Kepware Server.

YOU'LL LEARN HOW TO

• Create a Mashup
• Add Widgets
• Access backend data via Mashup Data Services
• Tie data to Widgets
• Create a simple web application that monitors and controls a PLC

NOTE:  The estimated time to complete all parts of this guide is 30 minutes.

Step 1: Learning Path Overview

Assuming you are using this guide as part of the Rockwell Automation Learning Path, then you have now completed each of the following installations:

1. Connected Components Workbench
2. ThingWorx Kepware Server
3. ThingWorx Foundation (for Windows)

You've also connected an Allen-Bradely PLC to Connected Components Workbench and then to ThingWorx Kepware Server.

You have propagated that information further from ThingWorx Kepware Server into Foundation.

In this final step, we'll create a simple Mashup to visualize the interface from Foundation to ThingWorx Kepware Server to the PLC.

NOTE: Both Rockwell Automation's Connected Components Workbench and ThingWorx Kepware Server are time-limited trials. If significant time has passed while persuing this Learning Path, you may need to reinitialize them. Consult the Troubleshooting step of this guide for more information.

Step 2: New Mashup

A Mashup is a Graphical User Interface (GUI) to interact with your application.

In this step, you will create a new, blank Mashup. You will later populate it with Widgets (graphical elements) and tie those elements to data.

1. In the top-left of ThingWorx Composer, click the Browse folder icon.
   
   
2. Click VISUALIZATION > Mashups.

   
   

3. Click + New.

   
   

4. Select Responsive, then click OK.

   • A new Mashup tab will open.

   

5. In the Name field, enter RWLP_Mashup.
   
   
6. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.
   
   
7. At the top, click Save.

Step 3: Add Widgets

Widgets are drag-and-drop, stand-alone, graphical elements which you can add to your Mashup to represent certain pieces of backend data.

In this step, you will add a pair of Checkboxes to represent the PLC functionality.

1. At the top of the RWLP_Mashup tab, click Design.

   • It may take a few moments for the Mashup Builder interface to load.

   

2. Click The Widgets tab, then In the Filter field on the left, enter check.
   
   
3. Drag-and-drop a Checkbox widget onto the central Canvas area.

   
   

4. Drag-and-drop a second Checkbox onto the Canvas.

   
   

5. At the top, click Save.

 

Step 4: Add Data 

To have the Checkbox Widgets actually interact with the PLC, you need to bind them to the backend data.

To do so, you will make use of a Mashup Data Service from the previously-created PLCcoils Thing.

1. At the top-right, click the Data tab, then click the + symbol.

   

2. In the Add Data pop-up window, enter plc in the Entity Filter search box.

   
   

3. Select the PLCcoils Thing.
   
   
4. In the Services Filter search box, search for getprop.

   
   

5. Click the right arrow to select GetProperties.
   
   
6. Check the box for Execute on Load under Selected Services.
   • This causes the Service to be automatically executed upon the Mashup being loaded.
     
     
7. In the Services Filter search box, search for setprop.
   
   

8. Click the right arrow to select SetProperties.

   • Note that you should keep Execute on Load un-checked for this Service, as we do NOT want it to automatically execute on Mashup load.

   

9. Click Done, then click the > to expand both GetProperties and SetProperties.

   
   

10. At the top, click Save.

Click here to view Part 2 of this guide.