Pano2VR 5 and Responsive Skin design

Special forum to share and discuss skins for Pano2VR and Object2VR
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

I thought I would start this thread as there are some different approaches to responsive design and how to do it.
With the logic block Pano2VR 5 can detect screen width, height and now Is Mobile.

The Logic Block, the same as Multi resolution looks at logical screen sizes, example and iPad 2 and Air both have a logical screen size of 1024 x 768px even though the iPad Air screen resolution is much higher.

This said lets look at How to do it.

Images, do you scale them of change them?
Hears the deal, a 100px square image scaled down to X:0.5 and Y:0.5 will still have 100px but now they will be compressed.
If X and Y are scaled to 1.5 then it will look pixelated as the square now does not have enough pixels for the new size.

So in this case you can produce different sized images all looking sharp at their size. Then use the logic block to show and hide them.
Here's a quick intro to the comparisons.
Equal To: =
More Than: >
Less Than: <
Then there are combinations such as: <=, less than or equal to.

So if you wanted to show element A until the screen width went below 1024px then show element B. Then when below 960px show element C.
The visible logic block for each element would look like this.
Element A
This will be set to visible by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation:
Visible: false

Element B
This will be set to hidden by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Visible: true

Element C
This will be set to hidden as default
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Visible: true

Looking at the above, Element B will only be visible between screen width 960px to 1024px

This is great for large images, but if the image is not changing size that much then you can use scale, in fact testing the skin editor the scaling works quite well. This has the advantage of having only one element/image.
So lets look at the above but this time look at scaling.

The element with its default scale set to X: 1.00 & Y: 1.00
First Expression
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Scale: X: 0.8 and Y: 0.8

Second Expression, this is added by clicking the green + button, Add Expression.
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Scale: X: 0.5 and Y: 0.5

In summery I would probably only swop out images if there is a large difference in size, otherwise scaling works well.

The Is Mobile is looking for Android and iOS and is a good way to hide and show element such as unwanted buttons, example navigation and fullscreen. So under the visible logic block of the fullscreen button you would simply add:
Trigger: Is Mobile / Comparison: = / Value true / Operation:
Visible: false.

Testing, the skin editors live preview also gives the size of the window as you resize it so you can easily test elements resizing and hiding just by dragging it, however you wont be able to test Is Mobile until displayed on your mobile device. The good news it Pano2VR has its built in web server so you can just open your browser and login. If your not sure how to do this please have a kook at this link.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
skyfocus
Posts: 268
Joined: Sat Jun 12, 2010 10:52 am
Location: The Netherlands
Contact:

Hi,

I make skins that are "responsive" for a time now using html to load different skins dependent on the viewer-screen width. Now with V5 I'm happy I can do this within pano2vr instead of hacking the html. What I actually did and try to do now is scaling all items down to 0,6 when the screen width is dropping below 740 pixels. That works fine on mobile devices and tablets ......

But .... I have a menu with a close button that should slide up when the close button is clicked. The action behind this button changes the position of the menu with -Y+(button-size) ... this works well. But when the screen width drops below 740, the elements are scaled down to 0,6 .... The close button still closes the menu with -Y+(button-size) ... what it should be is (-Y+(button-size)) x 0,6 .....
Now the menu is sliding to much out of the viewing-screen. This is also a problem when for instance a submenu is positioned with an X value bigger than 0 ..... The X position of anything that moves should als be times 0,6 ....

Is there a way to make an action also conditional to the screen width ?
What I now have to do is make two menu's ... one at 1,0 and one at 0,6 size and make them appear and disappear according to the screen width ....
It works but I have to administrate/change two menu's all the times when something is changing in the menu ...

Hopefully it is a bit clear what I mean to say.

Regards,

Arjan
Windows 10 Pro x64, Pano2VR pro V6.1.13 , Browser latest Firefox
Website: https://www.skyfocus.nl/
User avatar
skyfocus
Posts: 268
Joined: Sat Jun 12, 2010 10:52 am
Location: The Netherlands
Contact:

Hi, no response, does this mean it is not possible ?

I've managed to get rid of the double menu and double buttons (voor each size one) by using more containers, but all actions with "change object position" in it have to be double and switched by screen size, still makes it a complex skin to edit and adjust.

It all functions when opening on a fixed screen, but when you close for instance the menu when the screen is big and make the screen smaller, the menu button is moving off the screen ....

Example: http://www.skyfocus.nl/SkyFocus/Tours/C ... TorreNova/

Regards,

Arjan
Windows 10 Pro x64, Pano2VR pro V6.1.13 , Browser latest Firefox
Website: https://www.skyfocus.nl/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Arjan
Please try again with V5 final release.
There was a bug in the beta with child elements when set to size percentage.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Iv have had a few people ask about using a single element with responsive skins.
The normal way is to have multiple elements of the same thing at different sizes, however with a bit of playing with position and percentage you can use a single element, which actually works quite well.

The attached project has a text element and a rectangle element which changes size when the player width is less than 500 pixels but more then 400 pixels. Then again when the player width is equal to and lass than 400 pixels.

