Next panorama button

Q&A about the latest versions
Post Reply
Dkumar
Posts: 37
Joined: Mon Jan 16, 2017 12:55 pm

Hello guys ,
Been working skin editor for past couple of days and i belive i managed to get some basic koool interactive buttons on my skin....right now im stucked with this .....im trying to create two buttons " << >>"something like this ...by clicking on to the right button the "next panorama " should be loaded and previous panorama when we click on the left button.....this is what im trying to figure out.....im not able to do it ...i know its in there and we can do it but ...not able to figure out how .....any inputs guys ???

Regards
Dharani kumar
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

HI Dkumar,
There are already buttons that do this in Pano2VR 5.x and the components tool box.
Open the skin editor and toolbox:

1.jpg
1.jpg (8.6 KiB) Viewed 7389 times
Note: If the skin editors window is to narrow you will not see it, just make it wider or click the right arrowed button that will appear if menu items are hidden.

To quacking find the components just type in the word NEXT in the Filter:

2.jpg
2.jpg (8.37 KiB) Viewed 7389 times
Then you should see the next and previous components:

3.jpg
3.jpg (11.74 KiB) Viewed 7389 times
Double click the one you want to add to your skin.
You can then replace the buttons with your own or just copy the actions into your own buttons.
Regards,
Hopki
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/
Dkumar
Posts: 37
Joined: Mon Jan 16, 2017 12:55 pm

Thank you so much hopki ....it was right there and i didnt see it...may be i was trying to figure it out on my own ....trying to learn this wonderful skin editor and i often getting banged with some new options and stuff and now after using this next panorama button i realize there is this {$prev} parameter ....where can i find all these short cuts (parameters ) hopki ....the one with {$prev}kinda stuff .....im sure its not there in the documentation part of your website ...i like to learn them all ....is there any full level manual kinda thing apart from documentation in website

one more thing
Im thinking of adding the "Node thumbnail Pro Simplex" to this Next panorama buttons so that when ever user hovers the mouse ...they can see whats the next one they gonna visit ......is it possible to add thumnail preview to the next panorama button ...if then how ??

Regards
Dharani
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Dharani,
The list of place holders can be found on our website, but I guess that you need to know we call them placeholders :wink:
Documents => 5.0 or 5.1 => Reference => List of Placeholders.

Please find attached a project that does this using place holders.

How it works, you will see a cloner, Cloner 1 with a node image, node which is a child of it.
This combo will make the required thumbnails, one for each input image and put then in the images folder.
As the node image element has the ID node, the images in the images folder will have the file names, node_node1.jpg, node_node2.jpg, etc.
The Node image also need to be the size you want your thumbnails.

There is a external loader with the ID ext, this will show the images and by default is hidden.
It is also a child of the container button_silhouette_next_previous and has the action mouse over parent = true, visible true.
So when you mouse over the buttons it causes the external loader to show and hide on mouse exit. The external loader is also the same size and the node image.

Ok now the clever bit: the Pano Next button has the actions:
Mouse Click => Open Next Panorama => Next Node => Default View
Mouse Click => Set Value => images/node_$next.jpg => ext
Mouse Enter => Set Value => images/node_$next.jpg => ext

The Pano Prev button:
Mouse Click => Open Next Panorama => Previous Node => Default View
Mouse Click => Set Value => images/node_$prev.jpg => ext
Mouse Enter => Set Value => images/node_$prev.jpg => ext

So what will happen is as you mouse enter the Next button the mouse over parent will show the external loader and the mouse enter action in the button will set the correct image. Then Mouse click will go to next panorama and on click will update the image to show the next pano thumbnail.

Just remember to deselect visible for Cloner 1 as you don't want to see this in the output.
Regards,
Hopki
Attachments
next.zip
(35.02 KiB) Downloaded 269 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/
IronWagen
Posts: 47
Joined: Mon Nov 30, 2015 4:34 pm

I have had some problems with the back and forward buttons of the skin editor. This may all have been changed with the new updates making my post irrelevant but here goes anyway.

The prev and next features of the skin editor only go back and forth following the order of nodes within Pano2vr. For example if the nodes of your tour are as follows: node0, node1, node2, node3 The back and forth logically follows this order.

The problem is that the nodes can have movement hotspots to multiple nodes, so the moved route could become: node0, node2, node1, node3
So now your travel history should say that you went from node1 to node3, and that node3 is the current node. The back button still follows the node order from the editor though. This means that when you click the back button in node3, it takes you to node2 (and not node1 which it should).

