Pano2VR 5 and Responsive Skin design

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

Pano2VR 5 and Responsive Skin design

Post by Hopki » Sat Dec 19, 2015 8:43 pm

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

User avatar
skyfocus
Posts: 194
Joined: Sat Jun 12, 2010 10:52 am
Location: The Netherlands
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by skyfocus » Sun Feb 07, 2016 8:06 pm

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 V5.1 beta , Browser latest Firefox

User avatar
skyfocus
Posts: 194
Joined: Sat Jun 12, 2010 10:52 am
Location: The Netherlands
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by skyfocus » 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
Windows 10 Pro x64, Pano2VR pro V5.1 beta , Browser latest Firefox

User avatar
Hopki
Gnome
Posts: 6742
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by Hopki » Wed Feb 24, 2016 9:19 pm

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

User avatar
Hopki
Gnome
Posts: 6742
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by Hopki » 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
1.jpg (47.89 KiB) Viewed 1286 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 1286 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 1286 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 112 times

User avatar
soulbrother
Posts: 236
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by soulbrother » Fri Nov 25, 2016 11:21 am

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: 6742
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by Hopki » 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.

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


User avatar
Hopki
Gnome
Posts: 6742
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Pano2VR 5 and Responsive Skin design

Post by Hopki » Mon Jan 09, 2017 11:40 am

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

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest