Split screen
Hi, how can I create a split screen effect so that I have a map occupying say the bottom 25% of the screen and the pano occupying the upper 75% of the screen? I currently use a skin which has a toggle button to display a map, but this opens over the 3D arrows. Is it also possible to toggle the split screen effect?
Hi AHartash,
I've seen the same effect in Panotour Pro. Here's an example by Barney Meyer where the map and the panorama share a percentage of the browser viewport. So rather than cover the panorama the panorama is in it's own area that scales based upon the visibility of the map and interact with each other in a manner similar to the scenario you describe
https://www.hiddenmelbourne.com.au/Scot ... ThenAndNow
I've tried to replicate in Pano2VR but haven't had any success.
The only way I can see to do what you want is set a percentage height of 25% for the map and then required skin elements are in a container set to 75% percentage height. When the map is closed the container is set to 100% and vice versa. However this doesn't reduce the size of the panorama as it remains under the 25% map area.
Tony
I've seen the same effect in Panotour Pro. Here's an example by Barney Meyer where the map and the panorama share a percentage of the browser viewport. So rather than cover the panorama the panorama is in it's own area that scales based upon the visibility of the map and interact with each other in a manner similar to the scenario you describe
https://www.hiddenmelbourne.com.au/Scot ... ThenAndNow
I've tried to replicate in Pano2VR but haven't had any success.
The only way I can see to do what you want is set a percentage height of 25% for the map and then required skin elements are in a container set to 75% percentage height. When the map is closed the container is set to 100% and vice versa. However this doesn't reduce the size of the panorama as it remains under the 25% map area.
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 Tony,
Thank you for your reply. If I understand you correctly, I think you are suggesting the 3D arrows are in a container where the size of the container changes dependant on whether the map element is visible or not? This could work I guess with some tweaking of the default pano view angle etc. Would I need to apply some actions and modifiers in a skin for this to work please?
Kind regards
Andy
Thank you for your reply. If I understand you correctly, I think you are suggesting the 3D arrows are in a container where the size of the container changes dependant on whether the map element is visible or not? This could work I guess with some tweaking of the default pano view angle etc. Would I need to apply some actions and modifiers in a skin for this to work please?
Kind regards
Andy
Hi Andy,
Unfortunately I don't think this option will work with the 3D arrows as they are linked to the position of the Tour Nodes. It will work for any screen elements that placed and anchored on the skin overlay.
Tony
Unfortunately I don't think this option will work with the 3D arrows as they are linked to the position of the Tour Nodes. It will work for any screen elements that placed and anchored on the skin overlay.
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/
- Hopki
- Gnome
- Posts: 13042
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi Guys,
You can use Margins!
If you look at the attached project there is a 240px margin set in the skin editors canvas properties.
The Map element is anchored bottom left, width set to 100% and the height is set to 240 pixels.
You can, of course, have the margin at the sides as well as the top or a combination of the two.
The panorama is displayed in the margin so it is like displaying the panorama in a separate window within the output.
You can not change the size of the margin and this will be fixed in the output but does mean the panorama displays correctly.
When setting controls for the panorama you need to set them above the margin.
Regards,
Hopki
You can use Margins!
If you look at the attached project there is a 240px margin set in the skin editors canvas properties.
The Map element is anchored bottom left, width set to 100% and the height is set to 240 pixels.
You can, of course, have the margin at the sides as well as the top or a combination of the two.
The panorama is displayed in the margin so it is like displaying the panorama in a separate window within the output.
You can not change the size of the margin and this will be fixed in the output but does mean the panorama displays correctly.
When setting controls for the panorama you need to set them above the margin.
Regards,
Hopki
- Attachments
-
- SplitScreen.zip
- (18.78 KiB) Downloaded 226 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/
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/
Hi Hopki, can the margins be changed dynamically?
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/
Currently only with javascript, but I will look into this. The javascript call in a goto action would be for example:
Code: Select all
javascript:player.setMargins(10,20,30,40);
MfG, Thomas
Good question Tony, and thanks for the reply Thomas. Could I use this to create a button to remove the map and make the pano occupy the full screen or the other way round? Where would I put the javascript call code and with what values please?thomas wrote: ↑Thu May 09, 2019 11:51 amCurrently only with javascript, but I will look into this. The javascript call in a goto action would be for example:with the order left, top, right, bottom.Code: Select all
javascript:player.setMargins(10,20,30,40);
- Hopki
- Gnome
- Posts: 13042
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
The attached project shows and hides a map.
The text box, Map Show and Map Hide has the required actions.
But basically, its showing and hiding a map element and as it shows the margin adjusts to the same width.
Regards,
Hopki
The attached project shows and hides a map.
The text box, Map Show and Map Hide has the required actions.
But basically, its showing and hiding a map element and as it shows the margin adjusts to the same width.
Regards,
Hopki
- Attachments
-
- margins.zip
- (1.47 MiB) Downloaded 241 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/
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/
Hi Hopki,
Perfect
Tony
Perfect
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/
There are many amazing gems of Pano2VR trickery in the forums. Here's an example of the use of the margins https://tonyredhead.s3-ap-southeast-2.a ... index.html
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/
THis is super cool!Tony wrote: ↑Wed Sep 25, 2019 3:06 pmThere are many amazing gems of Pano2VR trickery in the forums. Here's an example of the use of the margins https://tonyredhead.s3-ap-southeast-2.a ... index.html
Tony