compass for virtual tours

[osmica]

compass for virtual tours

by osmica » Mon Nov 05, 2012 8:15 pm

Hello,
I saw a very intersting and usefull function for virtual tours. A compas that show the Cardinal direction. I don`t need to write to much about that. Just look this virtual tour sample on the home page and tell me how you like it
They are using Krpano off course.

www.webonjee.com

I need information if it is possible to add a compas like that in Panotour Pro 1.8 and explanation how to do that. If that can be made as a customization I need just to know who to ask about that.
I am not good in programing, I`m just a amateur photographer that needs this for my real estate business.

I need help to customize my arrows also. Something similar to this virtual tour I gave the link. Can somebody explain me how or give me a link of another topic where that is explained. Thank you!

Toni

[osmica]

by osmica » Mon Nov 05, 2012 8:50 pm

Hey, I found it myself here: http://krpano.com/forum/wbb/index.php?page=Thread&threadID=520&pageNo=1&highlight=compass

But I am not good in programing. Can somebody explain me how to install this compass into my virtual tours? I am using the Panotour Pro 1.8
I need detailed instructions how to do that step by step.

[Destiny]

by Destiny » Mon Nov 05, 2012 9:17 pm

Hi..

I will post up some step-by-step instructions during the week when I get time.. It works fine using ptp 1.8.... but there are some issues I need to work out in the code first to make it easy to add.. Also, it is possible to change/edit parts of the compass too, needle pointer etc..

http://members.westnet.com.au/dps/Compass/virtualtour.html

Destiny..

[osmica]

by osmica » Tue Nov 06, 2012 9:00 am

Thank you very much Destiny!
I expect that with excitement.

[osmica]

by osmica » Tue Nov 06, 2012 9:22 am

I forgoth to tell the version I use and that can be important. I am using Panotour Pro 1.8 for 64bit windows.

I will happy with a regular compass but I will like very much to have the button to switch ON/OFF the compass in the menu. That will need a customization of the manu buttons but doesn`t metter. I want to do it anyway. I want to customize the arrows also. But first of all, I will install the compass

[Destiny]

by Destiny » Tue Nov 06, 2012 10:35 am

Hi..

Well, its quite easy to add the Compass to your Tour and to edit some parts or even create your own Compass...

I have edited the krpano Compass code to its bones which seems to works ok..

Step 1. Copy this code below and past it into your main xml file.

Step 2. Create an 'compassimages' folder.

Step 3. Download the krpano plugins with all the compass contents, and as long as you have purchased the licence it will work when uploaded to a remote location.

Step 4. Copy all of the graphic contents and past it into your 'compassimage' folder.

Step 5. Copy the compass.xml file and past that into your main directory folder with your other xml files.

That's it for this Compass.. If you want your own style Compass, you really need a Vector Compass graphic so you can separate the needle and change colours of the parts.. You can then export to a 24 bit png. You can buy nice Compass graphics from here or make your own.. http://depositphotos.com/5165406/stock-illustration-Compass.-Set.html

One thing you need to be aware when making your own Compass, would be with the width of the needle and bezel. It needs to be an odd number of pixels or the needle will not be centred, same as this Compass actually, which is just a little bit out of centre.. You cannot centre a pixel.. You need to use the middle pixels as the centre, so it needs to have an even count each side, which equates to an odd number of pixels...

Destiny....

<!--************** COMPASS ***************************************************************-->
<events onxmlcomplete="startup();"
onviewchange="rotatecompasses();"
/>

<!-- show info, set heading, create hotpots -->
<action name="startup">
<!-- SET HEADING -->
set(heading, 0);
</action>

<!-- change the rotation of the compass pointer / compass plate image -->
<action name="rotatecompasses">
sub(plugin[compass_pointer].rotate, view.hlookat, heading);
sub(plugin[compass2_plate].rotate, heading, view.hlookat);
</action>

<!-- compass with rotating pointer -->
<plugin name="compass" url="compassimages/compass.png" keep="true" zorder="1" children="false"
align="righttop" x="10" y="10"
scale="1.0" scalechildren="true"
destscale="1.0"
onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
heading="0"
/>

<!-- compass pointer, the rotation will be changed in the "onviewchange" action -->
<plugin name="compass_pointer" url="compassimages/compass_pointer.png" keep="true" handcursor="false"
parent="compass" zorder="1"
align="center"
/>

<!-- compass glass cap (flash only, because there is no blendmode in html5) -->
<plugin name="glass" devices="flash" url="compassimages/glass.jpg" keep="true" enabled="false"
blendmode="screen" alpha="0.5"
parent="compass" zorder="2"
align="center"
/>

<!--************** COMPASS END ***************************************************************-->

[Destiny]

by Destiny » Tue Nov 06, 2012 10:55 am

I changed the needle on this test to ensure it was exactly in the centre… and to show you that you can change it easily..

http://members.westnet.com.au/dps/Compass2/virtualtour.html

Destiny…

[osmica]

by osmica » Tue Nov 06, 2012 11:54 am

I'm stuck at the first step

I know just to create a virtual tour and my web site developers have made me a system to upload the swf file to listings. I am creating Virtual tours as Standard tour, HTML Template - generic - with all data and XML embeded.

Look my screenshot in attachment, please. Can I add the compass in the way it works this way? I am a begginer in this and I must learn from zero. Here are my questions about your instruction:

1) I don`t know what is my "main xml" and where to find it. Can you explain me that?
2) Where I need to create that folder?
3) What licence are you talking about? I have purchased a Panotour Pro 1.8 licence. Is that what are you talking about or I need to buy a Krpano licence separately also...?

