161 lines
6.7 KiB
HTML
161 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Inkpot</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="favicon" content="content" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>ᝰ</text></svg>">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
<style>
|
|
*, *:before, *:after { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0 }
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: monospace;
|
|
background: #EEE6EA;
|
|
color: #246;
|
|
padding: 36px 24px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
max-width: 800px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 24px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h1:after {
|
|
content: ' ᝰ';
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
form {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0 0 6px;
|
|
padding: 6px;
|
|
width: 100%;
|
|
height: 18rem;
|
|
background: #F5F0F2;
|
|
border: 2px solid #246;
|
|
}
|
|
|
|
button[type=submit] {
|
|
margin: 0 0 6px;
|
|
padding: 12px;
|
|
background: #F5F0F2;
|
|
border: 2px solid #246;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button[type=submit]:after {
|
|
content: ' ⛆';
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 18px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
dl {
|
|
line-height: 2;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
code {
|
|
background: #F5F0F2;
|
|
padding: 3px 6px;
|
|
z-index: -1;
|
|
}
|
|
|
|
dt code {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media screen and (min-width: 800px) {
|
|
body {
|
|
padding: 72px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>inkblot</h1>
|
|
<p>Welcome to your inkblot. You can use the text field below to enter and send Lua scripts that will change what is displayed on your screen. At the bottom of the screen you can get a short list of functions available for drawing.</p>
|
|
<form method="POST" id="blot" action="/draw">
|
|
<textarea></textarea>
|
|
<button type="submit">Draw</button>
|
|
</form>
|
|
<h2>How to draw</h2>
|
|
<p>Lua is a very simple language. Here is a brief overview of the syntax: <a href="https://learnxinyminutes.com/lua/" target="_blank">Learn Lua in Y Minutes.</a> You can find a description of the drawing library below.</p>
|
|
<p>The screen is monochrome and knows 16 shades. Whenever you see a <code>color</code> below, it can be set to values from <code>0</code> (black) to <code>255</code> (white). You can also use hexadecimal notation (from <code>0x00</code> to <code>0xFF</code>) which means the same thing.</p>
|
|
<p>The coordinate system starts at <code>(0,0)</code> in the top left corner.</p>
|
|
<dl>
|
|
<dt><code>local paper = require "paper"</code></dt>
|
|
<dd>Loads the library to run drawing commands.</dd>
|
|
|
|
<dt><code>paper.init()</code></dt>
|
|
<dd>Initializes the screen. Needs to be called at least once.</dd>
|
|
|
|
<dt><code>paper.clear()</code></dt>
|
|
<dd>Clears the screen. If you don't call this, you will draw on top of your previous drawing.</dd>
|
|
|
|
<dt><code>paper.update()</code></dt>
|
|
<dd>Sends your drawing to the screen. Needs to be called after a sequence of drawing commands to display them..</dd>
|
|
|
|
<dt><code>paper.set_orientation(orientation)</code></dt>
|
|
<dd>Set the screen orientation. Allowed values for <code>orientation</code> are <code>"portrait"</code>, <code>"landscape"</code>, <code>"inverse_portrait"</code> and <code>"inverse_landscape"</code></dd>
|
|
|
|
<dt><code>paper.get_orientation()</code></dt>
|
|
<dd>Get current screen orientation. Returned values are <code>"portrait"</code>, <code>"landscape"</code>, <code>"inverse_portrait"</code> and <code>"inverse_landscape"</code></dd>
|
|
|
|
<dt><code>paper.get_width()</code></dt>
|
|
<dd>Get current screen width, according to orientation.</dd>
|
|
|
|
<dt><code>paper.get_height()</code></dt>
|
|
<dd>Get current screen height, according to orientation.</dd>
|
|
|
|
<dt><code>paper.draw_pixel(x, y, color)</code></dt>
|
|
<dd>Draw a single pixel at <code>(x,y)</code> in the given <code>color</code>.</dd>
|
|
|
|
<dt><code>paper.draw_line(x1, y1, x2, y2, color)</code></dt>
|
|
<dd>Draw a line from <code>(x1,y1)</code> to <code>(x2,y2)</code> in the given <code>color</code>.</dd>
|
|
|
|
<dt><code>paper.draw_hline(x, y, length, color)</code></dt>
|
|
<dd>Draw a horizontal line from <code>(x,y)</code> with the given <code>length</code> in the given <code>color</code>.</dd>
|
|
|
|
<dt><code>paper.draw_vline(x, y, length, color)</code></dt>
|
|
<dd>Draw a vertical line from <code>(x,y)</code> with the given <code>length</code> in the given <code>color</code>.</dd>
|
|
|
|
<dt><code>paper.draw_circle(x, y, radius, color)</code> / <code>paper.fill_circle(x, y, radius, color)</code></dt>
|
|
<dd>Draw an outline around a circle at <code>(x,y)</code> with the given <code>radius</code> in the given <code>color</code>. <code>fill_circle</code> draws the same circle with a solid filling.</dd>
|
|
|
|
<dt><code>paper.draw_rect(x1, y1, x2, y2, color)</code> / <code>paper.fill_rect(x1, y1, x2, y2, color)</code></dt>
|
|
<dd>Draw an outline around a rectangle with the upper left corner at <code>(x1,y1)</code> and lower right corner at <code>(x2,y2)</code> in the given <code>color</code>. <code>fill_rect</code> draws the same rectangle with a solid filling.</dd>
|
|
|
|
<dt><code>paper.draw_triangle(x1, y1, x2, y2, x3, y3, color)</code> / <code>paper.fill_triangle(x1, y1, x2, y2, x3, y3, color)</code></dt>
|
|
<dd>Draw an outline around a triangle with corners <code>(x1,y1)</code>, <code>(x2,y2)</code> and <code>(x3,y3)</code> in the given <code>color</code>. <code>fill_triangle</code> draws the same triangle with a solid filling.</dd>
|
|
</dl>
|
|
<p>Have fun!</p>
|
|
</body>
|
|
</html>
|