Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X
Enhance your Engine Failure-Prediction GUI.
This guide will use ThingWorx Foundation’s Mashup Builder to create a more advanced Graphical User Interface (GUI) than the one we originally created to display results from Analytics Manager’s engine-failure predictions.
Following the steps in this guide, you will learn how to utilize Widgets and backend data to more completely visualize customer failure conditions.
NOTE: The estimated time to complete all parts of this guide is 60 minutes.
In this guide, we’re taking our previous MotorCo Minimum Viable Product (MVP) Mashup and expanding it.
Our original Mashup showed the results from ThingWorx Analytics as it determined whether or not a low-grease condition was currently present.
The goal of this guide is to create an Enhanced GUI to visualize those predicted “low grease” conditions in a more complete manner.
GUI-creation to visualize analytical model deployment can be extremely helpful for the automative segment in particular. For instance, each car that comes off the factory line could have an EMS constantly sending data from which an analytical model could automatically detect engine trouble.
This could enable your company to offer an engine monitoring subscription service to your customers.
This guide will show you how to visualize the results of an engine analytic model for a smart, connected products play.
Just like in the last guide, we're now going to create a Mashup to visualize ThingWorx Analytics results.
This one is simply going to be more complicated to include additional functionality.
But before we can start designing our GUI, we must first instantiate a Mashup onto which we can place our Widgets.
1. In ThingWorx Foundation, click Browse > Visualization > Mashups.
2. Click + New.
3. On the New Mashup pop-up under Responsive Templates, click Header Only.
4. Click OK.
5. In the Name field, type EEFV_Mashup.
6. If Project is not already set, search for and select PTCDefaultProject.
7. At the top, click Save.
8. At the top, click Design.
Now that we’re in Mashup Builder, you can see the separate top-section of the central Canvas area created by our selection of “Header Only” on the New Mashup pop-up.
Unlike the original Mashup where we used Static Positioning, most of this Mashup will continue to use Responsive so that it can grow and shrink as resolution changes on various viewing devices.
To add multiple Responsive Widgets to a Responsive Positioning Mashup, though, you need to create some additional sub-sections. We’ll do so now.
1. In the top-left of Mashup Builder, click the Layout tab.
2. Click the main, bottom section of the Canvas, i.e. the non-header section, to select it.
3. On the Layout tab, click Add Top.
4. With the top-half of the original bottom section still selected, click Add Left.
5. Click in the bottom section to select the bottom-half of the original container.
6. Click Add Left.
7. At the top, click Save.
You now have a Responsive Positioning Mashup with five (5) sub-sections, i.e. :
In this step, we'll outfit the Header sub-section with a company name and logo.
1. Select the top Header section and ensure that you're still on the Layout tab in the top-left.
2. Change the Positioning to Static.
3. In the top-left, select the Widgets tab.
4. Drag-and-drop an Image Widget onto the Header section.
5. Expand the size of the Image Widget by dragging the corners.
6. Drag-and-drop a Label Widget onto the Header section.
7. Expand the size of the Label Widget.
8. With the Label Widget still selected, change the LabelText Property (in the bottom-left) to MotorCo, and hit the keyboard Tab key to lock-in your modification.
9. In the bottom-left, change to the Style Properties tab.
10. Expand Base > Label, and change font-size to 72px.
11. At the top, click Save.
We want to set the earlier Image Widget to the company logo.
To do so, we need to upload it to Foundation by creating a Media Entity.
1. Click Browse > Visualization > Media.
2. Click + New.
3. In the Name field, type EEFV_Logo.
4. If Project is not already set, search for and select PTCDefaultProject.
5. Right-click and "Save as" to download motorco-logo.jpg.
6. Under Image, click Change.
7. Navigate to and select the motorco-logo.jpg file you just downloaded.
8. Click Open.
9. At the top, click Save.
Now that we have the company logo stored within ThingWorx, we can update the Image Widget to reference it.
1. Return to EEFV_Mashup.
2. Click the Image Widget to select it, and ensure that the bottom-left Properties tab is active.
3. Scroll down in the Properties until you find SourceURL.
4. In the Search Media field, type eefv.
5. Select EEFV_Logo.
6. Click Save.
Finally, we want to change the background color of the Header.
1. In the top-left, select the Explorer tab.
2. Select the Header itself.
3. In the bottom-left, select the Style Properties tab and expand Base > Container.
4. Beside background, click the white square to open a color-selector.
5. Select a color you desire.
6. Click Select.
7. Click Save.
Click here to view Part 2 of this guide.