boting ren
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
Diff: views/index.hbs
- Revision:
- 0:a9bcda5b678a
- Child:
- 1:b194c28a1670
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/views/index.hbs Wed Apr 26 03:13:23 2017 +0000
@@ -0,0 +1,127 @@
+<!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.png" 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>