These pages use jQueryMobile, but the widget itself is plain jQuery/UI. Please note,
however, that the interaction will vary: if jQueryMobile is detected, the widget
expects the user to drag her finger or cursor across the canvas; otherwise,
the user is expected to simply point and click.
To force one mode or the other, override the drag option (Boolean).
The javascript code is available in verbose and minified versions. Alternatively, you're more than welcome to peruse the source repository.
The basics are explained below. Please refer to the About section before using the widget in your own application!
First, you must have a canvas element in your markup somewhere. The
following assumes this has an id attribute set to "affectbutton";
if you use a different identifier or want to target the element by other attributes
that is fine, of course, so long as you change the jQuery selectors accordingly:
<body>
...
<canvas id="affectbutton"></canvas>
...
</body>
Second, you must include in your document ready callback something
like this to initialize the widget and attach a change listener:
<script>
jQuery( function( $ ) {
...
var canvas = $( '#affectbutton' );
canvas.affectbutton( {
// overriding options go here
} );
canvas.on( 'affectchanged', function( event, affect ) {
// The affect argument in here is an object having
// properties 'pleasure', 'arousal', and 'dominance'.
} );
...
} );
</script>
When you need to get or set the affect value externally, you can use
the widget's affect function. If you call this with no
additional arguments it will return the current value as a plain object
(as in the change listener above):
var affect = canvas.affectbutton( 'affect' );
canvas.affectbutton( 'affect', {
pleasure: 0.5,
arousal: 1,
dominance: 0
} );
canvas.affectbutton( 'affect', 'pleasure', 1 );