HSC2011/Software/Frontend/Application development: Unterschied zwischen den Versionen
Chrysn (Diskussion | Beiträge) (moved from Frontend documentation) |
Chrysn (Diskussion | Beiträge) (updated to last upload) |
||
| Zeile 17: | Zeile 17: | ||
by simply overwriting the <tt>display</tt> function. | 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 | 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: | ||
in | |||
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 === | === instruction list === | ||
Aktuelle Version vom 4. Mai 2011, 04:52 Uhr
architectural overview
Each Edubuzzer app, e.g. Raise Your Hands, is chiefly implemented in a single responsible JavaScript file, e.g. raise-your-hands.js, located in Ygor's www directory. Each one can define a single callback, Edubuzzer.run_application which is called when the application is started.
Inside Edubuzzer.run_application it may register other callbacks like Edubuzzer.updated_known_logins which is called whenever a client is added or removed, or Edubuzzer.display which is called in regular intervals.
global.js 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 #hash. The skeleton switches to an app by simply overwriting the display function.
If you set up interval callbacks, make sure you remove them when Edubuzzer.stop_application is called.
general infrastructure
Throughout the games, the jQuery library is used. In order to display buzzers, fill the $("#buzzers") area, additional user interface can be shown in $("#post-buzzers").
talking to buzzers
The global.js 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 dst, do this:
Edubuzzer.send_package(dst, 'S', 's', 'n n yyyy 00 00', function() {});
'S' is the package type to send (as described in the serial documentation), 's' the type of the acknowledgement that is expected, 'n n …' 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 underlying middleware handles all requests in sequence, you can't rely on the browser to deliver multiple send_package calls in sequence.
Events other than acknowledgements you can receive by implementing the hook Edubuzzer.new_event(event). Event will be an object with members src, type and payload, with type typically being "E". The payload is typically "b0001" for the first button going down etc. (again, see, the serial documentation).
instruction list
- decide on an app name (e.g. exampleapp)
- create a new JavaScript file with the name
- implement the run_application function and the hooks you need
- present the app UI in element #buzzers
- keep internal data under the Edubuzzer.exampleapp namespace
- add the app name/link in index.xhtml
- register the app in global.js
- add styles in edubuzzer.css
