Embedding KA Programs

Why am I making this post?

I am making this post to improve the reliability of a collab that me @ojpstudios and Aqil @alifaqil is making. He made a program called KhanTube and we both decided to make an HTML version for more features and better updates. But, sadly, when we try to embed Aqil's video player through iframe (using your script) it doesn't work. I am pretty sure you are allowed to embed KA programs into your site. I know a hack for iframe but I don't want to get in trouble. xD

Anyway, this isn't just for me but so many other people. For example: Darryl-Yeo's website is a showcase of his projects and contains his blog. His projects used to look really good when the old editor was there but after new updates came, when embedded, ugly scrollbars appear and the project is half cut off.

What is needed to be fixed?

- Fix the margins of the canvas

- Hide the overflow (scrollbars basically)

- Make the canvas have responsive design, make it scalable based on the size of the frame.

More Questions

1. I tried to add the video player through the <canvas> tag but the dragging of the progress bar doesn't work. Later I found that it is a built in function by you guys. It would be nice if you can tell me how to add it or have a script to add those extra stuff you added to KA. Another example is that arcs doesn't seem to work. When I embedded Legolas Greenleaf's masterpiece lakeside cottage through canvas, it didn't come through right. The arcs are in the PJS docs, but his project's arcs doesn't work.

2. Are we allowed to use DOM to create an iframe with a KA site and append it to a div? :P

Conclusion

Thank you, hopefully this can be fixed!

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var processing = new Processing(canvas, function(processing) {
processing.size(600, 600);
processing.background(0xFFF);

var mouseIsPressed = false;
processing.mousePressed = function () { mouseIsPressed = true; };
processing.mouseReleased = function () { mouseIsPressed = false; };

var keyIsPressed = false;
processing.keyPressed = function () { keyIsPressed = true; };
processing.keyReleased = function () { keyIsPressed = false; };

function getImage(s) {
var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
processing.externals.sketch.imageCache.add(url);
return processing.loadImage(url);
}

// use degrees rather than radians in rotate function
var rotateFn = processing.rotate;
processing.rotate = function (angle) {
rotateFn(processing.radians(angle));
};

with (processing) {

// CODE GOES HERE

}
if (typeof draw !== 'undefined') processing.draw = draw;
});
</script>
</body>
</html>

Tazal

January 25, 2018 21:52

I have had the same problem with embedding the live editor, i don't think they are going to fix it anytime soon

the best way to get a project on to a webpage would be just using processing.js and an HTML canvas

I find this template to be the best because it still preserves most of the KA code

Embedding KA Programs

Didn't find what you were looking for?

1 comment

Didn't find what you were looking for?