kstarboi kstarboi - 2 months ago 13
Python Question

How to Implement Turtle in Skulpt (in Meteor)?

My code pretty much matches what's provided on Skulpt.org yet I can't seem to get any Turtles to appear on my canvas. I added code to ensure that the turtle library is being loaded and that the python is being run successfully. Both messages say that this is the case; everything seems to be working as it should.

Here's some of my template code:

Template.pythonEnv.events({
'click #py_run': function(event, template) {
// get content from Ace
Tracker.autorun(function (e) {
var editorPy = AceEditor.instance("py_inPanel", {
theme:"dawn",
mode:"python"
});
if(editorPy.loaded === true){
e.stop();
Session.set("pyContent", editorPy.getValue());
}
});
// Skulpt
var prog = Session.get("pyContent");
var mypre = document.getElementById("py_outputPanel");
mypre.innerHTML = '';

Sk.onAfterImport = function(library) {
switch(library) {
case 'turtle':
console.log('turtle loaded'); // *** CHECK TO SEE IF TURTLE LOADED ***
break;
}
}

Sk.pre = "py_outputPanel"; // output
Sk.configure({
inputfun: function(prompt) {
return window.prompt(prompt); // for raw_input()
},
inputfunTakesPrompt: true,
output: outf,
read: builtinRead
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'py_turtlePanel';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('Python - success'); // *** CHECK TO SEE IF PYTHON RAN ***
}, function(err) {
console.log(err.toString());
});
// resize output panel
template.$(".py_panel").height($(window).height() - template.$("#py_header").height() - 90);
},
...


And here's my html code:

<template name="pythonEnv">
{{#with file}}
<div id="py_container">
<div id="py_header">
<div id="py_buttonContainer">
<p id="py_toggle_note">Click to toggle: &nbsp; </p>
<div class="py_toggleButton py_active" id="py_in">Python</div>
<div class="py_toggleButton py_active" id="py_output">Output</div>
<div class="py_toggleButton" id="py_turtle">Turtle</div>
</div>
<button class="login" id="py_run">Run!</button>
</div>
<div id="py_bodyContainer">
<pre id="py_inPanel" class="py_input py_panel"></pre>
<pre id="py_outputPanel" class="py_panel"></pre>
<canvas id="py_turtlePanel" class="py_panel py_hidden"></canvas>
</div>
</div>
{{/with}}
</template>


Amendment:
I added this code under my
'click #py_run'
function:

var canvas = document.getElementById("py_turtlePanel");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);


And it works! But my turtle still doesn't load. I tried running the following turtle code:

import turtle

t = turtle.Turtle()

for c in ['red', 'green', 'yellow', 'blue']:
t.color(c)
t.forward(75)
t.left(90)


Without any luck. Also, everything with my Skulpt-Python functionality seems to be working properly as well.

Thank you in advance!

Answer Source

So it turns out that the issue is that I read the initial code given on http://www.skulpt.org/# wrong. Instead of putting my turtle code in a <canvas id="mycanvas"></canvas> I should instead put it in a <div id="mycanvas"></div>.