- 필수 구성 요소 :
- Raspberry Pi 준비 :
- WebIOPi 설치 테스트 :
- Raspberry Pi 홈 자동화를위한 웹 애플리케이션 빌드 :
- 홈 자동화를위한 WebIOPi 서버 편집 :
- 회로도 및 설명 :
안녕하세요, 오늘의 튜토리얼에 오신 것을 환영합니다. Raspberry Pi의 좋은 점 중 하나는 특히 홈 오토메이션 관련 프로젝트를 위해 장치를 인터넷에 연결할 수있는 기회를 제공하는 뛰어난 기능과 용이성입니다. 오늘 우리는 인터넷을 사용하여 웹 페이지의 버튼을 클릭하여 AC 기기를 제어 할 수있는 가능성을 탐색 할 것입니다. 이 IoT 기반 홈 자동화 시스템 을 사용하면 전 세계 어디에서나 가전 제품을 제어 할 수 있습니다. 이 웹 서버는 스마트 폰, 태블릿, 컴퓨터 등과 같은 HTML 애플리케이션을 실행할 수있는 모든 장치에서 실행할 수 있습니다.
필수 구성 요소:
이 프로젝트의 요구 사항은 하드웨어와 소프트웨어의 두 가지 범주에 속합니다.
I. 하드웨어 요구 사항:
- Raspberry Pi 3 (다른 버전이 있으면 좋습니다)
- Raspbian Jessie를 실행하는 메모리 카드 8 또는 16GB
- 5v 릴레이
- 2n222 트랜지스터
- 다이오드
- 점퍼 와이어
- 연결 블록
- 테스트 할 LED.
- 테스트 할 AC 램프
- 브레드 보드 및 점퍼 케이블
- 220 또는 100 옴 저항
II. 소프트웨어 요구 사항:
라즈베리 파이에서 실행되는 Raspbian Jessie 운영 체제 외에도 WebIOPi 프레임 작업, PC에서 실행되는 메모장 ++ 및 filezila 를 사용하여 PC에서 라즈베리 파이, 특히 웹 앱 파일로 파일을 복사합니다.
또한 이 홈 오토메이션 프로젝트를 위해 Python으로 코딩 할 필요가 없습니다. WebIOPi가 모든 작업을 수행합니다.
Raspberry Pi 준비:
그것은 나에게 일종의 습관이고 나는 그것이 좋은 것이라고 생각합니다. 라즈베리 파이를 사용하고 싶을 때마다 가장 먼저하는 일은 PI를 업데이트하는 것입니다. 이 프로젝트의 경우이 섹션은 Pi 업데이트 절차와 WebIOPi 프레임 워크 설치 로 구성되어 웹 페이지에서 라즈베리 파이로의 통신을 처리하는 데 도움이됩니다. 아마도 파이썬 Flask 프레임 작업을 사용하여 논란의 여지가없이 더 쉬운 방법으로이 작업을 수행 할 수 있다고 말해야하지만 DIY의 흥미로운 점 중 하나는 후드 아래를 살펴보고 어려운 작업을 할 때입니다. DIY의 모든 기쁨이 오는 곳입니다.
명령 아래 의 라즈베리 파이 를 업데이트하고 RPi를 재부팅하려면;
sudo apt-get 업데이트 sudo apt-get 업그레이드 sudo 재부팅
이 작업이 완료되면 다음 단계 는 webIOPi 프레임 워크 를 설치하는 것입니다.
다음을 사용하여 홈 디렉토리에 있는지 확인하십시오.
cd ~
wget을 사용하여 sourceforge 페이지에서 파일을 가져옵니다.
wget
다운로드가 완료되면 파일을 추출하고 디렉토리로 이동하십시오.
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
이 시점에서 설치를 실행하기 전에이 버전의 WebIOPi 가 내가 사용중인 라즈베리 파이 3에서 작동하지 않고 Pi 3에서 명시 적으로 작동하는 WebIOPi 버전을 찾을 수 없으므로 패치 를 설치 해야합니다..
아래 명령은 WebIOPi 디렉토리에있는 동안 패치를 설치하는 데 사용됩니다.
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch 패치 -p1 -i webiopi-pi2bplus.patch
그런 다음 다음을 사용하여 WebIOPi에 대한 설치 설치를 실행할 수 있습니다.
sudo./setup.sh
설치 중에 종속성을 설치하라는 메시지가 나타나면 계속 예라고 말하십시오. 완료되면 파이를 재부팅하십시오.
sudo 재부팅
WebIOPi 설치 테스트:
회로도와 코드로 이동하기 전에 Raspberry Pi를 다시 켜고 WebIOPi 설치를 테스트하여 모든 것이 원하는대로 제대로 작동하는지 확인해야합니다.
명령을 실행하십시오.
sudo webiopi -d -c / etc / webiopi / config
파이에서 위의 명령을 실행 한 후 라즈베리 파이에 연결된 컴퓨터의 웹 브라우저를 http: // raspberrypi로 지정합니다. mshome.net:8000 또는 http; // thepi'sIPaddress: 8000. 시스템은 사용자 이름과 암호를 입력하라는 메시지를 표시합니다.
사용자 이름은 webiopi입니다. 암호는 raspberry입니다.
이 로그인은 원하는 경우 나중에 제거 할 수 있지만 가정 자동화 시스템에서도 가정에서 IP 제어 기기 및 IOT 장치를 가진 사람을 막기 위해 추가 보안 수준이 필요합니다.
로그인 후 주변을 둘러보고 GPIO 헤더 링크를 클릭 합니다.
이 테스트에서는 LED를 GPIO 17에 연결하므로 계속해서 GPIO 17을 출력으로 설정합니다.
이 작업을 마치면 아래 회로도와 같이 LED를 라즈베리 파이에 연결하십시오.
연결 후 웹 페이지로 돌아가서 핀 11 버튼을 클릭하여 LED를 켜거나 끕니다. 이렇게하면 WebIOPi를 사용하여 Raspberry Pi GPIO를 제어 할 수 있습니다 .
테스트 후 모든 것이 설명대로 작동하면 터미널로 돌아가서 CTRL + C로 프로그램을 중지 할 수 있습니다.이 설정에 문제가 있으면 댓글 섹션을 통해 저를 누르십시오.
Webiopi에 대한 자세한 정보는 Wiki 페이지 (http://webiopi.trouch.com/INSTALL.html)에서 찾을 수 있습니다.
테스트가 완료되면 메인 프로젝트를 시작합니다.
Raspberry Pi 홈 자동화를위한 웹 애플리케이션 빌드:
여기서는 WebIOPi 서비스의 기본 구성을 편집하고 호출시 실행할 자체 코드를 추가합니다. 가장 먼저 할 일은 PC에 filezilla 또는 다른 FTP / SCP 복사 소프트웨어를 설치하는 것입니다. 터미널을 통해 파이에 코딩하는 것은 상당히 스트레스가 많으므로 filezilla 또는 다른 SCP 소프트웨어가이 단계에서 유용 할 것입니다. 이 IoT 홈 자동화 웹 애플리케이션에 대한 html, css 및 java 스크립트 코드를 작성 하고이를 Raspberry Pi로 이동하기 전에 모든 웹 파일이있는 프로젝트 폴더를 생성하겠습니다.
다음을 사용하여 홈 디렉토리에 있는지 확인한 다음 폴더를 생성하고 생성 된 폴더로 이동하여 해당 디렉토리에 html 폴더를 생성합니다.
cd ~ mkdir webapp cd webapp mkdir html
html 폴더 안에 스크립트, CSS 및 이미지 용 폴더를 만듭니다.
mkdir html / css mkdir html / img mkdir html / scripts
파일이 생성되면 PC에서 코드를 작성하고 filezilla를 통해 Pi로 이동할 수 있습니다.
자바 스크립트 코드:
우리가 작성할 첫 번째 코드는 자바 스크립트 코드입니다. WebIOPi 서비스와 통신하는 간단한 스크립트입니다.
이 프로젝트의 경우 웹 앱은 4 개의 버튼으로 구성됩니다. 즉, 데모에서는 릴레이 2 개만 제어 할 것이지만 GPIO 핀 4 개만 제어 할 계획입니다. 마지막에 전체 비디오 를 확인하십시오.
webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "Relay 1"); content.append (button); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (button);});
위의 코드는 WebIOPi가 준비되면 실행됩니다.
아래에서 JavaScript 코드에 대해 설명했습니다.
webiopi (). ready (function (): 이것은 우리 시스템에이 함수를 생성하고 webiopi가 준비되면 실행하도록 지시합니다.
webiopi (). setFunction (23, "out"); 이는 WebIOPi 서비스가 GPIO23을 출력으로 설정하도록 지시하는 데 도움이됩니다. 여기에 4 개의 버튼이 있습니다. 더 많은 버튼을 구현하는 경우 더 많은 버튼을 사용할 수 있습니다.
var content, button; 이 줄은 시스템에 content라는 변수를 만들고 변수를 버튼으로 만들도록 지시합니다.
content = $ ("# content"); 콘텐츠 변수는 여전히 html과 css에서 사용될 것입니다. 따라서 #content를 참조 할 때 WebIOPi 프레임 워크는 이와 관련된 모든 것을 생성합니다.
button = webiopi (). createGPIOButton (17, "릴레이 1"); WebIOPi는 다양한 종류의 버튼을 만들 수 있습니다. 위의 코드는 WebIOPi 서비스에 GPIO 핀을 제어하는 GPIO 버튼을 생성하도록 지시하는 데 도움이됩니다. 다른 것들도 마찬가지입니다.
content.append (버튼); 이 코드를 html 파일이나 다른 곳에서 만든 버튼의 다른 코드에 추가합니다. 더 많은 버튼을 만들 수 있으며 모두이 버튼과 동일한 속성을 갖습니다. 이것은 CSS 또는 스크립트를 작성할 때 특히 유용합니다.
JS 파일을 만든 후 파일을 저장 한 다음 파일을 webapp / html / scripts에 복사합니다.
이 작업이 완료되면 CSS 생성으로 이동합니다. 마지막 코드 섹션에 제공된 링크 에서 코드 전체를 다운로드 할 수 있습니다.
CSS 코드:
CSS는 IoT Raspberry Pi 홈 자동화 웹 페이지를 예쁘게 보이게하는 데 도움이됩니다.
웹 페이지가 아래 이미지처럼 보이기를 원했기 때문에 이를 달성하기 위해 smarthome.css 스타일 시트를 작성해야 했습니다.
아래 에서 CSS 코드를 설명했습니다.
CSS 스크립트는 여기에 포함하기에는 너무 부피가 크므로 일부만 선택하여 분류에 사용하겠습니다. 여기에서 전체 CSS 파일 을 다운로드 할 수 있습니다. CSS는 쉽고 CSS 코드를 통해 이해할 수 있습니다. 이 부분을 쉽게 훑어보고 CSS 코드를 바로 사용할 수 있습니다.
스크립트의 첫 번째 부분은 웹 앱 본문의 스타일 시트를 나타내며 아래에 표시됩니다.
본문 {배경색: #ffffff; background-image: url ('/ img / smart.png'); 백그라운드 반복: 반복 없음; 배경 위치: 중앙; 배경 크기: 표지; 글꼴: 굵은 18px / 25px Arial, sans-serif; 색상: LightGray; }
위의 코드가 자명하다고 믿고 싶습니다. 배경색을 흰색 인 #ffffff로 설정 한 다음 해당 폴더 위치에있는 배경 이미지를 추가합니다 (이전 폴더 설정을 기억하십니까?). t background-repeat 속성을 no-repeat로 설정하여 반복 한 다음 CSS에 배경을 중앙 집중화하도록 지시합니다. 그런 다음 배경 크기, 글꼴 및 색상을 설정합니다.
본문이 완성되면 버튼 이 예쁘게 보이도록 CSS를 작성했습니다.
버튼 {디스플레이: 블록; 위치: 상대; 여백: 10px; 패딩: 0 10px; 텍스트 정렬: 가운데; 텍스트 장식: 없음; 너비: 130px; 높이: 40px; 글꼴: 굵은 18px / 25px Arial, sans-serif; 검정색; 텍스트 그림자: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; 테두리 반경: 30px;
이를 간략하게 유지하기 위해 코드의 다른 모든 작업도보기 좋게 만들었습니다. 어떤 일이 일어나는지 변경할 수 있습니다. 시행 착오를 통한 학습이라고 생각하지만 CSS에 대한 좋은 점은 이해하기 쉬운 평범한 영어로 표현된다는 것입니다. 버튼 블록의 다른 부분에는 버튼 및 버튼 그림자의 텍스트 그림자에 대한 추가 기능이 거의 없습니다. 또한 버튼을 눌렀을 때 멋지고 사실적으로 보이도록 도와주는 약간의 전환 효과가 있습니다. 이들은 웹킷, 파이어 폭스, 오페라 등에 대해 별도로 정의되어 웹 페이지가 모든 플랫폼에서 최적으로 작동하도록합니다.
다음 코드 블록은 WebIOPi 서비스 가 WebIOPi 서비스 에 대한 입력임을 알리는 것입니다.
i nput {디스플레이: 블록; 너비: 160px; 높이: 45px; }
마지막으로하고 싶은 것은 버튼을 눌렀을 때 일종의 표시를하는 것입니다. 따라서 화면과 버튼의 색상을 통해 현재 상태를 알 수 있습니다. 이를 위해 모든 단일 버튼에 대해 아래 코드 줄이 구현되었습니다.
# gpio17.LOW {배경색: 회색; 검정색; } # gpio17.HIGH {배경색: 빨간색; 색상: LightGray; }
위의 코드 줄은 단순히 현재 상태에 따라 버튼의 색상을 변경합니다. 버튼이 꺼져 있으면 (LOW) 버튼 배경색이 회색이되어 비활성 상태로 표시되고 켜짐 (HIGH)되면 버튼의 배경색이 빨간색이됩니다.
가방에 CSS를 넣고 smarthome.css로 저장 한 다음 filezilla (또는 사용하려는 다른 SCP 소프트웨어)를 통해 라즈베리 파이의 스타일 폴더로 이동하고 마지막 조각 인 html 코드를 수정합니다. 여기에서 전체 CSS를 다운로드하십시오.
HTML 코드:
html 코드는 자바 스크립트와 스타일 시트를 하나로 묶습니다.
누름 단추; 베이컨을 받다
내 머리 태그 매우 중요한 기능을 존재합니다.
위 코드 줄을 사용하면 웹 앱을 크롬 또는 모바일 사파리를 사용하는 모바일 데스크톱에 저장할 수 있습니다. 이것은 크롬 메뉴를 통해 할 수 있습니다. 이렇게하면 모바일 데스크톱이나 홈에서 앱을 쉽게 시작할 수 있습니다.
아래 코드의 다음 줄은 웹 앱에 대한 일종의 응답 성을 제공합니다. 그것은 그것이 시작된 모든 장치의 화면을 차지할 수 있습니다.
다음 코드 줄은 웹 페이지의 제목 표시 줄에 표시된 제목을 선언합니다.
다음 네 줄의 코드는 각각 HTML 코드를 원하는대로 작동하는 데 필요한 여러 리소스에 연결하는 기능을 수행합니다.
위 의 첫 번째 줄 은 서버 루트에 하드 코딩 된 기본 WebIOPi 프레임 워크 JavaScript를 호출합니다. WebIOPi를 사용할 때마다 호출해야합니다.
두 번째 줄은 우리의 jQuery를 스크립트로 HTML 페이지를 가리키는 세 번째 그것이 우리의 스타일 시트의 방향 점. 마지막으로 마지막 줄은 아이콘을 웹 앱 또는 웹 페이지의 파비콘으로 사용하기로 결정한 경우 모바일 데스크톱에서 사용할 아이콘을 설정하는 데 도움이됩니다.
html 코드의 본문 섹션에는 중단 태그가 포함되어있어 버튼이 아래 줄과 제대로 정렬되어 JavaScript 파일에 작성된 내용을 표시하도록 html 코드에 지시합니다. ID는 = "내용" 이전에 자바 스크립트 코드에서 우리의 버튼에 대한 콘텐츠를 선언 당신을 생각 나게한다.
드릴, html 코드를 index.html로 알고 있으며 filezilla를 통해 Pi의 html 폴더로 이동합니다. 여기에서 모든 CSS, JS 및 HTML 파일을 다운로드 할 수 있습니다.
홈 자동화를위한 WebIOPi 서버 편집:
이 단계에서 우리는 회로도를 만들고 웹 앱을 테스트 할 준비가되었습니다.하지만 그 전에 webiopi 서비스 의 구성 파일 을 편집하여 함께 제공된 구성 파일 대신 html 폴더의 데이터를 사용하도록 지시 해야합니다..
구성을 편집하려면 루트 권한으로 다음을 실행하십시오.
sudo nano / etc / webiopi / config
구성 파일의 http 섹션을 찾아서 다음과 같은 섹션을 확인하십시오. # doc-root를 사용하여 기본 HTML 및 리소스 파일 위치 변경
#을 사용하여 그 아래에있는 항목을 주석 처리 한 다음 폴더가 내 것과 같이 설정되어 있으면 doc-root를 프로젝트 파일의 경로로 지정하십시오.
doc-root = / home / pi / webapp / html
저장하고 종료. 해당 포트를 사용하는 pi에서 다른 서버를 실행하는 경우 포트를 8000에서 변경할 수도 있습니다. 저장하고 종료하지 않으면 계속 진행합니다.
명령을 사용하여 WebIOPi 서비스의 암호를 변경할 수 있다는 점에 유의하십시오.
sudo webiopi-passwd
새 사용자 이름과 암호를 입력하라는 메시지가 표시됩니다. 이것은 또한 완전히 제거 할 수 있지만 보안이 중요합니까?
마지막으로 아래 명령을 실행하여 WebIOPi 서비스를 실행하십시오.
sudo /etc/init.d/webiopi 시작
서버 상태는 다음을 사용하여 확인할 수 있습니다.
sudo /etc/init.d/webiopi 상태
다음을 사용하여 실행을 중지 할 수 있습니다.
sudo /etc/init.d/webiopi 중지
WebIOPi가 부팅시 실행되도록 설정하려면 다음을 사용하십시오.
sudo update-rc.d webiopi 기본값
반대로하고 부팅 할 때 실행을 중지하려면 다음을 사용하십시오.
sudo update-rc.d webiopi 제거
회로도 및 설명:
소프트웨어 설정이 완료되면이 웹 제어 가전 프로젝트에 대한 회로도 작성을 시작할 준비가되었습니다.
중계 모듈에 손을 댈 수는 없었지만 애호가를 위해 작업하기가 더 쉽다고 생각합니다. 그래서 여기에 일반적인 독립형 단일 5v 릴레이에 대한 회로도를 그리고 있습니다.
위의 fritzing 회로에 표시된대로 회로를 연결하십시오. 자신의 릴레이의 COM, NO (일반적으로 열림) 및 NC (일반적으로 닫힘)는 서로 다른 측면 / 점에 위치 할 수 있습니다. 밀리미터를 사용하여 테스트하십시오. 여기에서 릴레이에 대해 자세히 알아보세요.
구성 요소가 연결된 상태에서 웹 페이지에서 서버를 시작하고 Raspberry Pi의 IP로 이동하여 앞서 설명한대로 포트를 지정하고 사용자 이름과 암호로 로그인하면 아래 이미지와 똑같은 웹 페이지가 표시됩니다..
이제 버튼을 클릭하기 만하면 어디서나 무선으로 4 개의 AC 홈 애플리케이션을 쉽게 제어 할 수 있습니다. 이것은 모바일 폰, 태블릿 등에서 작동하며 더 많은 장치를 제어하기 위해 더 많은 버튼과 릴레이를 추가 할 수 있습니다. 아래 의 전체 비디오를 확인하십시오.
그게 다예요, 이거 고마워요. 질문이 있으면 의견 상자에 드롭하십시오.