Permalink
Browse files

Presentation

  • Loading branch information...
1 parent cce26e9 commit 314201355ebe8a4e319557ab5aa681da80115563 Ryan McGrath committed Oct 28, 2011
Showing with 327 additions and 0 deletions.
  1. +1 −0 css/arta.min.css
  2. +69 −0 css/presentation.css
  3. +1 −0 js/highlight.min.js
  4. +33 −0 js/slides.js
  5. +106 −0 presentation.html
  6. +117 −0 server.js
View
@@ -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}
View
@@ -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;
+}
View
Oops, something went wrong.
View
@@ -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);
View
@@ -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>
View
@@ -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 + '.');

0 comments on commit 3142013

Please sign in to comment.