Close map on startup in mobile

Q&A about the latest versions
Post Reply
User avatar
SergePix
Posts: 108
Joined: Fri Feb 01, 2019 2:27 pm
Location: Quebec

Hello,

I'm trying to hide the map when loading the tour on a screen smaller than 400 or a mobile. I want to toggle the map in a smaller screen according to my needs.

I create a toggle button to show or hide the map.

I did a logic block
Visible: check
player width: <= 400
visible: false
I can not toggle the map. It show the map on desktop but not in screen smaller than 400.
Serge
Version: V7.01
Windows 10
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Serge,

Are you using the V6 skin or is it a custom skin?

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
SergePix
Posts: 108
Joined: Fri Feb 01, 2019 2:27 pm
Location: Quebec

Hello Tony,

it's a skin of the v6 that I modified, I think it was simplex.
Serge
Version: V7.01
Windows 10
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Serge,

Is this what you are looking for. If you view this link https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

On a mobile phone screen the map is initially hidden and toggled by clicking on the map icon.

On an iPad or desktop the map is shown when the tour opens and is toggled closed by clicking on the map icon

The map on the desktop resizes as the browser window changes size.

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
SergePix
Posts: 108
Joined: Fri Feb 01, 2019 2:27 pm
Location: Quebec

Hello Tony,

that's exactly what I want to do.
Serge
Version: V7.01
Windows 10
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Okay, here's what I've done and tested on an iPad Air and Samsung S8.

1. I created a variable: vis_map set to True

2. On the map button I created an Action; Mouse Click | Set Variable Value | vis_map | Not() - (So when the mouse click happens the variable is set to the opposite it was before the mouse click.)

3. On the actual map element I've created 2 Logic Blocks, the first on the Properties/Position/Size settings the second on the Properties/Appearance/Visible settings.

4. The initial Size setting for the map_rookery element is Width 40% CSS and Height 50% CSS (I'm using CSS as I want to be able to have the map scale on the desktop and tablet but be a fixed size on the phone.)

5. The Size Logic Block setting has 2 blocks with 2 Triggers.

6. Block #1, Trigger #1; Player Width | <= | 400 | And - Trigger #2; Is Mobile | = true - Then Width = 100px and Height = 200px

7. Block #2, Trigger #1; Player Width | >= | 400 | And - Trigger #2; Is Mobile | = true - Then Width = 30% and Height = 40%

Visible Logic Block.jpg
Visible Logic Block.jpg (180.6 KiB) Viewed 2844 times

This means on the desktop (is not a mobile) the map will scale as the browser window changes size. On an iPad/Tablet (mobile device screen width larger than 400px) the map will also scale proportionally but cover a smaller area. On a smartphone (mobile device screen width less than 400px) the map will remain at a fixed size.

So the default state of the variable vis_map is True. So when the tour is viewed on a desktop (Is Mobile = false) thenit's

8. The initial setting for the map_rookery element Visibility is unchecked

9. The Visibility Logic Block setting has 2 blocks each with 2 Triggers.

10. Block #1, Trigger #1; *vis_map | = | true | And - Trigger #2; Is Mobile | =| false - Visible: true

11. Block #2, Trigger #1; *vis_map | = | false | And - Trigger #2; Is Mobile | =| true - Visible: true

Size Logic Block.jpg
Size Logic Block.jpg (191.03 KiB) Viewed 2844 times

This means on the desktop the map is initially visible while on an iPad/Tablet/Smartphone the map is initially hidden. Because the Mouse Click changes the variable to the opposite of what it currently is, clicking on the map button set it to false which then set the visibility to true on a mobile.

Bear in mind this is my logic applied via the Logic Blocks and there are many different ways to achieve the same outcome in Pano2VR I'm sure Hopki can come up with something a bit more slick than this :-)

I've also attached a modified V6 Simplex skin. (note: you will need to add your Map API Key

cheers,

Tony
Attachments
v6skin_map_mobile.ggsk
(86.77 KiB) Downloaded 139 times
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
SergePix
Posts: 108
Joined: Fri Feb 01, 2019 2:27 pm
Location: Quebec

Hello Tony,

that's work great!

Thank you for your help :D
Serge
Version: V7.01
Windows 10
Post Reply