New video, changed up layout a bit, and added Info Snippet functionality

cjcliffe · Jul 12, 2011 · 1e42098 · 1e42098
1 parent 7b0e88d
commit 1e42098
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 36 deletions.
diff --git a/lessons/css/lessons.css b/lessons/css/lessons.css
@@ -1,6 +1,8 @@
 html, body {
   width: 100%;
   height: 100%;
+  margin: 0;
+  padding: 0;
   overflow: hidden;
   color: #fff;
   font: 12pt Helvetica;
@@ -20,7 +22,9 @@ html, body {
 }
 
 #title {
+  position: relative;
   display: none;
+  z-index: 600;
 }
 
 #code {
@@ -31,6 +35,64 @@ html, body {
   top: 10px;
 }
 
+.fake-link {
+  text-decoration: none;
+  opacity: 0.6;
+}
+
+.fake-link:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+
+#info-container {
+  position: fixed;
+  color: #000;
+  z-index: 550;
+  display: none;
+  bottom: 2px;
+  width: 100%;
+  height: 12pt;
+}
+
+#info-title {
+  font-weight: bold;
+  position: absolute;
+  right: 0px;
+  width: 110px;
+  white-space: nowrap;
+}
+
+#info {
+  position: absolute;
+  left: 110px;
+}
+
+.info-bar-link {
+  font-size: 10pt;
+  background: transparent;
+  border: none;
+  padding: 0 1px 0 1px;
+  color: #000;
+}
+
+.info-bar-link:hover {
+  background: #fff;
+}
+
+.info-snippet {
+}
+
+.info-link {
+  font-weight: bold;
+}
+
+.info-content {
+  margin: 2px;
+  padding: 2px;
+  font-size: 70%;
+}
+
 #pause {
   display: none;
 }
@@ -54,7 +116,7 @@ html, body {
 
 #media-container {
   position: fixed;
-  bottom: 5px;
+  top: 5px;
   left: 5px;
   z-index: 501;
 }

diff --git a/lessons/lesson1.html b/lessons/lesson1.html
@@ -12,30 +12,37 @@
         <script src="lesson1.js" type="text/javascript"></script>
         <script type="application/x-json" id="lesson-code">
 /*@init1*/var gl = CubicVR.init();/*init1@*/
+/*@initCheck*/
+if (!gl) {
+  throw new Error("Couldn't init WebGL!");
+}
+/*initCheck@*/
 /*@init2*/var canvas = CubicVR.getCanvas();/*init2@*/
+/*@mesh*/
+var boxMesh = CubicVR.primitives.box({
+/*mesh@*/
+/*@meshSize*/
+  size: 1.0,
+/*meshSize@*/
+/*@material*/
+  material: new CubicVR.Material({
+    color: [1, .5, .2]
+  }),
+/*material@*/
+/*@prepareMesh*/
+});
+boxMesh.prepare();
+/*prepareMesh@*/
 /*@cameraInit*/
-
 var camera = new CubicVR.Camera(canvas.width,canvas.height,60);
 /*cameraInit@*/
+/*@cameraSetup*/
 camera.position = [1,1,1];
 camera.lookat([0,0,0]);
-
+/*cameraSetup@*/
-var boxMaterial = new CubicVR.Material({
+/*@render*/
-  color: [1, 0, 0],
-});
-
-var boxMesh = CubicVR.primitives.box({
-  size: 1.0,
-  material: boxMaterial,
-  uvmapper: {
-      projectionMode: CubicVR.enums.uv.projection.CUBIC,
-      scale: [1, 1, 1]
-  }
-});
-
-boxMesh.prepare();
-
 CubicVR.renderObject(boxMesh, camera, CubicVR.IdentityMatrix);
+/*render@*/
         </script>
         <script type='text/javascript'>
           document.addEventListener( "DOMContentLoaded", function (e) {
@@ -69,6 +76,10 @@ <h2 class="black-font">Lesson 1: Setup</h2>
         <div id="code">
           <textarea readonly></textarea>
         </div>
+        <div id="info-container">
+          <a id="info-title" class="fake-link">Info Snippets</a>
+          <span id="info"></span>
+        </div>
       </div>
     </body>
 </html>
diff --git a/lessons/lesson1.js b/lessons/lesson1.js
@@ -13,10 +13,71 @@
     onSeek: function () {
     }
   });
-
+  
   document.addEventListener("DOMContentLoaded", function (e) {
     lesson.start();
     lesson.showCode();
     lesson.executeCode();
+
+    lesson.popcorn.lessoninfo({
+      start: 6,
+      url: "https://github.com/cjcliffe/CubicVR.js/",
+      title: "CubicVR.js on github",
+      content: "CubicVR.js lives on github, along with documentation, live samples, and an issue tracker.",
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 71,
+      label: 'init1'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 100,
+      label: 'initCheck'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 126,
+      label: 'init2'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 193,
+      label: 'mesh'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 197,
+      label: 'meshSize'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 205,
+      label: 'material'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 220,
+      label: 'prepareMesh'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 238,
+      label: 'cameraInit'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 261,
+      label: 'cameraSetup'
+    });
+
+    lesson.popcorn.lessoncode({
+      start: 268,
+      label: 'render',
+      callback: function (code) {
+        lesson.executeCode();
+      }
+    });
+
   }, false);
 })(window, document, $, CubicVR);
