Wrapping the DOM and other javascript libraries

[Brad Miller]

With a bit of prompting from others, I've been thinking about how to make the DOM accessible to Python programs in skulpt.  The DOM has always seemed like a big black hole of endless functions and properties, and I've always thought about modules in skulpt as being implementations of existing Python modules.  But for the DOM in a web page it now seems more sensible to me to just have the module mirror the Javascript interface.  But again that seemed like a lot of work.  Until yesterday when I figured out how I would approach the problem.  I prototyped it by writing  a wrapper for Javascripts Math object.

Now, you can look in the source and see how I've painstakingly wrapped each Math function in the current library.  But most of that can be replaced with the following code:

var $builtinmodule = function(name)

{

    var mod = {};

    var props = Object.getOwnPropertyNames(Math)

    for (i in props) {

        if (typeof Math[props[i]] === "number" ) {

            mod[props[i]] = Math[props[i]];

        }

        if (typeof Math[props[i]] == "function") {

            mod[props[i]] = new Sk.builtin.func(Math[props[i]],undefined,undefined,undefined);

        }

    }

    return mod;

}

The following little test program works perfectly using this approach.

import math

print math.sin(2.4)

print math.PI

print math.abs(-45.90)

print math.max(1,2,3,-1)

I've got something similar started for the document object but there are a few more hurdles to clear before I can call it a success.

1. parameters:  Numbers work great untouched, but Strings and other Objects in Python need to be converted to their native forms before you pass them to the native Javscript functions.

2.  return values, again numbers just work.  But Strings and other objects must be converted from native javascript to skulpt/Python objects before they can be returned to the Python program.

Both 1 and 2 can be handled pretty nicely by adding some code to Sk.builtin.func and to Sk.builtin.prototype.tp$call

3.  objects:  DOM functions of course do not return numbers and strings most of the time.  The document object itself is an instance of HTMLDocument, and many other things are HTMLBodyElements.  I don't see any reason why this can't be handled pretty much automatically either.

Anybody been down this same road?  What have I missed?  If you have the time and inclination to help with this little project please let me know!

Brad

--

Brad Miller
Associate Professor, Computer Science
Luther College

[Charles Severance]

Brad,

Love the idea of talking to the DOM but I have a suggestion when we are adding these kinds of extensions that might lead to possible security exploits of the form that I send you some Python to paste into Skulpt and run in your browser.

jseval("alert('Johnny Tables');");

I would suggest that this and jseval() only be available when some configuration is set in the initial Skulpt setup in the browser so when constructing web pages we know when we are and are not enabling these capabilities...

Make sense?

/Chuck

[Salvatore DI DIO]

Hello Brad,

 

Tom de Smedt hes release a very nice library named 'canvas.js' which is a port of Nodebox (an equivalent of Processing but in Python)

Here is the demo link : http://www.clips.ua.ac.be/media/canvas/

And the home page : http://www.clips.ua.ac.be/pages/pattern-canvas

I would like to port it on Skulpt with this code

 

var Nodebox = (function () {

#Put all canvas.js here

function $id() {...}

......

......

return {

$ : $,

Point : Point,

Geometry : Geometry,

len : len

}

})()

 

and the iterate on all properties of Nodebox and using your snippet

What do you think of that ?

 

Regards

 

Salvatore

 

 

 

 

2013/2/18 Brad Miller <bone...@gmail.com>

--
 
---
You received this message because you are subscribed to the Google Groups "Skulpt" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skulpt+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Brad]

On Monday, February 18, 2013 10:20:29 AM UTC-6, Salvatore wrote:

Hello Brad,

 

Tom de Smedt hes release a very nice library named 'canvas.js' which is a port of Nodebox (an equivalent of Processing but in Python)

Here is the demo link : http://www.clips.ua.ac.be/media/canvas/

And the home page : http://www.clips.ua.ac.be/pages/pattern-canvas

I would like to port it on Skulpt with this code

 

var Nodebox = (function () {

#Put all canvas.js here

function $id() {...}

......

......

return {

$ : $,

Point : Point,

Geometry : Geometry,

len : len

}

})()

 

I have a little more exploratory work to do on making this all work when one object in the module returns an instance of another class, but I think this looks very promising.  The work I've done so far is available for others to poke at on the "dominstrospection" branch.

Brad

[Sphaerica (Bob Lacatena)]

Chuck,

As an FYI, if you do not allow users to upload either javascript or Python code to your website and then have those programs made available to other users, then there is no security hole, no matter what capabilities Skulpt offers in javascript.  If you do allow users to upload programs that others can use, then there's virtually nothing you can do to close all of the holes that will exist in Skulpt.

-- Bob

[Brad Miller]

Hi All,

I just pushed an example to the dominstrospection branch that demonstrates how to wrap a javascript implementation of a class.  This works -- even in the case where a method of the class itself returns an instance of the wrapped class.  This is nearly a standalong modification, but I did have to add two optional parameters to the func and tp$call methods in function.js.

I think this could serve as a template for how to wrap the NodeBox implementation mentioned the other day!

I'd appreciate it if someone else would take a look and comment on this.  I think there must be a way to make this a bit more efficient, but I really just wanted to prove that this could be done.

At least now I can stop obsessing and get some  of my real work done.  :-)

Brad

[DI DIO Salvatore]

Hi Brad,

Thank you Brad

Can you give me the link of the 'dominstrospection branch' ?

I must go to sleep (i am in France) :-)

For sure i will try tomorrow

Salvatore

[Brad]

Here is the link to the branch, its on github, so you may be able to get it by updating your own clone.

I would really suggest that you make a new fork, if you don't already have a fork of skulpt and that will also contain the branch.

https://github.com/bnmnetp/skulpt/tree/domintrospection