-
Notifications
You must be signed in to change notification settings - Fork 1
/
cplayer.html
267 lines (258 loc) · 13.5 KB
/
cplayer.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title> cplayer - procedural graphics & IMGUI toolkit </title>
<script src="jquery.js"></script>
<script src="jquery-cookie.js"></script>
<script src="jquery-tablesorter.js"></script>
<script src="strftime.js"></script>
<script src="mustache.js"></script>
<script src="config.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="templates/reset.css" />
<link rel="stylesheet" type="text/css" href="templates/hack.css" />
<link rel="stylesheet" type="text/css" id="lights_css" />
<script>
var DOCNAME = 'cplayer'
var PROJECT = 'cplayer'
//set the lights before rendering starts
set_lights()
</script>
</head>
<body>
<header>
<div class="container">
<div class="btn-container btn-lights-container">
<a href="#" class="btn btn-lights" id="lights">lights</a>
</div>
<div class="btn-container btn-home-container">
<a href="/" class="btn btn-home">luapower</a>
</div>
<table id="header_table">
<tr>
<td style="vertical-align: middle;" width="100%">
<h1> cplayer </h1>
<h2> procedural graphics & IMGUI toolkit </h2>
</td>
<td style="vertical-align: middle;" align="right" style="height: 150px">
<table><tr><td>
<div class="doc" id="package_info_container">
<div id="package_info"> </div>
<div id="commit_log"> </div>
</div>
<a href="https://github.com/luapower/cplayer" class="btn btn-rightside btn-github"><span class="icon"></span>View on GitHub</a>
</td></tr><tr><td>
<a href="https://github.com/luapower/cplayer/tarball/master" class="btn btn-rightside">Download as .tar.gz</a>
</td></tr><tr><td>
<a href="https://github.com/luapower/cplayer/zipball/master" class="btn btn-rightside">Download as .zip</a>
</td></tr></table>
</td>
</tr>
</table>
<div class="btn-container btn-discuss-container">
<a href="https://github.com/luapower/cplayer/issues/new" target="_blank"
class="btn btn-rightside btn-discuss"><span class="icon"></span>Discuss</a>
</div>
</div>
</header>
<div class="bg-container">
<div class="bg-center-container">
<div class="bg bg-cplayer" style="background-image: url('bg/cplayer.png');"></div>
</div>
</div>
<div class="under-header">
<div class="container">
<div id="toc_container" class="toc_container doc"></div>
<button id=tab1_button class="tab_button hidden">Documentation</button>
<button id=tab2_button class="tab_button hidden">Package Info</button>
<div id="tabs_cointainer">
<div id="tab1_container">
<section class="doc">
<span id="module_info"></span>
<h2 id="local-player-requirecplayer"><code>local player = require'cplayer'</code></h2>
<p>CPlayer is a procedural graphics player with an IMGUI toolkit. It can be used for anything from quick demos, prototyping graphics apps, to full-fledged apps and games.</p>
<h2 id="features">Features</h2>
<ul>
<li>single rendering event receiving a cairo context to draw the frame on</li>
<li>simplified access to keyboard and mouse state</li>
<li>a bunch of very easy to use immediate mode GUI widgets for making interactive demos</li>
<li>user-selectable color themes</li>
</ul>
<h2 id="how-it-works">How it works</h2>
<ol style="list-style-type: decimal">
<li><p>You define the function <code>player:on_render(cr)</code> in which you draw your frame using the <code>cr</code> argument which is a <a href="cairo.html">cairo</a> context. The function gets called continuously on a <code>1 ms</code> timer. The current framerate is displayed on the title bar.</p></li>
<li><p>You call <code>player:play()</code> to display the player's main window and enter the Windows message loop. The function returns after the user has closed the window.</p></li>
</ol>
<h4 id="quick-example">Quick example:</h4>
<pre class="sourceCode lua"><code class="sourceCode lua"><span class="kw">local</span> <span class="kw">player</span> <span class="ot">=</span> require<span class="st">'cplayer'</span>
<span class="kw">function</span> <span class="kw">player</span>:on_render<span class="ot">(</span><span class="kw">cr</span><span class="ot">)</span>
<span class="co">--draw a red square</span>
<span class="kw">cr</span>:set_source_rgb<span class="ot">(</span><span class="dv">1</span><span class="ot">,</span> <span class="dv">0</span><span class="ot">,</span> <span class="dv">0</span><span class="ot">)</span>
<span class="kw">cr</span>:rectangle<span class="ot">(</span><span class="dv">100</span><span class="ot">,</span> <span class="dv">100</span><span class="ot">,</span> <span class="dv">100</span><span class="ot">,</span> <span class="dv">100</span><span class="ot">)</span>
<span class="kw">cr</span>:fill<span class="ot">()</span>
<span class="kw">end</span>
<span class="kw">player</span>:play<span class="ot">()</span></code></pre>
<h3 id="mouse-state">Mouse state</h3>
<table>
<tbody>
<tr class="odd">
<td align="left"><code>self.mousex</code></td>
<td align="left">mouse coordinates in device space.</td>
</tr>
<tr class="even">
<td align="left"><code>self.mousey</code></td>
<td align="left">use <code>cr:device_to_user()</code> to translate them.</td>
</tr>
<tr class="odd">
<td align="left"><code>self.clicked</code></td>
<td align="left">true if the left mouse button was clicked (one-shot)</td>
</tr>
<tr class="even">
<td align="left"><code>self.rightclick</code></td>
<td align="left">true if the right mouse button was clicked (one-shot)</td>
</tr>
<tr class="odd">
<td align="left"><code>self.doubleclicked</code></td>
<td align="left">true if the left mouse button was double-clicked (one-shot)</td>
</tr>
<tr class="even">
<td align="left"><code>self.lbutton</code></td>
<td align="left">true if the left mouse button is down</td>
</tr>
<tr class="odd">
<td align="left"><code>self.rbutton</code></td>
<td align="left">true if the right mouse button is down</td>
</tr>
<tr class="even">
<td align="left"><code>self.wheel_delta</code></td>
<td align="left">mouse wheel movement as number of scroll pages (one-shot)</td>
</tr>
<tr class="odd">
<td align="left"><code>self:hotbox(x, y, w, h) -> true | false</code></td>
<td align="left">check if the mouse hovers a rectangle</td>
</tr>
</tbody>
</table>
<h3 id="keyboard-state">Keyboard state</h3>
<table>
<tbody>
<tr class="odd">
<td align="left"><code>self.key</code></td>
<td align="left">set if a key was pressed (one-shot); values are 'left', 'right', etc. (see source for complete list of key names; one-shot)</td>
</tr>
<tr class="even">
<td align="left"><code>self.char</code></td>
<td align="left">set if a key combination representing a unicode character was pressed (one-shot); value is the character in utf-8</td>
</tr>
<tr class="odd">
<td align="left"><code>self.shift</code></td>
<td align="left">true if shift key is pressed; only check it when <code>self.key</code> is set</td>
</tr>
<tr class="even">
<td align="left"><code>self.ctrl</code></td>
<td align="left">true if alt key is pressed; only check it when <code>self.key</code> is set</td>
</tr>
<tr class="odd">
<td align="left"><code>self.alt</code></td>
<td align="left">true if control key is pressed; only check it when <code>self.key</code> is set</td>
</tr>
<tr class="even">
<td align="left"><code>self:keypressed(keyname) -> true | false</code></td>
<td align="left">check if a key is pressed</td>
</tr>
</tbody>
</table>
<blockquote>
<p>One-shot means that the value is only available for the current frame, then it is cleared. With very slow framerates, some mouse or key events could be lost (for simplicity, there's no event queue).</p>
</blockquote>
<h3 id="wall-clock">Wall clock</h3>
<p>A wall clock in milliseconds is available as <code>self.clock</code>. Interpolating your animations over clock deltas will result in framerate-independent animations. Currently, it is used to blink the editbox caret.</p>
<h3 id="mouse-cursor">Mouse cursor</h3>
<pre><code>self.cursor = <name></code></pre>
<p>Changes the mouse pointer to one of the standard pointers: 'link', 'text', 'busy', etc. Look at the <code>cursors</code> table for the full list. The variable is not retained between frames, so it must be set every time to keep the mouse pointer changed otherwise the pointer will revert back to normal.</p>
<h3 id="theme-aware-api">Theme-aware API</h3>
<table>
<tbody>
<tr class="odd">
<td align="left"><code>self:setcolor(color)</code></td>
</tr>
<tr class="even">
<td align="left"><code>self:fill(color)</code></td>
</tr>
<tr class="odd">
<td align="left"><code>self:stroke(color[, line_width])</code></td>
</tr>
<tr class="even">
<td align="left"><code>self:fillstroke([fill_color], [stroke_color][, line_width])</code></td>
</tr>
</tbody>
</table>
<p>The color argument can be either a color name from the current theme, a hex color in <code>#rrggbb</code> or <code>#rrggbbaa</code> format, or a table of form <code>{r, g, b, a}</code> where each channel is in the <code>0..1</code> range. Look at <code>player.themes.*</code> tables for available themes and color names. To change the current theme just set <code>self.theme</code> to a different theme table. Controls also have a <code>theme</code> parameter.</p>
<h3 id="drawing-helpers">Drawing helpers</h3>
<table>
<tbody>
<tr class="odd">
<td align="left"><code>self:dot(x, y, r, [fill_color], [stroke_color][, line_width])</code></td>
</tr>
<tr class="even">
<td align="left"><code>self:rect(x, y, w, h, [fill_color], [stroke_color][, line_width])</code></td>
</tr>
<tr class="odd">
<td align="left"><code>self:circle(x, y, r, [fill_color], [stroke_color][, line_width])</code></td>
</tr>
<tr class="even">
<td align="left"><code>self:line(x1, y1, x2, y2, [stroke_color][, line_width])</code></td>
</tr>
<tr class="odd">
<td align="left"><code>self:curve(x1, y1, x2, y2, x3, y3, x4, y4, [stroke_color][, line_width])</code></td>
</tr>
<tr class="even">
<td align="left"><code>self:text(text, font_size, color, halign, valign, x, y, w, h)</code></td>
</tr>
<tr class="odd">
<td align="left"><code>self:text_path(text, font_size, halign, valign, x, y, w, h)</code></td>
</tr>
<tr class="even">
<td align="left"><code>* halign = 'center', 'left', 'right'</code></td>
</tr>
<tr class="odd">
<td align="left"><code>* valign = 'middle', 'top', 'bottom'</code></td>
</tr>
</tbody>
</table>
<h3 id="gui-widgets">GUI widgets</h3>
<p>The GUI Widgets are implemented in <code>cplayer/*.lua</code>. The modules are loaded automatically as needed. For the full list of available widgets and the module where each is implemented in, look for <code>autoload</code> in the code. The player demo should also include a usage example for each widget.</p>
<h4 id="quick-example-1">Quick example:</h4>
<pre class="sourceCode lua"><code class="sourceCode lua"><span class="kw">if</span> <span class="kw">self</span>:button<span class="ot">{</span><span class="kw">id</span> <span class="ot">=</span> <span class="st">'ok'</span><span class="ot">,</span> <span class="kw">x</span> <span class="ot">=</span> <span class="dv">100</span><span class="ot">,</span> <span class="kw">y</span> <span class="ot">=</span> <span class="dv">100</span><span class="ot">,</span> <span class="kw">w</span> <span class="ot">=</span> <span class="dv">100</span><span class="ot">,</span> <span class="kw">h</span> <span class="ot">=</span> <span class="dv">24</span><span class="ot">,</span> <span class="kw">text</span> <span class="ot">=</span> <span class="st">'Okay'</span><span class="ot">}</span> <span class="kw">then</span>
print<span class="st">'button pressed'</span>
<span class="kw">end</span></code></pre>
<h3 id="additional-windows">Additional windows</h3>
<p>You can create and show additional windows from the main window with <code>self:window()</code>. Windows are not like other widget methods: each invocation of <code>self:window()</code> creates a new window on screen that doesn't close when the frame ends, but persists until the user closes it (I'll probably change that in the future and have a unique window per id and activate it when invoked and set <code>self.active</code> or something).</p>
<pre class="sourceCode lua"><code class="sourceCode lua"><span class="kw">local</span> <span class="kw">window</span> <span class="ot">=</span> <span class="kw">self</span>:window<span class="ot">{</span>
<span class="kw">w</span> <span class="ot">=</span> <span class="dv">500</span><span class="ot">,</span> <span class="kw">h</span> <span class="ot">=</span> <span class="dv">300</span><span class="ot">,</span> <span class="kw">title</span> <span class="ot">=</span> <span class="st">'Ima window'</span><span class="ot">,</span>
<span class="kw">on_render</span> <span class="ot">=</span> <span class="kw">function</span><span class="ot">(</span><span class="kw">cr</span><span class="ot">)</span>
<span class="ot">...</span>
<span class="kw">end</span><span class="ot">}</span></code></pre>
</section>
</div>
<div id="tab2_container" class="doc"></div>
</div>
</div>
<div class="container">
<footer>
<div id="disqus_thread"></div>
<div class="faint">[email protected] | <a href="http://unlicense.org/">public domain</a></div>
</footer>
</div>
</div>
<script type="text/x-mustache" id=info_tab_template>
<h3>Modules</h3>
<ul>
{{#module_array}}
<li>{{name}}</li>
{{/module_array}}
</ul>
</script>
</body>
</html>