123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- {% extends "bootstrap/base.html" %}
- {% block title %}OnlineFitolab-MQTT{% endblock %}
- {% block styles %}
- {{ super() }}
- {% endblock %}
- {% block scripts %}
- {{ super() }}
- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
- <script type="text/javascript" charset="utf-8">
- $(document).ready(function() {
- //建立連接
- var socket = io.connect('http://' + document.domain + ':' + location.port);
- MQTT();
- var duration = 1000 * 60 * 2;
- var timer = setInterval(MQTT, duration);
- function MQTT(){
- console.log("start to send mqtt...");
- var topic = $('#topic').val();
- var command = $('#command').val();
- var qos = $('#qos').val();
- var data = '{"topic": "' + topic + '", "command": "' + command + '", "qos": ' + qos + '}';
- //發送訊息到app.py
- socket.emit('publish', data=data);
- };
- //接收回傳訊息
- socket.on('mqtt_message', function(data) {
- var text = data['payload'];
- var $textarea = $('#subscribe_messages');
- $textarea.val($textarea.val() + text + '\n');
- console.log("recieve mqtt message...");
- })
- });
- </script>
- {% endblock %}
- {% block content %}
- <div class="container-fluid">
- <div class="row">
- <div class="col-xs-12">
- <h1>OnlineFitolab-MQTT</h1>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-6">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h3 class="panel-title">Publish MQTT Message</h3>
- </div>
- <div class="panel-body">
- <div class="col-xs-12">
- <div class="row">
- <div class="form-horizontal">
- <div class="form-group">
- <label class="control-label col-xs-4">Topic: </label>
- <div class="col-xs-8">
- <input id="topic" class="form-control" value="AISKY/AppleFarm/MK-G/9c:65:f9:1e:66:b3">
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-xs-4">Command: </label>
- <div class="col-xs-8">
- <input id="command" class="form-control">
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-xs-4">Qos: </label>
- <div class="col-xs-8">
- <select id="qos" class="form-control">
- <option value=0>0</option>
- <option value=1>1</option>
- <option value=2>2</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-xs-8 col-xs-offset-4">
- <button id="publish" class="btn btn-primary">Publish</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-6">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h3 class="panel-title">Subscribe MQTT Messages</h3>
- </div>
- <div class="panel-body">
- <div class="col-xs-12">
- <div class="row">
- <div class="form-horizontal">
- <div class="form-group">
- <label class="control-label col-xs-4">Messages:</label>
- <div class="col-xs-8">
- <textarea id="subscribe_messages" class="form-control" rows=10></textarea>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- {% endblock %}
|