Raspberry pi Web(flask) LED 제어 on/off

play/Raspberry&Arduino

Raspberry pi Web(flask) LED 제어 on/off

카고형 2020. 5. 13. 23:30

라즈베리 파이 웹으로 LED 제어 하는법 예제 (on/off )

python에 Flask 로 web 구현

<폴더는 구조>

아래의 주소 에서 참고 하시면 좋을듯

https://inbearblog.blogspot.com/2018/10/diy-led.html

https://m.blog.naver.com/PostView.nhn?blogId=cosmosjs&logNo=221027145888&proxyReferer=https:%2F%2Fwww.google.com%2F

style 은 따로 빼서 해보려 했으나 css파일 이 안불러 와져서 그냥 진행 했어요

라즈베리에서 home 밑에 index.py 랑 tempates 폴더을 만든다

회로도는 라즈베리 8번핀 이랑 9번핀(GND)을 사용

#pin 번호는 8 로 해야함 GPIO번호랑은 다름.. 잘 확인 하구요!

index.py

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

app = Flask(__name__)
GPIO.setmode(GPIO.BOARD)
GPIO.setup(8, GPIO.OUT, initial=GPIO.LOW)
 
@app.route("/")
def home():
    return render_template("index.html")

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


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



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

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HOME NETWORK</title>
        
        <style>
            body{
                background-color: rgb(88, 157, 221);

                }
        .container{
            width: 700px;
            margin: 0 auto;
            text-align: center;
        }
        .main{
            display: flex;
        }
        .main div {
            flex:1;
        }
        .main div button{
            background-color: rgb(000, 144, 100);
            width: 150px;
            height: 80px;
            border-radius: 10px;
        }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h2>HELLO 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>
</DOCTYPE>

실행은 python index.py 로 실행 하면 됩니다