Arduino - 웹을 통해 전구 제어

이 프로젝트 정보

웹을 통한 제어는 오늘날 표준이 되었습니다. 이 간단한 프로젝트에서 웹을 통해 전구를 제어하는 ​​응용 프로그램을 만드는 방법을 보여 드리겠습니다.

확실히 새로운 것은 아니지만 웹 기반 제어 기능이 몇 단계만 거치면 스스로 할 수 있다는 것을 알 수 있습니다. 웹 프로그래밍에 대한 지식이 있는 사람은 누구나 장치를 제어/모니터링하는 웹 기반 응용 프로그램을 만들 수 있습니다.

여기에서 데모를 볼 수 있습니다:

하드웨어 구성요소

먼저 하드웨어를 설정하는 것입니다. 여기서는 아두이노 우노 보드, PHPoC 와이파이 실드, PHPoC 아두이노 릴레이 보드를 사용합니다.

작동 방식

다음은 "웹 기반" 부분입니다. 아두이노 보드는 PHPoC 쉴드와 결합하여 웹서버/웹소켓 서버가 되었습니다. 따라서 기본적으로 다음이 필요합니다.

+ 클라이언트 측 코드 :전구를 제어할 수 있는 웹 기반 사용자 인터페이스를 제공합니다. UI는 사용자가 제어 명령을 웹 서버(Arduino 보드)로 보낼 수 있도록 해야 합니다. UI는 또한 서버의 응답으로 전송된 전구의 상태를 표시합니다. 이 웹 페이지 소스 코드를 쉴드에 업로드해야 합니다. 웹 브라우저(웹 클라이언트)로부터 HTTP 요청을 받으면 쉴드(웹 서버)는 해석된 웹 파일을 웹 브라우저로 보냅니다.

+ 서버측 코드 :웹 브라우저에서 전송된 데이터를 기반으로 전구를 제어합니다. 코드는 Arduino 보드에서 실행되며 흐름은 루프에 불과하며 릴레이가 전구를 켜고 끄도록 설정하기 위해 웹 클라이언트의 요청이 있는지 확인한 다음 전구 상태를 웹 브라우저로 보냅니다. .

이 프로젝트에서는 전구를 표시하는 SVG 요소와 웹에서 제어 명령을 보내는 버튼을 만들었습니다. 웹 브라우저와 웹 서버는 WebSocket을 통해 서로 통신합니다. WebSocket 연결은 실시간 애플리케이션에 적합합니다.

UI를 만드는 데 더 많은 노력을 들일수록 더 좋아 보일 수 있습니다. 하지만 걱정하지 마세요. 인터넷에는 수많은 공유 리소스가 있으므로 혼자서 모든 프로그래밍 작업을 수행하는 대신 UI에 대한 멋진 무료 소스 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다 :D.

이 튜토리얼에서 릴레이에 대해 자세히 알아보기

코드

remote_led.phpPHP

  <메타 내용="초기 규모=0.7, 최대 규모=1.0, 최소 규모=0.5, 너비=장치 너비, 사용자 확장 가능=예" name="viewport"> <스타일> 본문 { 텍스트 정렬:센터; 글꼴 패밀리:verdana, Helvetica, Arial, sans-serif, gulim; 배경:#C2CCD0; } h2 { 글꼴 크기:16px; 줄 높이:25px; } body.active { 배경:#E2ECF1; } #on { 불투명도:0; } .active #on { 불투명도:1; } .전구 { 너비:250px; 높이:400px; margin-top:100px } .container { margin:auto; 너비:250px; } .스위치 { 너비:150px; 높이:65px; 배경색:#38434A; 글꼴 크기:24px; 여백:자동; 테두리 반경:10px; 색상:흰색; 커서:포인터; 문자 간격:0.2px; 줄 높이:65px; 텍스트 정렬:가운데; 사용자 선택:없음; 전환:없음; }  
 
  
 
 스위치 
 
 
 
<스크립트> var is_on; var ws; var 버튼 =document.querySelector('.switches'); var ws_state =document.getElementById("ws_state"); function init() { button.addEventListener("클릭", toogleLed); 연결하다(); is_on =0; } function connect() { if (ws ==null) { var ws_host_addr =""; if ((navigator.platform.indexOf("Win") !=-1) &&(ws_host_addr.charAt(0) =="[")) { // 네트워크 리소스 식별자를 UNC 경로 이름으로 변환 ws_host_addr =ws_host_addr.replace( /[\[\]]/G, ''); ws_host_addr =ws_host_addr.replace(/:/g, "-"); ws_host_addr +=".ipv6-literal.net"; } ws =새로운 WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc"); ws_state.innerHTML ="연결 중입니다. 잠시만 기다려 주십시오!"; ws.onopen =ws_onopen; ws.onclose =ws_onclose; ws.onmessage =ws_onmessage; } 그렇지 않으면 ws.close(); } 함수 ws_onopen() { ws_state.style.display ="없음"; display_lightbulb(); } 함수 ws_onclose() { button.style.backgroundColor ="#C2C2C2"; ws_state.style.display =""; ws_state.innerHTML ="아두이노 보드에 연결할 수 없습니다. 
 다시 확인하고 이 페이지를 새로고침하세요!"; ws.onopen =null; ws.onclose =null; ws.onmessage =null; ws =널; is_on =0; display_lightbulb(); } 함수 ws_onmessage(e_msg) { e_msg =e_msg || 창.이벤트; // MessageEvent is_on =parseInt(e_msg.data); display_lightbulb(); } function toogleLed() { if (is_on) ws.send("0"); 그렇지 않으면 ws.send("1"); } 기능 display_lightbulb() { document.body.className =(is_on) ? "활동적인" :""; } window.onload =초기화;

remoteLed.ino아두이노

#include #include #define ON '1'#define OFF '0'byte expandId =1;ExpansionRelayOutput relay(expansionId, 0);PhpocServer server(80);void setup() { Serial.begin(9600); 동안(! 직렬); // PHPoC 초기화 [WiFi] 쉴드:Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); // 웹소켓 서버 시작 server.beginWebSocket("remote_led"); // PHPoC [WiFi] Shield의 IP 주소를 시리얼 모니터에 출력:Serial.print("WebSocket 서버 주소 :"); Serial.println(Phpoc.localIP()); 확장.begin(); // 이름을 가져와 직렬로 출력합니다. Serial.println(relay.getName()); }void loop() { // 새 클라이언트를 기다립니다. PhpocClient client =server.available(); if (client) { if (client.available()> 0) { // 클라이언트에서 들어오는 바이트를 읽습니다. char thisChar =client.read(); switch(thisChar) { 케이스 OFF:Serial.println("LED 끄기"); 릴레이.off(); 서버.쓰기(꺼짐); 부서지다; 케이스 ON:Serial.println("LED 켜기"); 릴레이.on(); 서버 쓰기(ON); 부서지다; } } }}