サンプルコード(HTML)－Uzuki温度センサ－

サンプルHTMLファイルを以下に紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OMOIKANet サンプルHTMLファイル</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li>受信データ閲覧</li>
        </ol>
    </div>
    <div class="container-fluid panel-body">
        <!-- serial selector -->
        <div class="row form-group serials">
            <label for="InputSerial">デバイス選択</label>
            <select id="InputSerial" name="serial" class="form-control">
            </select>
        </div>

        <!-- data table -->
        <div class="row">
            <table class="table table-hover" id="serial-table">
                <thead>
                <tr>
                	<th>番号</th>
                    <th>日時</th>
                    <th>温度</th>
                    <th>湿度</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal">
    <div class="modal-dialog" id="login-form-dialog" >
        <form id="login-form">
            <input type="hidden" name="client_id" class="form-control" value="thom">
            <input type="hidden" name="client_secret" class="form-control" value="nightworld">
            <input type="hidden" name="grant_type" class="form-control" value="password">

            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">OMOIKANetへのログイン</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="uid">ユーザーIDまたはメールアドレス</label>
                        <input type="text" name="username" class="form-control" id="username">
                    </div>
                    <div class="form-group">
                        <label for="password">パスワード</label>
                        <input type="password" name="password" class="form-control" id="password">
                    </div>
                    <div class="alerts">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" type="button" class="btn btn-primary">ログイン</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- アラート表示のテンプレート -->
<!-- alert-typeは次の中から選択 alert-success, alert-info, alert-warning, alert-danger -->
<script type="text/template" id="alert-template">
    <div class="alert {{alert_type}} alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>{{title}}</strong>　{{message}}
    </div>
</script>

<!-- シリアル セレクトボックスのテンプレート -->
<script type="text/template" id="serial-template">
    <option
        {{selected}}
        class="serial"
        id="{{_id}}"
        value="{{_id}}"
        _rev="{{_rev}}"
        alt_adr="{{alt_adr}}"
        con_status="{{con_status}}"
        enckey="{{enckey}}"
        mac_addr="{{mac_addr}}"
        mail_adr="{{mail_adr}}"
        pass_phrase="{{pass_phrase}}"
        pending="{{pending}}"
        pname="{{pname}}"
        product="{{product}}"
        product_id="{{product_id}}"
        product_name="{{product_name}}"
        product_serial="{{product_serial}}"
        serial="{{serial}}"
        span="{{span}}"
        user_id="{{user_id}}"
        user_name="{{user_name}}"
        vendor_id="{{vendor_id}}"
        vendor_name="{{vendor_name}}"
        >{{vendor_name}} - {{product_name}} - {{pname}}</option>
</script>

<!-- シリアル 行のテンプレート -->
<script type="text/template" id="serial-row-template">
    <tr class="serial">
    	<td>{{number}}</td>
        <td>{{datetime}}</td>
        <td>{{temp}}℃</td>
        <td>{{humid}}％</td>
    </tr>
</script>

<script>
    var access_token;

    $(window).ready(function() {
        var timer_ptr = 0;

        // serials update action
        var refreshSerials = function(access_token){
            var serial_container = $('#InputSerial');
            var serial_row = Hogan.compile($('#serial-template').text());

            $.ajax({
                url: "http://ninigi.mybluemix.net/1/util/my_serials",
                data: {
                    access_token: access_token
                },
                success: function(serials){
                    serial_container.empty();
                    serials.forEach(function (obj, i) {
                        serial_container.append(serial_row.render(obj.value));
                    });

                    var first_serial = serials[0].value.serial
                    clearInterval(timer_ptr);
                    refreshTable(first_serial);
                    timer_ptr = setInterval(function(){
                        refreshTable(first_serial);
                    }, 1000 * 10);
                },
                error: function(err){
                    console.log(err);
                    $('#login-modal').modal({backdrop: "static"});
                }
            });
        }

        // messages update action
        var refreshTable = function(serial){
            var table = $('#serial-table');
            var tbody = table.find('tbody');
            var row = Hogan.compile($('#serial-row-template').text());

            var data = {
                access_token: access_token,
                serial: serial,
                limit: 20,
                //date_to: "2015-07-07T20:10:45",
                senddate: Math.floor(new Date().getTime()/1000)
            }

            $.ajax({
                url: "http://ninigi.mybluemix.net/1/messages/list",
                data: data,
                success: function(messages){
                    tbody.empty();
                    messages.forEach(function (message, i) {
                        tbody.append(row.render(message.value));
                    });
                },
                error: function(err){
                    console.log(err);
                    $('#login-modal').modal({backdrop: "static"});
                }
            });
        }

        // serial change action
        $('#InputSerial').change(function(e) {
            var selected_serial = $(this).find("option:selected").attr("serial");

            clearInterval(timer_ptr);
            refreshTable(selected_serial);
            timer_ptr = setInterval(function(){
                refreshTable(selected_serial);
            }, 1000 * 10);
        })

        // login action
        $('#login-form').submit(function(e){
            e.preventDefault();
            var alerts = $('#login-form div.modal-body div.alerts');
            var alert_template = Hogan.compile($('#alert-template').text());

            $.ajax({
                type: "POST",
                url: "http://ninigi.mybluemix.net/oauth/token",
                data: $(this).serialize(),
                success: function(res){
                    access_token = res.access_token;
                    refreshSerials(access_token);
                    $('#login-modal').modal('hide');
                },
                error: function(err){
                    alerts.empty();
                    alerts.append(alert_template.render({
                        alert_type: "alert-danger",
                        title: "ERROR",
                        message: "ログインに失敗しました。",
                    }));
                }
            });
        });

        // show startup login modal
        $('#login-modal').modal({backdrop: "static"});
    });
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

