아두이노와 이더넷 쉴드를 결합한 RGB 칼라 LED Ajax 웹 컨트롤

최근 또 다시 빠져있는 아두이노. 
어제 오늘은 다시 처박아둔 아두이노에게 새 생명을 주는 시기였다. 
뭐 당장 내일이면 라즈베리파이가 택배로 배달될 예정이지만..ㅋ

쨌든
원래는 안드로이드, SL4A로 아두이노를 조작할 수 없을까가 목적이었지만
그간 아두이노 사용법도 다 까먹었으니 먼저 아두이노 부터 다시 익혀야 했다. 

먼저 피지컬 컴퓨팅의 Hello World 격인 LED에 불들어오게 하기 부터 시작. 

버전 1.0이상까지 나온 아두이노 IDE를 설치 후 예제 소스를 통해 간단한 LED 불밝히는 테스트는 바로 통과했다. 
다음단계로 3색 RGB 컬러 LED 테스트. 

아두이노 스타터킷의 소스를 그대로 따라하니 별 무리없이 슬슬 색상이 변화하는 것도 지켜보는데 성공. 

근데 뭔가가 아쉬웠다. 

그랬다 인터렉티브한게 빠져있었던 것이다. 
내가 뭔가 신호를 주면 변하는 맛이 있어야 하는데 이건 그런게 없으니...

그래서 찾아보니 아두이노와 이더넷 쉴드를 결합해 웹으로 LED를 조작하는 프로젝트가 있었다. 
(막상 찾아보면 국내외로 한두개가 아님!)

내용을 보면 단순하게 아두이노를 웹서버로 셋팅 후 브라우저로 접속해 LED를 껏다 켰다 하는 것이었다. 

좀 심심하지. 
그래서 소스를 좀 수정해 RGB 칼라 LED를 웹에서 조작할 수 있도록 좀 고쳐봤다. 
또한 클릭때마다 페이지 갱신이 이루어지는게 맘에 안든지라 jquery를 외부에서 끌어와 간단하게 ajax를 통해 LED를 조작하게끔 했다. 

아래는 그 결과물




컬러 LED 셋팅 후 같은 공유기에 물려있는 지즈원으로 브라우저를 통해 컬러 LED를 조작

컬러 LED 셋팅 후 같은 공유기에 물려있는 지즈원으로 브라우저를 통해 컬러 LED를 조작


LED에 신호는 2,3,4번으로 줬다. 이더넷쉴드를 결합하면 쓸수 없는 포트가 생기므로..

LED에 신호는 2,3,4번으로 줬다. 이더넷쉴드를 결합하면 쓸수 없는 포트가 생기므로..

빵판에 RGB LED와 저항 달고 그라운드 및 신호선 연결

빵판에 RGB LED와 저항 달고 그라운드 및 신호선 연결

먼저 빨간색

먼저 빨간색

다음 녹색

다음 녹색

글고 파란색

글고 파란색

원래는 노랑이어야 한다. 하지만 연두에 가까운 노랑ㅋ digitalWrite로 줬는데 원인은 좀 찾아봐야겠음

원래는 노랑이어야 한다. 하지만 연두에 가까운 노랑ㅋ digitalWrite로 줬는데 원인은 좀 찾아봐야겠음

보라

보라

빛의 삼원색이 합쳐지면 백색이 된다. ㅇㅇ 거의 백색에 가까웠다.

빛의 삼원색이 합쳐지면 백색이 된다. ㅇㅇ 거의 백색에 가까웠다.


아래는 소스
참고로 수정해야할 부분이 많은 소스이니 감안하시도록

아두이노 스케치 소스

먼저 아두이노 소스
중간에 style.css 및 script.js가 있는데 이건 적당한 서버에 업로드 하고 URL을 붙여넣으면 된다. 

#include <SPI.h>
#include <Ethernet.h>
 
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 200); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80
 
String HTTP_req;          // stores the HTTP request
boolean LED_status = 0;   // state of LED, off by default
 
void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for diagnostics
    pinMode(2, OUTPUT);       // LED on pin 2
    pinMode(3, OUTPUT);       // LED on pin 3
    pinMode(4, OUTPUT);       // LED on pin 4
}
 
