Can I add a "close button (x)" to my map?
Can I also add a "enter fullscreen" button to my map?
adding buttoms to maps
Sure, here's a map with an info button, close button and alternative map button..https://s3-ap-southeast-2.amazonaws.com ... index.html
Do you want the map to fill the current browser window or do you want the whole project to fill the computer screen?Can I also add a "enter fullscreen" button to my map?
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/
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?
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?
Thanks, still a work in progressThanks for replying and it is a really interesting example..
I've attached an svg map iconInitially 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 regard to a fullscreen map image that may be an issue. Check out this ongoing discussion viewtopic.php?f=6&t=13422open the control bar (autohide), call the map, then if the user want, the map can go full screen..
YesI guess it would be an additional step to your current example
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.I also really like the button with the legend about demolish or retain..putting an extra layer to the map
Tony
- Attachments
-
- button_map.svg.zip
- (1.11 KiB) Downloaded 170 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/
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?
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?
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
I have to click the svg button in the skin editor and draw a rectangle
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.
Tony
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.
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/
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?
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?
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/
Please find the requested files attached
- Attachments
-
- elphistone1.p2vr
- (3.89 KiB) Downloaded 132 times
-
- autohide_edgar.ggsk
- (61.57 KiB) Downloaded 131 times
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
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 147 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/
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?
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?
Hi,
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
You just need to create a new openstreet map and then it will show up in the list in the Skin Editor.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?
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 138 times
-
- elphistone1-map-button-v2.ggsk
- (66.14 KiB) Downloaded 147 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/
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?
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?
Hi Edgar,
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.
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
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.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?
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.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???
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.
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.The other one that I do not understand is the parameter, what is the difference between Not(); set(=), etc????
There is no element called show_map, its a variable.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'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/