10. Task 10. Save and test the mashup.
1. Click the Save button. 2. Click the View Mashup button.
Enlarge Image 3. Click Close
to close the VendingMachineMash mashup tab.
11. Task 11. Add components to the mashup that modify vending machine properties.
1. Click the Add data
icon in the DynamicThingTemplates_VendingMachineTemplate row of the Data table.
2. Click under the left-most scroll bar to scroll down to the Properties category. 3. Select the Properties category.
4. Click under the right-most scroll bar to scroll down to the SetProperties service. 5. Click the Add
icon for the SetProperties service.
6. Click the Done button.
7. Click under the scroll bar in the Data panel to scroll down to the SetProperties service. 8. Click the Expand
icon next to SetProperties in the Data panel.
9. Click under the scroll bar in the Data panel to view the properties of the SetProperties service. 10. Type Nu in the Filter Widgets field.
11. Drag a Numeric Entry widget just below the LED Display. 12. Drag a second Numeric Entry widget just below the first.
13. Drag the right side of the Numeric Entry widget to resize it to be approximately as wide as the LED Display. 14. Press CTRL and click the first Numeric Entry to multi-select them both. 15. Click the Make Same Width16. Click the Align Centers
icon.
icon.
17. Click outside of the numeric entry fields to de-select them. 18. Click the top numeric entry field to select it alone. 19. Type La in the lower-left Properties panel.
20. Type Set Temperature in the Label field and press TAB. 21. Click the bottom numeric entry field to select it alone.
22. Type La in the lower-left Properties panel.
23. Type Set Humidity in the Label field and press TAB.
24. Click the upper-left corner of the Set Temperature field to expand a drop-down list. 25. Drag Value from the drop-down list to CurrentTemperature under the SetProperties service. 26. Click the upper-left corner of the Set Humidity field to expand a drop-down list. 27. Drag Value from the drop-down list to CurrentHumidity under the SetProperties service. 28. Type G in the Filter Widgets field.
29. Click the Available Space drop-down list at the top of the top-center panel. 30. Select 1280x1024.
31. Click under the scroll bar to scroll down to the panel with the LED Display and two numeric entry fields. 32. Drag the Google Location Picker widget to the right of the LED Display and two numeric entry fields. 33. Click the upper-left corner of the Google Location Picker to expand a drop-down list. 34. Drag Location from the drop-down list to Location under the SetProperties service. 35. Type B in the Filter Widgets field.
36. Drag a Button widget to be positioned beneath the Set Humidity field. 37. Click the upper-left corner of the button to expand a drop-down list.
38. Drag the Clicked event to the SetProperties service in the Data panel. You can drag it to the red SetProperties bar or to any of the
white properties below it.
39. Type Set in the Label property for the button and press TAB.
40. Verify that SetProperties is selected in the Data panel and click above the scroll bar until Get Properties displays. 41. Drag the ServiceInvokeCompleted event to the GetProperties service.
? Be very careful not to drag the ServiceInvokeCompleted event from a service onto the same service. This creates an infinite loop, where completing the service causes it to start again. If you mistakenly do this, you can view the loop in the Connections tab of the bottom-center panel and delete it. Enlarge Image
12. Task 12. Save and test the mashup.
1. Click the Save button. 2. Click the View Mashup button. 3. Type 40 in the Set Temperature field. 4. Type 80 in the Set Humidity field.
5. Click the Map button in the corner of the Google Location Picker. 6. Click a location on the map.
7. Click the Map button in the corner of the Google Location Picker to collapse the map. 8. Click the Set button. 9. Select VM-TR2 in the list.
10. Type 34 in the Set Temperature field. 11. Type 68 in the Set Humidity field. 12. Type –86 in the Longitude field. 13. Type 40 in the Latitude field. 14. Click the Set button. 15. Select VM-TR3 in the list.
16. Type 10 in the Set Temperature field. 17. Type 31.14157 in the Set Humidity field. 18. Type –82 in the Longitude field. 19. Type 23 in the Latitude field. 20. Click the Set button. 21. Select VM-TR2 in the list.
2.14、Editing the VendingMachineShape ThingShape
Task 1. Edit the VendingMachineShape ThingShape.
1. Click the Thing Shapes link in the ThingWorx Explorer.
2. Click the VendingMachineShape row of the Thing Shapes table. 3. Click the Properties link in the ThingWorx Explorer. 4. Click the Add My Property button. 5. Type VMTempMax in the Name field.
6. Type Vending Machine Temperature Max in the Description field. 7. Click the Base Type drop-down list to expand it. 8. Select Number. 9. Type F in the Units field.
10. Select the Has Default Value check box. 11. Type 135 in the Default Value field. 12. Select the Persistent check box. 13. Click the Done and Add button. 14. Type VMTempMin in the Name field.
15. Type Vending Machine Temperature Min in the Description field. 16. Click the Base Type drop-down list to expand it. 17. Select Number. 18. Type F in the Units field.
19. Select the Has Default Value check box. 20. Type –20 in the Default Value field. 21. Select the Persistent check box.
22. Click the Done button. 23. Click the Save button.
2.15、Implementing the New Properties in the Mashup
1. Task 1. Open the Mashup Builder.
1. Type Ve in the spotlight search field. 2. Select VendingMachineMash.
?
If you are using the Mashup edit window from a previous exercise, you must refresh the Data panel to add the two new properties. This is not necessary if you closed the Mashup builder and reopened it.
2. Task 2. Use the VMTempMax and VMTempMin properties in the Gauge widget.
1. Click Expand
for the GetProperties service.
2. Click under the scroll bar in the Data panel to view VMTempMin and VMTempMax. 3. Drag VMTempMax to the gauge. 4. Select MaxValue.
5. Drag VMTempMin to the gauge. 6. Select MinValue.
3. Task 3. Save and test the mashup.
1. Click the Save button. 2. Click the View Mashup button. 3. Click Close
to close the VendingMachineMash tab in Chrome.
4. Task 4. Reset the data entry fields after they are used.
1. Click the Set Temperature numeric entry field to display its properties in the Properties panel. 2. Click under the scroll bar to scroll down to the ResetToDefaultValue service. 3. Click the Workspace tab.
4. Click under the scroll bar in the Workspace panel to scroll down to the currently selected NumericEntry widget. 5. Select the panel that contains the NumericEntry in the Workspace panel.
6. Click the Set Temperature numeric entry field to display its properties in the Properties panel. 7. Click under the scroll bar to scroll down to the ResetToDefaultValue service. 8. Select SetProperties in the Data panel.
9. Drag the ServiceInvokeCompleted event in the Data panel to the ResetToDefaultValue service in the Properties panel. 10. Click above the scroll bar in the Data panel to scroll up to the Location property of the GetProperties service. 11. Drag Location from the Data panel to the Google Location Picker. 12. Select Location.
5. Task 5. Save and test the mashup.
1. Click the Save button. 2. Click the View Mashup button. 3. Type 45 in the Set Temperature field. 4. Type 75 in the Set Humidity field.
5. Click the Map button in the corner of the Google Location Picker. 6. Click any location on the map.
7. Click the Map button in the corner of the Google Location Picker to collapse the map.