Skip to main content
E
EB_97818106-Contributor
6-Contributor
June 20, 2023
Solved

2D Layout - It can be freer?

  • June 20, 2023
  • 1 reply
  • 1607 views

Good afternoon, I would like to know if it is possible to make the 2D Layout "more free" I started to work with Vuforia Studio a few days ago and I am having difficulties creating a layout my way and changing the size and position of the components. For example: I would like that when the screen is vertical the grid layout works as ROWs and when it is horizontal it works as Columns. Can anyone tell me if it is possible to make the 2D layout more CSS free and create an html instead of using widgets? If not, can anyone give me tips for formatting the example I gave using only the available CSS?

Here is a basic template created in Paint to demonstrate my idea:
Thanks!

 

 

 

Best answer by RolandRaytchev

Hi @EB_9781810 ,

the design should work stable on mobile devices - this mean not only in preview and when there is a little "free" possibly it will not work stable  on all devices etc. Anyways there is no automatic mechanism as default to make therow to columns and vice versa - so far there is no any specific alignment and orientation attribute. You can add off course to the widget additional css style functionality which possibly help to improve design as desired - but there are only some simple classes in the PTC Help provided so that  user have to design and test the CSS classes to achieve the best possible display on particular display - so possibly the effect will be different on the different platforms. 

In your case I think it will be better , possibly to have different designs of the different orientations. You can used different properties, classed vor horizontal and  vertikal orientation  or e.g. the vertical view is default and you can  change to another view with horizontal design when this orientation is detected  In the post there is an example how to find the device orientation on run time as discussed in community post article https://community.ptc.com/t5/Vuforia-Studio/Getting-Orientation-of-Mobile-Device-via-Javascript/m-p/657433

 

1 reply

R
RolandRaytchev21-Topaz IAnswer
21-Topaz I
June 22, 2023

Hi @EB_9781810 ,

the design should work stable on mobile devices - this mean not only in preview and when there is a little "free" possibly it will not work stable  on all devices etc. Anyways there is no automatic mechanism as default to make therow to columns and vice versa - so far there is no any specific alignment and orientation attribute. You can add off course to the widget additional css style functionality which possibly help to improve design as desired - but there are only some simple classes in the PTC Help provided so that  user have to design and test the CSS classes to achieve the best possible display on particular display - so possibly the effect will be different on the different platforms. 

In your case I think it will be better , possibly to have different designs of the different orientations. You can used different properties, classed vor horizontal and  vertikal orientation  or e.g. the vertical view is default and you can  change to another view with horizontal design when this orientation is detected  In the post there is an example how to find the device orientation on run time as discussed in community post article https://community.ptc.com/t5/Vuforia-Studio/Getting-Orientation-of-Mobile-Device-via-Javascript/m-p/657433

 

E
EB_97818106-ContributorAuthor
6-Contributor
June 22, 2023

Hi @RolandRaytchev ,

Thank you very much for the information and the help, I was able to solve it here. It didn't look the way I initially wanted, but I managed to make it responsive and beautiful for all screen types using CSS.

Terms & ConditionsCookie settingsAccessibility statement