Chrome Extensions 를 이용한 IoT 기기 제어

    제목처럼 아주 거창한 내용은 아니다.

    일반적으로 아두이노나 mbed의 경우에 간단한 웹서버를 IoT 기기에 업로드 할 수 있다.

    이때, PC 쪽에서는 그냥 웹 브라우저를 통해 주소를 입력하는 방식으로 많은 예제들이 구성되어 있다.


    너무 지겹다. 간단하게 색다른 방식으로 해 볼 수는 없나?

    살펴보다.......

    ....


    아 크롬 확장프로그램에서 간단하게 클릭으로 색깔을 보내고 기기가 반응하는 형태가 재미 있어 뵌다.

    일단 크롬 확장프로그램, Chrome Extensions 을 간단하게 내 것으로 만들어야 겠다.


    구글에 들어가자. 

    마침 쉽게 시작할 수 있는 정보가 있네.


    Getting Started: Building a Chrome Extension


    여기서 색깔을 클릭하면 배경색을 바꿔주는 아주 유용한 예제가 있다. 아래 그림을 참고해서 찾아보자.




    그냥 파일 4개가 다운로드 된다.

    이 다운로드 된 파일을 그대로 크롬에서 아래와 같이 로드해 보면





    새로운 네모난 색깔 아이콘이 등장.

    기능은 쉽다. 그냥 색깔을 누르면 보고 있는 웹페이지의 배경색이 짠 하고 바뀌어 버린다. 나름 신기하네.



    이제 작업을 좀 하자. 

    배경색을 바꾸는 것은 목적이 아니었으니, 이 색깔 코드를 웹서버가 실행되어 잇는 자신의 아두이노, mbed로 보내는 코드를 추가하면 끝날 듯.

    일단 보드는 없지만, 윈도우 창을 띄워서 가능한지 확인만 해보자.

    코드 수정은 어렵지 않다.

    구글 검색으로 javascript 로 window 열기, url 넣기 정도 하면 끝.

    다운 받은 popup.js 코드에 아래 노란색 박스 부분을 추가하면 될 것 같다.


    색깔을 보고, 색깔 코드를 "IoT기기주소/setcolor?rgb=value" 이런형태의 주소를 호출 해 주는 것이다.

    혹시 쓸 사람을 위해 js code도 올려둠.


    popup.js


    주소나 페이지 이름, 변수명 등은 알아서 바꿔 쓰자.

    그럼 어떻게 바뀌었나? 떡하니 새 창이 하나 뜬 상황을 볼 수 있다. 주소를 확인해 보면 그럭저럭 동작하는 듯.


    실제 웹서버 기기를 두고 동작시키면 위의 결과보다 나은 것이 나올지도.

    프로그래머 취향으로 200 OK 만 떡 뜰수도 있지만..


    이상 즐즐.


    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 커피를 즐기는 개발자~~ wiznxt