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@1:b194c28a1670, 2017-08-23 (annotated)

Committer:
Ren Boting
Date:
Wed Aug 23 14:08:23 2017 +0900
Revision:
1:b194c28a1670
Parent:
0:a9bcda5b678a 
Refined the application and update logo.

Who changed what in which revision?

UserRevisionLine numberNew contents of line
edamame22 0:a9bcda5b678a 1 <!DOCTYPE html>
edamame22 0:a9bcda5b678a 2 <html lang="en">
edamame22 0:a9bcda5b678a 3 <head>
edamame22 0:a9bcda5b678a 4 <meta charset="utf-8">
edamame22 0:a9bcda5b678a 5 <meta name="viewport" content="width=device-width, initial-scale=1">
edamame22 0:a9bcda5b678a 6
edamame22 0:a9bcda5b678a 7 <title>mbed Device Connector Webapp Quickstart</title>
edamame22 0:a9bcda5b678a 8
edamame22 0:a9bcda5b678a 9 <link rel="stylesheet" href="static/css/normalize.css">
edamame22 0:a9bcda5b678a 10 <link rel="stylesheet" href="static/css/foundation.min.css">
edamame22 0:a9bcda5b678a 11 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
edamame22 0:a9bcda5b678a 12 <link rel="stylesheet" href="static/css/styles.css">
edamame22 0:a9bcda5b678a 13
edamame22 0:a9bcda5b678a 14 <!--[if lt IE 9]>
edamame22 0:a9bcda5b678a 15 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
edamame22 0:a9bcda5b678a 16 <![endif]-->
edamame22 0:a9bcda5b678a 17 </head>
edamame22 0:a9bcda5b678a 18 <body>
edamame22 0:a9bcda5b678a 19 <div class="row margin">
edamame22 0:a9bcda5b678a 20 <div class="small-12 columns">
Ren Boting 1:b194c28a1670 21 <div><img src="static/img/ARMmbedLogo.jpg" alt="ARM mbed"></div>
edamame22 0:a9bcda5b678a 22 </div>
edamame22 0:a9bcda5b678a 23 </div>
edamame22 0:a9bcda5b678a 24 <div class="blueband">
edamame22 0:a9bcda5b678a 25 <div class="row">
edamame22 0:a9bcda5b678a 26 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 27 <h1>Webapp Quickstart</h1>
edamame22 0:a9bcda5b678a 28 <h1>BLE Client with Device Connector </h1>
edamame22 0:a9bcda5b678a 29 </div>
edamame22 0:a9bcda5b678a 30 </div>
edamame22 0:a9bcda5b678a 31 </div>
edamame22 0:a9bcda5b678a 32 <div id="endpoints">
edamame22 0:a9bcda5b678a 33 {{#each endpoints}}
edamame22 0:a9bcda5b678a 34 <div class="row" id="{{name}}">
edamame22 0:a9bcda5b678a 35 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 36 <div class="row">
edamame22 0:a9bcda5b678a 37 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 38 <h4> Device Name: <span id="{{name}}">{{name}}</span></h4>
edamame22 0:a9bcda5b678a 39 <h2></h2>
edamame22 0:a9bcda5b678a 40 </div>
edamame22 0:a9bcda5b678a 41 </div>
edamame22 0:a9bcda5b678a 42 <div class="row">
edamame22 0:a9bcda5b678a 43 <div class="small-18 medium-22 columns">
edamame22 0:a9bcda5b678a 44 <h4> Humidity: <span id="read-humidity">{{humidity_value}}</span></h4>
edamame22 0:a9bcda5b678a 45 <h4> Tempereture: <span id="read-tempereture">{{tempereture_value}}</span></h4>
edamame22 0:a9bcda5b678a 46 <h4> Pressure: <span id="read-pressure">{{pressure_value}}</span></h4>
edamame22 0:a9bcda5b678a 47 </div>
edamame22 0:a9bcda5b678a 48 </div>
edamame22 0:a9bcda5b678a 49 <div class="row">
edamame22 0:a9bcda5b678a 50 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 51 <label><input type="checkbox" class="subscribe-presses"> Subscribe</label>
edamame22 0:a9bcda5b678a 52 <button class="get-presses">GET</button>
edamame22 0:a9bcda5b678a 53 </div>
edamame22 0:a9bcda5b678a 54 </div>
edamame22 0:a9bcda5b678a 55 </div>
edamame22 0:a9bcda5b678a 56 </div>
edamame22 0:a9bcda5b678a 57 {{else}}
edamame22 0:a9bcda5b678a 58 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 59 <div class="row">
edamame22 0:a9bcda5b678a 60 <div class="small-12 columns">
edamame22 0:a9bcda5b678a 61 <h2>No endpoints connected</h2>
edamame22 0:a9bcda5b678a 62 </div>
edamame22 0:a9bcda5b678a 63 </div>
edamame22 0:a9bcda5b678a 64 </div>
edamame22 0:a9bcda5b678a 65 {{/each}}
edamame22 0:a9bcda5b678a 66 </div>
edamame22 0:a9bcda5b678a 67
edamame22 0:a9bcda5b678a 68
edamame22 0:a9bcda5b678a 69 <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
edamame22 0:a9bcda5b678a 70 <script type="text/javascript" src="/static/js/socket.io.js"></script>
edamame22 0:a9bcda5b678a 71 <script type="text/javascript">
edamame22 0:a9bcda5b678a 72 $(function() {
edamame22 0:a9bcda5b678a 73 var socket = io();
edamame22 0:a9bcda5b678a 74
edamame22 0:a9bcda5b678a 75 $('#endpoints').children().each(function(index, element) {
edamame22 0:a9bcda5b678a 76 var _this = $(this);
edamame22 0:a9bcda5b678a 77 _this.find('.subscribe-presses').change(function() {
edamame22 0:a9bcda5b678a 78 if ($(this).is(":checked")) {
edamame22 0:a9bcda5b678a 79 _this.find('.get-presses').prop('disabled', true);
edamame22 0:a9bcda5b678a 80 console.log('emitting subscribe_to_presses');
edamame22 0:a9bcda5b678a 81 socket.emit('subscribe_to_presses', {
edamame22 0:a9bcda5b678a 82 endpointName: _this.attr('id')
edamame22 0:a9bcda5b678a 83 });
edamame22 0:a9bcda5b678a 84 } else {
edamame22 0:a9bcda5b678a 85 _this.find('.get-presses').prop('disabled', false);
edamame22 0:a9bcda5b678a 86 socket.emit('unsubscribe_to_presses', {
edamame22 0:a9bcda5b678a 87 endpointName: _this.attr('id')
edamame22 0:a9bcda5b678a 88 });
edamame22 0:a9bcda5b678a 89 }
edamame22 0:a9bcda5b678a 90 });
edamame22 0:a9bcda5b678a 91
edamame22 0:a9bcda5b678a 92 _this.find('.get-presses').on('click', function() {
edamame22 0:a9bcda5b678a 93 socket.emit('get_presses', {
edamame22 0:a9bcda5b678a 94 endpointName: _this.attr('id')
edamame22 0:a9bcda5b678a 95 });
edamame22 0:a9bcda5b678a 96 });
edamame22 0:a9bcda5b678a 97 });
edamame22 0:a9bcda5b678a 98
edamame22 0:a9bcda5b678a 99 socket.on('SetTemp', function (data) {
edamame22 0:a9bcda5b678a 100 var tmp_buf=data.value;
edamame22 0:a9bcda5b678a 101 var pair_str = tmp_buf.split(";");
edamame22 0:a9bcda5b678a 102 var val_str=[];
edamame22 0:a9bcda5b678a 103 for(var h=0; h<3; h++){
edamame22 0:a9bcda5b678a 104 if(pair_str[h]=="end") break;
edamame22 0:a9bcda5b678a 105 val_str[h]=pair_str[h].split("=");
edamame22 0:a9bcda5b678a 106 if(val_str[h][0]=="e_t")
edamame22 0:a9bcda5b678a 107 $('#read-tempereture').html(val_str[h][1]);
edamame22 0:a9bcda5b678a 108 else if(val_str[h][0]=="e_h")
edamame22 0:a9bcda5b678a 109 $('#read-humidity').html(val_str[h][1]);
edamame22 0:a9bcda5b678a 110 else if(val_str[h][0]=="e_p")
edamame22 0:a9bcda5b678a 111 $('#read-pressure').html(val_str[h][1]);
edamame22 0:a9bcda5b678a 112 }
edamame22 0:a9bcda5b678a 113 console.log('SetTemp', data);
edamame22 0:a9bcda5b678a 114
edamame22 0:a9bcda5b678a 115 });
edamame22 0:a9bcda5b678a 116
edamame22 0:a9bcda5b678a 117 socket.on('subscribed-to-presses', function (data) {
edamame22 0:a9bcda5b678a 118 console.log('subscribed-to-presses', data);
edamame22 0:a9bcda5b678a 119 });
edamame22 0:a9bcda5b678a 120
edamame22 0:a9bcda5b678a 121 socket.on('unsubscribed-to-presses', function (data) {
edamame22 0:a9bcda5b678a 122 console.log('unsubscribed-to-presses', data);
edamame22 0:a9bcda5b678a 123 });
edamame22 0:a9bcda5b678a 124 });
edamame22 0:a9bcda5b678a 125 </script>
edamame22 0:a9bcda5b678a 126 </body>
edamame22 0:a9bcda5b678a 127 </html>