1. 코드 분석
ㄱ. controller.py
controller.py
from flask import request as req, Flask , render_template as rt
import RPi.GPIO as gpio
from flask import Flask
app = Flask(__name__)
# gpio.BCM기준 넘버링 https://m.blog.naver.com/pk3152/221368513358
# gpio.BOARD면 라즈베리파이보드넘버기준
gpio.setmode(gpio.BCM)
# gpio.BCM기준 넘버링 gpio.14번 핀 변수 선언
LED = 14
# 14번핀 OUTPUT단으로 선언, 초깃값 LOW=0볼트 > LED OFF상태
gpio.setup(LED, gpio.OUT, initial =gpio.LOW)
# 메인라우터에 index.html show
@app.route('/')
def hello():
return rt("index.html")
# index.html에서 <a href = '/led_home' 로 led_home 라우터로 이동 > led.html show
@app.route("/led_home")
def led_home():
return rt("led.html")
# led.html에서 on버튼 클릭시 gpio.HIGH로 최대전압을 걸어 LED를 킨 후 문자 'ok'를 리턴
@app.route("/led/on")
def led_on():
try:
gpio.output(LED, gpio.HIGH)
return "ok"
except expression as identifier:
return "fail"
# led.html에서 off버튼 클릭시 gpio.LOW로 전압 0을 걸어 LED를 끈 후 문자 'ok'를 리턴
@app.route("/led/off")
def led_off():
try:
gpio.output(LED, gpio.LOW)
return "ok"
except expression as identifier:
return "fail"
if __name__ == '__main__':
app.debug = True
app.run(host="0.0.0.0")ㄴ. index.html
index.html
<!DOCTYPE html>
<html>
<head>
<!-- css import -->
<link rel="stylesheet" href="../static/style2.css">
<!-- css -->
<style>
.title{
text-align: center;
}
.img{
width: 200px;
height: 200px;
margin-left: 25%;
margin-top: 20%;
display: block;
}
.text{
margin-left: 25%;
}
</style>
</head>
<body>
<div class = top>
<h1 class = "title">라즈베리 파이 모듈 컨트롤</h1>
</div>
<div class = "setting">
<!-- 이미지 클릭 시 127.0.0.1/led_home라우터로 이동 -->
<a href = '/led_home' class = img> <img class = "img" src = ../static/led.jpeg> </a>
<h1 class = "text">LED 조정필요시 클릭</h1>
</div>
</body>
</html>ㄷ. led.html
led.html
<!DOCTYPE html>
<html>
<head>
<!-- css import -->
<link rel="stylesheet" href="../static/style2.css?<%=new java.util.Date()>">
<!-- css -->
<style>
.button_warp {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
column-gap: 1rem;
margin-top: 5%;
}
.home_btn {
margin: 1rem auto;
text-align: center;
}
/* 누른버튼css */
.button-fill {
width: 100px;
height: 40px;
background: dodgerblue;
border-radius: 6px;
color: white;
font-size: 26px;
transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
text-align: center;
}
/* 안누른버튼css */
.button-empty {
width: 100px;
height: 40px;
background: rgb(99, 90, 90);
border-radius: 6px;
color: dodgerblue;
font-size: 26px;
transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
text-align: center;
}
.title {
font-size: 30px;
text-align: center;
}
.on {
text-align: center;
}
</style>
<!-- jquery import -->
<script src="https://code.jquery.com/jquery-3.6.3.slim.js"
integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
</head>
<body>
<div id="print">
<h1>RXO AI-LAP 제 1팀장 <br>LED 센서</h1>
</div>
<!-- on / off 버튼 -->
<div class="button_warp api">
<a>on</a>
<a>off</a>
</div>
<!-- led 상태 안내문 디폴트값 LED is off -->
<div id="result" style="margin-top: 5%;">
<h1>LED is off</h1>
</div>
<div class="button-fill home_btn">홈으로</div>
</body>
<script>
/* 선택자: .클래스, 태그 */
$(function () {
console.log("웹새로고침")
/* (api클래스 속 a태그 셀렉트), eq(1) - 1인덱스(off버튼)를, click */
$(".api a").eq(1).trigger("click"); /* 진입 시 off버튼 눌러줌 */
})
/* (button_wrap클래스 속 a태그 2개를 셀렉트) */
$(".button_warp a").click(function () {
console.log("test")
$(".api a").removeClass(); /* 클릭 시 a태그 둘다 removeClass 클래스 없애고 */
$(this).addClass('button-fill'); /* a태그 둘 중 누른 것은 button-fill 클래스를 추가하고 */
$(".api a").not($(this)).addClass("button-empty"); /* 누르지 않은 것은 button-empty클래스를 추가. */
/* (누른 버튼에 css를 추가하기 위함, 누른버튼은 파랑색 안누른 버튼은 회색) */
if ($(this).index() == 0) led_on(); /* 누른 것이 0인덱스면 led_on 함수를 실행, else = 1인덱스면 led_off함수를 실행 */
else led_off();
});
/* home_bnt 클릭 시 / 메인라우터로 이동 ( > index.html show) */
$(".home_btn").click(function () {
console.log("click")
location.href = "/"
});
/* led off 커스텀펑션선언 */
function led_on() {
fetch("/led/on") /* 기본/led/on라우터로 이동 > gpio.HIGH로 LED ON > 문자 'ok' 리턴 */
.then(Response => Response.text()) /* 리턴값을 텍스트(ok)로 받고 다시 then(data에서 받는다 */
.then(data => {
/* #아이디선택자 */
let res = document.querySelector("#result"); /* id=result인 태그의 내용을 > res변수로 선언 */
if (data == "ok") { /* data=='ok' 즉 라우터에서 에러 없이 led를 키고 왔으면 */
res.innerHTML = "<h1>LED is running</h1>"; /* <div id="result"><h1>LED is off</h1></div> 에서 바꿔주기 */
}
else {
res.innerHTML = "<h1>error</h1>";
}
})
}
/* led off 커스텀펑션선언 */
function led_off() {
fetch("/led/off")
.then(Response => Response.text())
.then(data => {
let res = document.querySelector("#result");
if (data == "ok") {
res.innerHTML = "<h1>LED is off</h1>";
}
else {
res.innerHTML = "<h1>error</h1>";
}
})
}
</script>
</html>
BABY