<!DOCTYPE html>

<head>

<title>OMOIKANet サンプルHTMLファイル</title>

</head>

<body>

<li>受信データ閲覧</li>

</ol>

</div>

<label for="InputSerial">デバイス選択</label>

</select>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<h4 class="modal-title">OMOIKANetへのログイン</h4>

</div>

<label for="uid">ユーザーIDまたはメールアドレス</label>

</div>

<label for="password">パスワード</label>

</div>

</div>

</div>

</form>

</div>

<strong>{{title}}</strong>　{{message}}

</div>

</script>

<option

class="serial"

id="{{_id}}"

value="{{_id}}"

_rev="{{_rev}}"

alt_adr="{{alt_adr}}"

con_status="{{con_status}}"

enckey="{{enckey}}"

mac_addr="{{mac_addr}}"

mail_adr="{{mail_adr}}"

pass_phrase="{{pass_phrase}}"

pending="{{pending}}"

pname="{{pname}}"

product="{{product}}"

product_id="{{product_id}}"

product_name="{{product_name}}"

product_serial="{{product_serial}}"

serial="{{serial}}"

span="{{span}}"

user_id="{{user_id}}"

user_name="{{user_name}}"

vendor_id="{{vendor_id}}"

vendor_name="{{vendor_name}}"

>{{vendor_name}} - {{product_name}} - {{pname}}</option>

</script>

<td>{{number}}</td>

<td>{{datetime}}</td>

<td>{{humid}}％</td>

</tr>

</script>

var access_token;

$(window).ready(function() {

var timer_ptr = 0;

// serials update action

var refreshSerials = function(access_token){

var serial_container = $('#InputSerial');

var serial_row = Hogan.compile($('#serial-template').text());

$.ajax({

url: "http://ninigi.mybluemix.net/1/util/my_serials",

data: {

access_token: access_token

success: function(serials){

serial_container.empty();

serials.forEach(function (obj, i) {

serial_container.append(serial_row.render(obj.value));

});

var first_serial = serials[0].value.serial

clearInterval(timer_ptr);

refreshTable(first_serial);

timer_ptr = setInterval(function(){

refreshTable(first_serial);

}, 1000 * 10);

error: function(err){

console.log(err);

$('#login-modal').modal({backdrop: "static"});

}

});

}

// messages update action

var refreshTable = function(serial){

var table = $('#serial-table');

var tbody = table.find('tbody');

var row = Hogan.compile($('#serial-row-template').text());

var data = {

access_token: access_token,

serial: serial,

limit: 20,

//date_to: "2015-07-07T20:10:45",

senddate: Math.floor(new Date().getTime()/1000)

}

$.ajax({

url: "http://ninigi.mybluemix.net/1/messages/list",

data: data,

success: function(messages){

tbody.empty();

messages.forEach(function (message, i) {

tbody.append(row.render(message.value));

});

error: function(err){

console.log(err);

$('#login-modal').modal({backdrop: "static"});

}

});

}

// serial change action

$('#InputSerial').change(function(e) {

var selected_serial = $(this).find("option:selected").attr("serial");

clearInterval(timer_ptr);

refreshTable(selected_serial);

timer_ptr = setInterval(function(){

refreshTable(selected_serial);

}, 1000 * 10);

})

// login action

$('#login-form').submit(function(e){

e.preventDefault();

var alerts = $('#login-form div.modal-body div.alerts');

var alert_template = Hogan.compile($('#alert-template').text());

$.ajax({

type: "POST",

url: "http://ninigi.mybluemix.net/oauth/token",

data: $(this).serialize(),

success: function(res){

access_token = res.access_token;

refreshSerials(access_token);

$('#login-modal').modal('hide');

error: function(err){

alerts.empty();

alerts.append(alert_template.render({

alert_type: "alert-danger",

title: "ERROR",

message: "ログインに失敗しました。",

}));

}

});

// show startup login modal

$('#login-modal').modal({backdrop: "static"});

});

</script>

</body>

</html>

サンプルHTMLファイル