DOM manipulation by Gainer/Wiimote over HTTP

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

Keyboard operation

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

One-click translation

  • Arabic
  • Bulgarian
  • Simplified Chinese
  • Traditional Chinese
  • Croatian
  • Czech
  • Danish
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hindi
  • Italian
  • Japanese
  • Korean
  • Norwegian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Spanish
  • Swedish
  • Demo: Hello!

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

    【一】
    Introduction

    Question #1

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

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

    Cool.

    Question #3

    When you develop an Ajax-based application,

    This is the key of this talk.

    Only few people love to manipulate DOM.

    Question #4

    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

    【二】
    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

    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

    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/

    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/

    38 Cosponsors (100+ APIs)

    Acknowledgements

    Thank you.

    Feel free to contact me:
    u-suke [at] kawa.net
    http://www.kawa.net/