본문 바로가기
HW/Raspberry Pi | Arduino

라즈베리파이 - Flask

by 코젼 2022. 8. 18.
728x90
반응형

2022-08-18(43일차)

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

app = Flask(__name__)

LED = 8
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
GPIO.setup(LED, GPIO.OUT, initial=GPIO.LOW)

@app.route("/")
def helloworld():
    return "Hello World"

@app.route("/led")
def led_on():
    state = request.values.get("state", "error")
    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")

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

app = Flask(__name__)

LED = 8
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
GPIO.setup(LED, GPIO.OUT, initial=GPIO.LOW)

@app.route("/")
def helloworld():
    return "Hello World"

@app.route("/led/<state>")
def led_on(state):
    #state = request.values.get("state", "error")
    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")

▪ html 파일에서 css파일을 불러오는 경로, 유의깊게 봐둘 것

파일 경로
index.py
0.00MB

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

app = Flask(__name__)
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
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")

▪ 수정

index1.py
0.00MB

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

app = Flask(__name__)
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
GPIO.setup(8, GPIO.OUT, initial=GPIO.LOW)

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

@app.route("/led/<state>")
def led_on(state):
    try:
        if state == "on":
            GPIO.output(8, GPIO.HIGH)
            return "ok"
        elif state == "off":
            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
0.00MB

<!DOCTYPE html>
<html>
<head>
    <meta 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=> { console.log(response); return response.text()})
            .then(data=> {
                console.log(data);
                let result = document.querySelector("#result");
                if(data=="ok"){
                    result.innerHTML = "<h1>LED is runinng</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>

style.css
0.00MB

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;
}

 

728x90
반응형

'HW > Raspberry Pi | Arduino' 카테고리의 다른 글

라즈베리파이 - PWM 제어, 초음파센서  (0) 2022.08.18
라즈베리파이 - MariaDB 설치  (0) 2022.08.18
라즈베리파이 - 실습  (0) 2022.08.17
라즈베리파이 - 삼바 구축, 공유폴더 생성, 원격 접속 서비스(RDP) 설치  (0) 2022.08.17
라즈베리파이 - 라즈비안 설정(raspi-config)  (0) 2022.08.17

관련글

댓글

티스토리툴바