API tools faq
paste
mikecmills2

GroveStreams SteelSeries Gauge Example

mikecmills2
Oct 11th, 2013
349
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Temperature</title>
  6.  
  7. <script type="text/javascript"
  8.     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  9. <script type=text/javascript
  10.     src=http://dl.dropbox.com/u/128855213/SteelSeries/tween-min.js></script>
  11. <script type=text/javascript
  12.     src=http://dl.dropbox.com/u/128855213/SteelSeries/steelseries-min.js></script>
  13.  
  14. </head>
  15.  
  16. <script type="text/javascript">
  17.  
  18.     //Assemble GS Request
  19.     var apiKey = 'c0d6dc0a-ddff-324d-aed4-3ae5d03927c1'; //Change This!!!
  20.  
  21.     function getLastValue(successFn) {
  22.         var items = [ {
  23.             compId : '90:a2:da:0e:60:a3', // Change This!!! Your component ID.
  24.             streamId : 's4',              // Change This!!! The components stream ID
  25.         } ];
  26.  
  27.         //Use https if your domain is using SSL
  28.         var url = 'http://grovestreams.com/api/feed?&api_key=' + apiKey;
  29.         url += '&itemsById=' + JSON.stringify(items);
  30.         url += '&startDate=0&endDate=0&flatten=true'; //If dates are equal, then only last value information is returned
  31.  
  32.         $.ajax({
  33.             type : 'GET',
  34.             url : url,
  35.             dataType : 'json',
  36.             cache : false,
  37.             processData : true,
  38.             crossDomain : true,
  39.                         async : true,
  40.             success : function(jobj) {
  41.                 successFn(jobj.feed.stream[0].lastValue);
  42.             },
  43.             error : function(a) {
  44.                 //alert("Error");
  45.             }
  46.         });
  47.     }
  48.  
  49.     function getLastValueWithDailyMinMax(successFn) {
  50.  
  51.         var items = [ {
  52.             compId : '90:a2:da:0e:60:a3', // Change This!!! Your component ID.
  53.             streamId : 's4', // Change This!!! The components stream ID
  54.             cycleId : 'gs.days', // Cycle ID. Cycle, in GS, should reference a timezone if your viewers cross zones
  55.             stats : 'MIN,MAX,MINOCCURRENCE,MAXOCCURRENCE' //Dayly Min, Max and the times they occured.
  56.         } ];
  57.  
  58.         //GS will expand the dates to the start and end datetimes of the day sd falls into for the given cycle ID in the URl
  59.         // But they cannot be equal or no MIN MAX stats will be returned.
  60.         var now = new Date();
  61.         var sd = now.getTime();
  62.         var ed = sd + 1;
  63.  
  64.         //Use https if your domain is using SSL
  65.         var url = 'http://grovestreams.com/api/feed?&api_key=' + apiKey;
  66.         url += '&itemsById=' + JSON.stringify(items);
  67.         url += '&startDate=' + sd + '&endDate=' + ed + '&flatten=true';
  68.  
  69.         $.ajax({
  70.             type : 'GET',
  71.             url : url,
  72.             dataType : 'json',
  73.             cache : false,
  74.             processData : true,
  75.             crossDomain : true,
  76.                         async : true,
  77.             success : function(jobj) {
  78.                 var lastValue = jobj.feed.stream[0].lastValue;
  79.                 var dailyMin = jobj.feed.stream[0].statistic[0].data[0];
  80.                 var dailyMax = jobj.feed.stream[0].statistic[1].data[0];
  81.                 var minTime = new Date(jobj.feed.stream[0].statistic[2].data[0]);
  82.                 var maxTime = new Date(jobj.feed.stream[0].statistic[3].data[0]);
  83.  
  84.                 successFn(lastValue, dailyMin, dailyMax, minTime, maxTime);
  85.             },
  86.             error : function(a) {
  87.                 //alert("Error");
  88.             }
  89.         });
  90.     }
  91.  
  92.     function init() {
  93.         // Initialzing gauge
  94.         tempGauge = new steelseries.Radial('gaugeCanvas', {
  95.             gaugeType : steelseries.GaugeType.TYPE6,
  96.             minValue : 0,
  97.             maxValue : 150,
  98.             size : 200,
  99.             frameDesign : steelseries.FrameDesign.BRASS,
  100.             knobStyle : steelseries.KnobStyle.BRASS,
  101.             pointerType : steelseries.PointerType.TYPE6,
  102.             lcdDecimals : 0,
  103.             section : null,
  104.             area : null,
  105.             titleString : 'Outside Temp',
  106.             unitString : '°F',
  107.             threshold : 100,
  108.             lcdVisible : true,
  109.             minMeasuredValueVisible : true,
  110.             maxMeasuredValueVisible : true
  111.         });
  112.  
  113.         // Start the gauge update
  114.         setInterval(function() {
  115.             getLastValueWithDailyMinMax(function(val, dailyMin, dailyMax, minTime, maxTime) {
  116.                 tempGauge.setMinMeasuredValue(dailyMin);
  117.                 tempGauge.setValueAnimated(val);
  118.                 tempGauge.setMaxMeasuredValue(dailyMax);
  119.  
  120.                 document.getElementById("minTime").innerHTML = 'Today\'s low was at ' + formatAMPM(minTime, 'g:i a');
  121.                 document.getElementById("maxTime").innerHTML = 'Today\'s high was at ' + formatAMPM(maxTime, 'g:i a');
  122.             });
  123.         }, 10000);
  124.     }
  125.  
  126.     function formatAMPM(date) {
  127.         //Avoiding including another large scripting library so added this method
  128.         var hours = date.getHours();
  129.         var minutes = date.getMinutes();
  130.         var ampm = hours >= 12 ? 'pm' : 'am';
  131.         hours = hours % 12;
  132.         hours = hours ? hours : 12; // the hour '0' should be '12'
  133.         minutes = minutes < 10 ? '0' + minutes : minutes;
  134.         var strTime = hours + ':' + minutes + ' ' + ampm;
  135.         return strTime;
  136.     }
  137. </script>
  138.  
  139. <body onload=init()>
  140.     <div>
  141.         <canvas id=gaugeCanvas width=200 height=200>No canvas in your
  142.         browser...sorry...</canvas>
  143.     </div>
  144.     <div
  145.         style="font-size: 13px; font-family: Verdana; padding: 10px 0 0 30px">
  146.         <div id="minTime"></div>
  147.         <div id="maxTime"></div>
  148.     </div>
  149. </body>
  150.  
  151. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!