New mookrpano.js (krpano + mootools)

  • ¿like this? 14

    1. a lot (12) 86%
    2. not yes, neither not (1) 7%
    3. don't like it (1) 7%
    4. so so (0) 0%
    5. hate it (0) 0%

    Hi Krpano pals.

    Thanks to Klauss correction of the swfkrpano.js file I was able to write this code, which I hope you find it usefull as much as I think it will be for me and krpano lovers *love*

    You will be able to call for krpano actions from javascript code, receiving same arguments, same order, in some cases you must pass them as strings since they will be understood as javascrip variables if not.

    As I cannot upload javascript files here, you would have to go to MooTools forums thread I wrote to download it:
    http://www.mooforum.net/script-showcas…pano-t3732.html

    Hopefully, I will add a few widgets too, like panoTweet... my idea is that it will make a data node in krpano with tweets from your tweeter account.

    And hopefully will make kinda 360º games for children for museums.

    Thanks for your attention, will be waiting for your comments about.

    Best regards,
    Ciul.

  • Hi,

    Curious... I see you initalizing krpano, and doing calls. All of this can be done in regular JS (in even fewer lines), so what's the extra benefit of mootools? Isn't mootools just a js library much like Jquery? I understand the need for Classes if it's a big feature, like sliders, tabs, accordion menu's which are 100's of lines of code, and you reuse this class. But krpano usually exists only once on a page, and only needs a getter and setter to do stuff.

    In JS it's

    Code
    function krpano() 
    {
    	return document.getElementById("krpanoSWFObject");
    }
    krpano().call("showtext('test')");
    Code
    <script type="text/javascript">
    	var swf = createswf("krpano.swf", "krpanoSWFObject","100%", "400", "0#FFFFFF");
    	swf.addVariable("pano", "krpano/hotspot.xml");
    	swf.setAttribute('xiRedirectUrl', window.location); 
    	swf.addParam("wmode", 	"window");
    	swf.addParam("allowfullscreen", "true");
    	swf.addParam("allowscriptaccess", "always");
    	swf.embed("krpano");				
    </script>

    BTW Vincent rules! And see my signature of a childrens game :D

  • Hi,

    Curious... I see you initalizing krpano, and doing calls. All of this can be done in regular JS (in even fewer lines), so what's the extra benefit of mootools? Isn't mootools just a js library much like Jquery? I understand the need for Classes if it's a big feature, like sliders, tabs, accordion menu's which are 100's of lines of code, and you reuse this class. But krpano usually exists only once on a page, and only needs a getter and setter to do stuff.


    Hi Zephyr, thanks for asking.

    The benefits are that that there's not only the initialization of krpano, since I took the time to make methods for the whole krpano actions that I saw in the documenation, and also added a few custom setters and getters, e.g.

    Methods

    • copy(destination, source)
    • action(actionname,parameters*)
    • delayedcall(delay,actions)
    • swap(variable,valueA*,valueB*,...) -> instead of switch because it's a reserved word
    • push(variable)
    • pop(variable)
    • and so on with the rest of krpano actions, I mean,
    • Math operators krpano actions
    • Number/String formatting krpano actions
    • Animations/Animated value changing krpano actions
    • Dinamyc loading of other panos(tours) krpano actions
    • Viewing animations/Camera control krpano actions
    • Coordinate transformation krpano actions
    • Text visualization krpano actions
    • View/Pano updates krpano actions
    • Dynamic adding or removing of visible elements krpano actions! -/> with these can be done cool stuff.
    • Plugin/Hotspot Actions from krpano actions
    • Debuggin krpano actions


    and all accesible from the Outside the pano(tour), that's the greatest benefit in my opinion; it is like, we had only three methods of the krpano javascript interface to comunicate with krpano, now you have them all, and also, more! (by mixing methods).


    now we have access to krpano from javascript, you can easily talk to a php script, so save data to a DB, or talk to Ruby on Rails, I mean, you got more from more.


    Now it is a matter of finding nice use to this.


    By example, your game is nice but it is quite simple yet, now you could leave calculation to javascript which is faster than flash in doing that, and also having buttons and stuff outside the pano so it doesn't get slow while making lot of things at same time. Then you could make visitors sign in to your game, and then they should have a record of game, have a life meter, an achievements list, a friends list, connection to twitter account, facebook too, all these in a pretty organized DataBase in your host, and this way, you could do nice crazy things.

    Getters

    • getVersion()
    • getXMLVersion()
    • getBuild()
    • getDevice() -/> This returns an object with each device flag (isphone, ispad,isandroid,isflash,ishtml5) as pairs key/value
    • getMousePosition()
    • getKeyCode()
    • getWheelData()
    • getMovingForces()
    • getLookAt()
    • getFullScreen()
    • getWindowSize()
    • getTimerTick()
    • getIdleTime()
    • getRandom() -/> This is kind be useless since can be donde by javascript itself, anyway there it is.
    • getMultiResLevel()
    • getXMLUrl()
    • getXMLContent()
    • getScene()
    • getBGColor()
    • getLastError()
    • and more coming...

    Setters

    • setMovingForces(hlookat_moveforce, vlookat_moveforce, fov_moveforce)
    • setPlugin: function(pluginname, varname, value)
    • setHotspot: function(hotspotname, varname, value)
    • and more coming...

    Want to hear more? -/> I plann making like widgets, like panoTweet is in first aim, it is serving tweets inside panos(tours) as a data node or any other way I find in the path. And, making these methods and widgets and stuff, the easiest way to use possible so I'm opened to suggestions and petitions from krpano and javascript community.

    Note: please check always for last downloable files I uploaded

    By the way...Great game! I enjoyed it *g* hope I will be able to do something like that soon.
    And also thanks for posting your opinions, I appreaciate that *squint*

  • Hi there.

    I am writing more classes, the Plugin and Hotspot classes for now, and after these will be coming the soundInterface class, HTML class and else...these will be just javascript extensions of what already exist and has to be written on xml files for krpano.

    The difference will be that would be able to create them on the fly with Javascript.

    And so... by example, you could have a database with plugins and hotspots, then a php script feed a tour dinamically (on the fly) by injecting javascript code to a site.

    Best regards, Ciul.

  • Hi pals.


    The Plugin class is almost done.


    Workarounds I had to go for:


    1 - The "call" krpano javascript interface function isn't ready right away on DomReady, neither on Load (if ur site is kinda simple like just having the pano) so when I tried to call a method from any class I've done it threw an error saying function not defined.


    How it was solved:


    I added a listener to this function and then bound it with a domReady event for the MooKrpano class (don't worry about resources, the listener is stopped right away after the javascript interface is ready).


    2 - Since plugins and other krpano stuff will be made on the fly inside the domReady event from MooKrpano class, then these instances wouldn't be accesible from outside it's scope...but what if I wanted to call plugins actions (onclick, onup, onover, onhover and so on...) from outside this scope, like when someone pushes a button of the web page, maybe some fancy interface outside the pano (tour) itself. Or what if I want that the plugin fires some javascript function...the problem is that krpano js action calls a function on the global scope, not inside a domReady scope, neither a load scope...only global scope. Now, the problem is no more :D


    How it was solved:


    An object was created to keep references for all the MooKrpano, Plugin, Hotspots and incomingClasses instances.


    By example, they will be accesible this way:


    instances.tours['panoId'] for panos
    instances.plugins['pluginName'] for plugins
    instances.hotspots['hotspotName'] for hotspots
    and so on... for incoming classes


    Now, you will be able to do something like:


    var krpano = new MooKrpano('panoContent',
    {
    swf: 'mypanoswffile.swf'
    });

    krpano.addEvent('domReady', function() {


    // Create a plugin on the fly

    var plugin = new Plugin(krpano, {
    name: 'myUncleImage',
    url: '%SWFPATH%/data/images/uncle.jpg',
    align: 'leftbottom',
    x: 10,
    y: 10
    });


    plugin.addEvent('onClick', function() {
    this.hide(); //The plugin will dissappear using tween transition.
    });



    });


    or from a Button of the site (you probably will have this outside MooKrpano domReady event scope)



    instances.plugins['myUncleImage'].addEvent('onClick', function() {
    this.hide();
    });

    Preferably addEvents inside the MooKrpano domReady event, on my tests, it takes between 120 and 130 ms to krpano javascript interface to be ready, but this may vary due to connection traffic and speed.

    Iwill be uploading files to mootools forums when I got a script more mature, still writing hotspot class.

    Edited 2 times, last by ciul (December 8, 2010 at 5:28 PM).

  • Hi Krpano pals.

    Plugin and Hotspot Classes written and working, with custom methods I've added to do some things even easier.

    Now I am writing the PolygonalHotspot Class, which is basically a hotspot but well, as you know it has it's kinda different.
    But I will be adding to this custom methods to add or remove points dynamically, great right?

    I also already did a Twitter Request Class so panoTweet widget being written is just matter of time, also thinking in a panoFlickr widget, so you can make plugins or hotspots from people flickr's images.

    I've also made some tests and...it is totally possible to display a pano (tour) on Facebook...but this will take more more time for code to mature.

    I'd wish some of you get interested in my project, to make krpano talk to other API's there are on internet.

    Donations?...I won't get angry if you wish to *tongue*

    For now I'd be happy if you share your opinions about this...if you like me updating it to krpano forums or if you shall prefer me to keep it for myself and shut up or ...just say what you think, right.

    Best regards,
    Ciul.

  • Hi Krpano pals.


    Ok, I added the Krpano events node as MooTools events too, I was forgetting to do that and I just realized it yesterday.


    The PolygonalHotspot class is being written...


    The flikr API's are more complex than Twitter but hey, that won't stop me.


    I'm also searching my own way to define a "draggable" property for plugins and hotspots, like, to let users drag hotspots.


    And that's things I'm coding for now.


    Best regards,
    Ciul.

  • Ciul I have no idea what you are doing here but it seems like it might be good. Krpano is hard enough to learn on its own it seems like it might be even harder to learn to interface with it using another type of technology. I am interested in what is going on here but it seems a little over my head.

  • Ciul I have no idea what you are doing here but it seems like it might be good. Krpano is hard enough to learn on its own it seems like it might be even harder to learn to interface with it using another type of technology. I am interested in what is going on here but it seems a little over my head.

    Oh my dear friends, I am taking krpano out of its pretty box and get him friends all around other web applications API's, it is a huge think if you think so.


    Think just a minute about it:


    With Twitter it could be easily be made, a web site where you cand display your tweets in a 360º fashion, usefull or note it would be fancy.


    With FLickr it could be done a 360º image gallery from flickr users, or we just could use PHP to have an uploader of images and then people will be able to make their own 360º image galleries.
    An user could upload a picture of himself/herself and then appearing at some remote place on the earth (beachs at Miami) trhough a pano.


    With Facebook, have you seing a pano on Facebook?, I haven't seen one of others persons related to 360º stuff yet, not in my country at least; well, I displayed a pano of the zoo near where I live I did, on Facebook, a shame I had to delete it coz they didn't want to appear on Facebook (I don't know why but anyway) but they threteaned me to demand me If I didn't do it. And men I don't have too much money, I've just get graduated... so I pass.


    I made another script to use GoogleMaps Javascript API easily than writing it directly, and YES, you can use both scripts to have the best from both worlds. By one side you have all the features possible with GoogleMaps and by the other you have all the Krpano features. I don't know but I see lot of people wishing to have fancy pretty maps related to their panos, I've done it, and it isn't hard at all.


    with...I don't know, mention some other API on the Internet...if it has someway to talk with it, JSON, XML, PHP, AJAX requests or other, it can be done.


    I am transfering the whole krpano features to be able to be done DYNAMICALLY with Javascript code.


    And no it won't be hard doing it, I am trying it to be as if you were writing our loved XML files, the much similar possible, just remember that Krpano javscript interface has only three functions, I've had to workaround with only these three and give you the whole of Krpano features as much as my fingers can write.


    I am really excited about what I am doing, a shame not many others accompany me.


    Anyway...thanks for you reply VN2009, I really appreciate it.


    Best regards,
    Ciuls.


    Greetings from Colombia.

  • Ciul,

    I am with VN2009. Your work looks great but it is so far over my head that I haven't commented until now. I hope to try it out soon provided I can figure out how to implement it.


    Jarred

  • Ciul,

    *thumbsup*

    Tying external web programming environments with KRPano is a wonderful thing, takes a 360 to new opportunities, endless really.

    I'm quite interested in tying databases with 360's, both creating dynamic 360 environments from information and adding to the information store from the viewers/users actions. Opening new doors in all directions is an understatement to say the least of what I think your working on.

    And don't be put off by perhaps a smaller response here than you expected. You must understand that the vast majority of KRPano users are photographers first, and perhaps only. I would suspect that most users don't really even want to edit XML, much less Java or Flash or Action Script or PHP, or,,,etc.

    I'm currently working on some rich media concept proposals that hopefully will move forward perhaps in the spring time - the U.S. market in general for creatives is not very active this time of year. Soon.

    Keep working. *thumbup*

    Best Regards,

    Robert

  • Hi pals.

    Thanks to Klauss help and to a request from rbudnikas (Robert). MooKrpano will be working with KrpanoJs viewer, so it will be compatible with mobile devices as well for Desktop.

    That's a good new I know; the bad new is that I will have to rewrite the whole classes *wacko* so there will be smaller classes for mobile devices and for desktop there will be bigger classes extending from the smaller ones, since desktop supports all the krpano features and mobile devices doesn't.

    ...it will take more time time time *cry* but I think it will worth it, right? *squint*

    Thanks for the answers.

    Best regards,
    Ciul.

  • Cuil keep up the good work. My boss actually asked me last week if it were possible to put panos into a SQL database. Your efforts may make that possible.

    Thanks for the support.

    You may mention your boss to contribute with donations *g* , it could help me dedicate more time to program *squint*
    notice that I'm sharing my scripts for everyone, I will be releasing them when mature (now that I have to rewrite them, it will take a little more time)

    Anyway, thanks everyone and Klauss for answering my questions.

    Best regards,
    Ciul.

  • Hi ciul,

    This is a great project and cant wait to see how it progresses. I would be happy to donate to help your efforts. Sorry for slow feedback looking forward to seeing some great examples - I have been busy funny enough working on jquery/krpano, so this is very very interesting....

    Best wishes from London,

    tom

Participate now!

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