source: dashboard/occ2011-dashboard.html@ 336

Last change on this file since 336 was 335, checked in by Rick van der Zwet, 13 years ago

New layout and UI
  • Property svn:mime-type set to text/html
File size: 8.1 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6<title>Open Community Camp 2011 - Live Page</title>
7
8
9<LINK rel="stylesheet" type="text/css" href="lib/css/themes/base/jquery.ui.all.css">
10<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
11<LINK rel="stylesheet" type="text/css" href="skins/tango/skin.css">
12
13<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
14
15<script src="lib/js/jquery-latest.js" type="text/javascript"></script>
16<script src="lib/js/jquery-ui-latest.js" type="text/javascript"></script>
17<script src="lib/js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
18<script src="lib/js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
19<script src="lib/js/jquery.jcarousel.min.js" type="text/javascript"></script>
20<script src="lib/js/jquery.layout-latest.js" type="text/javascript"></script>
21
22<style type="text/css">
23 .ui-tabs-panel { width: inherit; height: inherit; }
24
25 .title {
26 font-size: small;
27 }
28 ul.videos li {
29 float: left;
30 width: 10em;
31 margin-bottom: 1em;
32 }
33 ul.videos {
34 margin-bottom: 1em;
35 padding-left : 0em;
36 margin-left: 0em;
37 list-style: none;
38 }
39
40 #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
41 div#flickr-images .jcarousel-skin-tango .jcarousel-container-horizontal {
42 width: 94%;
43 }
44 div#flickr-images .jcarousel-skin-tango .jcarousel-clip-horizontal {
45 width: 100%;
46 }
47
48 div#youtube .jcarousel-skin-tango .jcarousel-container-horizontal {
49 width: 75%;
50 }
51 iframe {
52 width: 100%;
53 height: 100%;
54 border: 0px solid;
55 overflow-x: hidden;
56 overflow-y: hidden;
57 }
58</style>
59<script type="text/javascript">
60 // <![CDATA[
61 function mycarousel_initCallback(carousel)
62 {
63 // Disable autoscrolling if the user clicks the prev or next button.
64 carousel.buttonNext.bind('click', function() {
65 carousel.startAuto(0);
66 });
67
68 carousel.buttonPrev.bind('click', function() {
69 carousel.startAuto(0);
70 });
71
72 // Pause autoscrolling if the user moves with the cursor over the clip.
73 carousel.clip.hover(function() {
74 carousel.stopAuto();
75 }, function() {
76 carousel.startAuto();
77 });
78 };
79
80 function displayImages(data) {
81 // Start putting together the HTML string
82 var htmlString = "<ul id='flickr-images-list' class='jcarousel-skin-tango'>";
83
84 // Now start cycling through our array of Flickr photo details
85 $.each(data.items, function(i,item){
86 var sourceSquare = (item.media.m);
87 // I only want the ickle square thumbnails
88 var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
89
90 // Here's where we piece together the HTML
91 htmlString += '<li><a href="' + item.link + '" target="_blank">';
92 htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
93 htmlString += '</a></li>';
94 });
95
96 // Pop our HTML in the #images DIV
97 $('#flickr-images').html(htmlString + "</ul>");
98
99 // Close down the JSON function call
100 $('#flickr-images-list').jcarousel({
101 auto: 1,
102 wrap: 'last',
103 initCallback: mycarousel_initCallback
104 });
105 };
106
107 $(document).ready(function(){
108 // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
109 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=occ2011&format=json&jsoncallback=?", displayImages);
110 $("#tab-set").tabs();
111
112 $("#tab-set").localScroll({
113 target:"#tab-set",
114 hash: true,
115 duration : 0
116 });
117
118 $('#mycarousel').jcarousel({
119 auto: 1,
120 wrap: 'last',
121 initCallback: mycarousel_initCallback
122 });
123
124 $(document).ready(function () {
125 $('body').layout({
126 applyDefaultStyles: true,
127 west__size: 320,
128 east__size: 340,
129 north__size: 160,
130 south__size: 80
131 });
132 $( "#radio" ).buttonset();
133 });
134
135 $("input[name='window']").change(function () {
136 $("#mainFrame").attr('src',$("input[name='window']:checked").val());
137 });
138 });
139// ]]>
140</script>
141</head>
142<body>
143<div id="flickr-badge" class="ui-layout-north">
144<a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
145 <div id="flickr-images"></div>
146</div>
147<div id="twitter" class="ui-layout-west">
148 <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
149 <script type="text/javascript">
150 // <![CDATA[
151 new TWTR.Widget({
152 version: 2,
153 type: 'search',
154 search: '#occ2011',
155 interval: 6000,
156 title: 'Open Community Camp 2011',
157 subject: 'http://opencommunitycamp.org',
158 width: 300,
159 height: 300,
160 theme: {
161 shell: {
162 background: '#8ec1da',
163 color: '#ffffff'
164 },
165 tweets: {
166 background: '#ffffff',
167 color: '#444444',
168 links: '#1985b5'
169 }
170 },
171 features: {
172 scrollbar: true,
173 loop: true,
174 live: true,
175 hashtags: true,
176 timestamp: true,
177 avatars: true,
178 toptweets: true,
179 behavior: 'all'
180 }
181 }).render().start();
182 // ]]>
183 </script>
184 <g:plusone></g:plusone>
185
186</div>
187 <div id="webchat" class="ui-layout-center">
188 <iframe id="mainFrame" src="http://live.occ2011.org:9999/browser-embedded.html" width="100%" height="100%"></iframe>
189</div>
190<div id="youtube" class="ui-layout-east">
191 <div id="playerContainer" style="width: 320px; height: 260px;">
192 <object id="player"></object>
193 </div>
194 <div id="videos2"></div>
195 <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
196 <script type="text/javascript">
197 // <![CDATA[
198 function loadVideo(playerUrl, autoplay) {
199 swfobject.embedSWF(
200 playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
201 (autoplay?1:0), 'player', '320', '260', '9.0.0', false,
202 false, {allowfullscreen: 'true'});
203 }
204
205 function showMyVideos2(data) {
206 var feed = data.feed;
207 var entries = feed.entry || [];
208 var html = ['<ul id="mycarousel" class="jcarousel-skin-tango videos">'];
209 for (var i = 0; i < entries.length; i++) {
210 var entry = entries[i];
211 var title = entry.title.$t.substr(0, 20);
212 var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
213 var playerUrl = entries[i].media$group.media$content[0].url;
214 html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
215 '<img src="', thumbnailUrl, '" width="75" height="75" alt="',title ,'..."/>', '</li>');
216 }
217 html.push('</ul><br style="clear: left;"/>');
218 document.getElementById('videos2').innerHTML = html.join('');
219 if (entries.length > 0) {
220 loadVideo(entries[0].media$group.media$content[0].url, false);
221 }
222 }
223 // ]]>
224 </script>
225 <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&amp;max-results=10&amp;category=occ2011&amp;alt=json-in-script&amp;callback=showMyVideos2">
226 </script>
227</div>
228<div class="ui-layout-south">
229<center>
230<form>
231 <div id="radio">
232 <input type="radio" id="radio1" name="window" value="http://live.occ2011.org:9999/browser-embedded.html" checked="checked" /><label for="radio1">Live Webcams</label>
233 <input type="radio" id="radio2" name="window" value="http://bunny.occ2011.org:9090?channels=occ" /><label for="radio2">WebChat</label>
234 <input type="radio" id="radio3" name="window" value="http://live.occ2011.org:9999/telex.html" /><label for="radio3">IRC Telex</label>
235 <input type="radio" id="radio4" name="window" value="http://live.occ2011.org:9999/room1.html" /><label for="radio4">Live Presentations</label>
236 </div>
237</form>
238<tt>Developed at <a href="http://opencommunitycamp.org">#occ2011</a> by <a href="http://rickvanderzwet.nl">Rick van der Zwet</a></tt>
239</center>
240</div>
241</body>
242</html>
Note: See TracBrowser for help on using the repository browser.