When I will understand this, I will able to do that and continue with other steps.
Thank you again for helping me!

Toni

[Destiny]

by Destiny » Tue Nov 06, 2012 12:19 pm

Oh.. Firstly its not a good idea to embed everything.. Tours can end up being very sluggish and also they cannot be viewed on Pads or Mobile Phones etc... You cannot add your Compass plugin without having access to your xml files. Any personalisation of your Tours can only be achieved via having access to the xml and html files.. This is the true power of ptp.. I am assuming that ptp V2 will have the Compass feature but I do not know when it will be available.. If you have recently purchased 1.8, you will be able to update to V2... I will end up having to buy it.. :(

Below is the the file structure I have created; you can see the 'compassimage' folder and as for the licence its part of your 1.8 as I understand it now.. When I first purchased it, I bought them separately..

The krpano download files are at this link.. http://krpano.com/download/
Inside you will see a folder with all the Compass content..

Unless you have access to your xml files there is nothing you can do.. If you create a Tour without embedding the xml files, send me the virtualtour.xml file or what ever you have named it, and I will add the code for you..

Destiny...

[osmica]

by osmica » Tue Nov 06, 2012 12:52 pm

I already download from Krpano and find all that data. Can you tell me how I must that create my virtuals exactly? The easyest way will be that you send me a screenshot like I did before - with settings of Tour build.

Now I have just one swf file created. And I can upload it on my site like any picture, video or other. I don`t know what will be created when I will make it in the way you are talking about. I want really that it works on pads and mobiles and I want to add the compass and customize other stuff in future. And I want it works faster off course, not sluggish - whatever it means I am from Croatia and english in not my native language. Google don`t translate that word. I suppose it means something lile an expression of slow (like a snail). You learned me a new word
Than I will have to ask my web site developers to make different the system of uploding virtual tours to my site. I must first create a virtual like that to understand how to do that.
I know there are instructions on the support page and they will use that.

[osmica]

by osmica » Tue Nov 06, 2012 4:39 pm

Destiny,

I have created a virtual with this settings like in screenshot. I attached my main xml file / or I think is the main xml. Let me know is that OK. Thanx

[osmica]

by osmica » Tue Nov 06, 2012 9:52 pm

I did it !!!! Destiniy you are great. Now I need one more information about this. How to place the right direction of the compas on my virtual tour?

[Destiny]

by Destiny » Wed Nov 07, 2012 9:31 am

Well done.. The xml file I sent you via email was just the same code I posted above... To get the direction.. or heading... you can use the same code shown in red to the direction you want from 0 to 360.. also, to change the angle of the compass, you need to drag the compass graphic into Photoshop etc and rotate it and then save it back with the same file name and as a 24 bit png..

To change the position of your compass, you can change the "righttop" to "lefttop" etc..

I am hoping that ptp V2 has the option to interact with the compass same as the radar.. Also to have a few compass graphic options..

Destiny..

<!--************** COMPASS ***************************************************************-->
<events onxmlcomplete="startup();"
onviewchange="rotatecompasses();"
/>

<!-- show info, set heading, create hotpots -->
<action name="startup">
<!-- SET HEADING -->
set(heading, 0);
</action>


To change the position of the compass.... >>>

<!-- compass with rotating pointer -->
<plugin name="compass" url="compassimages/compass.png" keep="true" zorder="1" children="false"
align="righttop" x="10" y="10"
scale="1.0" scalechildren="true"
destscale="1.0"
onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
heading="0"
/>

[osmica]

by osmica » Fri Nov 23, 2012 6:26 pm

Hello Destiny,
can you help me again, please. There is something else is strange. Without changing the heading, first pano and second pano have not the pointer oriented in the same direction.
With the xml you sent me I can change just the heading of the first pano. How to set change the heading for the second pano? Can I do that?
Thanks
Toni

[Destiny]

by Destiny » Fri Nov 23, 2012 9:45 pm

Hi Toni..

You need to remove the compass code from the main xml and copy it into all of the other xml files and then adjust the pointer direction according to suit the pano direction..

Destiny..

[osmica]

by osmica » Sat Nov 24, 2012 9:28 am

I understand. It would be easy I belive. I am finishing my new web site and when the first virtual tours with compass will be uploaded, I will post a link so you can see them. I apreciate your help very much. Thank you!

There is just another thing that is maybe easy to do, maybe not. I would like to add a button in the menu that will turn on/off the comapass. Do you know how to do that? I posted a link of a virtual tour with that in my first message in this topic. It is not so important to have that, but if it is easy, why not

Toni

[Destiny]

by Destiny » Sat Nov 24, 2012 10:44 am

Hi Toni..

I have tried to turn the compass on and off but so far its not working.. Easy to do with turning hotspots on and off but the compass is different....

I created a button and added this code and changed the naming of the switch with different options but so far its not happening.. ;(

I will post it when its working at this link.. http://members.westnet.com.au/dps/Compass2/virtualtour.html

Destiny..

<!--************** COMPASS ***************************************************************-->
<!-- vignetting style - preload mask, then load real pano -->
<plugin name="mask" url="vignetting.png" width="100%" height="100%" enabled="false" alpha="0" zorder="0" onloaded="tween(alpha,1);" />

<!-- events, show a infotext on start, and call the "onviewchange" action on a view change -->
<events onxmlcomplete="startup();"
onviewchange="rotatecompasses();"
/>

<!-- show info, set heading, create hotpots -->
<action name="startup">
<!-- SET HEADING -->
set(heading, 0);
</action>

<!-- change the rotation of the compass pointer / compass plate image -->
<action name="rotatecompasses">
sub(plugin[compass_pointer].rotate, view.hlookat, heading);
sub(plugin[compass2_plate].rotate, heading, view.hlookat);
</action>

<!-- compass with rotating pointer -->
<plugin name="compass" url="compassimages/compass_iconMine.png" keep="true" zorder="1" children="false"
align="righttop" x="10" y="10"
scale="1.0" scalechildren="true"
destscale="1.0"
onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
heading="0"
/>

<!-- compass pointer, the rotation will be changed in the "onviewchange" action -->
<plugin name="compass_pointer" url="compassimages/compass_icon_needle.png" keep="true" handcursor="false"
parent="compass" zorder="1"
align="center"
/>
<!--************** Destiny COMPASS ON/OFF Button***************************************************************-->
<plugin name="Destiny" align="bottom" crop="0|0|65|65" customColor="true" height="prop" keep="true" onclick="displayCompass();" onout="" onover="" onovercrop="0|65|65|65" url="virtualtourdata/graphics/menu/menu10.png" width="40" x="122" y="10"/>
<action name="displayCompass">
set(plugin[compass].visible,false);
set(plugin[Destiny].onclick,closeCompass();)
</action>
<action name="closeCompass">
set(plugin[compass].visible,true);
set(plugin[Destiny].onclick,displayCompass();)
</action>
<!--************** COMPASS END ***************************************************************-->

[Destiny]

by Destiny » Sat Nov 24, 2012 12:14 pm

Hi.. well, I managed to get the compass to turn off, but now I have to work out how to turn it back on..

I have a conflict of xml code when the compass is gone, the Help doesn't work..

Destiny..

[osmica]

by osmica » Sat Nov 24, 2012 6:59 pm

OMG, it seams I found you something intersting to do

BTW, I like the button you made with green and red light. I hope you succeed to do that. It will be great if will be integrated in PTP 2.
Best regards
Toni

[Destiny]

by Destiny » Sun Nov 25, 2012 3:35 am

Hi Toni..

Its now working fine.. The issue was, I had to hide the compass which is a plugin... but still allow for the scaling and interactivity of it..

http://members.westnet.com.au/dps/Compass2/virtualtour.html

What I need to do now, is allow the button to remain on red for off and green for on.. or even make a button with a red / going through a small compass..

Destiny...

[osmica]

by osmica » Mon Nov 26, 2012 8:51 am

Hi Destiny,
I see. Great job. But there is missing the help menu now. Did you choose a template without help to insert the changes for compass button? Or it is something you need to fix. You told in one of yours messages that you have a conflict of XML code...and help menu don`t work.

[Destiny]

by Destiny » Mon Nov 26, 2012 10:47 am

I just added the help... You can have what ever menu buttons you want... just add them...

Destiny..

[sundust]

by sundust » Thu Feb 14, 2013 9:48 am

Hi Destiny.
I think I have done as you told above. I can see the compass on my panorama. but compass is not moving. What would be the problem?
Thanks

[Destiny]

by Destiny » Thu Feb 14, 2013 9:57 am

Did you add the compass.xml file...?

Destiny...

[sundust]

by sundust » Thu Feb 14, 2013 10:06 am

yes. to the main directory

Last edited by sundust on Thu Feb 14, 2013 10:07 am, edited 1 time in total.