New mookrpano.js (krpano + mootools)

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

1

Tuesday, November 30th 2010, 8:47pm

¿like this?

A total of 14 Votes have been submitted.

86%

a lot (12)

7%

not yes, neither not (1)

7%

don't like it (1)

0%

so so

0%

hate it

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

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-showcase-…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.

Go to the top of the page

bulp

Intermediate

Posts: 378

Location: Malaysia

2

Wednesday, December 1st 2010, 2:27am

GREAT CIUL!!!..

thank you for the awesome code.. will try it later...

regards

bulp

Go to the top of the page

Zephyr

Professional

Posts: 965

Location: Netherlands

Occupation: Web developer

3

Wednesday, December 1st 2010, 9:34am

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

	Source code
1 2 3 4 5	function krpano() { return document.getElementById("krpanoSWFObject"); } krpano().call("showtext('test')");

Source 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

3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

4

Wednesday, December 1st 2010, 1:31pm

answer to zephyr

Quoted from "Zephyr"

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*

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

5

Monday, December 6th 2010, 8:42pm

New Updates

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.

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

6

Wednesday, December 8th 2010, 5:15pm

Done until now

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.

This post has been edited 2 times, last edit by "ciul" (Dec 8th 2010, 5:28pm)

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

7

Thursday, December 9th 2010, 6:07am

PolygonalHotspot Class incoming

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.

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

8

Friday, December 10th 2010, 12:09pm

more events

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.

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

9

Friday, December 10th 2010, 7:08pm

Last news

Hi pals.

Ok, Polygonal Hotspot Class DONE!

Now it's the time for interfacing plugins classes like sound, video, html data, maybe combobox although I don't like how comboboxes look too much but anyway...

Best regards,
Ciul

Go to the top of the page

VN2009

Professional

Posts: 1,334

Location: Duluth MN

10

Friday, December 10th 2010, 7:53pm

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.

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

11

Friday, December 10th 2010, 9:45pm

my dear friend :D

Quoted from "VN2009"

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.

Go to the top of the page

Jarredja

Professional

Posts: 1,044

Location: TX

12

Friday, December 10th 2010, 11:13pm

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

Go to the top of the page

image360

Intermediate

Posts: 177

Location: Austin, TX and Chicago, IL

Occupation: Photographer

13

Saturday, December 11th 2010, 2:27am

Keep Going, extremely interesting work!

Ciul,

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

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

14

Saturday, December 11th 2010, 4:53pm

a small issue

Hi Pals.

I renamed the MooKrpano class to simple Pano, it is to avoid confusion between the library itself and the classes that it is compound from.

Best regards,
Ciul

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

15

Sunday, December 12th 2010, 6:18pm

a big change incoming

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.

Go to the top of the page

VN2009

Professional

Posts: 1,334

Location: Duluth MN

16

Sunday, December 12th 2010, 11:51pm

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.

Go to the top of the page

ciul

Trainee

Posts: 142

Location: Colombia

Occupation: Creative developer guy

17

Monday, December 13th 2010, 3:32am

Tell your boss to hire me :P

Quoted from "VN2009"

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.

Go to the top of the page

Zephyr

Professional

Posts: 965

Location: Netherlands

Occupation: Web developer

18

Monday, December 13th 2010, 8:56am

Keep up the good work :) Maybe one day I'll implement this in my cms :)

3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

Go to the top of the page

tommo77funk

Trainee

Posts: 143

Location: London

Occupation: Photographer

19

Monday, December 13th 2010, 2:25pm

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