How do I interactive with pic or object on mash up like this ?

Question

Hi, everyone.

I have a question when I trying to make a Thingworx smart city demo clone like this video and website
ThingWorx Industrial IoT Platform - Creating Smart Building Applications - PTC Demo Video Gallery | IoT start from 3:00 to 3:20 and SmartCitiesDataView .
And my question is how do I do like the video shows, how to interactive with the lights and rooms.

For example.

1.

螢幕擷取畫面 2024-01-11 102816.png

when I select the room and the Lights controller become green because all lights in this room are on, when I click the green button

螢幕擷取畫面 2024-01-11 102849.png

then the lights will turn of like this

螢幕擷取畫面 2024-01-11 102859.png

and the button turn to gray from green.

2.

螢幕擷取畫面 2024-01-11 102941.png

When I click the red light the Light controller will turn to red and the service light button turn to red.

Dose any one know how to achieve this goal? Please tell me how to do or some hits.

I know if use javascript and HTML, CSS to do this is not that hard even I can use frontend framework like React or Vue to do this, but in thingworx mashup I have no idea how to do this.

-------------------------------------------------------

And another question about Line chart. How do I customize my Line chart like this

螢幕擷取畫面 2024-01-11 104936.png

how to show X-axis and Y-axis value and auto scale like this I am try to do that but my result looks like this 螢幕擷取畫面 2024-01-11 105215.png

looks totally different, I want to know how to show Y-axis value only max and min, and show X-axis from Apr1 and the tick is 2 months and end at 2018 but the line still go through.

----------------------------------------------------------------------

Second question, when I click the legend filter

螢幕擷取畫面 2024-01-11 105616.png

the chart will auto scale to max value 48 and min value 14. and how to let the legend mark have legend filter function, because when I enable legend filter it always have check box besides legend mark.

螢幕擷取畫面 2024-01-11 105848.png

----------------------------------------------------------

Third question. How to achieve this

螢幕擷取畫面 2024-01-11 110055.png

that this Line chart have bold min value and bold max value and normal 50 value as Y-axis tick. And like Line chart first question The X-axis tick is start from Apr1 and end at 2018 but the line didn't stop still go through.

I try to do this but the result is looks like

螢幕擷取畫面 2024-01-11 110435.png

the line ends at Jan 16.

---------------------------------------------------------------

Those are my all question when I trying to do the SmartCitiesDataView web clone. and I crawled all the post on the forum, but I still can't find the answer. So I write this post to seek any help, if anyone know how to solve my question I will be very appreciate!

Rocko · Accepted Answer

For your first question, this was probably done using SVG. You can highlight components there by assiging CSS classes to elements in SVG: Check this extension which also shows the lab example: https://github.com/ptc-iot-sharing/SvgViewerWidgetTWX

For the charts, you probably won't get pixel perfect same configuration, this the smart city demo is quite old and uses now deprecated widgets, while in your Thingworx installation probably/hopefully a 9.4/9.5, you will have the new versions of the widgets which have different options and configurations.

PaiChung · Answer

The lights can be done using State Based definitions, So you can assign values 1/0 to your lights that get toggled by the button pushed.

Based on that value, it will show one or the other icon.

For the charts you should be able to dynamically set the Min and Max of your Y-Axis from a service that returns those values.

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.

Scanning file for viruses.

This file cannot be downloaded