The rectangle element is acting like a map with two node markers which also stay in the correct relative position and size as the rectangle element is resized.

Download the project and publish it out.
Open the output with Chrome or Firefox as Safari wont allow you to reduce the width enough to see the change in the skin.
Or just open the skin and use the Live Preview.

Starting with the text box you will see it is positioned and anchored top right.
Under the text elements position tab you will see two active logic blocks for position and size.

Starting with size you will see the logic is quite simple:
The logic block has two expressions, highlighted in green each with conditions which is highlighted in yellow, the reason why I have highlighted this is so we are all on the same page and know what Im referring to.

The first expression has the condition:
Player Width less than or equal to 500px and more then 400px change the size to 200 x 100px

The second expression has the condition:
Player Width less than or equal to 400px change the size to 100 x 50px
1.jpg
1.jpg (47.89 KiB) Viewed 28458 times
Now what will happen is the text element will reduce its width away from the right side.
To compensate I have set a logic block under position to move the text element to the right buy the same amount of pixels it was reduced by.
The text element is positioned X: 320 Y:20. The logic block shows the first expression will move the text element to the right by 100px then the second by 200px from the staring position.
2.jpg
2.jpg (35.42 KiB) Viewed 28458 times
This is the same for the rectangle or any other element including image.

What needs a bit more work is node markers on a map image.
Add your node images to the skin as normal putting them in a container and hiding it.
The in the node markers properties you change the position to percentage and then select which image it will display.
Then under scaling you will see a logic block:
3.jpg
3.jpg (35.79 KiB) Viewed 28458 times
The conditions in each expression change the scale so the hotspot images stay the same relative size to the map.

Regards,
Hopki
Attachments
responsive.zip
(12.4 KiB) Downloaded 964 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
soulbrother
Posts: 545
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Dear all,
I have now a client request for a bunch of responsive challenges...most points I can do with the V5 Pro, but:

1. if I create the tours as multilanguage with text variables, is it possible to start one and the same tour, but with a different language??
Client wants to have different links from his website to open the tour, it should be only one tour, but different languages on different "start-links" / different "index.html" ?

2. point-hotspots:
I have many hotspots to open jpgs(ext.loader) and textfields, centered and size is set, fitting to the screen size.
As I have now to manage responsive skin for very small to very large screens, it would make sense to tell the skin to load a small picture if small screen and to use the big sized pic on larger screens.
Any idea how to do that with hotspots?

Of course my request is on html5 only :-)

Thanks a lot!
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi soulbrother,
If your skin uses a logic block to swop the text in the text boxes then make a copy with it set to the other language.
Then you can have two HTML5 outputs with the same folder name, Output.

As an example one project will use the en (english) skin the other say de (german) skin.
You will need to change the file path for the HTML page, so en/index.html and de/index.html.

so what you should end up with is an output folder with sub folders, en and de.
So you can have:

http://yoursite.com/output/en
http://yoursite.com/output/de

Both projects will share the same tiles folder and XML.
Of course each sub folders will have their own images folder but this should be quite light in file size compared to the tiles folder.

Hotspots:
You can use the logic block to swop out the hotspot image.
Using the player width or height logic block you can hide and show the hotspot images, have the actions in the images not in the template.
So the template has all the actions apart from the line that calls the image: set value, $r$hu to the popup.
Add this action to the hotspot image.
You can then have a second hotspot image that will show when the player size is smaller and it can have the action action: set value small/$r$hu.

This mean you can have a folder called small with the same images but reduced in size.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
soulbrother
Posts: 545
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

thanks a lot Martin, I will play with that :-)
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Here is a good reference for Apple devices.
Remembering the skin editor and multi resolution all work looking at screen size, Logical Resolution and not actual screen Resolution.

Here is a good page looking at supporting Android devices and how to implement.

Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Dkumar
Posts: 37
Joined: Mon Jan 16, 2017 12:55 pm

Dear Hopki ,

Im in almost the same situation right now i have couple of images in my screen lets say 4 images on 4 corners of the screen and i want them to fit in perfectly in their every possible device im testing on .....lets say if we put a trigger for scaling

Player width >=640 and Player width <= 1024

x value : 0.8 and y value : 0.8

I got this logic but my point is .......0.8 is not perfect value to keep the four images on four corners of the screen between these two 640 and 1024 parameters ......is there a way i can give it a range of automatic increasing of scalling value as soon as width value gets increased so that it can fit in perfectly on screen corners ????

something like if i test the perfect scalling value at 640 is 0.4 and perfect scalling value for images at 1024 is 0.9 and is it possible that we can give in make the container having these four buttons vary scaling between 0.4 and 0.9 automatically as width of the player increases between 640 and 1024 ?????

Hopki wrote: Sat Jul 02, 2016 10:12 pm Hi,
Iv have had a few people ask about using a single element with responsive skins.
The normal way is to have multiple elements of the same thing at different sizes, however with a bit of playing with position and percentage you can use a single element, which actually works quite well.

