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>