부품 구성
5V : 물리적 2번
GND : 물리적 6번
1색 LED : 물리적 32번 wpi(26번)
3색 LED : 물리적 (R-40 , G-38 , B-36) wpi(R-29, G-28, B-27)
Buzzer : 물리적 35번 wpi(24번)
코드구현
js 코드(web_cnt.js)
const http = require('http');
const gpio = require('node-wiring-pi');
const fs = require('fs');
const socketio = require('socket.io');
const LED = 26;
const BUZZER = 24;
const RED = 29;
const GREEN = 28;
const BLUE = 27;
const server = http.createServer(function(request,response){
fs.readFile('views/web_vi.html','utf-8',function(error,data){
{response.writeHead(200,{Content-Type:'text/html'});
response.end(data);
});
}).listen(65001,()=>{
gpio.wiringPiSetup();
gpio.pinMode(LED,gpio.OUTPUT);
gpio.pinMode(BUZZER,gpio.OUTPUT);
gpio.pinMode(RED,gpio.OUTPUT);
gpio.pinMode(BLUE,gpio.OUTPUT);
gpio.pinMode(GREEN,gpio.OUTPUT);
gpio.digitalWrite(LED,0);
console.log("server running at http://IP주소:65001");
});
const io = socketio.listen(server);
io.sockets.on("connection",function(socket){
socket.on("off",function(target){
toggle("off",target);
});
socket.on("on",function(target){
toggle("on",target);
});
});
function toggle(state,target){
if(state==="off"){
gpio.digitalWrite(target,0);
}else{
gpio.digitalWrite(target,1);
}
}
웹 부분 코드 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="/socket.io/socket.io.js"></script>
<style>
body {
width: 800px;
height: auto;
}
h1 {
text-align: center;
}
.attr,
.attrName {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 300px;
}
.attrName {
width: 360px;
}
.btnBox span {
text-decoration: underline;
}
.attrName .btnBox span {
text-decoration: none;
}
.attrName .btnBox #RED,
.attrName .btnBox #GREEN,
.attrName .btnBox #BLUE {
text-decoration: underline;
}
</style>
<title>Page Title</title>
</head>
<body bgcolor="lightcyan">
<h1>임베디드 액츄레이터 제어</h1>
<div id="controlBox">
<div class="attr">
<div class="name">LED1</div>
<div class="btnBox">
<span class="1" id="LED1">On</span>
<span class="0" id="LED1">Off</span>
</div>
</div>
<div class="attr">
<div class="name">Buzzer</div>
<div class="btnBox">
<span class="1" id="BUZZER">On</span>
<span class="0" id="BUZZER">Off</span>
</div>
</div>
<div class="attrName">
<div class="name">LED3</div>
<div class="btnBox">
<span
>On(
<span class="1" id="RED">R</span>
<span class="1" id="GREEN">G</span>
<span class="1" id="BLUE">B</span>
)</span
>
<span
>Off(
<span class="0" id="RED">R</span>
<span class="0" id="GREEN">G</span>
<span class="0" id="BLUE">B</span>
)</span
>
</div>
</div>
</div>
</body>
<script>
window.onload = function() {
var socket = io.connect();
var off = document.getElementsByClassName("0");
Array.prototype.map.call(off, function(testElement) {
testElement.onclick = function(ev) {
socket.emit("off", ev.currentTarget.id);
};
});
var on = document.getElementsByClassName("1");
Array.prototype.map.call(on, function(testElement) {
testElement.onclick = function(ev) {
socket.emit("on", ev.currentTarget.id);
};
});
};
</script>
</html>
'Coding > Raspberry pi - node.js' 카테고리의 다른 글
| REST API 예제 (0) | 2019.11.17 |
|---|---|
| 실습 사운드센서, 광센서를 웹에 연결시키기 (0) | 2019.11.17 |
| Raspberry pi를 express를 통한 웹 연결 (0) | 2019.11.17 |
| 웹기반 조이스틱 제어 (0) | 2019.11.17 |
| SPI 방식과 ADC 칩 (0) | 2019.11.16 |
댓글