Skip to content

Commit

Permalink
Added Learning Lab 3, WebRTC Data Channel.
Browse files Browse the repository at this point in the history 
Fixed typo from LL2.
  • Loading branch information
@jacobabrennan
jacobabrennan committed Jan 9, 2013
1 parent 8d741c5 commit da4e6bf
Show file tree
Hide file tree
Showing 6 changed files with 553 additions and 3 deletions.
261 changes: 261 additions & 0 deletions media/ignite/resources/js/global_popcorn_events_webrtc_data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
ignite.link_node_manager.content[0] = {
notes: "This is the global group of non-link_node objects.",
content: [
{notes: "The Ignite logo", time_in: 1, time_out: 3,
start: function (){
var logo1 = document.getElementById("logo1");
logo1.className = "centered_logo";
logo1.style.display = "block";
logo1.style.opacity = "0"
logo1.transition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
logo1.MozTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
logo1.WebkitTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
logo1.OTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
setTimeout(function (){
logo1.style.opacity = "1";
}, 100);
if(!this.setup){
this.setup = true;
ignite.popcorn.cue(this.time_in+1, function (){
logo1.className = "positioned_logo";
})
}
},
end: function (){
var logo1 = document.getElementById("logo1");
logo1.transition = " ";
logo1.MozTransition = " ";
logo1.WebkitTransition = " ";
logo1.OTransition = " ";
logo1.style.display = "block";
logo1.style.opacity = "1";
logo1.className = "positioned_logo";
},
check: function (time_code){
var logo1 = document.getElementById("logo1");
if(time_code < this.time_in){
logo1.className = "centered_logo";
logo1.style.display = "none";
logo1.style.opacity = "0";
} else if(time_code > this.time_out){
this.end();
}
}
},
{notes: "The WebRTC logo", time_in: 3, time_out: 4,
start: function (){
var logo2 = document.getElementById("logo2");
logo2.className = "centered_logo";
logo2.style.display = "block";
logo2.transition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
logo2.MozTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
logo2.WebkitTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
logo2.OTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
setTimeout(function (){
logo2.style.opacity = "1";
}, 100);
if(!this.setup){
this.setup = true;
ignite.popcorn.cue(this.time_in+1, function (){
logo2.className = "positioned_logo";
})
}
},
end: function (){
var logo2 = document.getElementById("logo2");
logo2.transition = " ";
logo2.MozTransition = " ";
logo2.WebkitTransition = " ";
logo2.OTransition = " ";
logo2.style.display = "block";
logo2.style.opacity = "1";
logo2.className = "positioned_logo";
},
check: function (time_code){
var logo2 = document.getElementById("logo2");
if(time_code < this.time_in){
logo2.className = "centered_logo";
logo2.style.display = "none";
logo2.style.opacity = "0";
} else if(time_code > this.time_out){
this.end();
}
}
},
{notes: "Walkthrough", time_in: 5, time_out: 10,
displayed: undefined, // Needed for unexpected behavior in Chrome.
start: function (){
if(this.displayed){ return;}
this.displayed = true;
var walkthrough_button = document.getElementById("walkthrough_link");
walkthrough_button.style.display = "block";
if(!this.setup){
this.setup = true;
var passed_event = this;
walkthrough_button.addEventListener("click", function (){
ignite.start_walkthrough();
passed_event.end();
});
}
/* The following setTimeout call is necessary to prevent
* block and opacity from being set simultaneously, which would
* result in a spontaneous appearance instead of a fade-in.
*/
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.opacity = "1";
}
})(walkthrough_button), 1000);
},
end: function (){
if(!this.displayed){ return;}
this.displayed = false;
var walkthrough_button = document.getElementById("walkthrough_link");
walkthrough_button.style.opacity = "0";
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.display = "none";
}
})(walkthrough_button), 1000);
},
check: function (time_code){
if(time_code > this.time_in && time_code < this.time_out){
this.start();
} else{
this.end();
}
}
},
{notes: "Add Arrows", time_in: 10, time_out: 11,
started: undefined, // Needed for unexpected behavior in Chrome.
start: function (){
if(this.started){ return;}
this.started = true;
setTimeout(function (){
ignite.arrow_left.style.opacity = "1";
ignite.arrow_right.style.opacity = "0";
}, 100);
},
end: function (){},
check: function (time_code){
if(time_code >= this.time_in){
this.start();
}
}
},
{notes: "Excercise", time_in: 543, time_out: 600,
displayed: undefined, // Needed for unexpected behavior in Chrome.
start: function (){
if(this.displayed){ return;}
this.displayed = true;
var demo_button = document.getElementById("demo_link");
demo_button.style.display = "block";
if(!this.setup){
this.setup = true;
}
/* The following setTimeout call is necessary to prevent
* block and opacity from being set simultaneously, which would
* result in a spontaneous appearance instead of a fade-in.
*/
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.opacity = "1";
}
})(demo_button), 1000);
},
end: function (){
if(!this.displayed){ return;}
this.displayed = false;
var credits_button = document.getElementById("credits_link");
credits_button.style.opacity = "0";
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.display = "none";
}
})(credits_button), 1000);
},
check: function (time_code){
if(time_code > this.time_in && time_code < this.time_out){
this.start();
} else{
this.end();
}
}
},
{notes: "Credits", time_in: 463, time_out: 500,
displayed: undefined, // Needed for unexpected behavior in Chrome.
start: function (){
if(this.displayed){ return;}
this.displayed = true;
var credits_button = document.getElementById("credits_link");
credits_button.style.display = "block";
if(!this.setup){
this.setup = true;
var passed_event = this;
credits_button.addEventListener("click", function (){
ignite.transition("right", true);
passed_event.end();
});
}
/* The following setTimeout call is necessary to prevent
* block and opacity from being set simultaneously, which would
* result in a spontaneous appearance instead of a fade-in.
*/
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.opacity = "1";
}
})(credits_button), 1000);
},
end: function (){
if(!this.displayed){ return;}
this.displayed = false;
var credits_button = document.getElementById("credits_link");
credits_button.style.opacity = "0";
if(this.timeout_id){
clearTimeout(this.timeout_id);
}
this.timeout_id = setTimeout((function (passed_button){
return function (){
passed_button.style.display = "none";
}
})(credits_button), 1000);
},
check: function (time_code){
if(time_code > this.time_in && time_code < this.time_out){
this.start();
} else{
this.end();
}
}
}
]
};













