DOM manipulation by Gainer/Wiimote over HTTP

Yusuke Kawasaki【川﨑有亮】
http://www.kawa.net/
YAPC::Europe 2008 in Copenhagen
Thursday, 13 August 2008

Keyboard operation

[→] next
[←] prev
[↑] index

The slides use the S6, great JavaScript based presentation tool from Japan. amachang++

One-click translation

Demo: Nice to meet you.

The slides are translatable for 24 languages by Google AJAX Language API. This feature is added by me. :)

【一】
Introduction

Question #1

Do you know XML?

<?xml version='1.0' encoding='UTF-8'?>
<document>
    <foo>bar</foo>
</document>

Question #2

Do you know DOM?

var foo = document.getElementById('foo');
var bar = document.createElement('a');
foo.appendChild( bar );

Question #3

When you develop an Ajax-based application,

Do you like to manipulate XML documents with such DOM methods?

Question #4

Do you like to play Nintendo Wii?

Wii Remote is a device ONLY for the Wii game console?

Why don't you like to manipulate DOM like playing Wii?

Imagine DOM manipulation by Wii Remote...

DEMO

⇒

DOM manipulation by Wiimote!

TODAY'S AGENDA

Demo: DOM manipulation
Who's Kawasaki?
JavaScript animation
Real device web services
- Wii Remote
- Gainer

【二】
Who's Kawasaki?

Yusuke Kawasaki

川﨑　有亮

I came from Japan

私は日本から来ました。

Recruit Co., Ltd.

http://recruit.co.jp/

Media Technology Labs

Recruit's institute for research and development.
http://mtl.recruit.co.jp/

川﨑有亮 loves

Perl♥ & YAPC♥
JavaScript♥
Carlsberg♥

More detail: http://www.kawa.net/

CPAN Author

XML::TreePP

use XML::TreePP;
my $tpp = XML::TreePP->new();
my $url = "http://use.perl.org/index.rss";
my $tree = $tpp->parsehttp( GET => $url );
print $tree->{"rdf:RDF"}->{channel}->{title}, "\n";
print $tree->{"rdf:RDF"}->{channel}->{link}, "\n";

Perl module to manipulate XML without Wiimote.
XML and Perl object mapper. (hash/array/scalar)
Pure Perl impl., fast and very less dependencies.
http://www.kawa.net/works/perl/treepp/treepp-e.html
Since 2006.02.20

JSAN Author

XML.ObjTree
Animation.Raster
Animation.Cube

JKL.ParseXML

<script src="jkl-parsexml.js"></script>
<script>
    var url = "zip.xml";
    var http = new JKL.ParseXML( url );
    var data = http.parse();
    document.write( data.items.item.jpref ); // like E4X
</script>

JavaScript library to manipulate XML without Wiimote.
http://www.kawa.net/works/js/jkl/parsexml.html
Since 2005/05/18

【三】
JavaScript animation

Animation.Raster demo

http://www.flickr.com/photos/theory/2589573714/

Animation.Cube demo

JavaScript + Canvas Powered 3D Engine

Under development.
http://www.kawa.net/works/js/wire3d/v2/wiimote3d.html 2008/03/17

【四】
Real device web service
Wiimote

Wiimote = Wii Remote

is a bluetooth wireless device.

See: http://www.wiili.org/index.php/Wiimote

Wiimote over HTTP

is a tech for manipulating Wiimotes through the Internet.

WoH's architecture

MAX: 7 Wiimotes

MAX: 7 Players

Problem

Wiimote has only four LEDs to indicate player number.

How to indicate player #5, #6 and #7?

Player number indicator

Get Wiimote over HTTP server right now!

http://code.google.com/p/wiimote-over-http/

Java (not Perl though)
Jetty embedded HTTPd
BLUECOVE 2.0.2
WIDCOMM Driver

API Response

<?xml version="1.0" encoding="UTF-8" ?>
<response>
    <status>200</status>
    <method>getStatus</method>
    <data>
        <wiimote index="1">
            <a>0</a>
            <b>0</b>
            <xPos>-0.969388</xPos>
            <yPos>-0.060606</yPos>
            <zPos>0.299065</zPos>
            <roll>-1.322725</roll>
            <pitch>-0.060643</pitch>
            <plus>0</plus>
            <minus>0</minus>
            <one>0</one>
            <two>0</two>
            <home>0</home>
            <up>0</up>
            <down>0</down>
            <left>0</left>
            <right>0</right>
            <nunchuk>
	            <roll>0.0</roll>
	            <yPos>0.0</yPos>
	            <xPos>0.0</xPos>
	            <c>0</c>
	            <zPos>0.0</zPos>
	            <yVec>0.0</yVec>
	            <xVec>0.0</xVec>
	            <z>0</z>
	            <pitch>0.0</pitch>
            </nunchuk>
        </wiimote>
    </data>
</response>

WebService::Device::Wiimote

use WebService::Device::Wiimote;

my $wiimote = WebService::Device::Wiimote->new;
my $stat = $wiimote->getStatus;
my $wiimote = $stat->root->{data}->{wiimote};

print 'A:     ', $wiimote->{a}, "\n";
print 'B:     ', $wiimote->{b}, "\n";
print 'Up:    ', $wiimote->{up}, "\n";
print 'Down:  ', $wiimote->{down}, "\n";
print 'Right: ', $wiimote->{right}, "\n";
print 'Left:  ', $wiimote->{left}, "\n";
print 'Pitch: ', $wiimote->{pitch}, "\n";
print 'Roll:  ', $wiimote->{roll}, "\n";

【五】
Real device web service
Gainer

Gainer

An yet another real device of today.
http://gainer.cc/?userlang=en

digital/analog x I/O x 4

Device::Gainer Usage

use Device::Gainer;
my $opt = { host => '192.168.1.xx' };
my $gainer = Device::Gainer->new( %$opt );
$gainer->on_pressed(sub { print "PRESSED\n"; });
$gainer->on_released(sub { print "RELEASED\n"; });
$gainer->turn_on_led();
$gainer->turn_off_led();

http://svn.coderepos.org/share/lang/perl/Device-Gainer/

POE::Component::Server::HTTP

use POE qw( Component::Server::HTTP );
use HTTP::Request::AsCGI;
use CGI;
my $aliases = POE::Component::Server::HTTP->new( %$conf );
POE::Kernel->run();
sub handler {
    my ($req, $res) = @_;
    my $ascgi = HTTP::Request::AsCGI->new($req)->setup;
    my $cgi = CGI->new();
    $res->content_type('text/plain');
    $res->content('Hello, World!');
    $res->code(RC_OK);
    return RC_OK;
}