DOM manipulation by Wiimote/Gainer over HTTP

2008.05.15 @ YAPC::Asia 2008 Tokyo
Yusuke Kawasaki【川﨑有亮】
http://www.kawa.net/

Keyboard operation

This presentation uses "S6", great JavaScript based presentation tool, created by amachang.

One-click translation

Example: Welcome!
Powered by Google AJAX Language API

Questions

Question #1

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

Question #2

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

Question #3

When you're developing an Ajax-based application,

Question #4

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

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

DEMO

DOM manipulation by Wiimote!

TODAY'S AGENDA

§2
WHO AM I?

Yusuke Kawasaki

川﨑 有亮


http://www.kawa.net/

RECRUIT

http://recruit.jp/

Media Technology Labs

http://mtl.recruit.co.jp/

CPAN Author

XML::TreePP

XML manipulation without Wiimote.

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

http://www.kawa.net/works/perl/treepp/treepp-e.html 2006.02.20

JSAN Author

JKL.ParseXML

XML manipulation without Wiimote (again).

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

http://www.kawa.net/works/js/jkl/parsexml.html 2005/05/18

§3
JavaScript animation

Animation.Cube demo


Animation.Raster demo

JavaScript + Canvas Powered 3D Engine

under development.
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>

§4
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

Player number indicator

Get the Wiimote over HTTP server right now!

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

§5
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 module

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();

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

§5
Extra

The JUI Conference

2008.05.19   18:30-
Next Monday @ Ginza, Tokyo

Acknowledgements

Thank you!

See you again in Chicago!
YAPC::NA 2008
2008.06.18   11:45 AM