[Raspberry Pi] 8. Flask 제어와 웹으로 라즈베리파이 제어

저번 포스팅에서 회로 구성중에 Pin 연결이 1번과 40번 Pin에 점퍼케이블이 연결되있는 것을 볼 수 있다.

보통 같았으면 VCC와 GND에만 연결하면된다(39번과 40번 Pin이 각각 GND, GPIO 21번이다.)

그러나 1번 Pin에는 VCC값인 3.3V가, 40번 Pin에는 GPIO.21번 핀에 연결하였다.

이게 뭐하는 짓인지 생각할 수도 있겠지만, 나중의 라즈베리파이의 수명을위한 조치였다.

전압을 받는 (+)에서 차이가 있는데,

1번 Pin의 VCC는 어댑터에서 받아오는 3.3V의 전압이고,

GPIO의 Pin들은 라즈베리파이의 내장된 칩에서 가져오는 전압이라는 차이가 있다.

그렇기에 VCC Pin들은 어댑터에서 받아오는 전류만 흘려주면 되지만, GPIO는 사용자가 직접 지정해서 HIGH의 전류를 보내는데 GPIO는 칩에서 보내는 전류이기때문에 칩에 무리가 갈 수 있다.

이러한 이유로, GPIO는 통로역할만하게해서 부담을 줄여주는것이 라즈베리파이를 좀 더 안정적이게 쓸 수 있다고 한다. 그래서 1핀 40핀으로만 연결해서 High일때 꺼지고, Low일때 켜지는 거꾸로 작동하는 회로를 구성하는 것이다.

(VCC가 들어오고있는데 GPIO.21에서 High를 보내면 전압차가 0V이므로 전류가 흐르지않으므로 LED가 켜지지않고,

VCC가 들어오고 있는데 GPIO.21에서 LOW를 보내면 전압차가 생기므로 전류가 흐르게되어서 LED가 켜지게된다.)

저번에 했떤 사이트 링크 문법에 Html 문법도 적용 가능하다.

return문에 Html을 적용한 모습. 전부다 한줄에 몰아야한다는 불편함이 있다

Html을 사용해서 return문에 url 링크를 가져와서 붙이는 것도 가능하다.

Join 명령어

아랫줄 윗줄 붙이는 명령어이다.

v 눌러서 비주얼 모드에서 전체를 드래그한다음에 J(대문자)를 눌러주면 전부 한줄로 변한다.

Html을 한줄로 몰아줄때 사용해보자.

html 문법중에 텍스트박스와 체크박스를 출력하는 구문도 있다.

from flask import Flask
app = Flask(__name__)
@app.route("/")
def helloworld():
    return "Hello World"

@app.route("/Test")
def Test():
    return " <!doctype html> <html lang=\"ko\"> <head> <meta charset=\"utf-8\"> <title>HTML</title> </head> <body> <p> <label for=\"jb-input-text\">Input - Text</label> <input type=\"te
xt\" id=\"jb-input-text\"> </p> <p> <label for=\"jb-input-checkbox\">Input - Checkbox</label> <input type=\"checkbox\" id=\"jb-input-checkbox\"> </p> </body> </html>"

if __name__ == "__main__":
    app.run(host="0.0.0.0")

참고로 파이썬은 엔트리포인트가없고 처음부터 위에서 밑으로 쭉 실행된다.

cleanup()은 스크립트 실행 시에 GPIO 모드 세팅을 초기화하고 리소스를 반환시켜서 중보갓용이나 GPIO핀 쇼트 등의 하드웨어적인 문제를 방지할 수 있다.

정적 라우팅

 import RPi.GPIO as GPIO
 import time
 from flask import Flask

 app = Flask(__name__)

 LED = 21
 GPIO.setmode(GPIO.BCM)
 GPIO.setup(LED, GPIO.OUT, initial = GPIO.LOW)

 @app.route("/")
 def EntryPoint():
     return "사이트에 on/off에 접속해서 제어해주세요 "

 @app.route("/led/off")
 def off():
     GPIO.output(21,0)
     return "LED를 끕니다"

 @app.route("/led/on")
 def on():
     GPIO.output(21,1)
     return "LED를 킵니다"

 @app.route("/gpio/cleanup")
 def gpio_cleanup():
     GPIO.cleanup()
     return "GPIO CLEANUP"

 if __name__ == "__main__":
     app.run(host="0.0.0.0")

off에 접속, on에 접속, gpio/cleanup에 각각 접속했을때 LED가 꺼지고, 켜지고 초기화가 된다.

동적 라우팅

import RPi.GPIO as GPIO
import time
from flask import Flask

app = Flask(__name__)

LED = 21
GPIO.setmode(GPIO.BCM)
GPIO.setup(LED, GPIO.OUT, initial = GPIO.LOW)

