boting ren / connector-api-python-quickstart_4BME280

This example presents field data from sensor BME280 connecting to cloud, mbed Device Connector.

Please read details at the link. https://github.com/soramame21/connector-api-python-quickstart_4BME280

views/index.hbs

Committer:
Ren Boting
Date:
2017-08-23
Revision:
1:b194c28a1670
Parent:
0:a9bcda5b678a

File content as of revision 1:b194c28a1670:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>mbed Device Connector Webapp Quickstart</title>

    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/css/foundation.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="static/css/styles.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row margin">
      <div class="small-12 columns">
        <div><img src="static/img/ARMmbedLogo.jpg" alt="ARM mbed"></div>
      </div>
    </div>
    <div class="blueband">
      <div class="row">
        <div class="small-12 columns">
          <h1>Webapp Quickstart</h1>
          <h1>BLE Client with Device Connector </h1>
        </div>
      </div>
    </div>
    <div id="endpoints">
    {{#each endpoints}}
      <div class="row" id="{{name}}">
        <div class="small-12 columns">
          <div class="row">
            <div class="small-12 columns">
              <h4>       Device Name: <span id="{{name}}">{{name}}</span></h4>
              <h2></h2>
            </div>
          </div>
          <div class="row">
            <div class="small-18 medium-22 columns">
              <h4>       Humidity: <span id="read-humidity">{{humidity_value}}</span></h4>
              <h4>       Tempereture: <span id="read-tempereture">{{tempereture_value}}</span></h4>
              <h4>       Pressure: <span id="read-pressure">{{pressure_value}}</span></h4>
            </div>
          </div>
          <div class="row">
               <div class="small-12 columns">
                    <label><input type="checkbox" class="subscribe-presses"> Subscribe</label>
                    <button class="get-presses">GET</button>
               </div>
         </div>
		</div>
      </div>
    {{else}}
      <div class="small-12 columns">
        <div class="row">
          <div class="small-12 columns">
            <h2>No endpoints connected</h2>
          </div>
        </div>
      </div>
    {{/each}}
    </div>


    <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/js/socket.io.js"></script>
    <script type="text/javascript">
      $(function() {
        var socket = io();

        $('#endpoints').children().each(function(index, element) {
          var _this = $(this);
          _this.find('.subscribe-presses').change(function() {
            if ($(this).is(":checked")) {
              _this.find('.get-presses').prop('disabled', true);
			  console.log('emitting subscribe_to_presses');
              socket.emit('subscribe_to_presses', {
                endpointName: _this.attr('id')
              });
            } else {
              _this.find('.get-presses').prop('disabled', false);
              socket.emit('unsubscribe_to_presses', {
                endpointName: _this.attr('id')
              });
            }
          });

          _this.find('.get-presses').on('click', function() {
		       socket.emit('get_presses', {
              endpointName: _this.attr('id')
            });
          });
		  });

		socket.on('SetTemp', function (data) {
		  var  tmp_buf=data.value;
		  var  pair_str = tmp_buf.split(";");
		  var  val_str=[];
		  for(var h=0; h<3; h++){
		      if(pair_str[h]=="end")    break;
              val_str[h]=pair_str[h].split("=");
			  if(val_str[h][0]=="e_t")
			      $('#read-tempereture').html(val_str[h][1]);
			  else if(val_str[h][0]=="e_h")
                  $('#read-humidity').html(val_str[h][1]);
              else if(val_str[h][0]=="e_p")
                  $('#read-pressure').html(val_str[h][1]);
		  }
          console.log('SetTemp', data);

       });

        socket.on('subscribed-to-presses', function (data) {
          console.log('subscribed-to-presses', data);
        });

        socket.on('unsubscribed-to-presses', function (data) {
          console.log('unsubscribed-to-presses', data);
        });
      });
    </script>
  </body>
</html>