Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Here is about the simplest example I can think of that gets you a working skulpt environment. This little sample shows regular python as well as importing a module.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
</head>
<body>
<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.pre = "output";
Sk.configure({output:outf, read:builtinRead});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
</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 -->
<div id="mycanvas"></div>
</body>
</html>

Chuphay commented Dec 12, 2013

I'm just getting started with programming, but this didn't work for me. even after changing
/mycanvas to /canvas. The console logger says that Sk is not defined

The skulpt.min.js and skulpt-stdlib.js need to be included with this, or provide a full URL for them. For example:

<script src="http://skulpt.org/static/skulpt.min.js" type="text/javascript"></script> <script src="http://skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>

rsaez commented Apr 17, 2014

Where is the example @andrewcase

iptq commented Aug 14, 2014

I'm getting "ImportError: No module named on line "

akaak commented Jan 6, 2015

The section should have the full url to the JS files. like this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script> 

Or, see this gist: https://gist.github.com/akaak/42d4a78cef7f208bc343 and it works!

akaak commented Jan 6, 2015

Looks like @andrewcase comment did not display what he wanted to display because Markdown did not parse it as code!

This is great!

brunodd commented Mar 23, 2015

This used to work great, but now I get:

ExternalError: TypeError: Cannot read property 'firstChild' of null on line 1

(Only with turtles)

Owner

bnmnetp commented Mar 23, 2015

I just updated this gist, and there are a few small but important changes to notice.

  1. Notice that we now wrap the Sk.importMainWithBody inside Sk.misceval.asyncToPromise (lines 36-44) Also notice that there is a fourth parameter Sk.importMainWithBody("", false, prog, true); which is set to true to enable async processing. This has the amazing effect that turtle now runs asynchronously! No more will the turtle slow down as the drawing becomes larger, no more do precompute the entire drawing and then animate it later. Now it runs in real time. Which also means that we can, and do, support events: onclick, onkey, ontimer!
  2. We also made the change that you no longer need to supply a canvas element. (line 61) You now provide a div. and turtle will create the appropriate drawing context. Still a canvas for now, but could be SVG or webgl or whatever in the future.
  3. Instead of Sk.canvas we now use the more generic way of connecting the canvas with (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas'; (line 35)
Owner

bnmnetp commented Mar 23, 2015

test

brunodd commented Mar 23, 2015

I copy-pasted the gist into my project as a test run and it works smoothly. A big thanks to all those involved for the quick replies and easy fixes.
A quick question though:
How can I adjust the size/border/... of the 'mycanvas' div if it is no longer a canvas?

Owner

bnmnetp commented Mar 24, 2015

You can adjust the size in a couple of ways: Sk.TurtleGraphics.target.height = will give an initial height. It will also respect a call to Screen.setup(height,width) in the turtle program itself. bordering can be done with CSS.

Brad

TimRohr commented Apr 26, 2015

I have been able to run this successfully on my webpage with no issues. I then decided to try and modify the python code with my own code, but now when I hit run nothing happens? Any ideas would be greatly appreciated.

Owner

bnmnetp commented Apr 26, 2015

Have you checked the javascript console? Its pretty hard to know what happened without knowing how you changed the python or anything else. The most likely explanation is that you have an error in your python. In that case you will see the error message in the javascript console. That is what the console.log(err.toString) call does.

How do I include the turtle canvas? I went to CodeMirror and downloaded the turtle.js file, now where do I add the javascript code? I added it in the HEAD section, the FORM section, and wrapped it around the FORM section. I don't know what it means by, "include a canvas." Where do I include that code? What code do I include? Thanks for the help!

Owner

bnmnetp commented Jul 8, 2015

@polyphemus11, you don't need to do anything more, this gist has everything you need to run the example on the page itself. The canvas element is automatically added to the div. Did the page not work for you?

Is there any known browser compatibility issues? I am forced to use POS IE 10 at work and when I want to try and build my own Skulpt here it does not seem to work. All I get is a large black bar across the bottom and nothing outputs when I hit run. I have not made any modifications to the script either in the html or javascripts. Thanks!

Side note, I did load it into Firefox Portable (FPP) which I have and it appears to work fine. I would like to try and see if I can get it to work in IE though so I don't possibly get in trouble using a program I am not allowed to use.

Owner

bnmnetp commented Aug 24, 2015

Do the examples at skulpt.org work in IE for you? I'm a little surprised it doesn't just work. Not that I test IE regularly, but the last time I tried everything worked fine.

The Skulpt site works fine for me oddly enough.

I edited the html to run the javascripts locally rather than remotely from the Skulpt site and enabled error output and I got the following error now:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:47:03 UTC

Message: Object doesn't support property or method 'create'
Line: 998
Char: 94
Code: 0
URI: skulpt.min.js

Running the javascript codes remotely gives me:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:54:51 UTC

Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://www.skulpt.org/static/skulpt.min.js

Owner

bnmnetp commented Aug 24, 2015

Just cloned the gist to my windows 10 VM and opened it up. Works fine there, so I'm not sure what is going on for you.

This is awesome! I love Python, but I know almost nothing about HTML and Javascript. Is there a way to just get it to run the code without making a textbox and "Run" button?

@ghost

ghost commented Aug 22, 2016

@Carcabob you have to have a python web server and server interaction for that, not with Skulpt. Skulpt is just an emulator of python.

saibotshamtul commented Oct 11, 2016 edited

@Carcabob Yes, it can be done, if, at the bottom of the page, you add Javascript code that calls the runit function, it should run the code when the page loads. You can combine this with making the textbox display:none to hide it, and it should work how you want.

For example: http://codepen.io/saibotshamtul/full/LRmpmm/

Amarix commented Jul 10, 2017

Thank you!!

Hi, I am very new to programming. I am learning python and have created an interactive blackjack game that I wanted to share on my squarespace website. I tried posting in the gist on a squarespace code block and the run button and python text showed up but there is nowhere for the output to show up and nothing happens when I click run. Any advice?

Thanks!!
Regan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment