DOM manipulation by Gainer/Wiimote over HTTP

Yusuke Kawasaki【川﨑有亮】
http://www.kawa.net/
YAPC::NA 2008 in Chicago
Wednesday, 18 June 2008

Keyboard operation

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

The slides use JavaScript-based "S6" presentation tool created by amachang.

One-click translation

Demo: Hello!

The slides are translatable for 24 languages with Google AJAX Language API

【一】
Introduction

Question #1

Do you know XML?

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

Thank you all for raising your hand to do exercise.

Next.

Question #2

Do you know DOM?

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

Cool.

Question #3

When you develop an Ajax-based application,

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

This is the key of this talk.

Only few people love to manipulate DOM.

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?

Imazine DOM manipulation by Wii Remote...

DEMO

DOM manipulation by Wiimote!

[WII] [GAINER] [DEMO]

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.

Gold sponsor of YAPC::Asia 2008 Tokyo
http://recruit.co.jp/

Media Technology Labs

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

川﨑有亮 loves

Perl♥ & YAPC♥
JavaScript♥
Xiaolongbao♥

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.Cube
Animation.Raster

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.Cube demo

Animation.Raster demo

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

JavaScript + Canvas Powered 3D Engine

Under development. [DEMO 1] [DEMO 2] [DEMO 3]
http://www.kawa.net/works/js/wire3d/v2/wiimote3d.html 2008/03/17

wire3d.js

<script src="wire3d.js" type="text/javascript"></script>
<script src="wire3d-wiimote.js" type="text/javascript"></script>
<script type="text/javascript">

    var wii = new Wire3D.Item.Wiimote();
    wii.resize( 1.0, 1.0, 1.0 );
    wii.rotate( 0.0, 0.3, -0.5 );

    var space = new Wire3D.Space();
    space.append( wii );

    camera = new Wire3D.Camera( 'demo_here', space );
    camera.display();

</script>

【四】
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.

[CONTROL PANEL] [DEMO]

WoH's architecture

MAX: 7 Wiimotes

[CONTROL PANEL] [DEMO]

MAX: 7 Players

[CONTROL PANEL] [DEMO]

Player number indicator

Get Wiimote over HTTP server right now!

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

Java (not Perl...)
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
[CONTROL PANEL]

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;
}

GoH's architecture

Over the Net means...

【六】
Announcement

Mashup Award 4th

A largest contest for web application development in Japan.
1st prize: JPY￥1,000,000! (≒US$10K) http://mashupaward.jp/english/

DOM manipulation by Gainer/Wiimote over HTTP

Keyboard operation

One-click translation

【一】 Introduction

Question #1

Question #2

Question #3

Question #4

DEMO

TODAY'S AGENDA

【二】 Who's Kawasaki?

Yusuke Kawasaki

川﨑 有亮

I came from Japan

Recruit Co., Ltd.

Media Technology Labs

川﨑有亮 loves

CPAN Author

XML::TreePP

JSAN Author

JKL.ParseXML

【三】JavaScript animation

Animation.Cube demo

Animation.Raster demo

JavaScript + Canvas Powered 3D Engine

wire3d.js

【四】Real device web service Wiimote

Wiimote = Wii Remote

Wiimote over HTTP

WoH's architecture

MAX: 7 Wiimotes

MAX: 7 Players

Player number indicator

Get Wiimote over HTTP server right now!

API Response

WebService::Device::Wiimote

【五】Real device web service Gainer

Gainer

digital/analog x I/O x 4

Device::Gainer Usage

POE::Component::Server::HTTP

GoH's architecture

Over the Net means...

【六】Announcement

Mashup Award 4th

38 Cosponsors (100+ APIs)

Acknowledgements

Thank you.

【一】
Introduction

【二】
Who's Kawasaki?

川﨑　有亮

【三】
JavaScript animation

【四】
Real device web service
Wiimote

【五】
Real device web service
Gainer

【六】
Announcement