websocket을 사용한 실시간 그래프(온도, 습도)
15910 단어 websocket파이썬Raspberrypi3
DHT11로 1초마다의 온도, 습도를 가시화해 보았습니다.
프로그램이 변경되었지만 처리 흐름은 동일합니다.
사전 준비, 전지식(멋진 참고 사이트)
DHT11 측정 기술: htps : // 코 m / 미노 노부 / ms / 1 바 0223 a f84 153b850
처리 흐름
1. 송신측이 Websocket으로 보낸다.
server.py#!/bin/env python
# -*- coding: utf-8 -*-
import json
import time
import random
import datetime
import tornado.websocket
import tornado.web
import tornado.ioloop
import RPi.GPIO as GPIO
import dht11
import datetime
# initialize GPIO
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.cleanup()
# read data using pin no
instance = dht11.DHT11(pin=4)
class SendWebSocket(tornado.websocket.WebSocketHandler):
def open(self):
print ('Session Opened. IP:' + self.request.remote_ip)
self.ioloop = tornado.ioloop.IOLoop.instance()
self.send_websocket()
def on_close(self):
print("Session closed")
def check_origin(self, origin):
return True
def send_websocket(self):
self.ioloop.add_timeout(time.time() + 1, self.send_websocket)
if self.ws_connection:
result = instance.read()
if result.is_valid():
message = json.dumps({
'time': str(datetime.datetime.now()),
'Temperature': str(result.temperature),
'Humidity': str(result.humidity),
})
self.write_message(message)
app = tornado.web.Application([(r"/ws/display", SendWebSocket)])
if __name__ == "__main__":
app.listen(8080)
tornado.ioloop.IOLoop.current().start()
2. 수신측이 송신한 데이터를 그래프에 기입한다.
display.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.1/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label:'気温',
data: [],
backgroundColor: "rgba(255,229,153,0.4)",
borderColor: "rgba(203,10,10,1)"
}, {
label:'湿度',
data: [],
backgroundColor: "rgba( 153,204,255,0.4)",
borderColor: "rgba(0,127,255,1)"
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
}
}
});
// server IP : 192.168.1.1
var connection = new WebSocket('ws://192.168.1.1:8080/ws/display');
connection.onmessage = function (e) {
chart.data.datasets[0].data.push(
{
x: JSON.parse(e.data)["time"],
y: JSON.parse(e.data)["Temperature"]
}
);
chart.data.datasets[1].data.push(
{
x: JSON.parse(e.data)["time"],
y: JSON.parse(e.data)["Humidity"]
}
);
chart.update();
};
</script>
</body>
</html>
배선
라즈파이와 함께 했던 스타터 키트라고 녹아서 아마존에서 DHT11만 매입했습니다.
센서와 듀퐁 와이어의 찔림으로 녹지 않았습니다.
<Amazon> HiLetgo 3개 세트 DHT11 온도 센서 모듈 습도 센서 모듈 듀폰 라인과 부속 Arduino와 호환
움직이다
송신측$ python server.py
#受信htmlを開いて接続成功時には下記が表示される。
Session Opened. (IP)
수신측
움직여 보고 눈치챘습니다만, 초당이면 변화가 없기 때문에 재미없습니다 ^^; 브랜치 에서 조정 중입니다.
Reference
이 문제에 관하여(websocket을 사용한 실시간 그래프(온도, 습도)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/onsen_koichi/items/d4d333b26182b143e45e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. 송신측이 Websocket으로 보낸다.
server.py
#!/bin/env python
# -*- coding: utf-8 -*-
import json
import time
import random
import datetime
import tornado.websocket
import tornado.web
import tornado.ioloop
import RPi.GPIO as GPIO
import dht11
import datetime
# initialize GPIO
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.cleanup()
# read data using pin no
instance = dht11.DHT11(pin=4)
class SendWebSocket(tornado.websocket.WebSocketHandler):
def open(self):
print ('Session Opened. IP:' + self.request.remote_ip)
self.ioloop = tornado.ioloop.IOLoop.instance()
self.send_websocket()
def on_close(self):
print("Session closed")
def check_origin(self, origin):
return True
def send_websocket(self):
self.ioloop.add_timeout(time.time() + 1, self.send_websocket)
if self.ws_connection:
result = instance.read()
if result.is_valid():
message = json.dumps({
'time': str(datetime.datetime.now()),
'Temperature': str(result.temperature),
'Humidity': str(result.humidity),
})
self.write_message(message)
app = tornado.web.Application([(r"/ws/display", SendWebSocket)])
if __name__ == "__main__":
app.listen(8080)
tornado.ioloop.IOLoop.current().start()
2. 수신측이 송신한 데이터를 그래프에 기입한다.
display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.1/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label:'気温',
data: [],
backgroundColor: "rgba(255,229,153,0.4)",
borderColor: "rgba(203,10,10,1)"
}, {
label:'湿度',
data: [],
backgroundColor: "rgba( 153,204,255,0.4)",
borderColor: "rgba(0,127,255,1)"
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
}
}
});
// server IP : 192.168.1.1
var connection = new WebSocket('ws://192.168.1.1:8080/ws/display');
connection.onmessage = function (e) {
chart.data.datasets[0].data.push(
{
x: JSON.parse(e.data)["time"],
y: JSON.parse(e.data)["Temperature"]
}
);
chart.data.datasets[1].data.push(
{
x: JSON.parse(e.data)["time"],
y: JSON.parse(e.data)["Humidity"]
}
);
chart.update();
};
</script>
</body>
</html>
배선
라즈파이와 함께 했던 스타터 키트라고 녹아서 아마존에서 DHT11만 매입했습니다.
센서와 듀퐁 와이어의 찔림으로 녹지 않았습니다.
<Amazon> HiLetgo 3개 세트 DHT11 온도 센서 모듈 습도 센서 모듈 듀폰 라인과 부속 Arduino와 호환
움직이다
송신측$ python server.py
#受信htmlを開いて接続成功時には下記が表示される。
Session Opened. (IP)
수신측
움직여 보고 눈치챘습니다만, 초당이면 변화가 없기 때문에 재미없습니다 ^^; 브랜치 에서 조정 중입니다.
Reference
이 문제에 관하여(websocket을 사용한 실시간 그래프(온도, 습도)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/onsen_koichi/items/d4d333b26182b143e45e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
송신측
$ python server.py
#受信htmlを開いて接続成功時には下記が表示される。
Session Opened. (IP)
수신측
움직여 보고 눈치챘습니다만, 초당이면 변화가 없기 때문에 재미없습니다 ^^; 브랜치 에서 조정 중입니다.
Reference
이 문제에 관하여(websocket을 사용한 실시간 그래프(온도, 습도)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/onsen_koichi/items/d4d333b26182b143e45e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
