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?
User | Revision | Line number | New 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> |