Set a margin using percentage.

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Following a customer request, this project opens a map element using percentages but the map should not cover the panorama so we need to use margins.
A margin moves the panorama to one side making room to display a map or even a menu.
This normally uses a fixed pixel size, but the request is to use a percentage.

This project concentrates on the map but the margin could also be used for other things, its main purpose as already said is to move the panorama to one side so that when the map is displayed it is not covering the panorama.
The project is using a map element with a height of 33.33% which is anchored bottom left, so the margin also has to open using 33.33% and resize when the browser is resized.

The attached project does just this.
Let's look at some of the settings you may want to change.

Open the skin and you will see the Map element which is anchored Botton left, it has a width of 100% and a height of 33.33% and is hidden by default.
The skin has a true/false variable "var_map" which is used to show and hide the map element using its visible logic block.

There are also three text boxes acting as buttons to show and hide the map and one that toggles the map.
The show button uses two actions, the first uses a Go To URL action to trigger a javascript call.
The other action sets the variable value to true.

Let's look at the javascript code to show the margin and what you may want to change:

1.png
1.png (48.63 KiB) Viewed 1172 times

In the above screenshot, you can see where you would set your percentage to show margins around the window.
You will also see the bottom edge is set to 33.33, this is 33.33%.

On click, the show button triggers the javascript that opens the margin at 33.33% and sets the variable to show the map element.
The Hide button has a similar action calling javascript that removes the margin and sets the variable back to false so hiding the map.

The Toggle button uses both the show and hide Go To URL actions that trigger the javascript calls but uses an action filter so only the correct action is triggered.
When the variable is false, only the show javascript is triggered.
And when the variable is true, only the hide javascript is triggered.

Regards,
Attachments
margins.zip
(14.21 KiB) Downloaded 92 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/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Thanks so much for posting the project. I love using margins and this just opens a whole new world of possibilities.

I've always regretted not learning Javascript as it can enable so many cool functions within Pano2VR. Pity the old mind isn't as nimble as it once was.

I've have a project I'm just about to deliver that I'm going to use this in straight away.

Update: just edited the Torrens Island Quarantine tour to include the new % margins. https://expedition.photography/TORRENS- ... UARANTINE/

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/
User avatar
Taka
Posts: 51
Joined: Fri May 28, 2021 3:15 pm
Location: Tokyo

Hopki and Tony

Thank you for your assistance always.
Sounds very difficult to understand, but very cool.
I would like to give it a try.

Tony's project inspired my skin design ideas.
Your photos are also very beautiful.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Taka,

Once you see it written out it looks so obvious but without the underlying knowledge creating it is difficult.

Thank you for your kind words, hopefully I can take some time and go back through all the years of photography and put together a bunch of tours.

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/
deedee123
Posts: 285
Joined: Wed May 20, 2020 10:38 am
Location: NL

Hi,
This is indeed interesting, it would be even more elegant if it could have some slide action when it appears.. so it's less a popup effect.
David
Post Reply