Permalink
Browse files

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

  • Loading branch information...
secretrobotron committed Jul 12, 2011
1 parent 7b0e88d commit 1e42098863c41d5e8b334ee87472b0085f4b65bb
Showing with 238 additions and 36 deletions.
  1. +63 −1 lessons/css/lessons.css
  2. +28 −17 lessons/lesson1.html
  3. +62 −1 lessons/lesson1.js
  4. +85 −17 lessons/lessons.js
View
@@ -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;
}
View
@@ -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]);
-
-var boxMaterial = new CubicVR.Material({
- 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();
-
+/*cameraSetup@*/
+/*@render*/
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>
View
@@ -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);
View
@@ -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({
- opacity: 0
- });
- $(this).delay(1000+500*i).animate({
- opacity: 1
- }, 2000);
- $(this).delay(5000+500*i).animate({
- opacity: 0
- }, 2000);
+ $(this).css({opacity: 0});
+ $(this).delay(1000+500*i).fadeTo(2000, 1);
+ $(this).delay(5000+500*i).fadeTo(2000, 0);
});
$("#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);

0 comments on commit 1e42098

Please sign in to comment.