Quelltext der Seite HSC2011/Software/Frontend/Application development

<small>[[HSC2011]]</small>

=== architectural overview ===

Each Edubuzzer app, e.g. '''Raise Your Hands''', is chiefly implemented in a
single responsible JavaScript file, e.g. <tt>raise-your-hands.js</tt>, located in Ygor's
<tt>www</tt> directory. Each one can define a single callback,
<tt>Edubuzzer.run_application</tt> which is called when the application is started.

Inside <tt>Edubuzzer.run_application</tt> it may register other callbacks like
<tt>Edubuzzer.updated_known_logins</tt> which is called whenever a client is added
or removed, or <tt>Edubuzzer.display</tt> which is called in regular intervals.

<tt>global.js</tt> runs a poor man's event loop and schedules all pollings to the
server which result in callbacks of the active app registered being called.  An
app is activated by changing the URI <tt>#hash</tt>. The skeleton switches to an app
by simply overwriting the <tt>display</tt> function.

If you set up interval callbacks, make sure you remove them when <tt>Edubuzzer.stop_application</tt> is called.

=== general infrastructure ===

Throughout the games, the [http://api.jquery.com/jQuery.getJSON/ jQuery] library is used. In order to display buzzers, fill the <tt>$("#buzzers")</tt> area, additional user interface can be shown in <tt>$("#post-buzzers")</tt>.

=== talking to buzzers ===

The <tt>global.js</tt> library implements most of the buzzer communication you'll need. For example, in order to turn on all the four LEDs on a buzzer called <tt>dst</tt>, do this:

 Edubuzzer.send_package(dst, 'S', 's', 'n n yyyy 00 00', function() {});

<tt>'S'</tt> is the package type to send (as described in [[HSC2011/Communication/Serial protocol|the serial documentation]]), <tt>'s'</tt> the type of the acknowledgement that is expected, <tt>'n n …'</tt> the payload (as described there as well), and the function will get called once the command is acknowledged by the buzzer.

Be aware that while the [[HSC2011/Software/Ygor|underlying middleware]] handles all requests in sequence, you can't rely on the browser to deliver multiple <tt>send_package</tt> calls in sequence.

Events other than acknowledgements you can receive by implementing the hook <tt>Edubuzzer.new_event(event)</tt>. Event will be an object with members <tt>src</tt>, <tt>type</tt> and <tt>payload</tt>, with <tt>type</tt> typically being <tt>"E"</tt>. The payload is typically <tt>"b0001"</tt> for the first button going down etc. (again, see, the serial documentation).


=== instruction list ===

* decide on an app name (e.g. <tt>exampleapp</tt>)
* create a new JavaScript file with the name
* implement the <tt>run_application</tt> function and the hooks you need
** present the app UI in element <tt>#buzzers</tt>
** keep internal data under the <tt>Edubuzzer.exampleapp</tt> namespace
* add the app name/link in <tt>index.xhtml</tt>
* register the app in <tt>global.js</tt>
* add styles in <tt>edubuzzer.css</tt>


[[Kategorie:HSC2011]]
[[Kategorie:English]]