I fixed this issue with external js
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi
in the docs under Navigation.

$back = node ID of the previously visited node - (use in Open Next Panorama’s Expert Mode with {})

Regards,
Hopki
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/
IronWagen
Posts: 47
Joined: Mon Nov 30, 2015 4:34 pm

Thank you for the reply, Hopki!

I tried the {$back} method, but it seems like it does not remember the whole path you took to get to that node. It gets stuck going back between two nodes. If the route is: node1, node3, node4, node2 the back button gets you stuck jumping between node4 and node2. Which is somewhat logical considering that node2 is then the one you are coming from. Maybe this can be avoided with some variable in skin editor or something.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Yes this is just back one to the node you came from.
Its not a history back say like a browser.
Ill add this as a feature request and see what the developers want to do.
Regards,
Hopki
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/
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

oh, yes please. that was my question too. if there is a possibility to travel back the tour as you had gone it. like in a browser.

there is no trick or workaround for that?

best regards,
wiso
IronWagen
Posts: 47
Joined: Mon Nov 30, 2015 4:34 pm

There is a work around. I explained it in detail in another post which I can't find now unfortunately. The general idea is that you use external javascript where you create an array which contains the node ids of your path. Lets name the array nodepath.

You can then push the current node id into the array when the user clicks on a movement hotspot. Add action to movement hs: Go to URL javascript:pushNode(me.hotspot.url); This conveniently pushes the id of the node in the right format example: "{node1}".

So after some traveling within the tour the array would look something like this: ["{node1}","{node8}","{node3}","{node7}"]
In this example we are in node7 and it's place in the array is 3 (count starts from 0). You can keep track of the current array place by creating a variable. Lets call it current. Everytime you push into the array, change the value of current to nodepath.length-1

In the skin editor, make buttons for back and forward and put Go to URL actions on them:
For the forward button:
javascript:getNext();

For the back button:
javascript:getLast();

It should be obvious what happens in these functions. Within getLast(), create logic that opens the last visited node (node3 in this example):
if(current > 0){
current = current-1;
pano.openNext(noderoute[current]);
}

I let you guess how the getNext() works

I hope this helps!
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

thank you for your hint. sounds very good.
in the meantime my client accepted that we dont make this history-back-feature at this time.

i am not very familiar with js but i understand your konzept and think it is very useful also for other problems solving.

thank you,
greatings from vienna,
wiso
duceduc
Posts: 43
Joined: Sun Dec 11, 2016 5:39 pm

Hopki wrote: Wed Jan 25, 2017 9:57 pm Hi Dharani,
The list of place holders can be found on our website, but I guess that you need to know we call them placeholders :wink:
Documents => 5.0 or 5.1 => Reference => List of Placeholders.

Please find attached a project that does this using place holders.

How it works, you will see a cloner, Cloner 1 with a node image, node which is a child of it.
This combo will make the required thumbnails, one for each input image and put then in the images folder.
As the node image element has the ID node, the images in the images folder will have the file names, node_node1.jpg, node_node2.jpg, etc.
The Node image also need to be the size you want your thumbnails.

There is a external loader with the ID ext, this will show the images and by default is hidden.
It is also a child of the container button_silhouette_next_previous and has the action mouse over parent = true, visible true.
So when you mouse over the buttons it causes the external loader to show and hide on mouse exit. The external loader is also the same size and the node image.

Ok now the clever bit: the Pano Next button has the actions:
Mouse Click => Open Next Panorama => Next Node => Default View
Mouse Click => Set Value => images/node_$next.jpg => ext
Mouse Enter => Set Value => images/node_$next.jpg => ext

The Pano Prev button:
Mouse Click => Open Next Panorama => Previous Node => Default View
Mouse Click => Set Value => images/node_$prev.jpg => ext
Mouse Enter => Set Value => images/node_$prev.jpg => ext

So what will happen is as you mouse enter the Next button the mouse over parent will show the external loader and the mouse enter action in the button will set the correct image. Then Mouse click will go to next panorama and on click will update the image to show the next pano thumbnail.

Just remember to deselect visible for Cloner 1 as you don't want to see this in the output.
Regards,
Hopki
Hi Hopki,
I've followed this guide and got my thumbnails showing. I also wish to display the title of the node.
christoph
Gnome
Posts: 108
Joined: Mon Aug 20, 2012 3:01 pm

Hi guys!
With version 6.1beta we now have a skin action for history-back:
Under 'Open Next Panorama' you find 'Go Back One Node'....

Regards,
Christoph
Post Reply