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.
Close map on startup in mobile
Hi Serge,
Are you using the V6 skin or is it a custom skin?
Tony
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/
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
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/
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%
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
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
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%
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
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 143 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/