Map responsive

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

I've got a tour that have a map in the centre of the tour...I created a button that allows to hide and show the map whenever a click on that button..

Now the issue is that when I decrease the size of the browser or I see the tour on my mobile, the map does not resize according to the size of the browser/screen..

I was reading in the post that you can use a trigger "is Mobile" (in the logic block) to solve this problem...

So I went into the Map element, then into size and created a logic block

I created the following logic block:
trigger= is Mobile
comparison: = (equal)
value: true

using this website: http://iosres.com , I selected the logical resolution320x568

so if the value is 320x568, then the map resize...however when I decrease the size of the browser the size of the map does not decrease...

Should I do this differently??
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Edgar,

If we break down what you want to do it would probably go like this...

a. The device is a mobile device, an smartphone
b. The orientation of the screen is portrait
c. The width of the screen viewport is 360px

So you need to select the container that holds your map elements and set a Scale Logic Block like the one below...

p2vr-scale3.jpg
p2vr-scale3.jpg (836.04 KiB) Viewed 3038 times

a. The first Trigger (Is Mobile) detects for a mobile device, the assumption being we don't want it to scale on a desktop
b. The second Trigger (Player Aspect Ratio) detects the orientation of the device < 1 = Portrait
c. The third Trigger (Player Width) determines when the change takes place <= means equal to or less than. You cannot use just = as it would only scale at that one particular point of size.

You would probably want to do a different set of Triggers for Landscape.

I've a sample file at https://rebrand.ly/gasworks-scale that shows a reduced map on mobile (portrait) but normal size on desktop

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

I followed your steps as shown in this photographs

Image

Image

Then uploaded the tour in my phone using the app "Documents"

But the map still has the same size..

Any suggestions?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Can you show me a screenshot of your Scaling Logic Block?

Also you don't seem to be using percentages on your map element. If you use percentages is just scales automatically to match the size of the viewport.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

In the skin tab "Position", I changed from pixels to percent, same in the size tab, and now it is working :)

If I want to add another condition...that the map resize when the desktop browser resize...

How can I do that?

I also have got some text boxes...Can I apply the same procedure that I did for the Map to the text boxes, so these resize in mobile devices?
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

As I said before now the logic block for the map is working and the size of the map decrease when the tour loads on a mobile...

I also tried to apply the logic block for the text boxes, however not sure if I have to apply to one element or to do it to all...let me explain further:

In my skin I have a container called "userdata", then within that container I have a text element called "description" and another element called "userdatabag"...

So do I need to apply the logic block to all of those?

I just tried applying the logic block to the container but it did not work.

Also, how can I do so the map is also responsive when decreasing the size of the bowser in the desktop?
Post Reply