DOM manipulation by Gainer/Wiimote over HTTP

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

Keyboard operation

The slides use the S6, great JavaScript based presentation tool from Japan. 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: 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

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

    Imagine DOM manipulation by Wii Remote...

    DEMO

    DOM manipulation by Wiimote!

    TODAY'S AGENDA


    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

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

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

    GoH's architecture

    Over the Net means...

    Human interface devices (input)

    Feedback to real object (output)


    Announcement

    Mashup Awards 4

    You can apply your applications to the largest contest for web development.
    1st prize: JPY¥1,000,000! (≒DKK 45,000) http://mashupaward.jp/english/

    40 Co-sponsors (100+ APIs)


    kurukuru ai

    http://ai.kuru2.st/olympic/

    News about the Olympic Games from all over the world. 24 languages included Danish are supported for all 205 countries/areas.

    ex. Japanese to French

    A popular webzine written in Japanese is translated into French.

    ex. English to Japanese

    A news website written in English is translated into Japanese.

    http://ai.kuru2.st/iphone/

    Yet another "kurukuru ai" about iPhone for 21 countries where iPhone is sold since July 11.

    ex. Japanese to German

    A popular blog written in Japanese is translated into German.


    Acknowledgements

    Thank you. (^_^)/

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