www/rdtv-episode2.js

   1 var theCarousel;\r
   2 \r
   3 function myCarousel_initCallback(carousel) {\r
   4     theCarousel = carousel; // hack!\r
   5 }\r
   6 \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
  10             continue;\r
  11         }\r
  12 \r
  13         if (i > carousel.options.customEventManager.getEventCount()) {\r
  14             break;\r
  15         }\r
  16 \r
  17         var event = carousel.options.customEventManager.getEvent(i - 1);\r
  18 \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
  20 \r
  21         carousel.add(i, html);\r
  22 \r
  23         myCarousel_addClickHandler(event.args.id, event.startTime);\r
  24     }\r
  25 }\r
  26 \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
  31     });\r
  32 }\r
  33 \r
  34 function chapterChange(isActive, args) {\r
  35     if (isActive) {\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
  40 \r
  41         theCarousel.scroll(args.index, true);\r
  42     }\r
  43 }\r
  44 \r
  45 $().ready(function() {\r
  46     $("#vid").sync({\r
  47         htmlEvents: {\r
  48             "#subtitle": [\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
 122             ]\r
 123         },\r
 124         customEvents: [\r
 125             {\r
 126                 startTime: 0.0,\r
 127                 endTime: 26.9,\r
 128                 action: chapterChange,\r
 129                 args: {\r
 130                     carousel: theCarousel,\r
 131                     id: "chapter1",\r
 132                     index: 1,\r
 133                     title: "Introduction",\r
 134                     description: "Introduction and title music",\r
 135                     src: "introduction.jpg",\r
 136                     href: ""\r
 137                 }\r
 138             },\r
 139             {\r
 140                 startTime: 27.0,\r
 141                 endTime: 107.9,\r
 142                 action: chapterChange,\r
 143                 args: {\r
 144                     carousel: theCarousel,\r
 145                     id: "chapter2",\r
 146                     index: 2,\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
 150                     href: ""\r
 151                 }\r
 152             },\r
 153             {\r
 154                 startTime: 108.0,\r
 155                 endTime: 147.9,\r
 156                 action: chapterChange,\r
 157                 args: {\r
 158                     carousel: theCarousel,\r
 159                     id: "chapter3",\r
 160                     index: 3,\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
 164                     href: ""\r
 165                 }\r
 166             },\r
 167             {\r
 168                 startTime: 148.0,\r
 169                 endTime : 221.9,\r
 170                 action: chapterChange,\r
 171                 args: {\r
 172                     carousel: theCarousel,\r
 173                     id: "chapter4",\r
 174                     index: 4,\r
 175                     title: "Ingex",\r
 176                     description: "Ingex. Automated tapeless production tool.",\r
 177                     src: "ingex.jpg",\r
 178                     href: ""\r
 179                 }\r
 180             },\r
 181             {\r
 182                 startTime: 222.0,\r
 183                 endTime: 276.9,\r
 184                 action: chapterChange,\r
 185                 args: {\r
 186                     carousel: theCarousel,\r
 187                     id: "chapter5",\r
 188                     index: 5,\r
 189                     title: "Human powered search",\r
 190                     description: "Human powered search. Jason Calacanis, CEO of Mahalo.com.",\r
 191                     src: "calacanis.jpg",\r
 192                     href: ""\r
 193                 }\r
 194             },\r
 195             {\r
 196                 startTime: 277.0,\r
 197                 endTime: 320,\r
 198                 action: chapterChange,\r
 199                 args: {\r
 200                     carousel: theCarousel,\r
 201                     id: "chapter6",\r
 202                     index: 6,\r
 203                     title: "Credits",\r
 204                     description: "End credits",\r
 205                     src: "credits.jpg",\r
 206                     href: ""\r
 207                 }\r
 208             }\r
 209         ]\r
 210     });\r
 211 \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
 218     });\r
 219 \r
 220     var synchroniser = $("#vid").data("synchroniser");\r
 221 \r
 222     var customEventManager = synchroniser.getCustomEventManager();\r
 223     var chapterCount = customEventManager.getEventCount();\r
 224 \r
 225     $('#carousel').jcarousel({\r
 226         size: chapterCount,\r
 227         itemLoadCallback: {\r
 228             onBeforeAnimation: myCarousel_onBeforeAnimation\r
 229         },\r
 230         initCallback: myCarousel_initCallback,\r
 231         customEventManager: customEventManager\r
 232     });\r
 233 });\r