360 cities virtual tour..how to do something like it.

  • hello everybody!

    I've seen this before and quite it find neat that there is a map overlay in google maps and there is a sliding menu.

    http://www.centronitra.sk/svk/uvod/virtualna_prehliadka/

    I'm about to create a mall virtual tour and I would like to implement something like this. I'm quite familiar with google maps and I understand most parts like
    -how to put the overlay
    -how to open krpano in a thickbox or similar box
    -how to put markers

    what I dont know how to do is to make that sliding box. The closest I got is this

    http://www.jordivila.net/jquery-google-maps.html

    I'm still going to study it but its a lead. Anyone here implemented something like this before? any tips, tricks, hints will be appreciated.

    Thanks,
    Milo

  • Hi Milo *smile* ,

    what I dont know how to do is to make that sliding box.

    I am playing about this, trying to get a way to do only with Krpano stuffs...
    Here is the code that I got at this moment:


    This demonstrate that it can be done with Krpano only...
    Only the "drag/slide" cursor seems to need be done outside of Krpano.... Surely in Flash... Perhaps this way: Creating A Custom Cursor Using AS3
    Perhaps KLAUS could implement a new feature to give the possibility to customise the arrow cursor when onover a plugin *love* ....

    Hope this can help and I am waiting to see your resulting code *wink* ...

    SAlut.

    Edited once, last by michel (June 15, 2010 at 1:36 PM).

  • Hi Milo,

    There is a big mistake in the code above *wacko* ... If you try to drag and up quickly you will notice that the area.x does not match with the plugin.with...
    After some more scratching the head, I realized that the problem was the do_percent action was called in the wrong place...
    So, I changed the code like this:


    Now, it seems to work correctly... Let me know *smile* ...

    SAlut.

  • Hi VN2009,

    At least as far as my concerns, I am not the expert you think I am .... Only an amateur *wink* ..
    Pinsane's another thing *thumbsup* ...
    Anyway, thank you for kind words *thumbup* ...

    Hi Milo,
    The code above has many problems *sad* ... Mainly due to how pixel values are rounded from the percent values .
    For example, let say that the stagewidth is 1024, if the map width is 30% and the area width is 70%, the pixel value for the map width would be 307 and for the stagewidth 716...
    30% + 70% = 100% so 1024 but
    307 + 716 = 1023 !!! so 1 lost pixel !!!
    The above goes incremented when resizing and changing the area and map width.... Just tries many times resizing the browser and dragging the tab to see it... the pixels lost will be noticeable in the right with a black hole that goes incrementing...

    Another problem is that the map width can reach a value of 0 pixels when resizing the window in a short width value... try it... the map width goes suddenly inside the area...

    Another problem is that, when dragging near the left side, the drag tab seems to not become draggable... But it is not a true problem.... (after a lot of scratching head *g* ) It is due to the "krpano.com" logo that catchs the mouse and makes the drag tab becomes unreachable...

    So, the code needs some improvement *g* *g* *tongue* !!!! Sure, there is a way to do .... If I can reach a working code I will post it...

    SAlut.

  • Hi Milo,

    Quote

    but based on vn2009s reaction seems like good code...

    I must admit that I misunderstood the response of VN2009 *huh* ...
    edited: *g* *g* *g* now I understand what you mean about vn2009 reaction *smile* ... At first I was thinking it was about his first answer *rolleyes* ... Many times it costs me a lot to get the meaning of a phrase in English *wink* ... Sorry VN2009 *squint* ...

    One note: I am pretty sure that the example you gave from 360cities.net it is all made fully with Krpano.... Just try to right-click inside the slider region and you will notice that it is inside Krpano...

    About my not working code above... I think I have reached a code that works pretty well...

    As I said before, only the "drag/slide" cursor seems to need be done outside of Krpano.... Surely in Flash... Perhaps this way: Creating A Custom Cursor Using AS3
    Perhaps KLAUS could implement a new feature to give the possibility to customise the arrow cursor when onover a plugin *love* ....

    At least, the dragging tab function seems to work... Let me know *smile* ...

    SAlut.

    Edited once, last by michel (June 17, 2010 at 8:06 PM).

  • Hi,

    First, I have near zero idea about AS3 *thumbdown* ...

    About the "drag/slide" cursor, I have tried this code:


    It near works but with problems... My custom "drag/slide" cursor appears but flashing with the default arrow *sad* ... I am out of ideas ... Some one can help here? Zephyr *thumbsup* ?

    SAlut.

  • I don't know what you exaclty want, but I made a slider plugin on which you can stick your own action to it.

    I can't attach the fla in the zip (would make it too big to attach :S) But basicly it's this script + you add the slider component to the library

    This creates a horizontal/vertical slider that goes from 0 - 100 in steps of 10. You then pass those values to the action doSomething. You can use those values for whatever function you wish (alter hfov, details or whatever you put in the action, you probally need some code to zoom in on googlemaps. I don't know the zoomfunction name of googlemaps).

    the as code:

  • Hi,

    i was wondering if we are talking about the thing at top (first post by Milo first link) the blue things? or about the zoom slider...

    or something else..

    Zephyr? could we use that 1-100 thing to built a personal loader? like a beer glass that fills up slowly *wink*

    Cheers

    Tuur *thumbsup*

  • No sorry,

    the sliders is ment to be used as a way to input stuff to krpano. Like slide for better details or quality or slide to zoom, or slide to zoom the googlemaps etc.

  • Hi Zephyr *smile* ,

    Thank you very much for your code above *thumbup* ... I have to admit that I have some dificulties to understand *g* ... I particaly like the thing about how to pass variables values from the xml to the swf plugin... Have to study that *rolleyes* ...

    Quote

    I don't know what you exaclty want, but I made a slider plugin on which you can stick your own action to it.

    At this moment I can not test your code ... But I have the impression that this aSlider:Slider = new Slider(); thing is not really what I am (and Milo) looking for... It is more a try to substitute the default flash arrow when the mouse is onover a plugin by a customized one (as a slider/drag arrow)... Have a look at the first post from Milo ... and look at the 360cities.com... You will see that the pano has 2 part, a google map and the pano separated by a dragable region... this is what I try to do... I already have the code to do the dragable region but I do not know how to do the custom cursor when onover this dragable region...

    Anyway, Zephyr, thank you very much to share this code *smile* ... A lot of things to learn inside it *whistling* ...

    It would be great if such custom onover cursor could be set direct from xml ... Perhaps a new feature for KLAUS *love* ...

    SAlut.

  • what you could do is make a 20x20 swf movie that listens to the stage MouseEvent.MOUSE_MOVE and MOUSE_PRESS

    onover the plugin -> mouseplugin.hidemouse() -> mouseplugin.x/y = mousecursor.x/y -> showgrabbyhand

    I dont have the time to create this plugin now (maybe after the weekend) but you should look at the mousefollow plugin of klaus. which basicly alsoo listens to what happens to the mouse on the stage. but instead of listening to where the mouse is and alter the movevectorx, you just listen (or execute a function) when the mouse is over the plugin. when that happens, you hide the mouse with Mouse.Hide().and use the startdrag function you noted there.

    http://asgamer.com/2009/quick-tip…owing-the-mouse
    just remember that if you want the mouse have click/drag etc actions you need to add

    myCursor.mouseEnabled = false;
    myCursor.mouseChildren = false;

    where myCursor is your custom cursor movieclip

  • Hi Milo,

    *wacko* I think I totally misunderstood your request *huh* (the post from Tuur has made that I realize it).... You are talking about the three boxes on top of the google map, right ?
    So, sorry, I had thought it was about the draggable google map box inside Krpano *unsure* , all the above is refering to this *whistling* ...

    At least, I have learned some things... I hope it can be useful anyway...

    SAlut.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!