라즈베리파이와 자바스크립트로 iot 시작하기
TRANSCRIPT
![Page 1: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/1.jpg)
누구나, 메이커!!라즈베리파이 IoT 시작하기
THINKER TO MAKER
![Page 2: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/2.jpg)
Maker Movement
THINKER TO MAKER
메이커 운동
![Page 3: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/3.jpg)
Maker
무언가를 만드는 사람
Maker Movement
Maker들이 만드는 법을 공유하고 발전시키는 흐름
![Page 4: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/4.jpg)
메이커 행사
Maker Faire Hacker-thon
![Page 5: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/5.jpg)
메이커 작품
![Page 6: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/6.jpg)
Raspberry Pi
THINKER TO MAKER
라즈베리파이
![Page 7: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/7.jpg)
Raspberry Pi
라즈베리파이 재단에서 만든 교육용 초소형 컴퓨터
![Page 8: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/8.jpg)
Raspberry Pi
센서 연결
무선
동글
연결
전원 연결 스피커 연결모니터 연결
유선
랜연
결키
보드
연결
![Page 9: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/9.jpg)
Raspberry Pi
NameRaspberry PiModel A+
Raspberry PiModel B+
Raspberry Pi2Model B
Raspberry PiZero
Raspberry Pi 3Model
Price $20 $35 $5 $35
Processor ARM 11ARM
Cortex A7ARM 11
ARMCoretex-A53
Clock Speed 700Mhz 900Mhz 1Ghz 1.2Ghz
RAM 256MB 512MB 1GB 512MB 1GB
Multi Core Single Quad Single Quad
Flash Micro SD Card
GPIO 40
Ethernet N/A 10/100 N/A 10/100
USB USB 2.0X1 USB 2.0X4 Micro 1 USB 2.0X4
Power 5V, 200mA 5V, 600mA 5V, 800mA 5V, 160mA N/A
Video Out HDMI, Composite Mini-HDMIHDMI,
Composite
Audio Out HDMI, Analog Mini-HDMI HDMI, Analog
Wi-Fi 모듈블루투스 지원
![Page 10: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/10.jpg)
Arduino vs. Raspberry Pi
Micro Controller
No
Micro Computer
Yes
성격
리눅스(OS)
CC, C++, Java, Python,
Node.JS, Ruby ...개발언어
No Yes카메라
Limit Yes무선환경
![Page 11: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/11.jpg)
Circulus 소개
THINKER TO MAKER
온라인 코딩교육 + 메이커 플랫폼
![Page 12: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/12.jpg)
Circulus Architecture
Core Engine
API Gateway
M2M Controller
Cloud Storage
CirculOS
Intelligence Agent
CirculusApp
CirculusWeb
Data Processing
H2H Controller
모바일부터 하드웨어까지. IoT 개발 학습/제작 클라우드 플랫폼복잡한 IoT 지식 없이, 생각을 다양한 API를 사용하여 손쉽게 구현 가능
![Page 13: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/13.jpg)
One JavaScript - Multi Use
JavaScript (+Node.JS) 만으로 모바일 부터 하드웨어 개발까지 구현IoT 서비스 제작/배포 지원 솔루션
![Page 14: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/14.jpg)
www.circul.us
1. E-mail, 사용할 Password만 넣으면 가입 완료!
![Page 15: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/15.jpg)
www.circul.us
2. Raspberry Pi 시리얼 번호 입력
OR
홈페이지 좌측 상단 와이파이 모양 선택 후, 시리얼 번호 등록사용할 라즈베리파이를 on으로 선택. 와이파이 모양을 다시 눌러 닫으면, 적용 완료. 마우스를 녹색 위에 가져가면 IP 확인 가능부팅 시, 음성으로 시리얼 확인 가능
![Page 16: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/16.jpg)
www.circul.us
3. 프로젝트 생성하기
Lecture_01
Basic sensor study
리모컨 (웹페이지)
본인의 라즈베리파이에실행되는 부분
![Page 17: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/17.jpg)
www.circul.us
4. 라즈베리파이 접속 상태 확인
프로젝트 메뉴의 Check 버튼을 눌렀을 때, 정상적으로 연결되었다면, 해당 시리얼의 접속 상태와 IP주소가 출력됩니다.
![Page 18: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/18.jpg)
www.circul.us
5. Hello Pi 실행 여부 확인
Hello Pi 를 입력한 후, Run 버튼을 누르면, 등록한 라즈베리파이에서 실행됨을 확인할 수 있습니다.
History 버튼을누르면, 이전에작업한 결과로
복원 가능합니다.
![Page 19: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/19.jpg)
What to do?
THINKER TO MAKER
오늘 배울 것은?
![Page 20: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/20.jpg)
LED, 초음파 센서, 온습도 센서, 7-세그먼트
다양한 센서를 다루어 보자
![Page 21: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/21.jpg)
스마트폰을 이용한 IoT 키트 원격 제어
IoT 센서를 외부에서 제어해보자
HOME COMPANY
Monitoring
Control
![Page 22: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/22.jpg)
Basic
THINKER TO MAKER
그 전에 잠깐, 기초
![Page 23: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/23.jpg)
JavaScript 기초
1. 모듈 추가하기(어떤 기능을 가지고 있는 모음)
var wpi = require('wiring-pi');
2. 변수 선언하기(변수: 값을 담아두는 상자)
var val = 10;
3. 출력문 만들기
console.log(“Hello, Raspberry Pi”);
var num = 10;console.log(“저는 ” + num + “살 입니다.”);
![Page 24: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/24.jpg)
var isOn = 1;setInterval(function(){
us.setLED(isOn);isOn = !isOn;
}, 1000);
Javascript 기초
4. 주기적으로 반복하기
if(a >= b)return a;
5. 조건문 사용하기
While(a == true)console.log(‘true’);
6. 반복문 사용하기
![Page 25: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/25.jpg)
Bread board 사용하기
납땜없이 선 연결 만을 이용하여 센서와 라즈베리파이를 연결
가로로 표시된 부분이 하나로 연결되어 있음
![Page 26: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/26.jpg)
GPIO(General Purpose Input/Output) 사용하기
- GPIO란? 신호를 보내거나 받을 수 있는 핀- 센서나 외부 장치들과 정보를 주고 받음, BCM번호로 각 핀에게 명령을 내림- 라즈베리파이의 GPIO는 입-출력 외에 또 다른 역할을 하는 핀들이 있음
GROUND : 0VGPIO_XX : ~3.3V3.3V : 3.3V5V : 5V
BCM 번호(각 핀의 일반 적인 이름)
추가 기능을 가진 핀
![Page 27: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/27.jpg)
Wiring-pi 사용하기
- GPIO를 사용하는 기능을 모아 둔 모음집 중 하나- 아두이노와의 연계를 위해 새롭게 핀 번호를 지정- Wiring-pi의 기능을 사용하는 경우는 Wiring-pi의 이름(핀 번호)을 사용해야 함
15
16
1
4
5
6
10
11
26
27
28
29
8
9
7
0
2
3
12
13
14
21
22
23
24
25
![Page 28: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/28.jpg)
Jumper Cable
THINKER TO MAKER
점퍼 선/점퍼 케이블
![Page 29: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/29.jpg)
점퍼선 종류
센서와 보드를 연결하기 위해서 사용하는 케이블양 끝 모양에 따라 3 종류로 구분
암(Female) 수(Male)
암 + 암 암 + 수 수 + 수
![Page 30: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/30.jpg)
Sensor
THINKER TO MAKER
센서
![Page 31: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/31.jpg)
센서란?
특정 정보를 측정하는 소형 기기
주변 환경에 상관없이주어진 일만 하는 센서
OUTPUT INPUT/OUTPUT
주변 환경에 따라값이 변하는 센서
![Page 32: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/32.jpg)
LED
THINKER TO MAKER
LED
![Page 33: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/33.jpg)
LED
LED를 켜보자!
Ground VCCGPIO
- +
※ GPIO는 입력 또는 출력으로 정할 수 있고, 라즈베리파이는 3.3V까지 출력으로 사용 가능VCC 또는 GPIO출력 모드를 이용하여 LED를 켤 수 있음
![Page 34: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/34.jpg)
여기서 잠깐!
센서에서 Ground와 VCC의 역할이 중요하다!
센서가 일을 할 수 있도록 힘을 주는 역할을 하는 것이 바로 두 개의 핀
GND DATA VCCGND VCC
GN
D
VCC
MIS
OM
OSI
SCLK
CE#
GN
D
VCC
TRIG
ECH
O
![Page 35: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/35.jpg)
프로젝트 생성하기
Lecture_01
Basic sensor study
프로젝트 설명
원하는 프로젝트 명
![Page 36: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/36.jpg)
파일 생성하기
원하는 파일명.js 입력 후 엔터!
센서마다 .js 파일을 생성해주세요.
![Page 37: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/37.jpg)
LED ON
//circulus 모듈 추가
var us = require(‘circulus’);
//GPIO 초기화
us.initLED(23);
//LED 설정 (true = ON, false = OFF)
us.setLED(true);
LED를 켜보자!
GROUND
GPIO23
![Page 38: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/38.jpg)
파일 실행하기
소스코드 저장 & 실행
![Page 39: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/39.jpg)
여기서 잠깐!
//circulus 모듈 추가
var us = require(‘circulus’);
//GPIO 초기화
us.initLED(23);
//LED 설정 (true = ON, false = OFF)
us.setLED(true);
센서 제어 코드는 크게 세 부분으로 나뉜다!
// wiring-pi 함수를 사용할 수 있도록 초기화
var wpi = require('wiring-pi');
wpi.setup('gpio');wpi.wiringPiSetup();
// wiringpi맵 핀 번호 사용
var pin = 4;
// 출력 모드로 설정 (전류) pin(4) --> LED --> GND
wpi.pinMode(pin, wpi.OUTPUT);
// LED ON
var isOn = 1;wpi.digitalWrite(pin, isOn);
모듈 추가
핀 설정초기화
동작 관련코드
![Page 40: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/40.jpg)
LED ON/OFF
//circulus 모듈 추가
var us = require(‘circulus’);
//LED 초기화
us.initLED(23);
//LED 설정 (ture = ON, false = OFF)
var isOn = 1;setInterval(function(){
us.setLED(isOn);isOn = +!isOn;
}, 1000);
1초에 한 번씩 LED가 ON/OFF되도록 해보자!
GROUND
GPIO23
![Page 41: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/41.jpg)
Ultrasonic Sensor
THINKER TO MAKER
초음파 센서(HC-SR04)
![Page 42: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/42.jpg)
초음파 센서 원리
초음파를 통해 일정한 거리 이내에 사물이 있는지 파악사물과의 거리가 얼마나 떨어졌는지 측정
VCC : 5V GND : GroundTrig : 초음파 전송 Echo : 초음파 수신
![Page 43: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/43.jpg)
초음파 센서 원리
[High가 끝나는 시간 – Low가 끝나는 시간] / 58
![Page 44: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/44.jpg)
초음파 센서 거리 측정하기
// circulus 모듈 추가
var us = require(‘circulus');
// 초음파 센서 초기화// initDistance (TRIG, ECHO);
us.initDistance(15, 14);
// 1초에 한 번씩 거리 측정
setInterval(function(){var dist = us.getDistance();console.log(‘distance: ’+dist+’cm’);
}, 1000);
5V
GROUND
GPIO14
GPIO15
1초에 한 번씩 장애물과의 거리를 측정해보자!
![Page 45: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/45.jpg)
응용 1
THINKER TO MAKER
LED와 초음파 센서
![Page 46: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/46.jpg)
응용!
// circulus 모듈 추가
var us = require('circulus');
us.initDistance(15, 14);us.initLED(23);
setInterval(function(){var dist = us.getDistance();console.log(‘distance: ’+dist+’cm’);
if(dist < 5)us.setLED(true);
elseus.setLED(false);
}, 1000);
5cm 안에 장애물이 있으면 LED에 불을 켜자!
![Page 47: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/47.jpg)
Temperature-humidity Sensor
THINKER TO MAKER
온습도 센서(DHT-11)
![Page 48: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/48.jpg)
온습도 센서
GND
DATA
VCC
온도와 습도를 동시에 측정할 수 있는 센서
모델명 용도 온도 측정 범위 습도 측정 범위
DHT11 실내용 0 ~ 50도 20 ~ 80%
![Page 49: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/49.jpg)
온습도 센서
//circulus 모듈 추가
Var us = require(‘circulus);
// GPIO 값 초기화// 가운데 data핀의 BCM 핀 번호 사용
us.initTemp(21);
//1초에 한번씩 온도, 습도 값 출력
setInterval(function(){console.log(us.getTemp());
},1000);
1초에 한 번씩 온도와 습도를 측정해보자!
5V
GROUND
GPIO21
![Page 50: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/50.jpg)
7-Segment
THINKER TO MAKER
7-세그먼트 (4 Digit LED)
![Page 51: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/51.jpg)
7-세그먼트란?
VCC 5v
GROUND Ground
SCLK 동기화 신호
MOSI 라즈베리파이 출력 -> 7-세그먼트 입력
MISO 7-세그먼트 출력 -> 라즈베리파이 입력
CE Chip enable
![Page 52: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/52.jpg)
7-세그먼트 연결하기
VCC GPIO25
GROUND GROUND
SCLK GPIO11(SPI_CLK)
MOSI GPIO10(SPI_MOSI)
MISO -
CE GPIO8(SPI_CE0_N)
![Page 53: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/53.jpg)
7-세그먼트 출력하기
//circulus 모듈 추가
var us = require(‘circulus’);
// Segment 초기화
us.initText();
//1초에 한 번씩 다른 숫자 출력// 정수.toString() = 정수를 문자열로 변경함 ex) 1 ‘1’
var i = 0;setInterval(function(){
us.setText(i.toString() + i.toString() + i.toString() + i.toString());i++;
if(i === 10)i = 0;
}, 1000);
글자와 숫자를 출력해보자!
![Page 54: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/54.jpg)
Remote Control with Smart Device
THINKER TO MAKER
스마트 디바이스로 제어하기
![Page 55: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/55.jpg)
개념
인터넷(리모컨) 라즈베리파이
리모컨
JavaScript JavaScriptSend/Receive
HTML
외부접속 가능
![Page 56: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/56.jpg)
두 개의 프로젝트 생성
인터넷(리모컨) 라즈베리파이
IoT_RemoteController
Remote Controller for IoT
IoT_Raspberrypi
Raspberrypi for IoT
![Page 57: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/57.jpg)
동작 예시
인터넷(리모컨) 라즈베리파이
![Page 58: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/58.jpg)
리모컨 파일 생성
리모컨 외관
명령어 통신
![Page 59: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/59.jpg)
<html><head>
<title>remote control</title><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script src="http://www.circul.us/circulus.js"></script><script src="index.js"></script>
</head><body>
<div> LED </div><button id='ledon'>ON</button><button id='ledoff'>OFF</button><br><br><div>ULTRA</div><button id='ultra'>ULTRA</button><span id='distance'>0</span>cm <br><br><div>TEMP/HUMI</div><button id='temp'>TEMP</button><span id='tempinfo'>0</span><br><button id='humi'>HUMI</button><span id='humiinfo'>0</span><br><br><span> SEGMENT</span><span id='segment'>0</span>
</body></html>
HTML로 외관 만들기
![Page 60: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/60.jpg)
리모컨 확인하기
해당 주소로 PC, 스마트폰 등 다양한 기기에서 바로 사용 가능
간편 주소
circul.us/cloud/ID/프로젝트 이름/파일명.html
![Page 61: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/61.jpg)
리모컨 초기화
$c.ready(function(us){us.init('b5861b8d')
……//us.send(KEY, DATA);//us.receive(KEY, DATA);
});
## 리모컨 JavaScript (index.js): 리모컨과 자신의 라즈베리파이가 통신하기 위해, 시리얼 번호를 등록함
자신의 라즈베리파이 시리얼 번호로 초기화
앞으로 소개할 통신 관련 부분 코드는이곳에 작성합니다.
![Page 62: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/62.jpg)
Socket 통신
var data = ‘hello’; us.send (‘KEY’, data);
JavaScript JavaScriptSend/Receive
us.receive(‘KEY,’ function(data){/* 수행하고 싶은 내용 */console.log(data);
});## hello
us.receive(‘KEY,’ function(data){
/* 수행하고 싶은 내용 */
});
us.send(‘KEY’, data);
리모컨HTML
[Internet]
[라즈베리파이]
![Page 63: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/63.jpg)
CASE 1 (LED ON/OFF)
//HTML파일에서의 각 버튼을 클릭하면 호출
$('#ledon').click(function(){us.send('ledon');
});
$('#ledoff').click(function(){us.send('ledoff');
});
var us = require('circulus');
us.receive('ledon', function(data){console.log(‘ledon receive’);us.initLED(23);us.setLED(true);
});
us.receive('ledoff', function(data){console.log(‘ledoff receive’);us.initLED(23);us.setLED(false);
});
Remote Controller (index.js) Raspberry Pi (index.js)
리모컨에서 라즈베리파이로 명령 전달
![Page 64: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/64.jpg)
프로젝트 복사하기
라즈베리파이 쪽 파일을 복사해서 사용해보아요.
자신의 ‘Make’로 프로젝트 통째로 복사
![Page 65: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/65.jpg)
CASE 2(초음파 센서 거리 출력)
$('#ultra').click(function(){us.send('ultra');
});
// HTML 파일에서 span id = ‘distance’에 출력함
us.receive('distance', function(data){$('#distance').text(data);
});
us.receive('ultra', function(data){console.log(‘ultra receive’);us.initDistance(15, 14);var dist = Math.floor(us.getDistance());
us.send('distance', dist);console.log(dist + ‘ cm’);
});
Remote Controller (index.js) Raspberry Pi (index.js)
리모컨에서 라즈베리파이로 명령 전달 + 응답 수신
![Page 66: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/66.jpg)
us.receive('temp', function(data){console.log(‘temp receive’);us.initTemp(21);var tempinfo = us.getTemp();console.log(tempinfo.temperature);
us.send('tempinfo', tempinfo.temperature);});
us.receive('humi', function(data){console.log(‘humi receive);us.initTemp(21);var humi = us.getTemp();console.log(humi.humidity);
us.send('humiinfo', humi.humidity);
CASE 2(온/습도 출력)
$('#temp').click(function(){us.send('temp');
});
us.receive('tempinfo', function(data){$('#tempinfo').text(data);
});
$('#humi').click(function(){us.send('humi');
});
us.receive('humiinfo', function(data){$('#humiinfo').text(data);
});
Remote Controller (index.js) Raspberry Pi (index.js)
리모컨에서 라즈베리파이로 명령 전달 + 응답 수신
![Page 67: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/67.jpg)
리모컨에서 명령 없이, 라즈베리파이의 응답만 수신
us.initText();var i = 0;setInterval(function(){
us.setText(i.toString() + i.toString() + i.toString() + i.toString(), true, false, false, true);
var text = i.toString() + i.toString() + i.toString() + i.toString();
i++;if(i == 10)
i = 0;
console.log(text);us.send('segment', text);
}, 1000);
CASE 3(세그먼트 출력)
us.receive('segment', function(data){$('#segment').text(data);
});
Remote Controller (index.js) Raspberry Pi (index.js)
![Page 68: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/68.jpg)
Design
THINKER TO MAKER
자신만의 작품 구상하기
![Page 69: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/69.jpg)
무엇을 만들 수 있을까요?
IDEA를 실행하는 것이 중요합니다.
![Page 70: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/70.jpg)
Making
THINKER TO MAKER
만들어보기
![Page 71: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/71.jpg)
메이킹 과정
아이디어
서비스 기획
프로토 타이핑
하드웨어 구성
소프트웨어 구성
3D 프린팅
결과 공유
만들고자하는아이디어를떠올리는단계이다.
아이디어를서비스로구체화한다. 이단계에서는보여질모습뿐만아니라,
보이지는않지만사용자에게어떤가치를제공할지도염두해둔다.
블록등으로만들어질하드웨어모습을구성해보고, 이를사용할모바일어
플리케이션이있다면종이에그이미지를구성해본다.
오픈소스하드웨어로만들고자한내용을구성해본다. 프로토타이핑및최
종적으로보여질외관을고려하여센서및각종하드웨어의배치도고려한다.
하드웨어를제어할소프트웨어와리모콘용도로사용될소프트웨어, 그리고
서비스제공을위한소프트웨어를구성한다.
Making 한제품의외관과인쇄가능한부속들을 3D 모델링하고, 결과물을
3D 프린팅하여하드웨어를최종완성한다.
제품을완성하여외부에공개한다. 만일판매를목적으로한제품이라면소
셜펀딩을이용하여판매가능성을확인해본다.
![Page 72: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/72.jpg)
외관을 만드는 방법!
3D 프린터 레이저 커터 CNC 라우터
![Page 73: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/73.jpg)
메이커 스페이스
국내현황
성수 메이커스페이스 02-2115-0525 경기 창조경제혁신센터 031-8016-1102
서울 창조경제혁신센터 02-723-9100 Fab. Lab. 서울 070-7743-0806
메이커스빌 1544-8622 과천 과학관 무한상상실 02-509-6925
경기콘텐츠 코리아랩 021-776-4677 K-ICT 디바이스랩 경기 031-776-4736
![Page 74: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/74.jpg)
필요한 도안을 찾는 법!
Thingiverse Instructables Makeall.com
![Page 75: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/75.jpg)
Appendix A
THINKER TO MAKER
부 록 : 범용 소스코드
![Page 76: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/76.jpg)
LED
// wiring-pi 함수를 사용할 수 있도록 초기화
var wpi = require('wiring-pi');
wpi.setup('gpio');wpi.wiringPiSetup();
// wiringpi맵 핀 번호 사용
var pin = 4;
// 출력 모드로 설정 (전류) pin(4) --> LED --> GND
wpi.pinMode(pin, wpi.OUTPUT);
// LED ON
var isOn = 1;wpi.digitalWrite(pin, isOn);
LED ON
var wpi = require('wiring-pi');
wpi.setup('gpio');wpi.wiringPiSetup();
var pin = 4;wpi.pinMode(pin, wpi.OUTPUT);
var isOn = 1;
// 1초 주기로 LED ON/OFF
setInterval(function(){wpi.digitalWrite(pin, isOn);isOn = +!isOn;
}, 1000);
1초에 한 번씩 LED ON/OFF
![Page 77: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/77.jpg)
초음파 센서로 거리 측정하기
var wpi = require('wiring-pi');var sleep = require('sleep');var microtime = require('microtime');
var TRIG, ECHO;
TRIG = 16; // Wiring-pi MAP 기준, 핀 번호ECHO = 15; // Wiring-pi MAP 기준, 핀 번호
wpi.setup('gpio');wpi.wiringPiSetup();
// TRIG: 보내는 핀 (출력)wpi.pinMode(TRIG, wpi.OUTPUT); // ECHO: 받는 핀 (입력)wpi.pinMode(ECHO, wpi.INPUT);
// 초음파 센서 거리 구하는 공식setInterval(function(){
var cnt1 = 0;var cnt2 = 0;wpi.digitalWrite(TRIG, wpi.LOW);sleep.usleep(2);
wpi.digitalWrite(TRIG, wpi.HIGH);sleep.usleep(20);
wpi.digitalWrite(TRIG, wpi.LOW);
while(wpi.digitalRead(ECHO) == wpi.LOW){
if(cnt1++ > 1000)break;
}var startTime = microtime.now();
while(wpi.digitalRead(ECHO) == wpi.HIGH){
if(cnt2++ > 10000)break;
}var endTime = microtime.now();
// Cm로 변환var distance = (endTime - startTime) / 58; console.log('distance ' + distance);
}, 1000);
![Page 78: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/78.jpg)
7-Segment 연결하기
startup 동작 모드 시작
setDecodeNone Bit 단위의 데이터로 보여줌
setDedcodeAll 인코딩하여 보여줌 (“0”~”9”, “E”, “H”, “L”, “P”, “-”, “ ”만)
setDigitSegments Bit단위로 계산하여 정보를 표시(setDecodeNone)
setDigitSymbol 인코딩 가능한 값만 정보를 표시(setDecodeAll)
setScanLimit 화면에 출력할 글자 개수 제한 (MAX: 8)
setDisplayIntensity 화면 밝기 제한(MAX : 15)
![Page 79: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/79.jpg)
7-Segment 출력하기
// max7219 패키지 초기화var MAX7219 = require('max7219');
/* * spidev 사용 초기화 - 라즈베리파이에서 SPI활성화 필요* 세그먼트의 Chip Select를 CE0에 연결하면,* /dev/spidev0.0, CE1에 연결하면 /dev/spidev0.1* console창에 ls /dev/*spi*로 확인 가능*/
var disp = new MAX7219("/dev/spidev0.0");
// 세그먼트 초기화// 해독하지 않는 모드 - 7 segment 각각의 led를 선택함
disp.setDecodeNone();// 사용하는 세그먼트 수 (8개까지 지원)
disp.setScanLimit(8); disp.startup(); // 밝기 0-15 (0으로 입력해도 꺼지지는 않음)
disp.setDisplayIntensity(15
// 출력// setDigitSegments (세그먼트 번호, [7개의 led, 아래점 1(ON), 0(OFF)]);
disp.setDigitSegments(0, [0, 0, 0, 0, 1, 1, 0, 1]); disp.setDigitSegments(1, [1, 0, 1, 1, 0, 1, 1, 1]);disp.setDigitSegments(2, [1, 0, 0, 1, 1, 1, 1, 1]);disp.setDigitSegments(3, [0, 1, 0, 0, 1, 1, 0, 1]);
DigitSegments 방식 출력하기
![Page 80: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/80.jpg)
7-Segment 출력하기
//max7219 패키지 초기화
var MAX7219 = require('max7219');var disp = new MAX7219("/dev/spidev0.0");
//세그먼트 초기화// 해독하는 모드 세그먼트의 led를 각각 제어하지 않고, 숫자 혹은 출력 가능한 문자를 입력한다.
disp.setDecodeAll(); disp.setScanLimit(8);disp.startup(); disp.setDisplayIntensity(15);
// 출력// 사용할 수 있는 값은 0 - 9, ‘H’, ‘E’, ‘L’, ‘P’, ‘-’, ‘ ‘이다
disp.setDigitSymbol(0, "H", true);disp.setDigitSymbol(1, 2);disp.setDigitSymbol(2, "L");disp.setDigitSymbol(3, "-", true);
DigitSymbol 방식 출력하기
![Page 81: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/81.jpg)
온습도 센서
//DHT11 패키지 초기화Var dht = require('node-dht-sensor');
//핀 번호 초기화dht.initialize(11, 21); // dht.initialize (온도센서 버전-11번 (DHT11), 핀 번호);
//1초에 한 번씩 온도와 습도 값 읽기setInterval(function(){
var dt = dht.read(); // 읽어오기console.log ('Temp: '+ dht.temp....);console.log ('Humd: '+ dht.humd....);
}, 1000);
1초에 한 번씩 온도, 습도 출력하기
![Page 82: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/82.jpg)
Appendix B
THINKER TO MAKER
부 록
![Page 83: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/83.jpg)
www.circul.us
1. WIFI 연결
1 2
3 4
Disconnected from circulus!!
![Page 84: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/84.jpg)
Raspbian OS 설치하기
https://www.raspberrypi.org/downloads/raspbian/
![Page 85: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/85.jpg)
Circulus OS 설치하기
rom.circul.us circul.us
![Page 86: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/86.jpg)
S/W를 손쉽게!!
www.npmjs.com
자바스크립트 관련 패키지를 사용해보자!
![Page 87: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/87.jpg)
S/W를 손쉽게!!
1. 센서 또는 기능 조회
2. npm 설치
3. 소스코드에서 require
1) 라즈베리파이를 지원하는지 확인한다.2) 클릭하여 설치하는 방법과 사용법을 확인한다
var wpi = require('wiring-pi');
SSH 사용법은부록 참조
![Page 88: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/88.jpg)
SSH 접속하기(접속 PC와 라즈베리파이가 같은 네트워크에 있을 때)
Raspberry Pi IP주소
RasbianID : piPWD : raspberry
Circulus OSID : piPWD : circulus
![Page 89: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/89.jpg)
Thank you감사합니다.
![Page 90: 라즈베리파이와 자바스크립트로 IoT 시작하기](https://reader036.vdocuments.site/reader036/viewer/2022081723/5872c5cc1a28ab0c718b62b5/html5/thumbnails/90.jpg)
W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US [email protected]
EXPAND YOUR DIMENSION
생각에 머무는 THINKER 에서
직접 만드는 MAKER 시대
CIRCULUS 가 함께 합니다
SINCE 2013