라즈베리 파이 Landscaped 아날로그 디지털 시계/계산기 온습도 데이터 디스플레이 Flask 와이파이 코딩

coding art 2017. 7. 10. 18:58

728x90

___________Up to here, advertization area_____________________________________________

Landscape 아날로그 디지털 시계 계산기에 두 개의 버튼을 추가하여 온습도 데이터를 디스플레이 하도록 하자. Adadfruit 사 온습도 센서 DHT11은 BCM 4 번에 설치하기로 한다.

이미 Flask 모듈 에 의한 와이파이 코딩 예제에서 라즈베리로부터의 시간 정보를 출력하였다. 동일한 방법으로 Adafruit DHT11 온습도 센서의 측정 데이터를 출력과 동시에 HTM/Java Script 계산기 코드에 두 개의 버튼을 추가로 배치하여 온습도 값을 디스플레이 하도록 코드를 수정하였다. 당초의 코드 수정 목적은 디지털 시계처럼 일정한 시간 간격으로 웹브라우저에서 라즈베리의 파이선 코드와 인터페이스하여 온습도 값을 출력할 계획이었으나 라즈베리 파이선 코드에 while True 명령을 사용했음에도 불구하고 Flask 모듈과의 부조화로 일회 디스플레이로 그쳤음에 유의하자.

아래의 파이선 코드를 참조하기로 하자. 라즈베리에는 별도의 setup() 문이 없으므로 while True: 에 함께 몰아서 사용해도 무방하다. 일단 Flask 와이파이 모듈 관련 코드 전체를 대상으로 무한 루프를 적용하도록 while True: 다음에 app = Flask(__name__) 문을 두도록 한다.
온습도 데이터를 읽은 후 실수형 데이터를 문자로 변환하여 templateData에서 와이파이로 웹에 전송한다.

파이선 코드에서 전송한 시간 정보와 온습도 데이터는 웹브라우저의 HTML 코드에서 {{ ⚫⚫⚫ }}로 받아 출력한다.

아울러 계산기 내부에 <table>태그를 사용하여 계산기 하단에 두 개의 버튼을 <input⚫⚫⚫ 문을 사용하여 코딩한다. 버튼에 필요로 하는 CSS 코드는 디지털 시계 버튼을 수정 없이 그대로 사용하였다.

HTML/Java Script 코드 영역에서에서 파이선으로부터 templateData를 통해 받은 데이터를 출력하도록 Java Script 함수 updateTime() 에 온도와 습도를 각각 var temp 와 var humi 로 읽는다. Java Script에서 읽은 데이터 값을 HTML 화면에 출력할 수 document.⚫⚫⚫ 처리한다.

Terminal에서 파이선 코드 clock.py 실행 결과 웹브라우저와 연결은 잘 되었으나 당초에 while True:로 목표했던 무한 루프 실행이 이루어지지 못했다.
즉 파이선 코딩에서 Flask 모듈 와이파이 모듈 사용을 원활하게 하여 일정 시간 간격으로 온습도 데이터를 갱신하기 위해서는 별도의 특수한 코딩이 요구되는 것으로 보인다.

clock.py

from flask import Flask, render_template

import datetime

import Adafruit_DHT as dht

import time

while True:

app = Flask(__name__)

pin = 4

h, t=dht.read_retry(dht.DHT11,pin)

temp = int(t)

humi = int(h)

tString = str(temp)

hString = str(humi)

print(tString,hString)

@app.route('/')

def hello():

now = datetime.datetime.now()

timeString = now.strftime("%Y-%m-%d %H:%M")

templateData = {

'title' : 'Raspberry Pi 3 WiFi Coding',

'time' : timeString,

'temperature' : tString,

'humidity' : hString

}

return render_template('main-landscaped.html', **templateData)

if __name__ == '__main__':

app.run(debug=True, host='0.0.0.0')

main=landscaped.html

<!DOCTYPE HTML>

<html>

<body>

<center><h1>{{title}}</h1>

</body>

<body>

<h1>Hello, World!</h1>

<h2>The date and time on the server is: {{ time }}</h2>

<h2> Room temperature (Celsius deg) : {{ temperature }} </h2>

<h2> Room relative humidity (%) : {{ humidity }} </h2>

</body>

<head>

<style>

body{

background-color:tan;}

.box{background-color:#3d4543;height:400px;width:520px; border-style:solid; border-color:lightblue;

border-radius:10px;position:relative;top:50px;left:1%;}

