Sunday, December 8, 2013

How to Run Codeskulptor Python Programs on your own Page

Codeskulptor is a browser-based Python programming environment built by Scott Rixner of Rice University and is used in his An Introduction to Interactive Programming in Python class on Coursera.

Codeskulptor screenshot

In order to make the programming environment easy to use, Codeskulptor implements, among other things, a "simplegui" module which makes it easier to build interactive programs in the browser. The module is written in JavaScript and can therefore not be used in python projects outside of Codeskultor.

However, since CodeSkulptor is based on Skulpt and JavaScript, it should be possible to use these to run CodeSkulptor-specific interactive programs on your own website.

First, we visit Skulpt and copy the code under the heading "Getting Started". What we mostly need is all the code inside the <body> </body> tags.

<script type="text/javascript">
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) {
   var mypre = document.getElementById("output");
   mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
   if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
           throw "File not found: '" + x + "'";
   return Sk.builtinFiles["files"][x];
}
 
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
  var prog = document.getElementById("yourcode").value;
  var mypre = document.getElementById("output");
  mypre.innerHTML = '';
  Sk.canvas = "mycanvas";
  Sk.pre = "output";
  Sk.configure({output:outf, read:builtinRead});
  eval(Sk.importMainWithBody("<stdin>",false,prog));
}
</script>
 
<h3>Try This</h3>
<form>
<textarea id="yourcode" cols="40" rows="10">import turtle
 
t = turtle.Turtle()
t.forward(100)
 
print "Hello World"
</textarea><br />
<button type="button" onclick="runit()">Run</button>
</form>
<pre id="output" ></pre>
<!-- If you want turtle graphics include a canvas -->
<canvas id="mycanvas" ></mycanvas>

Second, we head over to Codeskulptor, and get a copy of the JavaScript include files there (to use in place of the ones used in Skulpt). As of this writing, the current list of included JavaScript files are

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.axislabels.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.orderbars.min.js"></script>
 <script src="http://www.codeskulptor.org/js/numeric-1.2.6.min.js"></script>
 <script src="http://www.codeskulptor.org/skulpt/skulpt.min.js"></script>
 <script src="http://www.codeskulptor.org/skulpt/skulpt-stdlib.js"></script>
 <script src="http://www.codeskulptor.org/js/codeskulptor-compressed.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Ideally, you probably should copy those files to your own server (in case they change in the future), but you can, instead, just include those same JavaScript files on your own page, preferably in the header.

(There is one other JavaScript file include in Codeskulptor
<script src="http://www.codeskulptor.org/js/codemirror-compressed.js"></script>
but you don't need this one because it is part of CodeMirror's code to syntax-color the code.)

Then use the HTML+JavaScript code copied from Skulpt on your page.

Don't forget to put your python code as the contents of the textarea.

To see this in action, see here or at techni.ca here.

9 comments :

  1. Micheal,
    here in this:
    To see this in action, see 'here' or at techni.ca here.

    Leads to a part when using simplegui2, you shold change the link to an ordinary one with normal simplegui.
    :)
    Bertwert

    ReplyDelete
    Replies
    1. You can use simplegui on that site. The pre-set sample I put there uses simplegui2 to show that it also works, but you're free to just use simplegui if you'd like. ;-)

      Delete
    2. I mean...
      If people see "import simplegui2 as simplegui" they will probably be confused, so it might be better to have an ordinary simplegui import in the example.

      Delete
    3. good point! I changed the default sample script to use simplegui instead of simplegui2. :)

      Delete
    4. You should see some of the CodeSkulptor projects I've been working on lately (though I haven't posted them anywhere yet)
      * Simplegui 1.5 : most of the functions from Simplegui2, but using only Python. No Javascript injection needed this time!
      - simplegui.Cookie.get()
      - simplegui.Cookie.set()
      - simplegui.Browser.prefix()
      - simplegui.Console.get() (sorry, Console.set function cannot currently be created)
      - simplegui.Frame.set_unload_handler()

      * parsing JSON strings into Python dictionary objects (which can also be used to create an "eval" function since "eval()" doesn't currently work in CodeSkulptor)
      - json.decode(string)
      - json.eval(string)

      * using Yahoo! Query Language (YQL) for a bunch of useful functions, such as reading any webpage, getting the user's IP address, or accessing cryptographic functions e.g. calculating an MD5 or SHA256 hash
      - yql.YQL(a YQL query string)
      - yql.YQL.fetch(url)
      - yql.YQL.decode(url)
      - login to Google using YQL to check username and password combination are correct
      - yql.Zip.deflate()
      - yql.Zip.inflate()
      - yql.Crypto.encodeSHA256()
      - yql.Crypto.encodeSHA1()
      - yql.Crypto.encodeMd5()
      - yql.Crypto.encodeMd5Hex()
      - yql.Crypto.encodeSha()
      - yql.Crypto.encodeBase64()
      - yql.Crypto.decodeBase64()
      - yql.uuid()
      - yql.RegEx.match()
      - yql.RegEx.replace()

      * using YQL and Cross-Origin Resource Sharing to create a public "database" that can be read and written to, all saved on Yahoo!'s Sherpa storage. (This can be used to keep a public leaderboard for any game.)
      - yql.DB.ReadUserCookies()
      - yql.DB.ReadCookie()
      - yql.DB.ReadAppUsers()
      - yql.DB.WriteCookie()

      * create SVG images within Python for additional graphic possibilities (such as gradients, using different fonts, drawing rounded rectangles, etc)

      imgsvg = SVG(320,240)
      def draw(canvas):
          image = simplegui.load_image(str(imgsvg))
          canvas.draw_image(image, (150,100), (300,200), (150, 100), (300, 200))

      Delete
    5. I would like to see these projects :-)

      Are you doing the Principles of Computing course?
      (Run up to Introduction to Interactive Programming Python)

      Delete
    6. Codeskulptor has a beautiful combination of python and javascript that is flexible enough to allow some room to play. :-D

      Yes, I'm taking the current Principles of Computing course and plan to see when/where I might be able to use some of the above-mentioned libraries. ;-)

      Delete
  2. Well I am in there too :-)
    I have already started a thread for codeskulptor on your own website,
    though someone down voted it!?

    ReplyDelete
    Replies
    1. • It looks like that thread was deleted by the staff. :(

      • According to the "Python Development Environments" page, "the machine grader only supports the following Python libraries: random, time, math, re, collections.defaultdict, and collections.Counter."

      ... All of the fun stuff mentioned above require simplegui and/or urllib2 so they're out of the question.

      Delete