Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added a self continued Demo folder.

  • Loading branch information...
commit 548057fda24c51bc1f3f47f4d751d5fa845fe7e7 1 parent 25d1bce
Michael Bebenita authored
View
BIN  Demo/MuseoSans_500.otf
Binary file not shown
View
83 Demo/broadway.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title></title>
+ <link rel="stylesheet" href="screen.css">
+ <script type='text/javascript'>
+ var Module = {
+ noInitialRun: true
+ };
+ </script>
+ <script src='broadway.js' type='text/javascript'></script>
+ <script src="slides.js"></script>
+
+ <script type='text/javascript'>
+ function play() {
+ console.info("Starting");
+ // Get the file
+ var xhr = new XMLHttpRequest();
+ xhr.open("GET", 'mozilla.264', false);
+ xhr.responseType = "arraybuffer";
+ xhr.send(null);
+ var arrayBuffer = xhr.response;
+ if (arrayBuffer) {
+ var byteArray = new Uint8Array(arrayBuffer);
+ var array = Array.prototype.slice.apply(byteArray);
+ Module.FS.createDataFile('/', 'mozilla.264', array, true, false);
+ //assert(array[0] == 0 && array[4] == 103); // sanity
+ } else alert('load fail :(');
+
+ // Pass canvas and context to the generated code, and do the actual run() here
+ Module.canvas = document.getElementById('canvas');
+ Module.ctx2D = Module.canvas.getContext('2d');
+ if (!Module.ctx2D) {
+ alert('Canvas not available :(');
+ return;
+ }
+ Module.run(['mozilla.264']);
+
+
+ document.getElementById('playButton').visibility = "hidden";
+
+ }
+ </script>
+
+ <div class="title slide">
+ <div class="content">
+ <div class="header">Broadway.js</div>
+ <div class="subheader">H.264 Decoding in JavaScript Using Emscripten</div>
+ <div class="date">October 2011</div>
+ </div>
+ <div class="footer">&copy; 2011, Mozilla</div>
+ </div>
+
+ <!--
+ <div class="normal slide">
+ <div class="content" onLoad="start()">
+ <div class="header">H.264 Decoding in JavaScript</div>
+ <div class="main">
+ <center>
+ <img class="right" style="height: 10em;" src="img/pic1.png">
+ </center>
+ </div>
+ </div>
+ </div>
+ -->
+
+ <div class="normal slide">
+ <div class="content" onLoad="start()">
+ <div style="margin-top: 40px;">
+ <center>
+ <canvas id='canvas'></canvas>
+ <div id='fps' style=""></div>
+ <form>
+ <input type="button" value="Play" id="playButton" onclick="play()"/>
+ </form>
+ </center>
+ </div>
+ </div>
+ </div>
+ </div>
+</html>
+
+
View
372 Demo/broadway.js
372 additions, 0 deletions not shown
View
11 Demo/img/pic1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11 Demo/img/pic2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/img/subpage-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/img/subpage-top-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/img/title-bottom-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/img/title-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/img/title-top-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Demo/mozilla.264
Binary file not shown
View
162 Demo/screen.css
@@ -0,0 +1,162 @@
+/* LAYOUT */
+/* ----------------------------------------- */
+
+html {
+ padding: 0px;
+ margin: 0px;
+ height:100%;
+ width:100%;
+}
+
+body {
+ padding: 0px;
+ margin: 0px;
+ height:100%;
+ width:100%;
+ overflow: hidden;
+}
+
+.right {float: right;}
+.left {float: left;}
+.center {margin: 0px auto;}
+
+
+/* FONTS */
+/* ----------------------------------------- */
+
+@font-face {
+ font-family: "museo";
+ src: url(MuseoSans_500.otf) format("opentype");
+}
+
+body {
+ /* font-family: "museo"; */
+ font-family: "museo", "Trebuchet MS", Lucida Grande, sans-serif;
+}
+
+.header {
+ letter-spacing: -2px;
+ line-height: 60px;
+ font-size: 64px;
+}
+
+.subheader {
+ letter-spacing: -1.5px;
+ line-height: 34px;
+ font-size: 38px;
+}
+
+.date {
+ letter-spacing: -0.5px;
+ line-height: 14px;
+ font-size: 18px;
+}
+
+.slide {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ visibility: hidden;
+ opacity: 0;
+ vertical-align: middle;
+ display:table;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ -webkit-transition-property: opacity, visibility;
+ -webkit-transition-duration: 0.2s, 0.2s;
+ -webkit-transition-timing-function: ease-out, ease-out;
+ -moz-transition-property: opacity, visibility;
+ -moz-transition-duration: 0.2s, 0.2s;
+ -moz-transition-timing-function: ease-out, ease-out;
+}
+
+div.slide.selected {
+ visibility: visible;
+ opacity: 1;
+}
+
+/* CONTENT */
+/* ----------------------------------------- */
+
+.content {
+ position: relative;
+ display:table-cell;
+}
+
+.title.slide {
+ background: url('img/title-top-bg.png') repeat-x top center,
+ url('img/title-bottom-bg.png') repeat-x bottom center;
+}
+
+.normal.slide {
+ background: url('img/subpage-top-bg.png') repeat-x top center,
+ url('img/title-bottom-bg.png') repeat-x bottom center;
+}
+
+.title .content {
+ /* background: transparent url('img/subpage-logo.png') no-repeat 30px 20%; */
+ vertical-align:middle;
+}
+
+.title .header, .title .subheader, .title .date {
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-bottom: 24px;
+}
+
+.normal .content {
+ background: transparent url('img/subpage-logo.png') no-repeat 98% -20px;
+ vertical-align: top;
+}
+
+.normal .header, .normal .subheader {
+ margin-left: 20px;
+ margin-right: 200px;
+ margin-bottom: 14px;
+}
+
+.normal .main {
+ color: rgba(0,0,0,0.7);
+ margin: 40px;
+ margin-top: 40px;
+}
+
+.normal .main img{
+ margin: 20px;
+}
+
+.normal .header {
+ margin-top: 10px;
+ line-height: 50px;
+ font-size: 54px;
+}
+
+.normal .date {
+ position: absolute;
+ bottom: 24px;
+ left: 20px;
+ font-size: 14px;
+ color: rgba(0,0,0,0.4);
+}
+
+.slide-number {
+ position: absolute;
+ bottom: 24px;
+ left: 0px;
+ width: 100%;
+ letter-spacing: -0.5px;
+ font-size: 14px;
+ text-align: center;
+ color: rgba(0,0,0,0.4);
+}
+
+.footer {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ height: 20px;
+ letter-spacing: -0.5px;
+ font-size: 14px;
+ color: rgba(0,0,0,0.4);
+}
View
163 Demo/slides.js
@@ -0,0 +1,163 @@
+function editSource() {
+ window.open("http://etherpad.mozilla.org:9000" +
+ window.location.pathname);
+}
+
+onclick = function(event) {
+ if (event.shiftKey)
+ editSource();
+};
+
+onload = function() {
+ var allSlides = document.querySelectorAll(".slide");
+ var currSlide;
+
+ function $(sel) {
+ return document.querySelector(sel);
+ }
+
+ function each(sel, fun) {
+ var nodeList = document.querySelectorAll(sel);
+ for (var i = 0; i < nodeList.length; i++)
+ fun.call(nodeList[i], i);
+ }
+
+ function removeClass(elem, className) {
+ var classes = elem.className.split(" ");
+ if (classes.indexOf(className) != -1) {
+ classes.splice(classes.indexOf(className), 1);
+ elem.className = classes.join(" ");
+ }
+ }
+
+ function addClass(elem, className) {
+ var classes = elem.className.split(" ");
+ if (classes.indexOf(className) == -1)
+ elem.className += " " + className;
+ }
+
+ function addFooters() {
+ var footer = $(".title.slide .footer");
+ var date = $(".title.slide .date");
+
+ each(".normal.slide", function() {
+ if (date)
+ this.appendChild(date.cloneNode(true));
+ if (footer)
+ this.appendChild(footer.cloneNode(true));
+ });
+
+ each(".slide", function(i) {
+ var slideNo = document.createElement("div");
+ slideNo.className = "slide-number";
+ slideNo.textContent = (i + 1) + " / " + allSlides.length;
+ this.appendChild(slideNo);
+ });
+ }
+
+ function setCurrSlide(newCurrSlide) {
+ if (newCurrSlide != currSlide) {
+ if (currSlide != undefined)
+ removeClass(allSlides[currSlide - 1], "selected");
+ currSlide = newCurrSlide;
+ addClass(allSlides[currSlide - 1], "selected");
+ if (currSlide == 1)
+ window.location.hash = "";
+ else
+ window.location.hash = "#" + currSlide;
+ }
+ }
+
+ function setCurrSlideFromHash() {
+ var hash = window.location.hash;
+ var match = hash.match(/#(-?[0-9]+)/);
+ if (match) {
+ var newSlide = parseInt(match[1]);
+ if (newSlide < 0)
+ newSlide = allSlides.length + newSlide;
+ setCurrSlide(newSlide);
+ } else
+ setCurrSlide(1);
+ }
+
+ function prevSlide() {
+ if (currSlide > 1)
+ setCurrSlide(currSlide - 1);
+ }
+
+ function nextSlide() {
+ if (currSlide < allSlides.length)
+ setCurrSlide(currSlide + 1);
+ }
+
+ if ('onhashchange' in window)
+ window.onhashchange = setCurrSlideFromHash;
+ else
+ window.setInterval(setCurrSlideFromHash, 250);
+
+ window.onkeydown = function(event) {
+ // Don't let Firefox scroll the window *and*
+ // advance the slides at the same time.
+ event.preventDefault();
+ };
+
+ window.onkeyup = function(event) {
+ const LEFT_ARROW = 37;
+ const RIGHT_ARROW = 39;
+ const SPACE = 32;
+
+ switch (event.keyCode) {
+ case SPACE:
+ case RIGHT_ARROW:
+ nextSlide();
+ break;
+ case LEFT_ARROW:
+ prevSlide();
+ break;
+ }
+ };
+
+ function setupTouchUI() {
+ var startX;
+ var startY;
+ var x;
+ var y;
+ var inGesture;
+
+ document.body.addEventListener("touchstart", function(event) {
+ inGesture = true;
+ startX = event.touches[0].pageX;
+ startY = event.touches[0].pageY;
+ }, false);
+
+ document.body.addEventListener("touchmove", function(event) {
+ if (event.touches.length == 3)
+ editSource();
+ if (event.touches.length > 1)
+ inGesture = false;
+ if (!inGesture)
+ return;
+ x = event.targetTouches[0].pageX - startX;
+ y = event.targetTouches[0].pageY - startY;
+ event.preventDefault();
+ }, false);
+
+ document.body.addEventListener("touchend", function(event) {
+ if (!inGesture)
+ return;
+ if (Math.abs(x) < Math.abs(y))
+ return;
+ if (x < 0)
+ nextSlide();
+ if (x > 0)
+ prevSlide();
+ }, false);
+ }
+
+ setCurrSlideFromHash();
+ setupTouchUI();
+ addFooters();
+
+ document.body.style.display = "block";
+ document.title = $(".title.slide .header").textContent;
+};
Please sign in to comment.
Something went wrong with that request. Please try again.