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__)
LED = 14
gpio.setmode(gpio.BCM)
gpio.setup(LED, gpio.OUT, initial =gpio.LOW)
@app.route('/')
def hello():
return rt("index.html")
@app.route("/led_home")
def led_home():
return rt("led.html")
@app.route("/led/on")
def led_on():
try:
gpio.output(LED, gpio.HIGH)
return "ok"
except expression as identifier:
return "fail"
@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>
<link rel="stylesheet" href="../static/style2.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">
<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>
<link rel="stylesheet" href="../static/style2.css?<%=new java.util.Date()>">
<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;
}
.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;
}
.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>
<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>
<div class="button_warp api" >
<a>on</a>
<a>off</a>
</div>
<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).trigger("click");
})
$(".button_warp a").click(function(){
console.log("test")
$(".api a").removeClass();
$(this).addClass('button-fill');
$(".api a").not($(this)).addClass("button-empty");
if($(this).index() == 0) led_on();
else led_off();
});
$(".home_btn").click(function(){
console.log("click")
location.href="/"
});
function led_on(){
fetch("/led/on")
.then(Response=> Response.text())
.then(data => {
let res = document.querySelector("#result");
if (data == "ok"){
res.innerHTML = "<h1>LED is running</h1>";
}
else{
res.innerHTML = "<h1>error</h1>";
}
})
}
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