Mercurial > hg > nodescore

annotate www/p/index.html @ 101:52e44ee1c791 tip master

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
enabled all scores in autostart script
author Rob Canning <rc@kiben.net>
date Tue, 21 Apr 2015 16:20:57 +0100
parents eee1afe759d7
children
rev   line source
rc-web@42 1 <!doctype html>
rc-web@42 2 <html lang="en">
rc-web@43 3
rc-web@42 4 <head>
rc-web@42 5 <meta charset="utf-8">
rc-web@46 6
rc-web@42 7 <title>nodescore</title>
rc-web@42 8
rc-web@43 9 <meta name="nodescore" content="nodescore">
rc-web@42 10 <meta name="author" content="Rob Canning">
rc-web@42 11
rc-web@42 12 <meta name="apple-mobile-web-app-capable" content="yes" />
rc-web@42 13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
rc-web@42 14
rc-web@42 15 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
rc-web@42 16
rc-web@42 17 <link rel="stylesheet" href="css/main.css">
rc-web@44 18 <link rel="stylesheet" href="css/theme/simple.css" id="theme">
rc-web@42 19
rc-web@42 20 <!-- For syntax highlighting -->
rc-web@42 21 <link rel="stylesheet" href="lib/css/zenburn.css">
rc-web@42 22
rc-web@42 23 <script>
rc-web@42 24 // If the query includes 'print-pdf' we'll use the PDF print sheet
rc-web@42 25 document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
rc-web@42 26 </script>
rc-web@42 27
rc-web@42 28 <!--[if lt IE 9]>
rc-web@42 29 <script src="lib/js/html5shiv.js"></script>
rc-web@42 30 <![endif]-->
rc-web@42 31 </head>
rc-web@42 32
rc-web@42 33 <body>
rc-web@42 34
rc-web@43 35 <div class="reveal">
rc-web@43 36
rc-web@43 37 <!-- Used to fade in a background when a specific slide state is reached -->
rc-web@43 38 <div class="state-background"></div>
rc-web@43 39
rc-web@43 40 <!-- Any section element inside of this container is displayed as a slide -->
rc-web@43 41 <div class="slides">
rc-web@43 42 <section>
rc-web@43 43
rc-web@43 44 <h3>REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT</h3>
rc-web@44 45 <p>
rc-web@43 46 <i><small>- <a href="http://rob.kiben.net">http://rob.kiben.net</a> <a href="rob@kiben.net">rob@kiben.net</a> -</small></i>
rc-web@43 47 </p>
rc-web@44 48
rc-web@44 49 <p class="fragment">Rob Canning <br> Department of Music<br>Goldsmiths, University of London</p>
rc-web@43 50 </section>
rc-web@43 51
rc-web@43 52 <section>
rc-web@43 53 <h2>NODESCORE</h2>
rc-web@43 54 <p>
rc-web@43 55 NodeScore is a web based framework to facilitate networked ensemble performance.
rc-web@43 56 </p>
rc-web@44 57 <br/><br/>
rc-web@44 58 <ul class="fragment">
rc-web@44 59
rc-web@44 60 <li>NOT a synthesis system</li>
rc-web@46 61 <li>NOT a composition tool</li>
rc-web@46 62 <li>NO control level output (OSC etc.)</li>
rc-web@46 63
rc-web@46 64 <br/>
rc-web@46 65 <li class="fragment">DOES push cues/notation to human performers</li>
rc-web@46 66 <li class="fragment">Precomposed or on-the-fly </li>
rc-web@44 67
rc-web@44 68 <br/>
rc-web@46 69
rc-web@44 70 </ul>
rc-web@44 71
rc-web@43 72 </section>
rc-web@42 73
rc-web@42 74
rc-web@44 75
rc-web@43 76 <section>
rc-web@44 77 <h2>LOCAL</h2> <br/>
rc-web@44 78
rc-web@46 79 <li>Telepresence vs. Presence</li>
rc-web@46 80
rc-web@46 81
rc-web@46 82 <br/>
rc-web@46 83
rc-web@46 84 <ul class="fragment">
rc-web@44 85 "Hypertextual"/ NonLinear Scores/Strategies
rc-web@46 86 <br/>
rc-web@46 87 <li>Composed/Mediated Improvisation</li>
rc-web@46 88 <li>London Improvisors Orchestra (LIO) "Conductions"</li>
rc-web@46 89 <li>Zorn's Cobra - Flash Card Rule based Systems</li>
rc-web@46 90 <br/>
rc-web@46 91 </ul>
rc-web@42 92
rc-web@44 93 </section>
rc-web@44 94
rc-web@44 95
rc-web@44 96 <section>
rc-web@44 97 <h2>Dramaturgies</h2>
rc-web@46 98 Interaction - Distributed Controls/Authorship
rc-web@44 99 <blockquote>projected, directed and distributed</blockquote>
rc-web@43 100 <img width="250" height="250" src="images/directed.png" alt="BreakDOM game screenshot">
rc-web@43 101 <img width="250" height="250" src="images/democracy.png" alt="BreakDOM game screenshot">
rc-web@43 102
rc-web@43 103 </section>
rc-web@42 104
rc-web@44 105 <section>
rc-web@46 106 <h2>Performance Problems</h2> <br/>
rc-web@44 107 <ul>
rc-web@42 108
rc-web@44 109 <li>Clutter - clicktrack, stopwatch, metronome</li>
rc-web@44 110 <li>Oversized/complex "hypertextual" paper scores</li>
rc-web@44 111 <br/>
rc-web@44 112 <li>Different Demands to the Laptop Orchestra</li>
rc-web@44 113 <li>Rich Media v. Composition tool + plugin</li>
rc-web@44 114 </ul>
rc-web@44 115 </section>
rc-web@44 116
rc-web@46 117
rc-web@43 118 <section>
rc-web@44 119 <h2>NODESCORE</h2>
rc-web@44 120 <br/>
rc-web@44 121 <ul>
rc-web@44 122 <li>Scores assembled in HTML5</li>
rc-web@44 123 <li>Musicians displays controled remotely</li>
rc-web@44 124 <br/>
rc-web@44 125 <li>Not all-in-one solution - Modular Approach</li>
rc-web@44 126 <li>May run alongside other streams: media, OSC automation etc.</li>
rc-web@44 127 </ul>
rc-web@44 128 </section>
rc-web@44 129
rc-web@44 130
rc-web@44 131 <section>
rc-web@44 132 <h2>Standards Compliant</h2>
rc-web@42 133
rc-web@43 134 <img width="300" src="images/tim.jpg" alt="BreakDOM game screenshot">
rc-web@43 135 <ul>
rc-web@43 136 <li>HTML5</li>
rc-web@43 137 <li>CSS3</li>
rc-web@43 138 <li>(JAVASCRIPT)</li>
rc-web@43 139 <li>WEBSOCKETS</li>
rc-web@43 140 </ul>
rc-web@43 141 <br><br>
rc-web@43 142 <p>
rc-web@43 143 Open Source - No Plugins <br>(Flash, Flex, Shockwave, Java)
rc-web@43 144 </p>
rc-web@43 145 </section>
rc-web@43 146
rc-web@43 147 <section>
rc-web@44 148 traditional model:
rc-web@44 149 <img height="150" src="images/traditionalhttp.png" alt="http req res">
rc-web@44 150 <br/>
rc-web@44 151 <h2>Server Push Technology</h2>
rc-web@43 152 <ul>
rc-web@44 153
rc-web@44 154 <li>AJAX/Comet Programming/Long Polling</li>
rc-web@44 155 <li>FLASH / JAVA - FLEX - BLADEDS</li>
rc-web@44 156
rc-web@44 157 <br/>
rc-web@44 158 <li>BOSH</li>
rc-web@44 159 <li>WEBSOCKETS</li>
rc-web@43 160 </ul>
rc-web@43 161
rc-web@43 162 <aside class="notes">
rc-web@43 163 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
rc-web@43 164 </aside>
rc-web@43 165 </section>
rc-web@42 166
rc-web@42 167
rc-web@44 168 <section>
rc-web@44 169 <h2>Websockets</h2>
rc-web@44 170
rc-web@44 171 <p></p>
rc-web@44 172
rc-web@44 173 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@44 174 <img width="350" height="350" src="images/websockets.png" alt="BreakDOM game screenshot">
rc-web@44 175 </a>
rc-web@44 176
rc-web@44 177 <ul>
rc-web@44 178 <li>More efficient than AJAX/Comet Programming</li>
rc-web@44 179 <li>Persistant bidirectional TCP socket</li>
rc-web@44 180 <li>REQUEST/RESPONSE handshakes elimintated *</li>
rc-web@44 181 </ul>
rc-web@44 182
rc-web@44 183 <aside class="notes">
rc-web@44 184 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
rc-web@44 185 </aside>
rc-web@44 186 </section>
rc-web@44 187
rc-web@43 188 <section>
rc-web@43 189 <h2>HTTP://SOCKET.IO</h2>
rc-web@42 190
rc-web@43 191 <p>Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.</p>
rc-web@43 192 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 193 <img height="250" src="images/socketio.png" alt="BreakDOM game screenshot">
rc-web@43 194 </a>
rc-web@42 195
rc-web@43 196 <aside class="notes">
rc-web@43 197 <p>Racket/PHP Alternative</p>
rc-web@43 198 </aside>
rc-web@43 199 </section>
rc-web@42 200
rc-web@44 201 <section>
rc-web@44 202 <h2>Directed</h2>
rc-web@44 203 <img width="450" height="450" src="images/directed.png" alt="BreakDOM game screenshot">
rc-web@44 204 </section>
rc-web@44 205
rc-web@44 206 <section>
rc-web@44 207 <h2>Distributed</h2>
rc-web@44 208 <img width="450" height="450" src="images/democracy.png" alt="BreakDOM game screenshot">
rc-web@44 209 </section>
rc-web@42 210
rc-web@42 211
rc-web@43 212 <section>
rc-web@43 213 <h2>Serverside Javascript</h2>
rc-web@43 214 <h3>NodeJS Server</h3>
rc-web@43 215 <pre><code contenteditable>var sio = require('socket.io')
rc-web@43 216 , http = require('http'), fs = require('fs'), static = require('node-static');
rc-web@42 217
rc-web@43 218 var clientFiles = new static.Server('./www');
rc-web@43 219 var httpServer = http.createServer(
rc-web@43 220 function(request, response) {
rc-web@43 221 request.addListener('end', function () {
rc-web@43 222 clientFiles.serve(request, response);
rc-web@43 223 process.setMaxListeners(0);
rc-web@43 224 });
rc-web@43 225 }); httpServer.listen(8889);
rc-web@42 226
rc-web@43 227 var io = sio.listen(httpServer);
rc-web@43 228 io.set('log level', 1); // reduce logging
rc-web@43 229 io.sockets.on('connection', function (socket) {</code></pre>
rc-web@43 230
rc-web@43 231 </section>
rc-web@43 232
rc-web@43 233 <section>
rc-web@43 234 <h2>Client Plumbing</h2>
rc-web@43 235
rc-web@43 236 // load the sockets lib
rc-web@43 237 <pre><code contenteditable>&lt;script src="/socket.io/socket.io.js"&gt &lt;/script&gt
rc-web@43 238 </code></pre>
rc-web@43 239 // connect to socket
rc-web@43 240 <pre><code contenteditable>
rc-web@43 241 var socket = io.connect();
rc-web@43 242 </code></pre>
rc-web@43 243
rc-web@43 244 //send something down the pipe
rc-web@43 245 <pre><code contenteditable>
rc-web@43 246 function startChr() { socket.emit("startChr") } </code></pre>
rc-web@43 247 </section>
rc-web@43 248
rc-web@43 249 <section>
rc-web@43 250 <h2>CLIENT->SERVER->CLIENT</h2>
rc-web@43 251 Chronometer on server pushes -> client
rc-web@43 252 <pre><code contenteditable>// instruction from "director" client executed on server
rc-web@43 253 socket.on('startChr', function () { startChr();});
rc-web@43 254 function startChr() { if (chronstate !== 1) {
rc-web@43 255 chronstate = 1; chronometer();} }
rc-web@43 256 ---snip---
rc-web@43 257 setTimeout(function(){chronometer()}, 100);
rc-web@43 258 socket.broadcast.emit('chronFromServer', chron)
rc-web@43 259 socket.emit('chronFromServer', chron)
rc-web@43 260 ---snip---
rc-web@43 261 // update chron value on the clients in line with server
rc-web@43 262 socket.on("chronFromServer", function(chron) {
rc-web@43 263 $("div#client_chronometer").text(chron);
rc-web@43 264 }); </code></pre>
rc-web@43 265
rc-web@43 266 </section>
rc-web@43 267
rc-web@43 268 <section>
rc-web@43 269 <h2>NODESCORE: INFO PANEL</h2>
rc-web@43 270 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@44 271 <img width="700" src="images/nodescore-infopanel.png" alt="screenshot">
rc-web@43 272 </a>
rc-web@43 273
rc-web@43 274 <p>
rc-web@43 275 </p>
rc-web@43 276 </section>
rc-web@43 277
rc-web@43 278 <section>
rc-web@43 279 <h2>NODESCORE: CHAT PANEL</h2>
rc-web@46 280
rc-web@44 281 <img width="700" src="images/nodescore-chat.png" alt="screenshot">
rc-web@46 282
rc-web@43 283
rc-web@43 284 <p>
rc-web@43 285 </p>
rc-web@43 286 </section>
rc-web@43 287
rc-web@43 288 <section>
rc-web@44 289 <h2>NODESCORE: Score</h2>
rc-web@46 290
rc-web@44 291 <img width="700" src="images/nodescore-nexus.png" alt="screenshot">
rc-web@43 292
rc-web@43 293 <p>
rc-web@44 294 GNU/Lilypond - Phantom.js
rc-web@43 295 </p>
rc-web@43 296 </section>
rc-web@43 297
rc-web@44 298 <section>
rc-web@44 299 <h2>Server Sequencer</h2>
rc-web@44 300 </section>
rc-web@44 301
rc-web@44 302 <section>
rc-web@44 303 <h2>DEMO</h2>
rc-web@44 304 </section>
rc-web@43 305
rc-web@43 306 <section>
rc-web@43 307 <h2>Future Work</h2>
rc-web@43 308 <p>the TODO list...</p>
rc-web@43 309 <ol>
rc-web@44 310 <li class="fragment">Further Modularisation</li>
rc-web@48 311 <li class="fragment">Server on embedded linux (Gumstix) + openwrt</li>
rc-web@43 312 <li class="fragment"><em>Animated SVG, WebGL, <code>&lt;audio&gt;,&lt;video&gt;</em></code></li>
rc-web@44 313 <li class="fragment">Annotation via stylus?</li>
rc-web@43 314 <li class="fragment">
rc-web@44 315 <code>work with an ensemble over extended period - eg. residency</code><br>
rc-web@43 316 </li>
rc-web@48 317 <li class="fragment">
rc-web@48 318 <code >touch screen "director" interface</code><br>
rc-web@48 319 </li>
rc-web@48 320 <li class="fragment">
rc-web@48 321 <code >clean up the code :)</code><br>
rc-web@48 322 </li>
rc-web@48 323
rc-web@43 324 </ol>
rc-web@43 325 </section>
rc-web@43 326
rc-web@43 327
rc-web@43 328
rc-web@43 329 </ul>
rc-web@43 330 </section>
rc-web@43 331
rc-web@43 332 <section>
rc-web@43 333 <h2>links</h2>
rc-web@43 334 <a href="http://nodescore.kiben.net/p/">This Presentation: http://nodescore.kiben.net/p/</a><br><br>
rc-web@43 335
rc-web@43 336 <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a><br><br>
rc-web@43 337
rc-web@43 338 <a href="http://nodescore.kiben.net/p/canning_netscores_shortpaper-2012.pdf">ICMC2012 Paper</a><br><br>
rc-web@47 339 <a href="http://gitorious.org/nodescore">src: http://gitorious.org/nodescore</a><br><br>
rc-web@43 340
rc-web@47 341 <a href="mailto:rc-web@kiben.net">rob@kiben.net</a><br><br>
rc-web@43 342 <a href="http://uk.linkedin.com/pub/rob-canning/35/9b5/481">
rc-web@43 343 <img src="http://www.linkedin.com/img/webpromo/btn_liprofile_blue_80x15.png" width="80" height="15" border="0" alt="View Rob Canning's profile on LinkedIn">
rc-web@43 344 </a><br><br>
rc-web@43 345
rc-web@43 346
rc-web@43 347 </section>
rc-web@43 348 </div>
rc-web@43 349
rc-web@43 350 <!-- The navigational controls UI -->
rc-web@43 351 <aside class="controls">
rc-web@43 352 <a class="left" href="#">&#x25C4;</a>
rc-web@43 353 <a class="right" href="#">&#x25BA;</a>
rc-web@43 354 <a class="up" href="#">&#x25B2;</a>
rc-web@43 355 <a class="down" href="#">&#x25BC;</a>
rc-web@43 356 </aside>
rc-web@43 357
rc-web@43 358 <!-- Presentation progress bar -->
rc-web@43 359 <div class="progress"><span></span></div>
rc-web@43 360
rc-web@43 361 </div>
rc-web@43 362
rc-web@43 363 <script src="lib/js/head.min.js"></script>
rc-web@43 364 <script src="js/reveal.min.js"></script>
rc-web@43 365
rc-web@43 366 <script>
rc-web@43 367
rc-web@43 368 // Full list of configuration options available here:
rc-web@43 369 // https://github.com/hakimel/reveal.js#configuration
rc-web@43 370 Reveal.initialize({
rc-web@43 371 controls: true,
rc-web@43 372 progress: true,
rc-web@43 373 history: true,
rc-web@43 374
rc-web@44 375 theme: Reveal.getQueryHash().theme || 'simple', // available themes are in /css/theme
rc-web@43 376 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
rc-web@43 377
rc-web@43 378 // Optional libraries used to extend on reveal.js
rc-web@43 379 dependencies: [
rc-web@43 380 { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
rc-web@43 381 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
rc-web@43 382 { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@43 383 { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@43 384 { src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@43 385 { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@43 386 ]
rc-web@43 387 });
rc-web@43 388
rc-web@43 389 </script>
rc-web@43 390
rc-web@42 391 </body>
rc-web@42 392 </html>