Changeset 50

Show
Ignore:
Timestamp:
21-05-2010 01:00:38 (3 years ago)
Author:
celso
Message:

- iphone style buttons

Location:
trunk/website/www
Files:
18 added
2 modified

Legend:

Unmodified
Added
Removed

  • trunk/website/www/templates/header.tpl

    r48 r50  
    1111<script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    1212<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script> 
    13 <script type="text/javascript" src="http://js.sapo.pt/Prototype/"></script> 
     13<script type="text/javascript" src="/js/prototype.js"></script> 
     14<script src="/js/scriptaculous.js" type="text/javascript"></script> 
     15<script src="/js/iphone-style-checkboxes.js" type="text/javascript"></script> 
     16<link rel="stylesheet" href="/stylesheets/buttons.css" type="text/css" media="screen" /> 
    1417{/if} 
    1518{if $action=='edit' && $uid!=""} 

  • trunk/website/www/templates/live.tpl

    r49 r50  
    66 
    77<div id="articlecontent" style="background:#181b0d;"> 
    8 This will be the Live Dashboard for the official launch of Spacebits which is scheduled for the 30th of May, 2010, 11AM. This page is still incomplete though. It'll have a real time map with the Balloon's position and live values from all sensors, and more. 
     8This will be the Live Dashboard for the official launch of Spacebits which is scheduled for the 30th of May, 2010, 11AM. Now in demo mode. 
    99</div> 
    1010{literal} 
    1111<div id="map_wrapper" style="margin-left:30px;"><div id="map" style="width:840px;height:400px;"></div></div> 
    1212 
    13 <div id="sensors" style="margin-left:25px;height:100px;"> 
     13  <style type="text/css"> 
     14    label.left { 
     15      float: left; 
     16      padding: 4px; 
     17      padding-right: 15px; 
     18    } 
     19    .css_sized_container .iPhoneCheckContainer { 
     20      width: 250px; 
     21    } 
     22    ol { 
     23      list-style-type: none; 
     24      margin: 0; 
     25      padding: 0; 
     26    } 
     27    ol li { 
     28      float:right; 
     29      padding: 3px; 
     30      margin: 0; 
     31    } 
     32    .onchange input { 
     33      opacity: 1 !important; 
     34      left: 100px; 
     35    } 
     36    .onchange .iPhoneCheckContainer { 
     37      overflow: visible; 
     38    } 
     39  </style> 
     40 
     41<div id="sensors" style="margin-right:27px;margin-left:25px;height:100px;"> 
    1442    <div id='sensors_alt' style="float:left;"></div> 
    1543    <div id='sensors_pressure' style="float:left;"></div> 
    … …  
    1745    <div id='sensors_humidity' style="float:left;"></div> 
    1846    <div id='sensors_dust' style="float:left;"></div> 
     47    <div id="buttons" style="float:right;width:250px;margin-top:5px;"> 
     48      <ol class="on_off"> 
     49      <li> 
     50        <label class="left" for="sw_follow">Follow Balloon</label> 
     51        <input type="checkbox" id="sw_follow" /> 
     52      </li> 
     53      <li> 
     54        <label class="left" for="sw_sms">Track SMS</label> 
     55        <input type="checkbox" id="sw_sms" /> 
     56      </li> 
     57      <li> 
     58        <label class="left" for="sw_radio">Track Radio</label> 
     59        <input type="checkbox" id="sw_radio" /> 
     60      </li> 
     61    </ol> 
     62  </div> 
    1963</div> 
    2064 
    … …  
    2771  var start=new OpenLayers.LonLat(-8.0919,37.7616); 
    2872  var img={markerImage: '/images/balloon.png', markerAnchor: new OpenLayers.Pixel(-8, -49), size: new OpenLayers.Size(32, 42)}; 
     73  var sw_follow_cb = false; 
     74  var sw_sms_cb = false; 
     75  var sw_radio_cb = false; 
     76 
     77  document.observe("dom:loaded", function() { 
     78    new iPhoneStyle('.on_off input[type=checkbox]',{checkedLabel: 'YES', uncheckedLabel: 'NO'}); 
     79    setInterval(function checkSwitches() { 
     80      sw_follow_cb = $$('.on_off input[type=checkbox]')[0].checked; 
     81      sw_sms_cb = $$('.on_off input[type=checkbox]')[1].checked; 
     82      sw_radio_cb = $$('.on_off input[type=checkbox]')[2].checked; 
     83      }, 1000); 
     84    }); 
     85 
    2986  map = new SAPO.Maps.Map('map'); 
    3087  map.addControl(new SAPO.Maps.Control.MapType()); 
    … …  
    62119    drawGauge('Dust',10000,'sensors_dust',{max:40000,redFrom:30000,yellowFrom:20000}); 
    63120    // Track 
    64       //map.removeMarkers(); 
    65       markerslayer.removeMarkers(); 
     121    markerslayer.removeMarkers(); 
    66122 
    67       var size=new OpenLayers.Size(16, 16) 
     123    var size=new OpenLayers.Size(16, 16) 
     124    var shift=new OpenLayers.Pixel(-8,-8); 
     125    var green = { markerImage: '/images/green.png', size: size, markerOpacity: 1,markerAnchor: shift }; 
     126    var red = { markerImage: '/images/red.png', size: size, markerOpacity: 1,markerAnchor: shift }; 
    68127 
    69       var shift=new OpenLayers.Pixel(-8,-8); 
    70  
    71       var green = { markerImage: '/images/green.png', size: size, markerOpacity: 1,markerAnchor: shift }; 
    72       var red = { markerImage: '/images/red.png', size: size, markerOpacity: 1,markerAnchor: shift }; 
    73  
     128    if(sw_radio_cb) { 
    74129      for(var i=0;i<r['track']['radio'].length;i++) { 
    75130        var m=new SAPO.Maps.Marker(new OpenLayers.LonLat(r['track']['radio'][i][1],r['track']['radio'][i][0]), {draggable: false}); 
    … …  
    77132        markerslayer.addMarker(m); 
    78133        } 
     134      } 
     135    if(sw_sms_cb) { 
    79136      for(var i=0;i<r['track']['sms'].length;i++) { 
    80137        var m=new SAPO.Maps.Marker(new OpenLayers.LonLat(r['track']['sms'][i][1],r['track']['sms'][i][0]), {draggable: false}); 
    … …  
    82139        markerslayer.addMarker(m); 
    83140        } 
    84  
     141      } 
    85142    // Balloon 
    86143    var pos=new OpenLayers.LonLat(r['last'].lon,r['last'].lat); 
    87     // map.setMapCenter(pos,10); 
     144    if(sw_follow_cb) map.setMapCenter(pos,10); 
    88145    balloon.setLonLat(pos); 
    89146    }