Willkommen bei bytebang » The blog about all and nothing » How to display values in ThingWorx in a 2d mashup

How to display values in ThingWorx in a 2d mashup

Okt 31 2019

The Problem

In my last article i have given you some tips & tricks how to get your data into ThingWorx. Since I assume that somebody wants to see the sensors data in action I am going to give you a shot primer here.

The Solution

ThingWorx has a very powerful rendering engine, which allows you to generate simple 2D dashboards (shown in this article), but also to markup 3D models of your things with live data. So - lets get started:

Step 1: Create a mashup

1_create_mashup.png

The first step is to create a mashup (the ThingWorx word for visualization). This is where your data can be displayed afterwards.

Step 2: Put some widgets on it

2_add_widgets.png

In Design: Add a Pane, and afterwards add a LED Display. Don't forget to set the display name and the description to something useful.

Step 3: Add a datasource

3_add_datasource.png

Add Data source (our thing). Since we want to display the current value, we have to add the GetPropertyValues Service

Step 4: Bind the property of our thing to the widget

4a_bind-a-property.png

Now we can bind the property “distance” to the data value of the led display, by Drag & Drop. From now on the display knows where it gets its data from, but it doesn’t display any values:

4b_binding-result.png

Step 5: Tell ThingWorx when to update the values

We have to tell the mashup when to fetch new data. This can be done with event triggers.

5_event-triggers-unconfigured.png

once it is configured, it should look like this:

5_event-triggers.png

We tell it that we want to read data whenever the page is loaded (meaning once) and whenever a refresh is triggered.

So we should end up with the following setup:

5_parkingsensor_mashup.png

.. which produces results like this:

5_parkingsensor-result.png

Step 6: Enable auto-update

Till now, we are in a state where we always get the correct values - but only if you refresh the page by hand. This can also be automated by adding an Auto Refresh widget as well:

6_autorefresh.png

Here we set the Refresh interval to 1 second (or any useful period). Finally we have to tell TWX that we want to refresh the whole mashup with this period:

6_refresh-mashup.png

Now the mashup (and also every widget on it) is updated every second.

Thats it - happy coding !

Get Social


(c) 2019, by bytebang e.U. - Impressum - Datenschutz / Nutzungsbedingungen
-