NCTU Programming Marathon / Program5_mbedConnectorQuickstart

mbed connector webapp quickstart

views/index.hbs@0:3ffbcdb3b8cd, 2017-03-13 (annotated)

Committer:
group-NCTU-Programming-Maratho
Date:
Mon Mar 13 02:43:00 2017 +0000
Revision:
0:3ffbcdb3b8cd
Initial commit

Who changed what in which revision?

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