-
Notifications
You must be signed in to change notification settings - Fork 9
/
pages.html
119 lines (94 loc) · 8.47 KB
/
pages.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="pages/stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="pages/stylesheets/github-dark.css" media="screen">
<link rel="stylesheet" type="text/css" href="pages/stylesheets/print.css" media="print">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
span.button {
border-radius: 6px;
border: solid 1px gray;
box-shadow: 1px 1px 3px 0px gray inset;
background: #f5f5f5;
color: black;
padding: 4px 6px;
text-decoration: none;
font-size: 11pt;
}
</style>
<title>Skulpt IDE</title>
</head>
<body>
<div id="container">
<div class="inner">
<header>
<h1>Skulpt IDE</h1>
<h2>An online Python development environment.</h2>
</header>
<section id="downloads" class="clearfix">
<a href="https://github.com/esperanc/skulptIde/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
<a href="https://github.com/esperanc/skulptIde/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
<a href="https://github.com/esperanc/skulptIde" id="view-on-github" class="button"><span>View on GitHub</span></a>
</section>
<hr>
<section id="main_content">
<h3>
<a id="what-is-this" class="anchor" href="#what-is-this" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>What is this?
</h3>
<p>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 <a href="www.skulpt.org">Skulpt</a>, a JavaScript port of the <a href="www.python.org">Python</a> language, the <a href="https://codemirror.net/">CodeMirror</a> online code editor and several other useful modules.</p>
<h3>
<a id="why" class="anchor" href="#why" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Why?
</h3>
<p>I teach introductory level programming courses at <a href="www.ufrj.br">UFRJ</a> 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 <a href="www.processing.org">Processing</a> 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.</p>
<h3>
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation
</h3>
<p>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.</p>
<p>In fact, you don't even need to download anything. The IDE can be used directly from the main github page, by accessing [<a href="http://esperanc.github.io/skulptIde/index.html">http://esperanc.github.io/skulptIde/index.html</a>].</p>
<h3>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage
</h3>
<h4>Basic usage</h4>
<p>Type in the source code in the editor and click <span class="button">Run</span>. Errors and other output are shown in the Output pane at the bottom of the screen. </p>
<p>If your code has an infinite loop, hit <span class="button">Stop</span> in order to avoid consuming too many resources of your browser.</p>
<p>Hit <span class="button">Clear</span> to clear the output and graphics canvas. If the program is still running, it is stopped first.</p>
<p>Save often! Use the <span class="button">Download as</span> 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 <span class="button">Upload</span> button.
<h4>Writing Processing sketches</h4> If you are writing a program that uses the Processing module, i.e., a "sketch", you must include <code>from processing import *</code> as the first line of your sketch and <code>run()</code> as the last line. Also, you should probably write your own <code>draw()</code> and <code>setup()</code> functions somewhere in between...</p>
<h4>URL parameters</h4>
<p>The following URL parameters are supported:</p>
<dl>
<dt><code>program=</code><em>url</em></dt>
<dd>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:
<a href="http://esperanc.github.io/skulptIde/index.html?program=http%3A%2F%2Fesperanc.github.io%2FskulptIde%2FdemoSketches%2FalignGrid.py" title="alignGrid.py">http://esperanc.github.io/skulptIde/index.html?program=http%3A%2F%2Fesperanc.github.io%2FskulptIde%2FdemoSketches%2FalignGrid.py</a>
</dd>
<dt><code>showurl</code> </dt>
<dd>Displays a <span class="button">Show URL</span> 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 <code>source</code> or <code>lzsource</code> parameter. A link to the Skuplt IDE with that sketch preloaded is then generated and shown below the button.</dd>
<dt><code>source=</code><em>source code</em></dt>
<dd>This can be used to load Python source code encoded as a url-safe string. Ex.:
<a href="http://esperanc.github.io/skulptIde/index.html?source=print%20%22Hello%20from%20Skulpt!%22">http://esperanc.github.io/skulptIde/index.html?source=print%20%22Hello%20from%20Skulpt!%22</a>
</dd>
<dt><code>lzsrc=</code><em>compressed source code</em></dt>
<dd>This is similar to the <code>source</code> 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 <code>showurl</code> parameter, which always computes arguments for both <code>source</code> and <code>lzsrc</code> and shows the shortest one.
</dd>
<dt><code>autorun</code></dt> <dd>Makes the code in the editor start running at once.</dd>
<dt><code>noide</code></dt> <dd>Hides the editor, title and buttons so that only the output and graphics canvas are shown. Obviously, this is only useful together with <code>autorun</code>.</dd>
<dt><code>notitle</code></dt> <dd>Hides the title. This is useful if you want to embed the IDE as an
iframe in your site.</dd>
<dt><code>nooutput</code></dt> <dd>Hides the output panel. This is useful if you want to hide output messages from a graphical sketch, for instance.</dd>
</dl>
</section>
<footer>
SkulptIDE is maintained by <a href="https://github.com/esperanc">esperanc</a>
<br> This page was generated by <a href="https://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
</footer>
</div>
</div>
</body>
</html>