103 changes: 103 additions & 0 deletions media/ignite/resources/js/ignite_ll_webrtc_data_resources.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
// This is the list of "link nodes" appearing in the video.
ignite.link_node_manager.content = [
null, // First element is empty. This will be filled in by another file.
/* Content is arranged in groups. Each group has a begin and end time.
* Within each group, each node has a begin time.
* Nodes with a set position will appear outside the node list.
*/
{time_in: 12, time_out: 32, content: [
{resource_id: "about_webrtc", time_in: 13},
{resource_id: "about_webrtc.webrtc_org", time_in: 15}
]},
{time_in: 47, time_out: 77, content: [
{resource_id: "background.cloud", time_in: 48},
{resource_id: "background.tcp", time_in: 56},
{resource_id: "background.udp", time_in: 57},
{resource_id: "contributors.kenny_katzgrau", time_in: 68}
]},
{time_in: 119, time_out: 136, content: [
{resource_id: "background.vulnerabilities", time_in: 120},
{resource_id: "assorted.flash_thoughts", time_in: 127}
]},
{time_in: 144, time_out: 160, content: [
{resource_id: "background.ajax", time_in: 147}
]},
{time_in: 204, time_out: 215, content: [
{resource_id: "assorted.webrtc_io", time_in: 207},
{resource_id: "assorted.file_api", time_in: 209}
]},
{time_in: 219, time_out: 229, content: [
{resource_id: "contributors.anants_blog", time_in: 220}
]},
{time_in: 295, time_out: 327, content: [
{resource_id: "contributors.rob_hawkes", time_in: 296},
{resource_id: "assorted.point_clouds", time_in: 319}
]},
{time_in: 389, time_out: 422, content: [
{resource_id: "assorted.twine", time_in: 390},
{resource_id: "assorted.ninja_blocks", time_in: 399},
{resource_id: "assorted.raspberry_pi", time_in: 405},
{resource_id: "assorted.firefox_os", time_in: 411}
]},
{time_in: 444, time_out: 456, content:[
{resource_id: "assorted.firefox_nightly", time_in: 445},
{resource_id: "assorted.chrome_canary", time_in: 448}
]}
];
// This is the expandable list in the resource section.
ignite.resources.content = [
{id: "mozilla_ignite", title: 'Mozilla Ignite', content: [
{id: "official", title: 'Official', content: [
{id: "official_site", title: 'Official Site', content: 'http://www.mozillaignite.org'},
{id: "twitter", title: 'Twitter', content: 'http://twitter.com/MozillaIgnite'},
{id: "us_ignite", title: 'US Ignite', content: 'http://us-ignite.org/'},
{id: "nsf_gov", title: 'NSF.gov', content: 'http://www.nsf.gov/'}
]},
{id: "press", title: 'Press', content: [
{id: "white_house", title: 'White House', content: 'http://www.whitehouse.gov/the-press-office/2012/06/13/we-can-t-wait-president-obama-signs-executive-order-make-broadband-const'},
{id: "launch_day_video", title: 'Launch Day Video', content: 'http://www.youtube.com/watch?v=H-t26owiZUQ'},
{id: "mark_surman", title: 'Mark Surman', content: 'http://www.nsf.gov/news/news_videos.jsp?cntn_id=124472&media_id=72664&org=NSF'}
]},
{id: "geni", title: 'GENI', content: [
{id: "geni_site", title: 'Official Site', content: 'http://www.geni.net/'},
{id: "geni_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Global_Environment_for_Network_Innovations'},
{id: "kenny_1", title: 'Kenny on GENI, 1', content: 'http://www.screenr.com/2KL8'},
{id: "kenny_2", title: 'Kenny on GENI, 2', content: 'http://www.screenr.com/FIz8'}
]}
]},
{id: "about_webrtc", title: 'WebRTC', content: [
{id: "learn_webrtc", title: 'Learn WebRTC', content: [
{id: "quickstart", title: "Quickstart", content: "http://www.html5rocks.com/en/tutorials/webrtc/basics/"},
{id: "getusermedia", title: "getUserMedia()", content: "http://www.html5rocks.com/en/tutorials/getusermedia/intro/"},
{id: "peer_connection_api", title: "Peer Connection", content: "https://webrtc-demos.appspot.com/html/pc1.html"}
]},
{id: "webrtc_org", title: "WebRTC.org", content: "http://www.webrtc.org"},
{id: "webrtc_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/WebRTC'},
{id: "w3c_specs", title: "W3C Specs", content: "http://dev.w3.org/2011/webrtc/editor/getusermedia.html"},
{id: "google_io", title: "Google I/O", content: "http://www.youtube.com/watch?v=E8C8ouiXHHk#t=24m35s"}
]},
{id: "background", title: "Background", content: [
{id: "ajax", title: "AJAX", content: "http://en.wikipedia.org/wiki/Ajax_%28programming%29"},
{id: "vulnerabilities", title: "Vulnerabilities", content: "http://en.wikipedia.org/wiki/Browser_security#Plugins_and_extensions"},
{id: "cloud", title: "Cloud Computing", content: "http://en.wikipedia.org/wiki/Cloud_computing"},
{id: "tcp", title: "TCP", content: "http://en.wikipedia.org/wiki/Transmission_Control_Protocol"},
{id: "udp", title: "UDP", content: "http://en.wikipedia.org/wiki/User_Datagram_Protocol"},
]},
{id: "contributors", title: "Contributors", content:[
{id: "kenny_katzgrau", title: "Kenny's Blog", content: "http://codefury.net/"},
{id: "anants_blog", title: "Anant's Blog", content: "http://kix.in/"},
{id: "rob_hawkes", title: "Rob's Blog", content: "http://rawkes.com/"}
]},
{id: "assorted", display: "none", content: [
{id: "flash_thoughts", title: "Flash on Mobile", content: "http://www.apple.com/hotnews/thoughts-on-flash/"},
{id: "webrtc_io", title: "WebRTC.io", content: "https://github.com/webRTC/webRTC.io"},
{id: "file_api", title: "File API", content: "https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications"},
{id: "point_clouds", title: "Point Clouds", content: "http://en.wikipedia.org/wiki/Point_cloud"},
{id: "twine", title: "Twine", content: "http://supermechanical.com/"},
{id: "ninja_blocks", title: "Ninja Blocks", content: "http://new.ninjablocks.com/"},
{id: "raspberry_pi", title: "Raspberry Pi", content: "http://www.raspberrypi.org/"},
{id: "firefox_os", title: "Firefox OS", content: "http://www.mozilla.org/en-US/firefoxos/"},
{id: "firefox_nightly", title: "Firefox Nightly", content: "https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/"},
{id: "chrome_canary", title: "Chrome Canary", content: "https://www.google.com/intl/en/chrome/browser/canary.html"}
]}
];
2 changes: 1 addition & 1 deletion media/ignite/resources/js/ignite_ll_webrtc_resources.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ ignite.resources.content = [
{id: "getusermedia", title: "getUserMedia()", content: "http://www.html5rocks.com/en/tutorials/getusermedia/intro/"},
{id: "peer_connection_api", title: "Peer Connection", content: "https://webrtc-demos.appspot.com/html/pc1.html"}
]},
{id: "webrtc_org", title: "WebRTC.org", content: "http://wwww.webrtc.org"},
{id: "webrtc_org", title: "WebRTC.org", content: "http://www.webrtc.org"},
{id: "webrtc_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Webrtc'},
{id: "w3c_specs", title: "W3C Specs", content: "http://dev.w3.org/2011/webrtc/editor/getusermedia.html"}
]},
Expand Down
8 changes: 8 additions & 0 deletions media/ignite/resources/js/webrtc_data_urls.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
ignite.url = {
node_linkbox: ignite_bundle.data.MEDIA_URL + "resources/svg/linkbox_padding.svg",
node_logo: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
logo1: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_w_text.svg",
logo2: ignite_bundle.data.MEDIA_URL + "resources/svg/webrtc_w_text.svg",
resource_background: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
hackable_demo: undefined // There is no hackable demo for WebRTC data.
};
4 changes: 2 additions & 2 deletions media/ignite/resources/js/webrtc_main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ ignite = {
logo1.src = ignite.url.logo1;
var logo2 = document.getElementById("logo2");
logo2.src = ignite.url.logo2;
var demo_link = document.getElementById("demo_link");
demo_link.href = ignite.url.hackable_demo;
var demo_link = document.getElementById("demo_link");
demo_link.href = ignite.url.hackable_demo;
// Configure Custom Controls:
var controls = document.getElementById("controls");
if(this.compatibility.status & this.compatibility.CONTROLS){
Expand Down
Loading

0 comments on commit da4e6bf

Please sign in to comment.