source: dashboard/occ2011-dashboard.html@ 352

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

More Flickr is better
  • Property svn:mime-type set to text/html
File size: 8.8 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.photos.photo, function(i,item){
86 // http://farm3.static.flickr.com/2753/5859450667_d6e29b9fb2_s.jpg
87 var url = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
88 var target = 'http://www.flickr.com/photos/' + item.owner + '/' + item.id + '/';
89
90 // Here's where we piece together the HTML
91 htmlString += '<li><a href="' + target + '" target="_blank">';
92 htmlString += '<img src="' + url + '" 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 $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&name=value&api_key=138a25b8ce15c2cce5491b0c0170f2be&format=json&tags=occ2011&sort=interestingness-desc&page-count=1&jsoncallback=?&tag_mode=all",displayImages);
111 $("#tab-set").tabs();
112
113 $("#tab-set").localScroll({
114 target:"#tab-set",
115 hash: true,
116 duration : 0
117 });
118
119 $('#mycarousel').jcarousel({
120 auto: 1,
121 wrap: 'last',
122 initCallback: mycarousel_initCallback
123 });
124
125 $(document).ready(function () {
126 $('body').layout({
127 applyDefaultStyles: true,
128 west__size: 320,
129 east__size: 340,
130 north__size: 160,
131 south__size: 80
132 });
133 $( "#radio" ).buttonset();
134 });
135
136 $("input[name='window']").change(function () {
137 $("#mainFrame").attr('src',$("input[name='window']:checked").val());
138 });
139 });
140// ]]>
141</script>
142</head>
143<body>
144<div id="flickr-badge" class="ui-layout-north">
145<a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
146 <div id="flickr-images"></div>
147</div>
148<div id="twitter" class="ui-layout-west">
149 <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
150 <script type="text/javascript">
151 // <![CDATA[
152 new TWTR.Widget({
153 version: 2,
154 type: 'search',
155 search: '#occ2011',
156 interval: 6000,
157 title: 'Open Community Camp 2011',
158 subject: 'http://opencommunitycamp.org',
159 width: 300,
160 height: 300,
161 theme: {
162 shell: {
163 background: '#8ec1da',
164 color: '#ffffff'
165 },
166 tweets: {
167 background: '#ffffff',
168 color: '#444444',
169 links: '#1985b5'
170 }
171 },
172 features: {
173 scrollbar: true,
174 loop: true,
175 live: true,
176 hashtags: true,
177 timestamp: true,
178 avatars: true,
179 toptweets: true,
180 behavior: 'all'
181 }
182 }).render().start();
183 // ]]>
184 </script>
185 <g:plusone></g:plusone>
186
187</div>
188 <div id="webchat" class="ui-layout-center">
189 <iframe id="mainFrame" src="http://live.occ2011.org:9999/browser-embedded.html" width="100%" height="100%"></iframe>
190</div>
191<div id="youtube" class="ui-layout-east">
192 <div id="playerContainer" style="width: 320px; height: 260px;">
193 <object id="player"></object>
194 </div>
195 <div id="videos2"></div>
196 <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
197 <script type="text/javascript">
198 // <![CDATA[
199 function loadVideo(playerUrl, autoplay) {
200 swfobject.embedSWF(
201 playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
202 (autoplay?1:0), 'player', '320', '260', '9.0.0', false,
203 false, {allowfullscreen: 'true'});
204 }
205
206 function showMyVideos2(data) {
207 var feed = data.feed;
208 var entries = feed.entry || [];
209 var html = ['<ul id="mycarousel" class="jcarousel-skin-tango videos">'];
210 for (var i = 0; i < entries.length; i++) {
211 var entry = entries[i];
212 var title = entry.title.$t.substr(0, 20);
213 var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
214 var playerUrl = entries[i].media$group.media$content[0].url;
215 html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
216 '<img src="', thumbnailUrl, '" width="75" height="75" alt="',title ,'..."/>', '</li>');
217 }
218 html.push('</ul><br style="clear: left;"/>');
219 document.getElementById('videos2').innerHTML = html.join('');
220 if (entries.length > 0) {
221 loadVideo(entries[0].media$group.media$content[0].url, false);
222 }
223 }
224 // ]]>
225 </script>
226 <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">
227 </script>
228</div>
229<div class="ui-layout-south">
230<center>
231<form>
232 <div id="radio">
233 <input type="radio" id="radio1" name="window" value="http://live.occ2011.org:9999/browser-embedded.html" checked="checked" /><label for="radio1">Live Webcams</label>
234 <input type="radio" id="radio2" name="window" value="http://bunny.occ2011.org:9090?channels=occ" /><label for="radio2">WebChat</label>
235 <input type="radio" id="radio3" name="window" value="http://live.occ2011.org:9999/telex.html" /><label for="radio3">IRC Telex</label>
236 <input type="radio" id="radio4" name="window" value="http://live.occ2011.org:9999/room1.html" /><label for="radio4">Live Presentations</label>
237 <input type="radio" id="radio5" name="window" value="http://noc.occ2011.org/nagios/" /><label for="radio5">NOC Nagios</label>
238 <input type="radio" id="radio6" name="window" value="http://noc.occ2011.org/smokeping/smokeping.cgi" /><label for="radio6">NOC Smokeping</label>
239 </div>
240</form>
241<tt>Developed at <a href="http://opencommunitycamp.org">#occ2011</a> by <a href="http://rickvanderzwet.nl">Rick van der Zwet</a></tt>
242</center>
243</div>
244</body>
245</html>
Note: See TracBrowser for help on using the repository browser.