root/trunk/website/www/templates/live.tpl @ 51

Revision 51, 4.9 KB (checked in by celso, 3 years ago)

- css fixes
Line 
1{include file="header.tpl"}
2
3  {include file="main_container_begin.tpl"}
4
5      {include file="topmenu.tpl"}
6
7<div id="articlecontent" style="background:#181b0d;">
8This will be the Live Dashboard for the official launch of Spacebits which is scheduled for the 30th of May, 2010, 11AM GMT. Now in demo mode.
9</div>
10{literal}
11<div id="map_wrapper" style="margin-left:30px;"><div id="map" style="width:840px;height:400px;"></div></div>
12
13<div id="sensors" style="margin-right:27px;margin-left:25px;height:100px;">
14    <div id='sensors_alt' style="float:left;"></div>
15    <div id='sensors_pressure' style="float:left;"></div>
16    <div id='sensors_temperature' style="float:left;"></div>
17    <div id='sensors_humidity' style="float:left;"></div>
18    <div id='sensors_dust' style="float:left;"></div>
19    <div id="buttons" style="float:right;width:250px;margin-top:5px;">
20      <ol class="on_off">
21      <li>
22        <label class="left" for="sw_follow">Follow Balloon</label>
23        <input type="checkbox" id="sw_follow" />
24      </li>
25      <li>
26        <label class="left" for="sw_sms">Track SMS</label>
27        <input type="checkbox" id="sw_sms" />
28      </li>
29      <li>
30        <label class="left" for="sw_radio">Track Radio</label>
31        <input type="checkbox" id="sw_radio" />
32      </li>
33    </ol>
34  </div>
35</div>
36
37<script type='text/javascript'>
38  var map = false;
39  var usePolyline = false;
40  var polyline = false;
41  var polyline2 = false;
42  var markerslayer = false;
43  var start=new OpenLayers.LonLat(-8.0919,37.7616);
44  var img={markerImage: '/images/balloon.png', markerAnchor: new OpenLayers.Pixel(-8, -49), size: new OpenLayers.Size(32, 42)};
45  var sw_follow_cb = false;
46  var sw_sms_cb = false;
47  var sw_radio_cb = false;
48
49  document.observe("dom:loaded", function() {
50    new iPhoneStyle('.on_off input[type=checkbox]',{checkedLabel: 'YES', uncheckedLabel: 'NO'});
51    setInterval(function checkSwitches() {
52      sw_follow_cb = $$('.on_off input[type=checkbox]')[0].checked;
53      sw_sms_cb = $$('.on_off input[type=checkbox]')[1].checked;
54      sw_radio_cb = $$('.on_off input[type=checkbox]')[2].checked;
55      }, 1000);
56    });
57
58  map = new SAPO.Maps.Map('map');
59  map.addControl(new SAPO.Maps.Control.MapType());
60  map.addControl(new SAPO.Maps.Control.Navigation());
61  map.setMapCenter(start,10);
62
63  markerslayer = new SAPO.Maps.Markers('trackpoints');
64  map.addMarkers(markerslayer);
65
66  balloon = new SAPO.Maps.Marker(start, {draggable: false}, img);
67  map.addOverlay(balloon);
68
69  google.load('visualization', '1', {packages:['gauge']});
70
71  function drawGauge(n,v,d,o) {
72    var params = Object.extend({ width: 400, height: 120, redTo: o.max, yellowTo: o.redFrom, minorTicks: 5},o || {});
73    var data = new google.visualization.DataTable();
74    data.addColumn('string', 'Label');
75    data.addColumn('number', 'Value');
76    data.addRows(1);
77    data.setValue(0, 0, n);
78    data.setValue(0, 1, parseInt(Math.floor(Math.random()*v)));
79    var chart = new google.visualization.Gauge(document.getElementById(d));
80    chart.draw(data, params);
81    }
82
83  function refreshDashboard(t) {
84    var r=t.responseText.evalJSON();
85//    SAPO.Utility.Dumper.alertDump(r);
86    // s$('coords').innerHTML=r.lon+','+r.lat;
87    drawGauge('Altitude',10000,'sensors_alt',{max:40000,redFrom:30000,yellowFrom:20000});
88    drawGauge('Pressure',10000,'sensors_pressure',{max:40000,redFrom:30000,yellowFrom:20000});
89    drawGauge('Temp',10000,'sensors_temperature',{max:40000,redFrom:30000,yellowFrom:20000});
90    drawGauge('Humidity',10000,'sensors_humidity',{max:40000,redFrom:30000,yellowFrom:20000});
91    drawGauge('Dust',10000,'sensors_dust',{max:40000,redFrom:30000,yellowFrom:20000});
92    // Track
93    markerslayer.removeMarkers();
94
95    var size=new OpenLayers.Size(16, 16)
96    var shift=new OpenLayers.Pixel(-8,-8);
97    var green = { markerImage: '/images/green.png', size: size, markerOpacity: 1,markerAnchor: shift };
98    var red = { markerImage: '/images/red.png', size: size, markerOpacity: 1,markerAnchor: shift };
99
100    if(sw_radio_cb) {
101      for(var i=0;i<r['track']['radio'].length;i++) {
102        var m=new SAPO.Maps.Marker(new OpenLayers.LonLat(r['track']['radio'][i][1],r['track']['radio'][i][0]), {draggable: false});
103        m.setStyle(red);
104        markerslayer.addMarker(m);
105        }
106      }
107    if(sw_sms_cb) {
108      for(var i=0;i<r['track']['sms'].length;i++) {
109        var m=new SAPO.Maps.Marker(new OpenLayers.LonLat(r['track']['sms'][i][1],r['track']['sms'][i][0]), {draggable: false});
110        m.setStyle(green);
111        markerslayer.addMarker(m);
112        }
113      }
114    // Balloon
115    var pos=new OpenLayers.LonLat(r['last'].lon,r['last'].lat);
116    if(sw_follow_cb) map.setMapCenter(pos,10);
117    balloon.setLonLat(pos);
118    }
119
120  function getData() {
121    var s=new Ajax.Request('/api/all',{method: 'post',onSuccess:refreshDashboard});
122    setTimeout (getData, 3000);
123    }
124
125  window.onload = getData();
126</script>
127
128{/literal}
129
130      {include file="services.tpl"}
131
132  {include file="main_container_end.tpl"}
133
134{include file="footer.tpl"}
Note: See TracBrowser for help on using the browser.