code/wii-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Presentation

Browse source
This commit is contained in:
Ryan McGrath 2011-10-28 17:25:38 +09:00
parent cce26e9ded
commit 314201355e
6 changed files with 327 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
css/arta.min.css vendored Normal file
View file

@ -0,0 +1 @@
pre code{display:block;padding:.5em;background:#222}pre .header,pre .profile .header *,pre .ini .title{color:#fff}pre .comment,pre .javadoc,pre .preprocessor,pre .shebang,pre .profile .summary,pre .diff,pre .pi,pre .doctype,pre .xml .tag,pre .template_comment,pre .css .rules,pre .tex .special{color:#444}pre .string,pre .symbol,pre .diff .change,pre .regexp,pre .xml .attribute,pre .xml .value,pre .smalltalk .char,pre .ini .value{color:#fc3}pre .number,pre .addition{color:#0c6}pre .built_in,pre .literal,pre .vhdl .type,pre .go .constant,pre .go .typename,pre .ini .keyword,pre .lua .title,pre .perl .variable,pre .php .variable,pre .mel .variable,pre .django .variable,pre .css .funtion,pre .smalltalk .method,pre .hexcolor,pre .important,pre .flow,pre .inheritance,pre .parser3 .variable{color:#32aaee}pre .keyword,pre .xml .tag .title,pre .css .tag,pre .css .class,pre .css .id,pre .css .pseudo,pre .css .attr_selector,pre .lisp .title,pre .winutils,pre .tex .command{color:#64a}pre .class .title,pre .ruby .constant,pre .vala .constant,pre .parent,pre .deletion,pre .template_tag,pre .css .keyword,pre .javascript .title,pre .objectivec .class .id,pre .smalltalk .class,pre .lisp .keyword,pre .apache .tag,pre .nginx .variable,pre .envvar,pre .bash .variable,pre .go .built_in,pre .vbscript .built_in,pre .lua .built_in,pre .rsl .built_in,pre .tail,pre .avrasm .label,pre .parser3 .title,pre .tex .formula,pre .tex .formula *{color:#b16}pre .yardoctag,pre .phpdoc,pre .profile .header,pre .ini .title,pre .apache .tag,pre .parser3 .title{font-weight:bold}pre .xml .javascript,pre .xml .css,pre .xml .cdata{opacity:.6}pre code,pre .javascript,pre .css,pre .xml,pre .subst,pre .diff .chunk,pre .css .value,pre .css .attribute,pre .lisp .string,pre .lisp .number,pre .tail .params,pre .container,pre .haskell *,pre .erlang *,pre .erlang_repl *{color:#aaa}

69
css/presentation.css Normal file
View file

@ -0,0 +1,69 @@
/**
* Basic CSS for server sent events demo.
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, kbd, q, s, samp,
small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
html {
color: #333;
font: normal 22px/26px helvetica, arial, sans-serif;
padding: 0px;
background: #fff;
overflow: hidden !important;
}
body {
overflow: hidden !important;
padding: 0px;
margin: 0px;
}
h1 {
background-color: #01acca;
padding: 20px 0;
text-indent: 20px;
color: #fff;
font-weight: bold;
font-size: 1.8em;
}
h2 { font-size: 1.5em;background-color: #e9e9e9; border-bottom: 1px solid #c9c9c9; margin: 0; padding: 15px; }
a, a:visited { color: #01acca; font-weight: bold; text-decoration: none; }
ul { margin: 10px 0 0 45px; list-style-type: disc; }
li {
font-size: 1.3em;
line-height: 1.3em;
padding: 10px 0;
color: #555;
}
.slide {
display: none;
border: 1px solid #c9c9c9;
background-color: #f9f9f9;
margin: 30px auto;
padding: 0;
}
pre {
background: #333;
color: #f9f9f9;
font-size: 18px;
line-height: 22px;
font-family: inconsolata, monospace;
width: 92%;
border-radius: 4px;
padding: 10px;
}

1
js/highlight.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

33
js/slides.js Normal file
View file

@ -0,0 +1,33 @@
/**
* slides.js
*
* Some incredibly ugly quick code for a slides-esque experience
* on both the Wii and browsers.
*
* @Author: Ryan McGrath <ryan@venodesigns.net>
* @Requires: Nothing
*/
var slides = document.getElementsByTagName('div'),
count = slides.length,
index = 0;
var sizeSlide = function sizeSlide(slide, oldIndex) {
slides[oldIndex].style.display = 'none';
slide.style.width = (window.innerWidth - 40) + 'px';
slide.style.display = 'block';
}
document.addEventListener('keydown', function(e) {
if(e.keyCode === 39 && (index + 1) < count) {
sizeSlide(slides[index + 1], index);
index = index + 1;
}
if(e.keyCode === 37 && (index - 1) >= 0) {
sizeSlide(slides[index - 1], index);
index = index - 1;
}
}, false);
sizeSlide(slides[0], 0);

106
presentation.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Introducing Wii.js</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/presentation.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/arta.min.css">
<style>.keyword { color: #ea1fb8 !important; }</style>
</head>
<body>
<h1>Wii-js</h1>
<div class="slide" id="intro">
<h2>Who I am</h2>
<ul>
<li>Senior Engineer, myGengo</li>
<li>Author of MapRejuice, wrench-js, others</li>
<li><a href="http://github.com/ryanmcgrath">github.com/ryanmcgrath</a></li>
</ul>
</div>
<div class="slide" id="why">
<h2>Why did I make this?</h2>
<ul>
<li>No decent API for the Wii Web Browser existed</li>
<li>Nintendo doesn't want it to exist...</li>
<li>Great way to teach children how to program</li>
</ul>
</div>
<div class="slide" id="quirks">
<h2>Wii Browser & Quirks</h2>
<ul id="quirksul">
<li><strong>Opera 9.26</strong> - CSS2.1, &lt;canvas&gt;, SVG, and more...</li>
<li>Annoying memory limits (~88MB entire system, Browser is far less)</li>
<li><strong>Repaint slower</strong>; repeated timeouts less than 100ms causes the Wii to freeze up</li>
<li><strong>Only Wii Remotes work</strong>; no other controller types usable. :(</li>
<li>Leave type="" off &lt;script&gt; tags, or they won't work sometimes</li>
</ul>
</div>
<div class="slide" id="js">
<h2>Wii-js API (Event Based)</h2>
<ul style="list-style-type: none; margin-left: 15px;">
<li id="code1">
<pre>var wiimote = new Wii.Remote(1, {horizontal: true}),
wiimote2 = new Wii.Remote(2, {horizontal: true});
wiimote.when('pressed_a', function() {
alert('A Button on Wiimote 1 Pressed!');
});
wiimote2.when('pressed_a', function() {
alert('Right Button on Wiimote 2 Pressed!');
});
</pre>
</li>
</ul>
</div>
<div class="slide" id="node">
<h2>Opera on Wii has [[[Server-Sent-Events]]]!</h2>
<ul style="list-style-type: none; margin-left: 15px;">
<li id="code2">
<pre>var http = require('http');
function sendEvents(response) {
response.write('id: ' + (new Date()).toLocaleTimeString() + '\n');
response.write('data: ' + (Math.floor(Math.random() * 10000) + 2) + '\n');
setTimeout(function() {
sendEvents(response);
}, 5000);
}
http.createServer(function(request, response) {
response.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
sendEvents(response);
}).listen(8000);
</pre>
</li>
</ul>
</div>
<div class="slide" id="thanks">
<h2>Thanks!</h2>
<ul>
<li><strong>Twitter:</strong> <a href="http://twitter.com/ryanmcgrath">@ryanmcgrath</a></li>
<li><strong>Wii-js on GitHub:</strong> <a href="http://github.com/ryanmcgrath/wii-js">http://github.com/ryanmcgrath/wii-js</a></li>
<li><strong>Demo:</strong> <a href="http://venodesigns.net/wii/">http://venodesigns.net/wii</a>
</ul>
</div>
<script src="js/wii.js"></script>
<script src="js/slides.js"></script>
<script src="js/highlight.min.js"></script>
<script>
hljs.highlightBlock(document.getElementById('code1'), null, false);
hljs.highlightBlock(document.getElementById('code2'), null, false);
</script>
</body>
</html>

117
server.js Normal file
View file

@ -0,0 +1,117 @@
/**
* server.js
*
* An example of a Node.js server that streams a set
* of events to a browser. This is primarily aimed at
* use with wii-js; since the wii's browser has a set of
* quirks like no other, this file can be expected to change.
*
* This is commented possibly more liberally than it should be,
* as it's intended to be easily accessible by those who might not
* have worked with Node.js and/or Server Sent Events before.
*
* @Author: Ryan McGrath <ryan@venodesigns.net>
* @Requires: Nothing, sans a little Node.js
*/
var DEBUG = true,
PORT = 8080,
http = require('http'),
util = require('util'),
fs = require('fs');
/**
* sendEvent()
*
* Sends down a set of events roughly every ~5 seconds. Not that
* many would go so low, but sending more than once every ~500ms is
* not recommended. The Wii's browser has some odd memory limitations
* that aren't too much fun to be caught up in.
*
* @response - response object/stream, where data gets written to.
*/
var sendEvents = function sendEvent(response) {
var id = (new Date()).toLocaleTimeString(),
data = (Math.floor(Math.random() * 10000) + 2);
response.write('id: ' + id + '\n');
response.write('data: ' + data + '\n');
/**
* Set this up to re-send in a few seconds on the
* same request.
*/
setTimeout(function() {
sendEvents(response);
}, 5000);
};
/**
* determineContentType(url)
*
* Given a url, determines one of three content types that we care
* about. I'm an opinionated person and chose not to use Express here,
* but if you'd rather not deal with it the static module there is quite
* possibly your new best friend.
*
* @url - string, url to be tested for content-type
*/
var determineContentType = function determineContentType(url) {
if(/\.js/.test(url)) return 'text/javascript';
if(/\.css/.test(url)) return 'text/css';
return 'text/html';
};
/**
* Now we'll set up a simple server that listens our our port we set
* above, which will either distribute resources or events depending
* on the headers.
*/
http.createServer(function(request, response) {
/**
* All but useless to us...
*/
if(request.url === '/favicon.ico') {
response.writeHead(404);
response.end();
return;
}
/**
* If things don't appear to be working, uncomment this and check out
* what's getting posted over. Certain headers need to be set by the browser;
* it's possible they're not getting set for some reason...
*/
if(DEBUG && request.url !== '/favicon.ico') {
util.puts('\n-----------------------------------------------------');
util.puts('URL: ' + request.url);
for(var key in request.headers) {
util.puts(key + ': ' + request.headers[key]);
}
}
/**
* See the comment about DEBUG/headers above. If we have proper headers, we'll
* start sending down a stream of events; if not, we'll assume it's a normal request
* and serve up some HTML/CSS/JS/etc.
*/
if(request.headers.accept && request.headers.accept === 'text/event-stream') {
response.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
sendEvents(response);
} else {
var file = request.url === '/' ? '/presentation.html' : request.url;
response.writeHead(200, {'Content-Type': determineContentType(request.url)});
fs.readFile(__dirname + file, 'utf-8', function(err, data) {
if(err) throw err;
response.write(data);
response.end();
});
}
}).listen(PORT);
util.puts('\n--------------------------------------------------------------------');
util.puts('Server started and listening on port ' + PORT + '.');