3 function myCarousel_initCallback(carousel) {
\r
4 theCarousel = carousel; // hack!
\r
7 function myCarousel_onBeforeAnimation(carousel, state) {
\r
8 for (var i = carousel.first; i <= carousel.last; i++) {
\r
9 if (carousel.has(i)) {
\r
13 if (i > carousel.options.customEventManager.getEventCount()) {
\r
17 var event = carousel.options.customEventManager.getEvent(i - 1);
\r
19 var html = '<img src="' + event.args.src + '" width="117" height="66" alt="' + event.args.description + '" id="' + event.args.id + '" /><div class="thumbnailOverlay">' + event.args.title + '</div>';
\r
21 carousel.add(i, html);
\r
23 myCarousel_addClickHandler(event.args.id, event.startTime);
\r
27 function myCarousel_addClickHandler(id, time) {
\r
28 $("#" + id).click(function() {
\r
29 var videoElement = $("video#vid").get(0);
\r
30 videoElement.currentTime = time;
\r
34 function chapterChange(isActive, args) {
\r
36 $("#carousel img").css("border-color", "#272928");
\r
37 $("#" + args.id).css("border-color", "white");
\r
38 $("#carousel .thumbnailOverlay").css("visibility", "hidden");
\r
39 $("#" + args.id + " + .thumbnailOverlay").css("visibility", "visible");
\r
41 theCarousel.scroll(args.index, true);
\r
45 $().ready(function() {
\r
49 { startTime: 31.78, endTime: 35.291, html: "It is half past 9 and we've just passed Sheffield" },
\r
50 { startTime: 35.292, endTime: 37.43, html: "and we're coming home from Maker Faire in Newcastle" },
\r
51 { startTime: 54.594, endTime: 58.932, html: "I'm here with BBC R&D at Maker Faire UK Newcastle 2009" },
\r
52 { startTime: 58.933, endTime: 61.221, html: "and we have some demos we're also making some stuff" },
\r
53 { startTime: 61.222, endTime: 63.049, html: "but we have some demos too." },
\r
54 { startTime: 63.05, endTime: 65.354, html: "What we have here is a webcam in a cardboard box" },
\r
55 { startTime: 65.355, endTime: 67.583, html: "with a picture frame on top of it and we're using this" },
\r
56 { startTime: 67.584, endTime: 70.294, html: "to prototype the next generation of computer interaction." },
\r
57 { startTime: 70.295, endTime: 73.455, html: "It's getting these very, very, very wobbly little cams" },
\r
58 { startTime: 73.456, endTime: 75.94, html: "Something like this, you could, well, we have actually" },
\r
59 { startTime: 75.941, endTime: 78.562, html: "strapped it to someone's head, like, uh, so they can" },
\r
60 { startTime: 78.563, endTime: 79.823, html: "go like this and then" },
\r
61 { startTime: 79.824, endTime: 82.603, html: "the cunning thing we do then is we press this button here" },
\r
62 { startTime: 84.231, endTime: 86.389, html: "is it F? Oh god no that isn't the one" },
\r
63 { startTime: 86.39, endTime: 87.39, html: "<LAUGHS" },
\r
64 { startTime: 87.391, endTime: 91.167, html: "Right, er, yeah OK" },
\r
65 { startTime: 91.168, endTime: 93.258, html: "there we go, it's steadied" },
\r
66 { startTime: 94.129, endTime: 96.523, html: "Multitouch is considered by a lot of people" },
\r
67 { startTime: 96.524, endTime: 97.551, html: "thinking about it to be" },
\r
68 { startTime: 97.652, endTime: 99.484, html: "the next generation of computer interaction" },
\r
69 { startTime: 99.485, endTime: 102.765, html: "there are a lot of possibilities for extending" },
\r
70 { startTime: 102.766, endTime: 105.555, html: "the existing mouse and keyboard metaphor" },
\r
71 { startTime: 105.59, endTime: 108.344, html: "into interacting with touch surfaces." },
\r
72 { startTime: 111.972, endTime: 114.267, html: "Dopplr's creating a model of your future travel" },
\r
73 { startTime: 114.268, endTime: 115.481, html: "and other people's future travel" },
\r
74 { startTime: 115.482, endTime: 117.524, html: "and then we let you play with it." },
\r
75 { startTime: 117.525, endTime: 122.088, html: "So what if you were travelling to Sydney, we could tell you" },
\r
76 { startTime: 122.089, endTime: 124.684, html: "oh, by the way Matt Biddulph will be there" },
\r
77 { startTime: 124.685, endTime: 127.357, html: "2 days before you arrive. You might choose to change your flight" },
\r
78 { startTime: 127.358, endTime: 128.944, html: "so that we could hang out there." },
\r
79 { startTime: 128.945, endTime: 133.583, html: "And by looking at this model which lets you think" },
\r
80 { startTime: 133.584, endTime: 135.457, html: "about what's going to happen in the real world," },
\r
81 { startTime: 135.458, endTime: 137.657, html: "we give you this superpower" },
\r
82 { startTime: 137.658, endTime: 140.069, html: "of being able to play what-if, with your future" },
\r
83 { startTime: 140.07, endTime: 143.056, html: "we hope that people will never eat a bad hamburger" },
\r
84 { startTime: 143.057, endTime: 146.937, html: "in a hotel restaurant by themselves in a on-site trip again" },
\r
85 { startTime: 146.938, endTime: 148.891, html: "if they're using our service." },
\r
86 { startTime: 152.216, endTime: 154.715, html: "One of the projects that we're working on" },
\r
87 { startTime: 154.716, endTime: 156.761, html: "is called the Ingex project" },
\r
88 { startTime: 156.762, endTime: 161.646, html: "and that is all about low cost tapeless TV production" },
\r
89 { startTime: 161.647, endTime: 166.409, html: "Ingex uses low-cost commodity PC hardware" },
\r
90 { startTime: 166.41, endTime: 168.324, html: "and video capture cards" },
\r
91 { startTime: 168.325, endTime: 172.162, html: "and on that we run open-source software" },
\r
92 { startTime: 172.163, endTime: 175.201, html: "which gives us a very low-cost solution." },
\r
93 { startTime: 175.202, endTime: 180, html: "But despite that it still gives us many of the features" },
\r
94 { startTime: 180.001, endTime: 184.256, html: "that we require for professional production in a TV studio." },
\r
95 { startTime: 184.257, endTime: 188.604, html: "One of the challenges that we faced developing Ingex" },
\r
96 { startTime: 188.605, endTime: 192.517, html: "is really to keep the system as simple as possible" },
\r
97 { startTime: 192.518, endTime: 194.154, html: "for the users in the studio." },
\r
98 { startTime: 194.155, endTime: 198.253, html: "But also to make sure that it's as reliable as they need." },
\r
99 { startTime: 198.254, endTime: 200.889, html: "Because we can't have PCs failing" },
\r
100 { startTime: 200.89, endTime: 204.79, html: "bringing the studio to a halt whilst they're fixed." },
\r
101 { startTime: 204.791, endTime: 209.073, html: "So we spend a lot of time keeping everything very simple," },
\r
102 { startTime: 209.074, endTime: 213.584, html: "so the user can be familiar with it without a lot of training" },
\r
103 { startTime: 213.585, endTime: 218.248, html: "but also making sure that any problems in the background" },
\r
104 { startTime: 218.249, endTime: 222.447, html: "really are left to the software to sort out automatically." },
\r
105 { startTime: 226.602, endTime: 228.869, html: "Mahalo is a human powered search engine." },
\r
106 { startTime: 228.87, endTime: 233.295, html: "And it's essentially Google plus Wikipedia" },
\r
107 { startTime: 233.296, endTime: 236.551, html: "if you were to type a search, for say Green Tea." },
\r
108 { startTime: 236.552, endTime: 239.427, html: "We would have a human spend two, three hours" },
\r
109 { startTime: 239.428, endTime: 240.864, html: "researching Green Tea on the internet," },
\r
110 { startTime: 240.865, endTime: 243.989, html: "reading all the best sites, finding all the great links" },
\r
111 { startTime: 243.99, endTime: 246.807, html: "and then making a guided page for you that would be" },
\r
112 { startTime: 246.808, endTime: 250.184, html: "fast facts about green tea and items about green tea" },
\r
113 { startTime: 250.285, endTime: 251.951, html: "actual content that we'll write" },
\r
114 { startTime: 251.952, endTime: 255.705, html: "then we have sections on the top 7 links for green tea," },
\r
115 { startTime: 255.706, endTime: 259.778, html: "green tea how-to articles, green tea photos," },
\r
116 { startTime: 259.779, endTime: 262.041, html: "green tea videos, green tea merchants," },
\r
117 { startTime: 262.042, endTime: 265.525, html: "green tea related teas etc." },
\r
118 { startTime: 265.526, endTime: 268.986, html: "So essentially adding 2 or 3 hours of curation" },
\r
119 { startTime: 268.987, endTime: 272.647, html: "of human intelligence, to a machine search" },
\r
120 { startTime: 272.648, endTime: 274.365, html: "so it's not just humans" },
\r
121 { startTime: 274.366, endTime: 277.045, html: "it's humans using machines to make a better result." }
\r
128 action: chapterChange,
\r
130 carousel: theCarousel,
\r
133 title: "Introduction",
\r
134 description: "Introduction and title music",
\r
135 src: "introduction.jpg",
\r
142 action: chapterChange,
\r
144 carousel: theCarousel,
\r
147 title: "BBC R&D at the Maker Faire",
\r
148 description: "Engaging with our audiences. BBC R&D at the Maker Faire.",
\r
149 src: "makerfaire.jpg",
\r
156 action: chapterChange,
\r
158 carousel: theCarousel,
\r
161 title: "Maximising the serendipity of travel",
\r
162 description: "Maximising the serendipity of travel. Matt Biddulph, CTO of Dopplr.",
\r
163 src: "biddulph.jpg",
\r
170 action: chapterChange,
\r
172 carousel: theCarousel,
\r
176 description: "Ingex. Automated tapeless production tool.",
\r
184 action: chapterChange,
\r
186 carousel: theCarousel,
\r
189 title: "Human powered search",
\r
190 description: "Human powered search. Jason Calacanis, CEO of Mahalo.com.",
\r
191 src: "calacanis.jpg",
\r
198 action: chapterChange,
\r
200 carousel: theCarousel,
\r
204 description: "End credits",
\r
205 src: "credits.jpg",
\r
212 $(".toggleContentPanel").click(function() {
\r
213 var contentPanelId = "#" + ($(this).attr("class")).split(" ")[1];
\r
214 $(contentPanelId).toggle("blind", {}, 100);
\r
215 var currentBackground = $(this).css("background-image");
\r
216 var newBackground = currentBackground.indexOf("Show") >=0 ? "url(contentPanelHide.png)" : "url(contentPanelShow.png)";
\r
217 $(this).css("background-image", newBackground);
\r
220 var synchroniser = $("#vid").data("synchroniser");
\r
222 var customEventManager = synchroniser.getCustomEventManager();
\r
223 var chapterCount = customEventManager.getEventCount();
\r
225 $('#carousel').jcarousel({
\r
226 size: chapterCount,
\r
227 itemLoadCallback: {
\r
228 onBeforeAnimation: myCarousel_onBeforeAnimation
\r
230 initCallback: myCarousel_initCallback,
\r
231 customEventManager: customEventManager
\r