Map window adjustment in Mobile View

Q&A about the latest versions
Post Reply
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi
Iam trying to adjust map window in mobile view, but tour is appearing behind Map window, can't we adjust map window and tour window proportionately. I Mean Tour window should adjust screen with map window (should not go behind Map).

using 3D arrow hotspot component customized skin with Google maps window
1.jpeg
1.jpeg (81.32 KiB) Viewed 1200 times
Please help.

Rajesh
Pano2VR Pro 7.1.1a
windows 11 pro
User avatar
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Rajesh,

Yes, you will have to use margins. Martin has posted a tutorial that you can find here viewtopic.php?p=73070#p73070

Cheers,

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/
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi Tony
Thanks for sharing valuable information.

Its working superb for adjusting map window according to devices aspect ratios without covering Panorama.
But here my requirement is "In desktop/laptops, Map window should be sub container of Panorama, when comes to mobile devices, it should be works like Margin concept (like what you shared) without need of mouse click "

Simply in one line > When tour starts, if it desktop/laptop > Map window should appear as sub container > if its Mobile > Map window should works like Margin (map should automatically placed in Margin )"

Step 1: (Desktop/Laptop)
2.png
2.png (1.3 MiB) Viewed 1155 times

Step 2: (Mobile devices)
1.jpeg
1.jpeg (81.32 KiB) Viewed 1155 times
User avatar
Hopki
Gnome
Posts: 13197
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

I had a bit more of a think about it.
Using a variable to detect the player width you only need one map element which makes it more dynamic when rotating the phone.
The margin is set by using a variable changed and then the action filter.
Also when viewed on a desktop, so a screen wider than 1024px the map element also positions itself 10px from the bottom and left.
Regards,
Attachments
maps.zip
(36.07 KiB) Downloaded 45 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/
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi Hopki,
Excellent working, what exactly we are looking is you delivered with "Map_2".

Thanks alot.
User avatar
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Rajesh & Martin,

Funny I've been playing with this today and I just went to the forum to post my example and Martin has beaten me to it. :D

I've just published a version that uses a single map as Martin does in his example. I've gone a bit further and added in the margin changes as well.

You can test it out here: https://tonyredhead.link/marginmap. Because of the screen real estate I've set the iPad to be same as the desktop.

I've checked on Desktop/iPhone/iPad/Pixel5 and it looks good.

Desktop

htm-3.png
htm-3.png (3.46 MiB) Viewed 1122 times

iPad

htm-3.png
htm-3.png (3.46 MiB) Viewed 1122 times


iPhone


htm-4.png
htm-4.png (836.12 KiB) Viewed 1122 times

Pixel5


htm-6.png
htm-6.png (822.75 KiB) Viewed 1122 times
Cheers,

Tony
Attachments
htm-5.png
htm-5.png (2.23 MiB) Viewed 1122 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/
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi Hopki
Looking for little better user experience like below

Desktop > like in this below image, there are "Toggle Full screen" icons on both panorama & Map (Note: when we click on Panorama Full screen, Map should be hidden and vice versa for Map also)
Desktop_1.png
Desktop_1.png (690.58 KiB) Viewed 1106 times
Mobile > Here also there is a Feature of Toggle Full screen & Escape Full screen is there (pls observe in video file)
2_Mobile.jpeg
2_Mobile.jpeg (125.28 KiB) Viewed 1106 times
WhatsApp Video 2024-09-03 at 7.22.10 PM.mp4
(2.18 MiB) Downloaded 43 times

Thanks
Rajesh
User avatar
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Rajesh,

I'm a bit confused as you have two different Desktop layouts now! Can you explain a bit more what's going on with the desktop layout?

Tue Sep 03, 2024 4:00 pm "Step 1: (Desktop/Laptop)" you have a small map in the bottom left hand corner.

Wed Sep 04, 2024 1:04 am "Desktop Image" you have a large map the same size as the panorama.

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/
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi Tony
just looking for for better user experience, as Iam going through Google street View user experience, I felt it was good.

So just want to to with Sep 4th requirement, which is google street view like interface.

Thanks
rajesh
User avatar
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
So just want to to with Sep 4th requirement, which is google street view like interface.
Okay, I think this is more inline with what you are trying to achieve. https://tonyredhead.link/marginmapgoogle

Desktop

marginmap-1.jpg
marginmap-1.jpg (1.75 MiB) Viewed 1003 times

Mobile

marginmap-5.jpg
marginmap-5.jpg (1.3 MiB) Viewed 1003 times

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/
rajesh@nearestate.in
Posts: 8
Joined: Thu Aug 15, 2024 9:01 pm

Hi Tony,
Excellent this is what we are looking exactly. I appreciate your excellency in pano2VR.

Can I get downloadable skin please.

Thanks
Rajesh
User avatar
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

I'm still working on the skin and I've just created a responsive version (some funny bits still). https://tonyredhead.link/marginmapresponsive

Here are some screenshots.

Desktop: Landscape


marginmap-0.jpg
marginmap-0.jpg (1.61 MiB) Viewed 954 times


Desktop: Portrait


marginmap-1.jpg
marginmap-1.jpg (1.49 MiB) Viewed 954 times


iPad: Landscape


marginmap-3.jpg
marginmap-3.jpg (1.42 MiB) Viewed 954 times


iPad: Portrait




Mobile Phone: only portrait at the moment.
marginmap-2.jpg
marginmap-2.jpg (1.5 MiB) Viewed 954 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
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony
Posts: 1356
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

HI,

Most recent update. https://tonyredhead.services/P2VR/MARGI ... E/CHIRPOY/

marginmap-0.png
marginmap-0.png (2.3 MiB) Viewed 667 times


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/
Post Reply