adding buttoms to maps

Q&A about the latest versions
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Can I add a "close button (x)" to my map?

Can I also add a "enter fullscreen" button to my map?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

edgar_ali wrote: Wed Jan 23, 2019 1:03 am Can I add a "close button (x)" to my map?
Sure, here's a map with an info button, close button and alternative map button..https://s3-ap-southeast-2.amazonaws.com ... index.html
Can I also add a "enter fullscreen" button to my map?
Do you want the map to fill the current browser window or do you want the whole project to fill the computer screen?

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
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks for replying and it is a really interesting example...

Initially what I wanted to do is exactly what you got in your example, having a control bar with a map button, however when I started building the skin I did not find a map button in the component toolbox (skin editor), so what I did was that I included the map element into the control bar, and whenever the control bar hides, the map hides as well...However I would like to have a button in the control bar to show or hide the map..exactly as it is in your example...

In response to your question, I would like to have the project to fill the computer screen and that is why I was asking about the fullscreen button for the map..

I want the control bar to have a button that show or hide the map, then when the map is shown (as in your example), within the map there is a enter fullscreen, so the map will cover the screen, and then with the close button, i leave the full screen mode...


so i guess the process is:

open the control bar (autohide), call the map, then if the user want, the map can go full screen..

I guess it would be an additional step to your current example

I also really like the button with the legend about demolish or retain..putting an extra layer to the map

How can I achieve all the aforementioned?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Thanks for replying and it is a really interesting example..
Thanks, still a work in progress
Initially what I wanted to do is exactly what you got in your example, having a control bar with a map button, however when I started building the skin I did not find a map button in the component toolbox (skin editor), so what I did was that I included the map element into the control bar, and whenever the control bar hides, the map hides as well...However I would like to have a button in the control bar to show or hide the map..exactly as it is in your example...
I've attached an svg map icon
open the control bar (autohide), call the map, then if the user want, the map can go full screen..
In regard to a fullscreen map image that may be an issue. Check out this ongoing discussion viewtopic.php?f=6&t=13422
I guess it would be an additional step to your current example
Yes
I also really like the button with the legend about demolish or retain..putting an extra layer to the map
I'm using two map components on top of each other, the overlay is hidden and shown when the button is clicked. The node icons and radar stay on the top level.

Tony
Attachments
button_map.svg.zip
(1.11 KiB) Downloaded 165 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
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks for replying...

That document that you attached, is it for archiving in the user-define section of the components toolbox?, so then I can use it as a button/function?

Where do I insert this file?

Also in the zip file there is a SVG document (Button_map) and a folder _MACOSX which contain another SVF file with the same name ..so i'm guessing that the file out of the _MACOSX is for windows and the other is for MAC, right?
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

I think I've just figured out how to insert the SVG file into the skin...

I have to click the svg button in the skin editor and draw a rectangle
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Just drag and drop an svg image onto the canvas.

Alternatively click on the SVG icon in the menu, click once in the canvas to open a window to browse your computer for the image, select image, select open and the SVG is added to the screen.

domains9.jpg
domains9.jpg (904.32 KiB) Viewed 4368 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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

I inserted the SVG file into the canvas, then I dragged the SVG item into the container for the control, which is inside the container for hide_elements.

in the SVG object I included the following information in the actions: Source: Pressed; Action: Zoom Out; Target Map 1

Then I saved and created the output...In the output I notice that the map icon does hide together with the controls however it it not included in the same shaded area as the other controls...

I had Map 1 in the skin...then I deleted all the element related to this map...however when I click on the map icon, map 1 does not show in the tour, even though I populated the aforemention actions ..

What can I do here?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Post your skin and project file to the thread and I'll take a look at it.
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
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Please find the requested files attached
Attachments
elphistone1.p2vr
(3.89 KiB) Downloaded 127 times
autohide_edgar.ggsk
(61.57 KiB) Downloaded 126 times
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Edgar,

Okay I've created a skin that does some of what you want, no fullscreen yet :(

Here's a sample output https://s3-ap-southeast-2.amazonaws.com ... index.html

What I've done.

1. Created a new Variable called 'show_map' with a Type of True/False and Init Value is set to 'False'. This hides the Map1 and the map-control container.
2. Created a new Map Element called Map1. Appearance Visible is set to off and created a logic block that shows the element when the Variable 'show_map' is true. Position is centered on the canvas horizontally and vertically, anchored to the center, and has a size of 70x60%
3. Added an action to the map-show SVG button in the controller container within the hide_elements container that sets the Variable 'show_map' to True
4. Copied the map-show SVG button and called it 'Map-Show-Hide' and gave it an Action to toggle the True/False of the variable 'show_map"
5. Added two buttons, zoomout and zoomin, to Zoom In and Zoom Out of the map
6. Created a container map-controls around the zoomout/zoomin/Map-Show-Hide elements.
7. The container, map-controls, appearance Visible is set to off and the element has a logic block that shows the element when the Variable 'show_map' is true.

So when you go to the node you see the menu and the map button, if no action takes place the menu and the map button are hidden.

If however the map button is clicked on three things happen;

a. the variable 'show_map' is set to true
b. the Map1 becomes visible
c. the map-controls container becomes visible

If while the user is looking at the map the menu is hidden the map buttons will still be visible.