diff --git a/lessons/lessons.js b/lessons/lessons.js
@@ -1,4 +1,38 @@
-(function (window, document, $, CubicVR) {
+(function (window, document, $, CubicVR, Popcorn) {
+
+  Popcorn.plugin( "lessoninfo", function (options) {
+    var $barLink = $('<a href="'+options.url+'" class="fake-link info-bar-link">'+options.title+'</a>');
+
+    return {
+      _setup: function () {
+      },
+      start: function (event, options) {
+        $("#info").append($barLink);
+      },
+      end: function (event, options) {
+      },
+      _teardown: function () {
+      }
+    };
+  });
+
+  var currentLesson;
+
+  Popcorn.plugin("lessoncode", function (options) {
+    var callback = options.callback;
+    var label = options.label;
+    return {
+      _setup: function () {
+      },
+      start: function ( event, options ) {
+        currentLesson.writeCode( label, callback );
+      },
+      end: function ( event, options ) {
+      },
+      _teardown: function () {
+      }
+    };
+  });
 
   var Code = function ( code ) {
     this.code = code;
@@ -13,7 +47,7 @@
     } //for
 
     var raw = code.replace(/\/\*@\w*\*\//g, "");
-    raw = raw.replace(/\/\*\w@*\*\//g, "");
+    raw = raw.replace(/\/\*\w*@\*\//g, "");
 
     this.getCode = function () {
       return raw;
@@ -61,27 +95,30 @@
     options = options || {};
     this.onStart = options.onStart || function () {};
     this.onResume = options.onResume || function () {};
-    this.onPause = options.onStart || function () {};
+    this.onPause = options.onPause || function () {};
     this.onSeek = options.onSeek || function () {};
   };
 
   Lesson.prototype = {
     start: function () {
+      currentLesson = this;
       var that = this;
       var popcorn = this.popcorn = Popcorn("#tutorial-media");
       popcorn.listen("play", this.onResume);
       popcorn.listen("pause", this.onPause);
       popcorn.listen("seeked", this.onSeek);
       this.code = new Code(this.getCode());
       $("#play").click(function (e) {
-        that.onStart();
+        if (popcorn.currentTime() === 0) {
+          that.onStart();
+        }
         popcorn.play();
-        $(this).css({display:"none"});
+        $("#play").css({display:"none"});
         $("#pause").css({display:"block"});
       });
       $("#pause").click(function (e) {
         popcorn.pause();
-        $(this).css({display:"none"});
+        $("#pause").css({display:"none"});
         $("#play").css({display:"block"});
       });
     },
@@ -110,28 +147,59 @@
     },
     clearCode: function () {
       $("#code textarea").val("");
-    }
+    },
+
+    addInfo: function ( element ) {
+      $("#info").append(element);
+    },
   };
 
   window.Lesson = Lesson;
 
   document.addEventListener( "DOMContentLoaded", function (e) {
 
     $("#title").children().each( function (i, e) {
-      $(this).css({
+      $(this).css({opacity: 0});
-        opacity: 0
+      $(this).delay(1000+500*i).fadeTo(2000, 1);
-      });
+      $(this).delay(5000+500*i).fadeTo(2000, 0);
-      $(this).delay(1000+500*i).animate({
-        opacity: 1
-      }, 2000);
-      $(this).delay(5000+500*i).animate({
-        opacity: 0 
-      }, 2000);
     });
 
     $("#title").css({
       display: "block"
     });
 
+    $("#info-container").css({
+      display: "block"
+    });
+
+    $("#info").hide();
+
+    $(document).resize( function (e) {
+      if (infoHidden) {
+        $("#info-title").css({
+          left: (window.innerWidth - $("#info-title").width()) + 'px'
+        });
+      }
+    });
+    var infoHidden = true;
+    $("#info-title").click( function (e) {
+      if (infoHidden) {
+        $("#info-title").animate({
+          left: '0px'
+        }, 1000, function () {
+          infoHidden = false;
+          $("#info").fadeTo(500, 1);
+        });
+      }
+      else {
+        $("#info").fadeTo(500, 0);
+        $("#info-title").delay(500).animate({
+          left: (window.innerWidth - $("#info-title").width()) + 'px'
+        }, 1000, function () {
+          infoHidden = true;
+        });
+      } //if
+    });
+
   }, false );
-})(window, document, $, CubicVR);
+})(window, document, $, CubicVR, Popcorn);