Learn how to create a web application to monitor and control an Allen-Bradley PLC.
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
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 theRockwell Automation Learning Path, then you have now completed each of the following installations:
Connected Components Workbench
ThingWorx Kepware Server
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 aretime-limited trials. If significant time has passed while persuing this Learning Path, you may need to reinitialize them. Consult theTroubleshootingstep of this guide for more information.
Step 2: New Mashup
AMashupis 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 withWidgets(graphical elements) and tie those elements to data.
In the top-left of ThingWorx Composer, click theBrowsefolder icon.
ClickVISUALIZATION > Mashups.
SelectResponsive, then clickOK.
A new Mashup tab will open.
In theNamefield, enterRWLP_Mashup.
IfProjectis not already set, click the+in theProjecttext box and select thePTCDefaultProject.
At the top, clickSave.
Step 3: Add Widgets
Widgetsare 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 ofCheckboxesto represent the PLC functionality.
At the top of theRWLP_Mashuptab, clickDesign.
It may take a few moments for theMashup Builderinterface to load.
Click TheWidgetstab, then In theFilterfield on the left, entercheck.
Drag-and-drop aCheckboxwidget onto the centralCanvasarea.
Drag-and-drop a secondCheckboxonto theCanvas.
At the top, clickSave.
Step 4: Add Data
To have theCheckboxWidgets actually interact with the PLC, you need to bind them to the backend data.
To do so, you will make use of aMashup Data Servicefrom the previously-createdPLCcoilsThing.
At the top-right, click theDatatab, then click the+symbol.
In theAdd Datapop-up window, enterplcin theEntity Filtersearch box.
In theServices Filtersearch box, search forgetprop.
Click the right arrow to selectGetProperties.
Check the box forExecute on LoadunderSelected Services.
This causes the Service to be automatically executed upon the Mashup being loaded.
In theServices Filtersearch box, search forsetprop.
Click the right arrow to selectSetProperties.
Note that you should keepExecute on Loadun-checkedfor this Service, as we doNOTwant it to automatically execute on Mashup load.
ClickDone, then click the>to expand bothGetPropertiesandSetProperties.