cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to make the mashup screen more responsive

muzzammil
Garnet

How to make the mashup screen more responsive

Here, the problem is with placing widgets on the layout through panel widgets and thus that widget becomes non_responsive and we are having to position those widgets in accordance with the screen resolution chosen.  It would be helpful if someone could give some inputs on making the mashup screen more responsive.

17 REPLIES 17

Re: How to make the mashup screen more responsive

is it possible to only use Layout widget?

Re: How to make the mashup screen more responsive

no..coz..when u go for using widgets like value display or label or led display widgets, panel widget usage becomes necessary..

Re: How to make the mashup screen more responsive

In ThingWorx, Label and LED Display must be placed in Panel, Value Display can be placed in Layout.

Can you share some screen to show your target design?

Re: How to make the mashup screen more responsive

Yeah..That's what i meant to ask..viz., there are some widgets which might be essential in the mashup portion to be positioned responsively, but they could be placed only over the panel and thus the mashup portion is made non-responsive. Is there any other way to make the mashup portion responsive eventhough widgets are placed over the panel in that portion??

Re: How to make the mashup screen more responsive

I am afraid you need to use layout widget firstly to get resposive portion and place those widgets bound with a panel widget.

Re: How to make the mashup screen more responsive

yeah, that's what has already been done and that's where the responsiveness issue comes in. Because, the responsive widget placed over another responsive widget makes it non-responsive.

Re: How to make the mashup screen more responsive

Hi

With your widgets that need to be on a panel, have you tried using a panel on a panel? 

In your case I would make use of the layout widget as well as the panel on panel method.

 

regards

Re: How to make the mashup screen more responsive

I have tried panel on the panel method, but it's worse than before. And it still doesn't resolve the issue.

Re: How to make the mashup screen more responsive

Would you mind sending a screenshot of what it is you are trying to make more responsive, if i have a better idea of it, I can try and make my answers more specific.

 

Regards

Re: How to make the mashup screen more responsive

Screenshot (6).pngScreenshot (7).png

From the above pics, you could see that the positions of widgets on the right side remain unaltered when screen resolutions are changed. Here, i put a layout widget ,then i put the panel on the panel over the layout portion and then put some widgets. The effect on widgets remains the same with a single panel on the layout portion. But, i wish to make the screen more responsive so that the widgets could get positioned responsively upon screen resolution changes.

Re: How to make the mashup screen more responsive

I have created an example using the widgets you have used.

My mashup is quite responsive. I have take two screenshots of it at different zooms. I have done this through the use of the layout widget and a panel on a panel.

Zoom1Zoom1Zoom2Zoom2

The first layout is used to divide the page by half, the second layout is used to divide the right hand side etc. I have placed the gauge directly on the layout without a panel. This allows the gauge to be responsive.

I have then placed a panel on a panel for the LED display. To allow the panel on panel approach to be more effective, you have to reduce the second panels' size so that it boarders the widget(s). I have also taken a screenshot of this, note the size of the second panel to the widget (it is almost the same size).

 BackendBackend

I hope this helps.

Re: How to make the mashup screen more responsive

yeah..Thank you..Could u share screenshots of your mashup with screen resolution changed from full screen to 1024 x 768 to see if it is being responsive.

Re: How to make the mashup screen more responsive

And possibly could u share ur mashup's xml to me?

Re: How to make the mashup screen more responsive

Hi,

 

It should work on the different screen sizes as I showed in the added screen shots. Unfortunately it was just a test mashup i created to prove the concept, I have already deleted it. It should be fairly simple to recreate based on the screenshots of the mashup design I shared.

 

Re: How to make the mashup screen more responsive

Yeah..that is fine..but, the panel on the panel concept is still vague to me..So, kindly recreate the mashup explaining the panel on the panel concept and send it to me..That would be useful for me to understand the concept.

Re: How to make the mashup screen more responsive

@eengelbrecht Kindly send me that mashup explaining that panel on the panel concept.

Re: How to make the mashup screen more responsive

@eengelbrecht  kindly respond ASAP

Announcements

Check out the upcoming Expert Session: Understanding ThingWorx Navigate Licensing in Community "Customer Events" section.