void loop()
{
    EthernetClient client = server.available();  // try to get client
 
    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();
                    
                    // send web page
                    client.println("<!DOCTYPE html>");
                    client.println("<html>");
                    client.println("<head>");
                    client.println("<title>Arduino LED Control</title>");
                    client.println("<meta charset=\"utf-8\" />");
                    client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1\" />");
                    client.println("<link rel=\"stylesheet\" href=\"http://파일업로드경로/style.css\" />");
                    client.println("<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>");
                    client.println("<script src=\"http://파일업로드경로/script.js\"></script>");                    
                    client.println("</head>");
                    client.println("<body></body></html>");
 
                    if (HTTP_req.indexOf("r=1") > -1) {
                      digitalWrite(2, HIGH);
                    }
                    if (HTTP_req.indexOf("r=0") > -1) {
                        digitalWrite(2, LOW);
                    }
                    if (HTTP_req.indexOf("g=1") > -1) {
                        digitalWrite(3, HIGH);
                    }
                    if (HTTP_req.indexOf("g=0") > -1) {
                        digitalWrite(3, LOW);
                    }
                    if (HTTP_req.indexOf("b=1") > -1) {
                        digitalWrite(4, HIGH);
                    }
                    if (HTTP_req.indexOf("b=0") > -1) {
                        digitalWrite(4, LOW);
                    }
                    Serial.print(HTTP_req);
                    HTTP_req = "";    // finished with request, empty string  
 
                    break;
                }
                
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}


자바스크립트 소스

다음으로 ajax로 간단하게 구현시킨 부분
html 소스하나 고치려고 아두이노 소스 재컴파일 시키는 건 꽤 피곤한 일이니 일케 하면 편하다. 
(script.css나 맘에 드는 이름으로 저장해서 서버에 업로드)

$(document).ready(function() {
 
var $red, $green, $blue,
chageState = function($color){
if($color.hasClass('on')){
$color.removeClass('on');
state = $color.attr('id')+'=0';
}else{
$color.addClass('on');
state = $color.attr('id')+'=1';
}
 
return state;
};
 
//링크 클릭시 ajax전송
$(document).on('click', 'a', function(e){
e.preventDefault();
 
var query = chageState($(this));
 
$.ajax({
type : "GET",
url : "?"+query
}).done(function(data) {
});
});
 
//html초기화
var html = '\
<h1>Color LED Test</h1>\
<ul>\
<li><a href="#" id="r">Red</a></li>\
<li><a href="#" id="g">Green</a></li>\
<li><a href="#" id="b">Blue</a></li>\
</ul>\
'
$('body').append(html);
$red = $('#r');
$green = $('#g');
$blue = $('#b');
});

마지막으로 CSS

(style.css나 맘에 드는 이름으로 저장해서 서버에 업로드)

@charset "utf-8";
body{
font-family:나눔고딕;
font-size:21px;
}
a{
color:#222;
text-decoration:none;
background:#ccc;
padding:4px 10px;
border-radius:5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul li{
margin:18px 0;
}
 
.on{
color:#fff;
}
#r.on{
background-color:red;
}
#g.on{
background-color:green;
}
#b.on{
background-color:blue;
}
 
일단은 여기까지~
내일 부터는 라즈베리파이 탐구다!!

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/1357
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/1357
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/1357
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/1357
과자장수 
wrote at 2013/08/15 16:02
개발 하느라 수고 하셧습니다.

제가 하고있는 프로젝트와 유사하여 많은 도움이 되었습니다.

한가지 문제가 있는게 스크립트 부분을 불러 오지 못하고 있는 문제가 있어 질문을 좀 드릴까 합니다.

ajax자바스크립트와 css ,jquery ui를 불러 오지 못하고 있습니다.

제 환경은 공유기에 포트포워딩을하여 웝서버(192.168.1.2)를 구성 하였으며 여기에 스크립트 파일을 작성하여 넣었는데

이더넷 주소를 치면 하얀 화면만 나오는 현상이 나옵니다.

무엇이 문제였는지 답변 부탁드립니다.

ps: 금칙어가 많아 댓글 작성이 어렵내요 ~~
희나람 
wrote at 2014/03/17 23:32
고맙습니다만... 제가 html을 잘 몰라서 그러는데, html 관련 소스를 다 넣어주실 수 있을까요?
윗분처럼, 스크립트 파일을 html에 넣었는데 아무것도 안나오네요...
Nes 
wrote at 2014/03/18 17:12
말씀하시는 html소스는 자바스크립트쪽에서 생성시켜 주는 방식으로 동작합니다.
자바스크립트 쪽에서 에러가 발생하면 아무것도 표시안되실 수도 있어요~
비밀방문자 
wrote at 2016/12/05 10:45
관리자만 볼 수 있는 댓글입니다.
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *84  *85  *86  *87  *88  *89  *90  *91  *92  ... *1133 
  • 블로그 주인장 : Nes
  • 이메일 : [email protected]
  • 이 블로그는?
  • 방명록
  • 레퍼런스 사이트 : http://nemesys.co.kr
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 10955715 T1098 Y1296

1852

1348

google chart api graph

-30 days

today : 1098

전체 (1133)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (145)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...