@app.route("/")
def EntryPoint():
    return "사이트에 on/off에 접속해서 제어해주세요 "

@app.route("/led/<state>")
def led(state):
    if state == "on":
        GPIO.output(LED, GPIO.HIGH)
    else:
        GPIO.output(LED, GPIO.LOW)
    return "LED" +state

@app.route("/gpio/cleanup")
def gpio_cleanup():
    GPIO.cleanup()
    return "GPIO CLEANUP"

if __name__ == "__main__":
    app.run(host="0.0.0.0")

route에 <state>에 주목해보자. if문으로 "on" 일때 출력하는 구문하고 다른 문자 아무거나 들어갔을때는 LED를 끄는 구문으로 동적으로 작동할 수 있게 해줄 수 있다.

쿼리스트링

 import RPi.GPIO as GPIO
 import time
 from flask import Flask

 app = Flask(__name__)

 LED = 21
 GPIO.setmode(GPIO.BCM)
 GPIO.setup(LED, GPIO.OUT, initial = GPIO.LOW)

 @app.route("/")
 def EntryPoint():
     return "사이트에 on/off에 접속해서 제어해주세요 "

 @app.route("/led")
 def led():
     state = request.args.get("state")
     if state == "on":
         GPIO.output(LED, GPIO.HIGH)
     elif state == "off":
         GPIO.output(LED, GPIO.LOW)
     elif state == "error":
         return "쿼리스트링 state가 전달되지 않았습니다"
     else:
         return "잘못된 쿼리스트링이 전달되었습니다"
     return "LED" + state

 @app.route("/gpio/cleanup")
 def gpio_cleanup():
     GPIO.cleanup()
     return "GPIO CLEANUP"

 if __name__ == "__main__":
     app.run(host="0.0.0.0")

Flask 웹페이지

webapps

-ch06

- home

- static

- templates

이렇게 디렉터리를 만들어준다.

home디렉터리에

index.py 파일을 만들어준다.

from flask import Flask, request
from flask import render_template
import RPi.GPIO as GPIO

app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setup(21, GPIO.OUT, initial=GPIO.LOW)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/led/on")
def led_on():
    try:
        GPIO.output(21, GPIO.HIGH)
        return "ok"
    except expression as identifier:
        return "fail"

@app.route("/led/off")
def led_off():
    try:
        GPIO.output(21, GPIO.LOW)
        return "ok"
    except expression as identifier:
        return "fail"

if __name__ == "__main__":
    app.run(host="0.0.0.0")

template디렉터리에

index.html 파일을 만들어준다.

<!DOCTYPE html>
<html>
<head>
    <mata charset="UTF-8">
    <title>HOME NETWORK</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
<body>
    <div class = "container">
        <div class="header">
            <h2>HOME IoT</h2>
        </div>
        <div class="main">
            <div>
                <button onclick="led_on()">LED ON</button>
            </div>
            <div>
                <button onclick="led_off()">LED OFF</button>
            </div>
        </div>
        <div id="result">

        </div>
    </div>
    <script>
        function led_on() {
            fetch("/led/on")
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                    let result = document.querySelector("#result");
                    if (data == "ok") {
                        result.innerHTML = "<h1>LED is running</h1>"
                    } else {
                        result.innerHTML = "<h1>error</h1>"
                    }
                });
        }
        function led_off() {
            fetch("/led/off")
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                    let result = document.querySelector("#result");
                    if (data == "ok") {
                        result.innerHTML = "<h1>LED is stopping</h1>"
                    } else {
                        result.innerHTML = "<h1>error</h1>"
                    }
                });
        }
    </script>
</body>
</html>

static 디렉터리에

style.css 파일을 만들어준다

body{
    background-color: antiquewhite;
}

.container{
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

.main{
    display: flex;
}

.main div{
    flex:1;
}

.main div button{
    background-color: rgb(192, 114, 114);
    width:150px;
    height:80px;
    border-radius: 10px;
}

이제 사이트에 접속해보자.

LED ON, LED OFF 버튼을 클릭하면 각각 텍스트가 출력되면서 LED가 켜졌다가 꺼지는 것을 볼 수 있다.

저작자표시 비영리 변경금지

'개발자과정준비 > 라즈베리파이(Raspberry Pi)' 카테고리의 다른 글

[Raspberry Pi] 온습도센서 DHT11, 마리아DB연동 (1)	2020.09.14
[Raspberry Pi] 9. Process, Cron, Daemon (0)	2020.07.30
[Raspberry Pi] 7. LED 제어, PWM 제어, Flask (0)	2020.07.27
[Raspberry Pi] 라즈베리파이 와이파이 연결 끊길때 해결 방법 (0)	2020.07.27
[Raspberry Pi] 7. 풀업저항 신호를 PuTTY로 출력해보자 (0)	2020.07.27