Mashups are not dynamic for TV screens

[SaranKarthick]

Hi Developers,

I have developed mashups with reference to my desktop (1920 x 1080). In practical use case we are displaying it in TV with much higher resolution in comparison to my desktop. I had used dynamic option while creating mashups. But when its viewed on a TV screen, the buttons and grids become small. 

What is the work around for this? I there a way to show the contents of the grid and widgets in a more relevant way for TV screens?

Thanks and Regards,

Saran

[VladimirRosu]

Hi Saran,

I believe the TV has much lower resolution, not higher as you mentioned (please confirm this is correct).

While I'm not sure what the "dynamic" option means, I can suggest you either design from the beginning with the target resolution in mind, or use the CSS media queries to achieve a similar result (modify style based on screen size).

For the media queries you can check the following tutorial below.

https://developer.thingworx.com/en/resources/guides/css-quickstart/use-media-queries-css-quickstart

This tutorial assumes you're familiar with CSS - if that's not the case, I suggest to simply design based on the closest resolution you want to display the application on.

[SaranKarthick]

Hi @VladimirRosu,

By higher resolution what I wanted to convey was that the mashups I developed in my desktop screen (1920 x 1080), when displayed in a TV (which has a much wider screen) looks very diminished. While creating a mashup there is option to either go with static or dynamic. With Static we can fix the mashup screen size but the dynamic will fit the mashups according to the screen its shown.

The steps to reproduce my use case is as follows:

1. Load a mashup in Chrome Browser.

2. In inspect window select the "Toggle Device Toolbar" button,

3. Now make the screen responsive and try with "1920 x 1080" and "2048 × 1536" or "4096 x 3072".

You can observe that the mashups become unreadable for the second and third combinations.

Based on your suggestion it looks like we need to modify the mashups completely for the above use case. I was hoping there would be an easy workaround. Thanks for your suggestion. Now we know how to proceed with this.

Regards,

Saran 

[VladimirRosu · Accepted solution]

Hi Saran,

Don't necessarily recreate the mashups, but just add CSS Media queries to enlarge the element sizes for the specific resolution. In this way you'll achieve a completely responsive and you won't need to duplicate work.