If the menu is hidden and the user clicks to hide the map the map buttons will also be hidden.

Note: you will have to add your Google API Key for the Map1 to work properly

I've attached a full exported project, the pano2VR project file and the updated skin in the attached zip file

regards,

Tony
Attachments
edgar-map-button.zip
(1.31 MiB) 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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks a lot for creating that skin....

I'm trying to understand it now...but in the meantime I've got a question, I don't want to use google maps..I was using openstreet maps...

In my previous skin I was using the world map (openstreet map)....however when I try to edit this map in the skin, the dropdown list available in the skin that you provided only have google maps...Can I use openstreet maps instead?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
In my previous skin I was using the world map (openstreet map)....however when I try to edit this map in the skin, the dropdown list available in the skin that you provided only have google maps...Can I use openstreet maps instead?
You just need to create a new openstreet map and then it will show up in the list in the Skin Editor.

I've updated the project and skin to include an openstreet map, I've also changed the zoomin and out buttons to use mouseclick instead of pressed. Hopki suggested it to get a better zoom experience and it works really well.

Just drop these two in to the same folder as the old project and skin and output the project

cheers,

Tony
Attachments
elphistone1-map-button-v2.p2vr
(4.22 KiB) Downloaded 132 times
elphistone1-map-button-v2.ggsk
(66.14 KiB) Downloaded 142 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
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks for doing that...I'm still figuring out how you did it..

If you don't mind I've got a couple of questions:

The element zoomout, the ID has got a warning stating that "This ID is already assigned to another element, click the warning icon to generate a unique ID" .....Is that normal?..should I ignore that warning?

Similar situation happens with the following elements: tt_zoomout, tt_zoomout_white, zoomin.

interestingly the following elements do no have a warning: tt_zoomin; tt_zoomin_white

In the element Map-Show-Hide, the actions are: Source: Mouse Click; Action: Set Variable Value; Parameters: Not( ); Target: show_map

Just for my understanding: in the drop down list for the actions you have several actions, among one of then is "maps"...what does is means Set variable value" and what would have happened if I had selected Maps???

The other one that I do not understand is the parameter, what is the difference between Not(); set(=), etc????

In your previous reply you said that you created a new variable called "show_map", which I guess is the target within the action of the Map-show-hide element..in the skin, I cannot see any element call show_map...do you create that variable somewhere else...well I saw that there is an element of the skin called map-show and within the actions, the target is show_map..is that related??

I also have realised two things:
If I disable the radar in the map1 (element) then the tour does not load
the buttons zoom in and zoom out are not visible when the browser screen is small..


I also was wondering..lets supposed I create another project, a different one, but I want to use the same skin...is pano2vr going to create a map (to link the panoramas) with a different name to map1..so then the skin is not gonna work?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Edgar,
The element zoomout, the ID has got a warning stating that "This ID is already assigned to another element, click the warning icon to generate a unique ID" .....Is that normal?..should I ignore that warning?
It will only become an issue if you are referencing an element in an action and there is more than one element with the same ID. It's good practice to keep them all unique so you could change the ID to zoomin_map and zoomout_map. This will identify them as being different from the zoomin/zoomout buttons in the controller container.
In the element Map-Show-Hide, the actions are: Source: Mouse Click; Action: Set Variable Value; Parameters: Not( ); Target: show_map

Just for my understanding: in the drop down list for the actions you have several actions, among one of then is "maps"...what does is means Set variable value" and what would have happened if I had selected Maps???
The element 'Map1' has its Appearance/Visibility unchecked, this makes it invisible. In the canvas I've created a variable called 'show_map' and it's default setting is False. The element 'Map1' also has a logic block that says if the Variable '*show_map' is true then it will be visible.

When you click on the map button the mouseclick action sets the variable 'show_map' to opposite of what it currently is. So if the map hasn't been opened the variable 'show_map' is False, the mouseclick changes it to True. The logic block says if the variable 'show_map' is True, then the visibility of the element 'Map1' is also true and the map is visible.

The map buttons and zoom buttons also use the same logic block and when the variable is True, they are visible.

p2vr-classes0.jpg
p2vr-classes0.jpg (568.11 KiB) Viewed 4320 times

The other one that I do not understand is the parameter, what is the difference between Not(); set(=), etc????
Not(¬) means change the variable value to the opposite of what it currently is ie. if the variable is false it will set it to true, if the variable is true set it to false. We use it in this case because there are two buttons that affect the variable setting. The map-show button in the controller and the Map-Show-Hide button in the map-controls container. There is a list of the operation somewhere I'll find it and point you to it.
In your previous reply you said that you created a new variable called "show_map", which I guess is the target within the action of the Map-show-hide element..in the skin, I cannot see any element call show_map...do you create that variable somewhere else...well I saw that there is an element of the skin called map-show and within the actions, the target is show_map..is that related??
There is no element called show_map, its a variable.

p2vr-classes1.jpg
p2vr-classes1.jpg (847.21 KiB) Viewed 4320 times

I'd recommend you take some time to go through the excellent tutorial videos especially the ones relating to skin editing as you will find a wealth of information in there which will give you a better understanding of the way elements, logic blocks and variables allow you to create unique UI's within Pano2VR.

regards,

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