.display{background-color:#222;width:440px; position:relative;

left:2px;top:20px;height:35px;}

.display input{width:415px;position:relative;left:2px;top:2px;height:30px;

color:black;background-color:#bccd95;font-size:21px;text-align:right;}

.keys{position:relative;top:15px;}

.button{width:40px;height:30px;border-radius:8px; border-style:solid; border-color:green;

margin-left:12px;cursor:pointer;border-top:2px solid transparent;}

.button.gray{color:white;background-color:#6f6f6f;

border-bottom:black 2px solid;border-top:2px #6f6f6f solid;}

.button.pink{color:black;background-color:#ff4561;

border-bottom:black 2px solid;}

.button.black{color:white;background-color:#303030;

border-bottom:black 2px solid;border-top:2px #303030 solid;}

.button.orange{color:black;background-color:FF9933;

border-bottom:black 2px solid;border-top:2px FF9933 solid;}

.gray:active{border-top:black 2px solid;

border-bottom:2px #6f6f6f solid;}

.pink:active{border-top:black 2px solid;

border-bottom:#ff4561 2px solid;}

.black:active{border-top:black 2px solid;

border-bottom:#303030 2px solid;}

.orange:active{border-top:black 2px solid;

border-bottom:FF9933 2px solid;}

.buttondigiclock{width:125px;height:40px;border:none;border-radius:8px;margin-left:15px;

cursor:pointer;border-top:2px solid transparent;}

.buttondigiclock.black{color:white;background-color:;

border-bottom:lightblue 2px solid;border-top:2px 303030 solid;}

p{line-height:10px;}

</style>

</head>

<body>

</div>

</div>

<table>

<tbody>

<tr>

</tr>

</tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

</g>

</g>

</g>

</g>

</svg>

</body>

</td>

<td>

</td>

<td>

</form>

</td>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

</td>

<td>

</td>

</form>

</tr>

</tbody>

</table>

</div>

function c(val){

document.getElementById("d").value=val;}

function v(val){

document.getElementById("d").value+=val;}

function e() {

try {

c(eval(document.getElementById("d").value)) }

catch(e) {

c('Error') } }

</script>

</body>

<head>

function updateTime() { // Update the SVG clock

var now = new Date();

var sec = now.getSeconds();

var min = now.getMinutes();

var hour = (now.getHours() % 12) + min/60;

var secangle = sec*6;

var minangle = min*6;

var hourangle = hour*30;

var actualMonth = now.getMonth() + 1;

var temp = {{ temperature }}; //........................modification 3

var humi = {{ humidity }}; //........................modification 4

//Prepare time output!

document.theClock.theTime.value = ""

+ now.getHours() + ":"

+ now.getMinutes() + ":"

+ now.getSeconds();

document.theClock.theDate.value = ""

+ now.getFullYear() + ":"

+ actualMonth + ":"

+ now.getDate();

document.theWeather.theTemp.value = ""

+ temp + " degree C"; //........................modification 5

document.theWeather.theHumi.value = ""

+ humi + "%"; //........................modification 6

// Get SVG elements for the hands of the clock

var sechand = document.getElementById("secondhand");

var minhand = document.getElementById("minutehand");

var hourhand = document.getElementById("hourhand");

// Set an SVG attribute on them to move them around the clock face

sechand.setAttribute("transform", "rotate(" + secangle + ",50,32)");

minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");

hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");

setTimeout(updateTime, 1000);

}

</script>

<style>

/* These CSS styles all apply to the SVG elements defined below */

#clock {

/* styles for everything in the clock */

stroke: black;

/* black lines */

stroke-linecap: round;

/* with rounded ends */

fill: #eef;

/* on a light blue gray background */

}

#face { stroke-width: 3px;}

/* clock face outline */

#smallface { stroke:green; stroke-width: 1px;}

/* clock face outline */

#ticks { stroke-width: 2; }

/* lines that mark each hour */

#smallticks { stroke:green; stroke-width: 1; }

#hourhand {stroke-width: 5px;}

/* wide hour hand */

#minutehand {stroke: deepskyblue; stroke-width: 3px;} /* narrow minute hand */

#secondhand {stroke:red; stroke-width: 1px;}

#numbers {

/* how to draw the numbers */

font-family: sans-serif; font-size: 7pt; font-weight: bold;

text-anchor: middle; stroke: none; fill: blue;

}

</style>

</head>

</html>

저작자표시 비영리 변경금지 (새창열림)