자바스크립트(JavaScript)로 배우는 피지컬 컴퓨팅(Physical Computing) — (6/8) 7-세그먼트에 온도 표시하기
이번 강좌에서는 센서로부터 읽은 온도 값을 7-세그먼트 디스플레이에 표시해보도록 하자.
준비물
- 라즈베리파이 피코 — 1개
- 브레드보드(Breadboard) — 1개
- 디지털 온습도 센서(DHT11) — 1개(모듈 형태도 무방)
- 4자리 7-세그먼트 디스플레이(공통 cathode 타입) — 1개
- 저항 (330Ω)— 8개
- 점퍼 와이어 — 여러 개
7-세그먼트 디스플레이
7-세그먼트 디스플레이(이하 FND — Flexible Numeric Display)는 7개의 LED(소숫점까지 포함하면 8개)를 숫자를 표현하기 위해 배열한 장치이다. 이 장치는 엘리베이터, 탁상시계 등 우리 주변에서 매우 쉽게 찾아볼 수 있다.
우선 1자리(1-digit) 숫자를 표현하는 FND를 살펴보자. 각각의 LED는 2개의 핀(anode, cathode)을 가지므로 산술적으로 계산해보면 8개의 LED를 가지고 있다면 16(=8x2)개의 핀이 필요하다. 그런데 생각해보면 음극 단자(cathode)들은 모두 GND로 연결될 것이기 때문에 그냥 1개의 핀으로 통합할 수 있다. 그래서 1자리수를 표현하는 FND는 총 9개(8+1)의 핀만 있으면 된다. 아래 그림을 보면 1자리 FND는 위아래 각각 5개핀, 총 10개의 핀이 제공된다. 위아래 핀개수를 맞추고 편의를 위해 GND핀을 위아래 각각 1개씩 총 2개를 제공한다. 이와 같이 음극(cathode)핀들을 하나로 묶은 형태를 공통 캐소드(common-cathode) 타입이라고 한다. 반대도 가능하다. 양극(anode) 핀들을 하나로 묶은 형태를 공통 아노드(common-anode) 타입이라고 한다. 이것은 VCC 핀에 전류를 공급해주고 나머지 핀에서는 LOW 를 입력해주면 LED가 켜질 것이다. FND를 구매할 때에는 이 두가지 타입 중 어떤 것인지 반드시 확인하고 구매해야 한다.
FND는 1자리(1-digit), 2자리(2-digit), 4자리(4-digit) 등 여러 자리수를 표현할 수 있는 다양한 종류가 있지만, 이 강좌에서는 4자리 FND를 사용하도록 하겠다. 4자리 FND는 총 12개의 핀을 제공하며 각 핀은 아래 그림과 같다. 공통 캐소드 타입의 경우 각 자리(digit)마다 공통 음극(cathode) 핀이 총 4개, 그리고 각 세그먼트를 공통으로 연결한 핀이 총 8개이다.
회로 구성
아래 그림과 같이 회로를 구성해보자. 선이 많아 다소 복잡해 보이지만 사실은 매우 단순하다. 먼저 DHT11 센서를 이전 강좌와 동일하게 연결한다. 그런 다음 7-세그먼트 디스플레이의 각 세그먼트 a ~ dp 핀을 Pico의 GPIO0 ~ GPIO7 핀에 순서대로 저항(330Ω)과 함께 연결해준다. 그리고 COM1 ~ COM4를 GPIO21 ~ GPIO18핀에 순서대로 연결한다.
FND 작동시켜 보기
위 그림과 같이 회로를 구성 하였다면, 우선 FND가 잘 작동하는지 테스트부터 해보자. 먼저 아래 코드를 터미널에 한줄씩 입력해서 첫째자리의 a 세그먼트 부분의 LED를 켜보자.
> pinMode(0, OUTPUT);
> pinMode(21, OUTPUT);
> digitalWrite(0, HIGH);
> digitalWrite(21, LOW);첫째 자리의 젤 위쪽의 a 세그먼트가 잘 켜졌는가? 이제 첫째 자리에 숫자 3을 표시해보자.
> const seg = [0, 1, 2, 3, 4, 5, 6, 7];
> pinMode(seg, OUTPUT);
> digitalWrite(seg, 0b11110010);pinMode() 함수에 핀 번호들을 배열로 넘겨주면 여러 핀들을 한꺼번에 모드를 설정할 수 있다. digitalWrite() 함수의 경우에는 핀 배열과 숫자 값을 넘겨주면 숫자의 각 비트를 해당 핀으로 값을 설정한다. 위 코드의 경우에는 이진수로 0b11110010 (십진수 242)을 넘겨주면 0, 1, 2, 3, 6번 핀을 HIGH로 나머지핀을 LOW로 설정한다. 이렇게 핀을 배열로 넘겨주면 여러 핀들을 한꺼번에 다룰 때 매우 편리하다.
그러면 다음으로 4자리 모두에서 3을 표시해보자.
> const dig = [21, 20, 19, 18];
> pinMode(dig, OUTPUT);
> digitalWrite(dig, 0b0000);모든 자리의 숫자 3이 표시되었을 것이다. 이제 이 상태에서 4번째 자리에만 숫자 0을 표시해보자.
> digitalWrite(seg, 0b11111100);이렇게 코드를 입력하면 4자리 모두에서 숫자 0이 표시될 것이다. 그 이유는 모든 자리의 각 세그먼트들이 서로 연결되어 하나의 핀으로 나와있기 때문이다. 그런데 이렇게 핀들이 연결되어 있으면 4개의 자리에 서로 다른 숫자를 표현할 수 없다. 예를 들어 숫자 1을 표현하기 위해 b와 c 세그먼트를 HIGH로 두면, 모든 자리에는 숫자 1 밖에 표현이 되지 않는다. 그래서 한번에 1자리만 표시하되 4자리를 아주 빠르게 돌아가면서 표시해주어야 한다. 그러면 눈의 잔상 현상으로 인하여 4자리가 모두 밝혀진것 처럼 보인다. 아래 코드를 업로드 해보자. 그러면 1234가 4자리에 각각 표시될 것이다.
이렇게 직접 FND를 다루어도 되지만 쉽게 사용할 수 있는 라이브러리가 있다.
온도 표시하기
자, 이제 DHT11 센서에서 읽어들인 온도 값을 FND에 표시해보자. 이전 강좌에서 생성했던 dht11-test 프로젝트를 열고 7-segment 라이브러리를 추가한다.
$ npm install https://github.com/niklauslee/7-segment --save그리고 아래와 같이 코드를 업데이트하고 다시 업로드 해보자.
5초마다 DHT11로 부터 온도를 읽어서 FND에 소숫점 1자리까지 표시한다. DHT11과 FND의 라이브러리를 사용하니 코드가 매우 간단해진다.
이번 강좌에서는 DHT11 센서에서 읽어온 온도 값을 7-세그먼트 디스플레이에 표시해보았다. 이제는 컴퓨터에서 분리해서 Pico에 전원만 넣어준다면(USB 케이블 또는 배터리 등) 디지털 온도계가 완성된 것이다. 케이스만 적절하게 만들어준다면 집에서 사용하기에도 나쁘지 않을것 같다 :) 다음 강좌에서는 좀 더 개선해서 OLED 그래픽 디스플레이를 사용해서 더 예쁘게 온도와 습도를 표시해보자.