The attached project has a text element and a rectangle element which changes size when the player width is less than 500 pixels but more then 400 pixels. Then again when the player width is equal to and lass than 400 pixels.

The rectangle element is acting like a map with two node markers which also stay in the correct relative position and size as the rectangle element is resized.

Download the project and publish it out.
Open the output with Chrome or Firefox as Safari wont allow you to reduce the width enough to see the change in the skin.
Or just open the skin and use the Live Preview.

Starting with the text box you will see it is positioned and anchored top right.
Under the text elements position tab you will see two active logic blocks for position and size.

Starting with size you will see the logic is quite simple:
The logic block has two expressions, highlighted in green each with conditions which is highlighted in yellow, the reason why I have highlighted this is so we are all on the same page and know what Im referring to.

The first expression has the condition:
Player Width less than or equal to 500px and more then 400px change the size to 200 x 100px

The second expression has the condition:
Player Width less than or equal to 400px change the size to 100 x 50px

1.jpg
Now what will happen is the text element will reduce its width away from the right side.
To compensate I have set a logic block under position to move the text element to the right buy the same amount of pixels it was reduced by.
The text element is positioned X: 320 Y:20. The logic block shows the first expression will move the text element to the right by 100px then the second by 200px from the staring position.

2.jpg

This is the same for the rectangle or any other element including image.

What needs a bit more work is node markers on a map image.
Add your node images to the skin as normal putting them in a container and hiding it.
The in the node markers properties you change the position to percentage and then select which image it will display.
Then under scaling you will see a logic block:

3.jpg
The conditions in each expression change the scale so the hotspot images stay the same relative size to the map.

Regards,
Hopki
User avatar
ThanhDo
Posts: 10
Joined: Fri Apr 15, 2016 4:29 pm
Location: Asia

skyfocus wrote: Tue Feb 23, 2016 3:12 pm Hi, no response, does this mean it is not possible ?

I've managed to get rid of the double menu and double buttons (voor each size one) by using more containers, but all actions with "change object position" in it have to be double and switched by screen size, still makes it a complex skin to edit and adjust.

It all functions when opening on a fixed screen, but when you close for instance the menu when the screen is big and make the screen smaller, the menu button is moving off the screen ....

Example: http://www.skyfocus.nl/SkyFocus/Tours/C ... TorreNova/

Regards,

Arjan


Please give me your Skin
User avatar
ThanhDo
Posts: 10
Joined: Fri Apr 15, 2016 4:29 pm
Location: Asia

skyfocus wrote: Tue Feb 23, 2016 3:12 pm Hi, no response, does this mean it is not possible ?

I've managed to get rid of the double menu and double buttons (voor each size one) by using more containers, but all actions with "change object position" in it have to be double and switched by screen size, still makes it a complex skin to edit and adjust.

It all functions when opening on a fixed screen, but when you close for instance the menu when the screen is big and make the screen smaller, the menu button is moving off the screen ....

Example: http://www.skyfocus.nl/SkyFocus/Tours/C ... TorreNova/

Regards,

Arjan
Please!
Give me Your Skin.
Thanks you very much
User avatar
soulbrother
Posts: 545
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Hopki wrote: Fri Nov 25, 2016 12:27 pm Hi soulbrother,
If your skin uses a logic block to swop the text in the text boxes then make a copy with it set to the other language.
Then you can have two HTML5 outputs with the same folder name, Output.

As an example one project will use the en (english) skin the other say de (german) skin.
You will need to change the file path for the HTML page, so en/index.html and de/index.html.
Hi again,
I´ve tried that, but it didn´t work with different paths.

BUT the solution to bring it to work is easy:
not different folders, but simply different file-names for the html and the skin and it works like a charm.

So all files and folders are in the same folder "output", just need to create 2 html5 outputs with exact same settings, exept for:
skin names
and
html-file-names

see screenshot of all files.
Don´t wonder, in folder "pics" are the pictures that are shown with the external loader - "img" and "tiles" are the usual needed folders.
screenshot_files-in-folder_multilanguage.jpg
screenshot_files-in-folder_multilanguage.jpg (17.27 KiB) Viewed 26732 times
User avatar
RolandMeijer
Posts: 3
Joined: Mon Mar 20, 2017 11:34 am
Location: Gustavsberg, Sweden
Contact:

Hi!
I couldn't find any thread about my question...

I have a map in my tour that resizes in percentage and that works fine. Now I want to add a Close button in the upper right corner of the map that should stay in the same place when the map resizes, but I can't figure out how to get the button to stay in place..? (It drifts when I resize the window). I'm using percentage on the button as well.

The Close button I'm using is skin3-40.svg from the silhouette_buttons folder.

Regards,

Roland
Attachments
Button Position.png
Button Position.png (95.11 KiB) Viewed 26590 times
Map Position.png
Map Position.png (78.99 KiB) Viewed 26593 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Roland,
The problem is the map is changing position and size. The button is only changing position.
If the button would change size as well it would fill the gaps so to speak but then it will look ugly.
Your better off doing as we have done with the image popup or video components.
Place a close button anchored top right of the window so it always stays there and does not resize.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply