Garden Gnome Software

Please find attached map pin markertemplate components to go with the Simplex and Silhouette buttons sets


To add to Pano2VR just download and double click, you are asked which category to add them to, the default is User-Defined.
The instructions for use are in the components but I will also list them here.
The following is assuming the components have already been added to Pano2VR.

• Add User Data Tile and set North in each pano of your Pro project
• Open the skin editor and add your map or floor plan png file
• Add the component to the skin
• Select the map and then drag in the first node from the tour browser (Mac users may want to detach the tour browser to stop it hiding)
• Select the map again and drag in the second node from the tour browser, you need to select the map each time
• Set position of the radar element the same as the map so it is in the top left corner
• Make the radar element a child of the map making sure it is on top of the node markers in the skin tree, so the first child element of the map
* Publish out and you should see the map pins with the active location having the red dot pointing to the direction of view

You can have multiple maps/floor plans you just need to make sure when you change maps you also activate the first node of the map so the radar element opens in the correct location.

Please see attached project
The project has two png map files for ground floor and first floor, I'm just using the park map but each has different locations, the ground floor has three locations and the first floor has two.

The key to using multiple maps is tags. Please see Adding Tags and Using Tags in the skin editor videos.

The floor selection text boxes change colours using the logic block and tags. The relevant map png shows and hides using tags.
Regards,
Hopki

Making the above project responsive.
The follow will change size of the map depending on player width.
To be clear if the project is in an iFrame, 640 x 480 then that is the player width and unless you make the iFrame responsive it will always be this size. So not much point trying to make it responsive unless you want things to get bigger in fullscreen.
If you open the project in its own HTML page or you do have a responsive frame of div then the player width will change depending on browser size/screen size of the device.

How this is going to work is I am going to change the scale of the container, map.
As it changes scale you want it to scale from the top right.


As the map is anchored top right you will always want it in this position so you need to set the scaling centre to top right as well.
If you had the map anchored bottom left then the scaling centre would also be set bottom left also.

Now you need to set the logic that will scale the map container.


In the above when the window is less than or equal to 1024px and more than 480 the map container will scale down to 0.8.
When the player width is less than or equal to 480px then it scales down to 0.5.

Regards,
Hopki

I tried to insert the values but they were not accepted.

Hi Harald,
I can not reproduce this issue, for me you can adjust the values. That said why do you have the other logic block?
Anyway I have attached a project that works ok, just open it up and adjust the values, does it work.
Regards,
Hopki

Hopki, do you have an example of a map which is the same size in every platform? Did you see my examples with the URLs?
Your responsive map does not work.

Best regards

Harald

Hi Harald,
Nothing wrong with the resizing, but don't forget it is looking at Player Width, the actual viewable area so not the browser window including address bar etc. Also make sure the browsers are all set to have no Zoom.

Also you have stated you are testing with other Local servers, I would upload to a host provider and the look at how Pano2VR displays the pano compared to the other software.

In the PM I said use our package player, it will be interesting to see how this compares to the other local server software.


The operation field only has content when you add more than one condition in an expression, please see this document.

The operation will be And or Or.
Regards,
Hopki

Thank you, Hopki, your hint regarding browser-zoom was the key. I had set the browswer zoom in Chrome unintentionally to 150 %.

Comparison between local and web-based views:
On my IOS-Tablet the map is clipped at the right side.

Best regards

Harald

Hi Harald,
In the map image make sure you have not got a logic block active for size or scale with a screen width set.
This is the only thing IO can think of why it would clip on an iPad.
Regards,
Hopki