Coder Social home page Coder Social logo

skulptide's Introduction

Skulpt IDE

##What is this?

The Skulpt IDE is my attempt to build an online Integrated Development Environment where anyone can edit Python code and see it running on the the browser. It uses the code base for Skulpt, a JavaScript port of the Python language, the CodeMirror online code editor and several other useful modules.

##Why

I teach introductory level programming courses at UFRJ and would like my students to have access to a simple Python programming environment they could use anywhere. Moreover, I am especially interested in using graphics to motivate programming as a means of expression, and was delighted to see that Skulpt already includes a very capable Processing module, thus making it easy to write interactive programs with graphical output. All that was needed, really, was to add functionality to implement common tasks such as uploading/downloading source programs and run/stop buttons.

##Install Just download the whole thing (use the download .zip link in this page) into some folder your web server can see. Then access the index.html page from there and you are done. You can even use most of the functionality of the IDE without a web server - just open the index.html file from a (html5-enabled) browser.

In fact, you don't even need to download anything. The IDE can be used directly from the main github page, by accessing http://esperanc.github.io/skulptIde/index.html.

##Usage

###Basic usage

Type in the source code in the editor and click Run. Errors and other output are shown in the Output pane at the bottom of the screen.

If your code has an infinite loop, hit Stop in order to avoid consuming too many resources of your browser.

Hit Clear to clear the output and graphics canvas. If the program is still running, it is stopped first.

Save often! Use the Download as button to save your work to your local machine using the filename in the text box beside it. To load a file you have in your local computer to the IDE, use the Upload button.

Writing Processing sketches

If you are writing a program that uses the Processing module, i.e., a "sketch", you must include from processing import * as the first line of your sketch and run() as the last line. Also, you should probably write your own draw() and setup() functions somewhere in between...

###URL parameters

The following URL parameters are supported:

program=url
Loads the Python source code at the given url. Notice that your url must be encoded as an url-safe string. For instance, here's how to load one the demo sketches included in the distribution: http://esperanc.github.io/skulptIde/index.html?program=http%3A%2F%2Fesperanc.github.io%2FskulptIde%2FdemoSketches%2FalignGrid.py
showurl
Displays a Show URL button at the bottom of the page. When pressed, a url-safe string encoding the sketch is generated in order to be used with the source or lzsource parameter. A link to the Skulpt IDE with that sketch preloaded is then generated and shown below the button.
source=source code
This can be used to load Python source code encoded as a url-safe string. Ex.: http://esperanc.github.io/skulptIde/index.html?source=print%20%22Hello%20from%20Skulpt!%22
lzsrc=compressed source code
This is similar to the source parameter, except that the source code must be compressed and encoded in Base 64. This option was added in order to enable reasonably long source code to be encoded as an url string. The best way obtain this compressed url is to use the showurl parameter, which always computes arguments for both source and lzsrc and shows the shortest one.
autorun
Makes the code in the editor start running at once.
noide
Hides the editor, title and buttons so that only the output and graphics canvas are shown. Obviously, this is only useful together with autorun.
notitle
Hides the title. This is useful if you want to embed the IDE as an iframe in your site.
nooutput
Hides the output panel. This is useful if you want to hide output messages from a graphical sketch, for instance.

skulptide's People

Contributors

esperanc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.