≪
≪
≫
≫

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