-
Notifications
You must be signed in to change notification settings - Fork 0
/
animations.html
307 lines (297 loc) · 15.9 KB
/
animations.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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animations — Playhouse 0.1 documentation</title>
<link rel="stylesheet" href="_static/default.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '0.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Playhouse 0.1 documentation" href="index.html" />
<link rel="up" title="Web server" href="frontend.html" />
<link rel="next" title="Queue" href="queue.html" />
<link rel="prev" title="Game API" href="games.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="http-routingtable.html" title="HTTP Routing Table"
>routing table</a> |</li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="right" >
<a href="queue.html" title="Queue"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="games.html" title="Game API"
accesskey="P">previous</a> |</li>
<li><a href="index.html">Playhouse 0.1 documentation</a> »</li>
<li><a href="frontend.html" accesskey="U">Web server</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="animations">
<h1>Animations<a class="headerlink" href="#animations" title="Permalink to this headline">¶</a></h1>
<p>The GIF Animation module is used to display animations in the Playhouse project.
It uses the widely supported <tt class="docutils literal"><span class="pre">.gif</span></tt> file format, from which it reads animations
and displays them on the grid of lamps in the Playhouse setup.</p>
<p>There are three source files directly associated with this module, which can be
found in the relevant directories:</p>
<ol class="arabic">
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">src/gifanimation.py</span></tt></dt>
<dd><p class="first last">the main module source code, responsible for all logic concerning how animations
are read and displayed on the lamps, and is loaded into the webserver as a game.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">templates/game/gifanimation.html</span></tt></dt>
<dd><p class="first last">template file specifying what is shown to visitors of the web page.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">templates/config/gifconfig.html</span></tt></dt>
<dd><p class="first last">template file specifying the configuration interface.</p>
</dd>
</dl>
</li>
</ol>
<div class="section" id="technical-details">
<h2>Technical details<a class="headerlink" href="#technical-details" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li>The module is based on the <tt class="docutils literal"><span class="pre">lightgames.py</span></tt> <a class="reference internal" href="games.html#gameapi"><em>Game API</em></a>, and is
therefore considered a non-interactive game within the <tt class="docutils literal"><span class="pre">playhouse-web</span></tt> package.</li>
<li>The module is implemented using the Python 3 package
<a class="reference external" href="http://python-imaging.github.io/">Pillow</a> for reading the image files.</li>
<li>The module takes advantage of <a class="reference external" href="http://www.tornadoweb.org/">Tornado</a> web server
features to enable non-blocking looping over animations.</li>
<li>Animations will be displayed starting at point (0,0) in the lamp grid, which
is usually the top rightmost lamp, unless otherwise specified in the settings.</li>
<li>Animations of any width and height will work, no matter the size of the lamp
grid. No unecessary data will be transmitted to the lamp server.</li>
<li>Frames are communicated to the lamp server one full frame at a time, to reduce
possibility of some lamps lagging behind because of delay in network traffic.</li>
<li>Animation frames are displayed on the lamps for the duration specified in
the GIF file.</li>
</ul>
<div class="section" id="settings">
<h3>Settings<a class="headerlink" href="#settings" title="Permalink to this headline">¶</a></h3>
<p>These are the settings available for the GIF Animation module. They can be found
under <tt class="docutils literal"><span class="pre">Settings</span></tt> in the Playhouse config interface on the webserver, after
starting the module/game.</p>
<ul>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">New</span> <span class="pre">animation</span></tt></dt>
<dd><p class="first last">Used to upload a new animation. Upload file must be of type <tt class="docutils literal"><span class="pre">image/gif</span></tt> and is
only stored in RAM on the server.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Play</span> <span class="pre">animation</span></tt></dt>
<dd><p class="first last">Turn on to start the animation loop, which will continously read frames from
the animation file and send the processed data to the lamp server for display.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Center</span> <span class="pre">horizontally</span></tt></dt>
<dd><p class="first last">If enabled, will center the animation on the x-axis of the lamp grid.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Center</span> <span class="pre">vertically</span></tt></dt>
<dd><p class="first last">If enabled, will center the animation on the y-axis of the lamp grid.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Offset</span> <span class="pre">horizontally</span></tt></dt>
<dd><p class="first last">Will offset the animation the specified number of lamps/pixels on the x-axis
of the lamp grid. Must be set to an integer value to have effect.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Offset</span> <span class="pre">vertically</span></tt></dt>
<dd><p class="first last">Will offset the animation the specified number of lamps/pixels on the y-axis
of the lamp grid. Must be set to an integer value to have effect.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Transition</span> <span class="pre">time</span></tt></dt>
<dd><p class="first last">Specifies the time, in tenths of a second, it will take for a lamp to fade from
the previous color to the next when switching frame. Must be set to an integer
value to have effect.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Off</span> <span class="pre">color</span></tt></dt>
<dd><p class="first last">Specifies a color that will turn the lamps corresponding to the pixels of that
color off. They will be turned on again when the lamp (image pixel) changes
color. Kind of a substitute to the GIF-formats transparency attribute.
Useful if you don’t want to use every single lamp in every animation frame.</p>
</dd>
</dl>
</li>
</ul>
<p>Note: The four settings concerning the placement of the image all work in
conjunction with each other and on any image size. For example: a 1x1 image on
a 3x3 grid, centered horizontally, offset horizontally by -1, and offset
vertically by 2, will display in the bottom left corner.</p>
</div>
<div class="section" id="the-animation-loop">
<h3>The animation loop<a class="headerlink" href="#the-animation-loop" title="Permalink to this headline">¶</a></h3>
<p>The animation loop will when started continuously loop over the animation.
It will only stop when explicitly turned off in the settings. All other changes
will take effect somewhere in the loop.</p>
<p>When the animation is turned off, it will continue processing the current frame,
send it to lamp server, wait for the duration of the frame, then stop.</p>
<p>When the animation file is changed, the previous animation will keep playing until
the last frame, and then be exchanged for the new one. When the animation file is
changed, all lamps will also be reset.</p>
<p>When any of the settings concerning the placement of the image on the lamp grid is
changed, this will take effect on the next frame. This will also reset the lamps.</p>
<p>When the transition time is changed, this will have effect on the next frame.</p>
<p>When the off color is changed, this will have effect on the next frame.</p>
</div>
</div>
<div class="section" id="creating-animations">
<h2>Creating animations<a class="headerlink" href="#creating-animations" title="Permalink to this headline">¶</a></h2>
<p>Animations can be created in any image editing software that can export to the
standard <tt class="docutils literal"><span class="pre">.gif</span></tt> file format, for example <a class="reference external" href="http://www.gimp.org/">GIMP</a>.</p>
<p>The GIF Animation module will loop through each frame in order, extract the
per-pixel color values, and display them on the lamp grid for the duration
specified in the GIF file.</p>
<p>While there might be specialized software better suited for creating animated GIFs,
GIMP is a free and open source solution available and easily accessible on most platforms.
It has also been used to create most of the animations used for testing during development.</p>
<ol class="arabic simple">
<li>Create each frame of your animation as a layer in your image.</li>
<li>Name your layers according to the order they are to displayed in and the duration
each frame is supposed to visible for. E.g. <tt class="docutils literal"><span class="pre">Frame</span> <span class="pre">1</span> <span class="pre">(500</span> <span class="pre">ms)</span></tt>, <tt class="docutils literal"><span class="pre">Frame</span> <span class="pre">2</span> <span class="pre">(1000</span> <span class="pre">ms)</span></tt>,
<tt class="docutils literal"><span class="pre">Frame</span> <span class="pre">3</span> <span class="pre">(500</span> <span class="pre">ms)</span></tt>, etc.</li>
<li>Go to <tt class="docutils literal"><span class="pre">File</span> <span class="pre">></span> <span class="pre">Save</span> <span class="pre">As...</span></tt> or <tt class="docutils literal"><span class="pre">File</span> <span class="pre">></span> <span class="pre">Export</span> <span class="pre">To...</span></tt> (whichever is applicable on your
version), chose file format <tt class="docutils literal"><span class="pre">GIF</span> <span class="pre">image</span> <span class="pre">(*.gif)</span></tt>, specify a file name and click <tt class="docutils literal"><span class="pre">Save</span></tt>.</li>
<li>Check the <tt class="docutils literal"><span class="pre">Save</span> <span class="pre">as</span> <span class="pre">Animation</span></tt> box, and click <tt class="docutils literal"><span class="pre">Export</span></tt>.</li>
<li>Specify <tt class="docutils literal"><span class="pre">Animated</span> <span class="pre">GIF</span> <span class="pre">options</span></tt> as appropriate. <tt class="docutils literal"><span class="pre">Save</span></tt>. Done.</li>
</ol>
<div class="section" id="limitations">
<h3>Limitations<a class="headerlink" href="#limitations" title="Permalink to this headline">¶</a></h3>
<p>The GIF Animation module does not take full advantage of the GIF file format.
Listed here are some of the limitations that apply, and things that might not
work due to not having been tested.</p>
<ul class="simple">
<li>The <tt class="docutils literal"><span class="pre">background</span> <span class="pre">color</span></tt> attribute in GIF files is completely ignored.</li>
<li>The <tt class="docutils literal"><span class="pre">transparent</span> <span class="pre">color</span></tt> attribute in GIF files is completely ignored.</li>
<li>The GIF file format supports images consisting of frames each made up of
multiple image blocks and palettes. While this should probably work, as
Pillow claims full support for GIF images, it has not been tested. (It
also shouldn’t be any problem to do without, considering the practical
limitations on the size of the image in a Playhouse setup.)</li>
<li>In Playhouse, all GIFs are forever looping.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Animations</a><ul>
<li><a class="reference internal" href="#technical-details">Technical details</a><ul>
<li><a class="reference internal" href="#settings">Settings</a></li>
<li><a class="reference internal" href="#the-animation-loop">The animation loop</a></li>
</ul>
</li>
<li><a class="reference internal" href="#creating-animations">Creating animations</a><ul>
<li><a class="reference internal" href="#limitations">Limitations</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="games.html"
title="previous chapter">Game API</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="queue.html"
title="next chapter">Queue</a></p>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/animations.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="http-routingtable.html" title="HTTP Routing Table"
>routing table</a> |</li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="right" >
<a href="queue.html" title="Queue"
>next</a> |</li>
<li class="right" >
<a href="games.html" title="Game API"
>previous</a> |</li>
<li><a href="index.html">Playhouse 0.1 documentation</a> »</li>
<li><a href="frontend.html" >Web server</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2014, John Eriksson, Arvid Fahlström Myrman, Jonas Höglund, Hannes Leskelä, Christian Lidström, Mattias Palo, Markus Videll, Tomas Wickman, Emil Öhman.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.2.2.
</div>
</body>
</html>