블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


 
 

아두이노 nodemcu로 온습도계를 만들어 보자


조대협 (http://bcho.tistory.com)


nodeMCU 개발환경 설정이 끝났으면 간단한 애플리케이션을 하나 만들어보자

온습도계를 만들어보도록 한다. 온습도를 측정하여 LED로 출력하는 모듈을 개발해보겠다.

개발이 끝나고 나서 아두이노 개발환경에 대한 결론 부터 이야기 하자면, 쉽다. 대부분의 파츠들에 대한 SDK가 제공되기 때문에 손쉽게 개발이 가능하다. 단 해당 파츠에 맞는 SDK를 찾는데 들억는 시간이 더 많다.

온습도계 센서 (DTH11)

개발에 사용할 온습도계 센서는 DTH11이라는 센서이다. 아래와 같이 생겼는데, 좌측이 데이타, 가운데가 3.3V, 가장 우측이 GND이다.



온도와 습도 두개를 측정하는데 데이타 단자가 하나이다. 아날로그 신호를 핀에서 직접 읽는 것이 아니라 SDK를 사용한다.  DTH11 라이브러리는 https://github.com/adafruit/DHT-sensor-library 에서 다운 받아서 사용하면 된다. Adafruit_sensor 라이브러리에 대한 의존성이 있기 때문에, 해당 라이브러리 https://github.com/adafruit/Adafruit_Sensor 도 같이 설치하도록 한다.


라이브러리 설치가 끝났으면, DTH11 센서를 브레드 보드에 설치한다 좌측을 GPIO G6 포트에, 가운데를 3.3V, 가장 우측은 GND에 연결한다.


I2C LCD

다음 습도와 온도를 출력하기 위해서 LCD를 사용한다. 여기서 사용한 LCD는 I2C LCD로 가로 16자로 2줄 (16x2) 를 출력할 수 있는 LCD이다.


앞판은 LCD가 있고




뒤에는 아래 그림과 같이 LCD 아답터가 붙어 있다.

  • VCC는 nodemcu의 Vin 핀에 연결한다. 이 핀은 5V의 전앞을 낸다.

  • GND는 nodemcu의 GND에

  • SCA는 nodemcu D2에

  • SCL은 nodemcu의 D1핀에 연결한다.



다음 이 LCD를 사용하기 위해서는 SDK를 설치해야 하는데, https://github.com/fdebrabander/Arduino-LiquidCrystal-I2C-library 라이브러리를 다운 받아서 설치한다.


코드

이제 코드를 보자

#include <LiquidCrystal_I2C.h>

#include "DHT.h"


#define LED D5            // Led in NodeMCU at pin GPIO16 (D0).

#define DHTPIN D6

#define DHTTYPE DHT11   // DHT 11


LiquidCrystal_I2C lcd(0x27, 16, 2);

DHT dht(DHTPIN, DHTTYPE);

float h,t;

void setup() {

 pinMode(LED, OUTPUT);    // LED pin as output.

 dht.begin();


 // LCD setting

 lcd.begin();

 lcd.backlight();

 lcd.print("Hello, world!");

 

 // Serial communication setting

 Serial.begin(9600);   

 Serial.print("Hello nodemcu");

}

void loop() {

 digitalWrite(LED, HIGH);// turn the LED off.(Note that LOW is the voltage level but actually

                         //the LED is on; this is because it is acive low on the ESP8266.

 delay(200);            // wait for 1 second.

 digitalWrite(LED, LOW); // turn the LED on.

 delay(200); // wait for 1 second.

 h = dht.readHumidity();

 t = dht.readTemperature();

 lcd.setCursor(0,0);

 lcd.print("Humidity:");

 lcd.print(h);

 lcd.setCursor(0,1);

 lcd.print("Temp :");

 lcd.print(t);

 Serial.print("H:");

 Serial.print(h);

 Serial.print(" T:");

 Serial.println(t);

}


DHT11 관련 코드

DHT11을 사용하려면, 입력 포트를 정의해야 하고 센서의 종류를 정의해야 한다.

#define DHTPIN D6

#define DHTTYPE DHT11   // DHT 11


DHT dht(DHTPIN, DHTTYPE);


에서 핀은 D6로 지정하고 DHTTYPE은 DHT11로 정의하였다.

다음 센서를 가동 시키기 위해서 setup() 에서


 dht.begin();


와 같이 DHT 센서를 가동 시켰다. 다음은 센서에서 온도와 습도를 읽어와야 하는데, loop() 함수내에서


 h = dht.readHumidity();

 t = dht.readTemperature();


readHumidity()와 readTemperature() 함수를 이용하여, 습도와 온도를 읽어왔다.


LCD 관련 코드

LCD를 사용하려면 초기화를 해줘야 하는데


LiquidCrystal_I2C lcd(0x27, 16, 2);


로 초기화를 해준다. 0x27는 LCD의 주소로, D1,D2 핀을 사용할때 사용하는 주소이다.핀의 위치가 바뀌면 이 주소도 변경 되어야 한다. 핀에 위치에 따라 주소가 다르거나 또는 인식이 안되는 경우가 있는데, http://playground.arduino.cc/Main/I2cScanner 를 이용하면 LCD가 연결이 되어 있는지 아닌지, 그리고 LCD의 주소를 알려준다.

다음 인자인 16,2는 가로 16자에 세로 2자 LCD 임을 정의해준다.


다음 초기화를 해줘야 하는데, setup()함수에서

 lcd.begin();

 lcd.backlight();

 lcd.print("Hello, world!");


로 초기화를 해준다. begin()은 LCD를 시작하는 것이고 backlight()는 LCD의 백라이트를 키도록 하는것이다. 글자를 출력하고 싶으면 print(“문자열")을 이용하면된다.

초기화가 끝났으면, DTH11 센서에서 읽은 값을 출력해주면된다.

윗줄에 습도 아랫줄에 온도를 출력할것인데

 lcd.setCursor(0,0);

 lcd.print("Humidity:");

 lcd.print(h);

 lcd.setCursor(0,1);

 lcd.print("Temp :");

 lcd.print(t);


윗줄 첫번째 위치 부터 습도를 출력할것이기 때문에, 출력 위치를  setCursor(0,0)으로 해서 맨 앞칸 첫줄로 지정을 해서 습도를 출력하고, 다음 온도는 setCursor(0,1)로 해서 맨 앞칸 두번째 줄 부터 출력하도록 하였다.



<그림. 완성된 모습 >

다음글에서는 이렇게 수집한 정보를 HTTP 를 이용해서 서버로 전송하는 코드를 추가해보도록 한다.


참고 자료


맥 OSX에서 nodeMCU와 Wemos D1 환경 설정하기


조대협 (http://bcho.tistory.com)


아두이노 우노로 아두이노 개발을 시작하고 서버 통신을 위해서 ESP8266 계열인 ESP01 칩을 사용했는데,  ESP01은 연결도 까다롭고 소프트웨어 시리얼을 사용해서 SDK를 찾기 어려운점도 있었다. 개발하고자 하는 내용이 대부분 서버와 통신을 하는 부분이기 때문에, 보드를 우노에서 ESP8266 을 메인 MCU로 하는 보드로 변경하였다.


후보군으로 올른것이 nodeMCU v2와 Wemos D1 보드이다.


<그림 nodeMCU v2와 Wemos D1 호환 보드>


nodeMCU의 경우에는 크기가 작고 성능이 뛰어날뿐 아니라, 널리 사용되는 보드이기 때문에, SDK나 예제를 구하기 쉬울것이라고 생각하였고, Wemos D1은 ESP8266을 포함하고 있으면서도 아두이노 우노와 유사한 레이아웃과 GPIO 핀 배열을 가지고 있기 때문에, 일반적인 개발에 좀더 편리하지 않을까 싶었다.


맥을 사용하기 때문에, OSX에 맞춰서 개발환경을 설정해야 했다.

USB 드라이버 설치

nodeMCU를 맥에 연결해도 MAC에서는 USB 포트를 인식하지 못한다. 이유는 nodeMCU와 통신할 USB 드라이버가 없기 때문에, nodeMCU는 아래 그림과 같이 USB 통신을 위해서 CP2102라는 칩셋을 사용한다. 그래서 이 칩셋을 위한 드라이버를 설치해줘야 한다.




드라이버를 https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers 에서 받아서 설치하면 된다. 이 드라이버는 Kernel Extension 이라는 형태인데 커널을 확장하는 기능이기 때문에 보안적인 제약사항을 받는다. 설치를 하더라도 바로 반영이 안되는데,  이유는 커널 확장 기능을 설치하려면 보안 승인을 해야 한다. USB 드라이버를 설치하고 나면 System > Preference에서 Security & Privacy 부분을 보면 아래와 같이 Kernel extension이 loading 되는 것이 블록 되어 있는 것을 볼 수 있다. 오른쪽의 Allow 버튼을 누르면 승인이 되고, 정상적으로 Kernel extension이 설치 된다.


제대로 설정이 되었는지를 확인하려면 OSX에서 해당 포트를 인지했는지 보면 되는데,

%ls /dev/tty.*

를 실행하면 다음과 같이


tty.SLAB_USBtoUART 이름으로 포트가 인식된것을 확인할 수 있다.


보드 추가

다음으로는 아두이노 개발환경인 Sketch에서 nodeMCU 보드 타입을 등록해야 한다.

Sketch 툴에서 Arduino > Preference 를 선택한다.

다음 아래와 같이 화면이 나오면 “Additional Boards Managers URLs”에

http://arduino.esp8266.com/stable/package_esp8266com_index.json

주소를 넣는다.


이렇게 해주면 Sketch에서 사용할 수 있는 보드의 종류가 추가로 등록된다. 다음 nodemcu를 사용하도록 보드를 선택해야 하는데, Tools > Boards 메뉴로 가서 아래 그림과 같이 node MCU v1.0을 선택한다.




통신 포트를 선택하고 다음 통신 속도를 921600으로 선택한다. 다음 제품 스펙에 맞게 아래 그림에서 “CPU Frequency”를 160Mhz로 조정하여서 실행하였다.


이제 개발 준비가 끝나고 개발을 진행하면 된다.



Wemos D1 환경 설정하기

Wemos D1 환경 설정도 크게 다르지 않다. 다만 USB 칩을 CH341칩셋을 사용하기 때문에, 맞는 드라이버를 설치해야 한다. 설치 방법은 동일하고, 드라이버는 https://wiki.wemos.cc/downloads 에서 다운로드 받을 수 있다. 보드 매니져에 보드를 추가해야 하는데, esp8266 계열이기 때문에, 앞에 추가한 보드 메니져에 이미 wemos d1이 들어가 있기 때문에, 이를 선택해서 사용하면 된다.


참고


라즈베리 파이 호환 보드 조사


라즈베리 파이를 구입해놓고 보니 단순한 소형 리눅스 머신이나. IO를 위한 GPIO 포트가 있는것 빼고는 크게 다르지 않다. 아두이노 시리즈도 호환 보드가 있는것 처럼, 라즈베리파이도 호환 보드가 있을것으로 생각하고 찾아보니 당연히 있다.

Orange PI



우분투,Debian, 라즈베리 파이 이미지 실행 가능


이름

CPU/GPU

메모리

디스크

가격

오렌지 파이 PC+

1.6Ghz 4 core

600Mhz GPU (OPEN GL ES)

1G

8G Flash

37500

오렌지파이 PC2

64bit 4 core, GPU 내장

1G

2MB Flush

40000

오렌지파이 라이트

4 core, 600MHz GPU

512M


25000


Banana PI


국내에서는 판매하는 곳이 많지 않고, 알리바바나 아마존을 통해서 구입해야 하는데, 기존 호환 보드에 비해서 8Core CPU를 탑재한 모델(12만원)이 있는등, 성능이 뛰어나다. 가격은 고가인편. 성능이 좋은편인데, 국내에서 많이 보편화 되지 않은 것은 아무래도 가격 때문인듯

Asus Tinker Board


1.8 GHZ, 4 코어 CPU, 600 Mhz GPU, 2GB 메모리, 가격대는 15만원선 국내에서는 판매하는 곳이 그리 많지 않음


비글본 블랙



1GHz Arm CPU, GPU 지원, 512M, 4G Flash, WIFI 지원으로 약 13만원선


국내에서 구매가 편리하고 가격대가 좋은 보드로는 오렌지 보드가 가성비 측면에서 가장 좋지 않은가 싶다.

라즈베리파이 3B+가 64비트 쿼드 코어 + 1G 메모리에 43000원 정도의 가격을 형성하는데.

오렌지 보드 PC+의 경우 32비트 쿼드코어 + 1G 메모리에 8G 온보드 플래시를 지원하면서 37000원정도이다.  PC2 모델의 경우 64비트 쿼드코어에 1G메모리에 플래시는 탑재하지 않고 40000원 수준이다.

크게 가격적인 차이는 없지만, 세세한 스펙상의 차이가 있기 때문에, 호환 보드를 고민해도 좋지 않을까 싶은데, 가격적인 차이가 크지 않기 때문에, 개발을 시작하는 입장에 있어서는 코드나 장비 호환성 측면에서 라즈베리 파이로 시작하는게 좋을것 같고, 소형 장비를 개발할때는 오렌지 보드를 고민하는 것도 좋지 않을까 한다.


아두이노, ESP8266,ESP 32 성능 비교


와이 파이 통신 모듈을 사용해보니, ESP8266이나 ESP32를 MCU로 하는 보드들을 메인 보드로 사용하는 경우가 많아서, 아두이노 우노나 메가와 같은 보드 없이도 이 보드들만으로도 성능이 충분할까해서 성능 비교표를 찾아보았다. 일단 결론 부터 이야기 하면, 아두이노 시리즈는 성능이 비교가 안된다. ESP32가 가장 빠르고, ESP8266 모델만 해도 상대적으로 매우 높은 성능을 낸다.



소스 : https://hilo90mhz.com/arduino-esp32-esp8266-101-speed-test-comparison-chart/


ESP01 (ESP8266)을 이용한 HTTP 통신


조대협 (http://bcho.tistory.com)


하드웨어 시리얼과 소프트웨어 시리얼

앞의 글에서 ESP01을 연결해봤는데, ESP01 연결시에 포트를 2,3번 포트를 사용하고, 코드는 SoftSerial 라이브러리를 이용하였다. 아두이노 우노의 0,1 번포트는 시리얼 통신을 위한 RX,TX 포트이다. 이를 Hardware Serial 이라고 한다. 그러면 하드웨어 시리얼 포트를 사용하지 않고 2,3번 포트를 사용한 후에 소프트웨어 시리얼 처리를 한 이유는 무엇을까?


하드웨어 시리얼 포트는 PC와 연결되어 있을때 PC와 통신을 목적으로 사용된다. 그래서 하드웨어 시리얼을 사용하지 않은것인데, ESP8266 관련 라이브러리들을 살펴보니, 대부분 하드웨어 시리얼을 사용하는 것으로 보인다. 그러면 이 문제를 어떻게 해결할것일까?


아두이오 우노 기판을 보면 TX와 RX라고 써있는 LED 가 있는데, 하드웨어 시리얼 통신을 할때만 깜빡 거린다.




PC에 연결이 되어 있을 때, AT 명령을 실행할때는 이 LED가 빛나지 않고, 코드를 업로드 할때만 빛이 난다. 즉 코드 업로드 시에만 하드웨어 시리얼을 PC가 사용한다는 것이기 때문에, 코드를 업로드한후에 ESP01 보드를 TX,RX 단자에 연결하면 하드웨어 시리얼을 사용할 수 있다.

아두이노를 이용한 HTTP 통신

아두이노에 ESP01 모듈을 연결했으면, HTTP 통신을 해보도록 한다. ESP01 (ESP8266 계열)은 TCP/UDP 스택이 이미 들어가 있기 때문에, TCP 통신은 가능하다. HTTP 통신을 하려면 TCP 프로토콜을 이용하여 HTTP 메세지를 보내주면 되는데, AT 명령어를 사용하면 된다.

AT 명령어 레퍼런스는 https://www.electrodragon.com/w/ESP8266_AT-Command_firmware 를 참고하기 바란다. AT명령을 이용하여 WIFI 네트워크에 연결하는 방법은 http://bcho.tistory.com/1283 에 설명되어 있다. WIFI 네트워크에 연결되어 있다고 가정하고 AT명령을 이용해서 HTTP 명령을 보내는 방법을 보자


HTTP  서버 연결

HTTP 요청을 보내기 위해서 먼저 웹서버에 TCP 커넥션을 연결해야 한다. TCP 커넥션 연결 명령어는 AT+CIPSTART로 다음과 같다.


AT+CIPSTART={TCP 연결 번호},”TCP”,”웹서버IP”,{포트번호}


이 명령은 해당 웹서버 IP의 포트로 연결을 하고 연결 번호(이름)를  “0”으로 지정한것이다.

210.118.92.89 서버의 80 포트로 연결하려면 Serial 콘솔에서 AT+CIPSTART=0,”TCP”,”210.118.92.89”,80 명령어를 실행하면 된다. 이 연결의 연결 번호는 0 번이 된다.

명령어 전달

서버로 연결이 되었으면, HTTP 명령어를 보내야 하는데, 명령어 전달은 AT+CIPSEND 명령어를 사용하면 된다. 명령어의 형식은 다음과 같다.


AT+CPISEND={TCP 연결번호},{보내고자 하는 메세지 길이}


예를 들어 “GET /index.html” 명령을 0번 TCP 연결로 보내고자 하면, 메세지의 길이가 15자이기 때문에,

AT+CPISEND=0,15 로 실행하고, 그 다음에

> 가 나오면 GET /index.html 을 전송하면 된다.

예제

실제 개발에서는 콘솔에서 AT 명령을 직접 입력해서 사용하는 것이 아니기 때문에, 이를 코드화 해야 하는데, 아래는 코드화 한 예제이다. (실제 개발에서는 사용하지 않을것이기 때문에 테스트는 하지 않았다)

#include <SoftwareSerial.h>


SoftwareSerial esp(2,3); //TX,RX

String SSID="{Wifi SSID}";

String PASSWORD="{Wifi password}";


void connectWifi(){

 String cmd = "AT+CWMODE=1";

 esp.println(cmd);

 cmd ="AT+CWJAP=\""+SSID+"\",\""+PASSWORD+"\"";

 esp.println(cmd);

 delay(1000);

 if(esp.find("OK")){

   Serial.println("Wifi connected");

 }else{

   Serial.println("Cannot connect to Wifi"+esp);

 }

}


void httpGet(String server,String uri){

 String connect_server_cmd = "AI+CIPSTART=4,\"TCP\",\""+server+"\",80";

 esp.println(connect_server_cmd);

 String httpCmd = "GET "+uri;

 String cmd = "AT+CIPSEND=4,"+httpCmd.length();

 esp.println(cmd);

 esp.println(httpCmd);


}

void setup() {

 // put your setup code here, to run once:

 esp.begin(9600);

 Serial.begin(9600);

 connectWifi();

 httpGet("210.192.111.122","/index.html");

}


void loop() {

 // put your main code here, to run repeatedly:


}


위의 붉은 색으로 표시된 부분을 보면 번호 4번으로 TCP연결을 열고, 4번 채널에 AT+CIPSEND 명령을 이용하여 GET /index.html 을 실행하였다.

SDK의 활용

HTTP 통신의 기본 원리를 이해하였으면, 이제 실제로 HTTP 호출을 해보자. AT 명령을 이용해도 되지만,  HTTP 명령어 종류가 많고, 연결, 메세지 전송/받기등 다양한 명령을 AT 명령으로 직접 코딩하기에는 코딩양이 많고 복잡해진다. 그래서 이런 명령을 잘 추상화하여 단순화 해놓은 SDK를 사용하는 것이 좋은데, 아두이노가 오픈 소스인 만큼, 오픈소스 기반의 SDK가 많다. 장점이기도 하지만 반대로 단점도 되는데, 아두이노나 ESP8266 펌웨어의 버전이 낮으면 동작하지 않는 경우도 있고, 또한 많은 라이브러리들이 아두이노 WIFI 실드를 기준으로 개발되었거나 또는 아두이노 → ESP8266으로 통신하는 용도가 아닌 ESP8266 기반의 아두이노 보드를 기준으로 개발된 라이브러리가 많다.

아두이노 라이브러리 추가하기

우리가 사용할 라이브러리는 WiFiESP라는 라이브러리 (https://github.com/bportaluri/WiFiEsp) 로 소프트웨어 시리얼과 하드웨어 시리얼 통신 양쪽을 모두 지원하며, HTTP 형태로 라이브러리가 잘 패키징 되어 있다. 또한 예제가 비교적 잘 정리되어 있어서 사용하기 좋다.

이런 오픈소스 라이브러리를 사용하려면 라이브러리를 설치해야 하는데, 설치 방법은 다음과 같다.

github에 배포된 코드의 경우, 해당 코드를 아래 그림과 같이 download 버튼을 이용하여 zip 파일로 다운로드 받는다.




다음 Sketch에서 Sketch > Include Library > Add .Zip Library 를 선택해서 앞에서 다운 받은 ZIP 파일을 선택하면 라이브러리로 등록되어 사용이 가능하다.




SDK를 이용하여 HTTP 호출


아래코드는 라이브러리를 추가한후에, 예제에 나온 코드를 그대로 사용한 예이다. 아두이노 2,3번 핀을 ESP01의 TX,RX 핀에 연결해서 소프트웨어 시리얼로 통신하였다. 그래서 코드 부분을 보면 SoftwareSerial Serial1(2,3)으로 소프트웨어 시리얼로 선언되어 있는 것을 확인할 수 있다.


#include "WiFiEsp.h"


// Emulate Serial1 on pins 6/7 if not present

#ifndef HAVE_HWSERIAL1

#endif

#include "SoftwareSerial.h"

SoftwareSerial Serial1(2, 3); // RX, TX


char ssid[] = "{WIFI SSID}";            // your network SSID (name)

char pass[] = "{WIFI Password}";        // your network password

int status = WL_IDLE_STATUS;     // the Wifi radio's status


char server[] = "arduino.cc";


// Initialize the Ethernet client object

WiFiEspClient client;


void setup()

{

 // initialize serial for debugging

 Serial.begin(9600);

 // initialize serial for ESP module

 Serial1.begin(9600);

 // initialize ESP module

 WiFi.init(&Serial1);


 // check for the presence of the shield

 if (WiFi.status() == WL_NO_SHIELD) {

   Serial.println("WiFi shield not present");

   // don't continue

   while (true);

 }


 // attempt to connect to WiFi network

 while ( status != WL_CONNECTED) {

   Serial.print("Attempting to connect to WPA SSID: ");

   Serial.println(ssid);

   // Connect to WPA/WPA2 network

   status = WiFi.begin(ssid, pass);

 }


 // you're connected now, so print out the data

 Serial.println("You're connected to the network");

 

 printWifiStatus();


 Serial.println();

 Serial.println("Starting connection to server...");

 // if you get a connection, report back via serial

 if (client.connect(server, 80)) {

   Serial.println("Connected to server");

   // Make a HTTP request

   client.println("GET /asciilogo.txt HTTP/1.1");

   client.println("Host: arduino.cc");

   client.println("Connection: close");

   client.println();

 }

}


void loop()

{

 // if there are incoming bytes available

 // from the server, read them and print them

 while (client.available()) {

   char c = client.read();

   Serial.write(c);

 }


 // if the server's disconnected, stop the client

 if (!client.connected()) {

   Serial.println();

   Serial.println("Disconnecting from server...");

   client.stop();


   // do nothing forevermore

   while (true);

 }

}



void printWifiStatus()

{

 // print the SSID of the network you're attached to

 Serial.print("SSID: ");

 Serial.println(WiFi.SSID());


 // print your WiFi shield's IP address

 IPAddress ip = WiFi.localIP();

 Serial.print("IP Address: ");

 Serial.println(ip);


 // print the received signal strength

 long rssi = WiFi.RSSI();

 Serial.print("Signal strength (RSSI):");

 Serial.print(rssi);

 Serial.println(" dBm");

}


접속하고자하는 서버의 주소는

char server[] = "arduino.cc";

에 arduino.cc 로 정의되어 있고


   client.println("GET /asciilogo.txt HTTP/1.1");

   client.println("Host: arduino.cc");

   client.println("Connection: close");

   client.println();


명령어를 이용해서 arduino.cc/asciilogo.txt 파일을 HTTP GET으로 읽어오게 되어있다.

읽어온 응답값을

 while (client.available()) {

   char c = client.read();

   Serial.write(c);

 }


코드를 이용해서 client.read를 통해서 한글자씩 읽어온후 화면에 출력하기 위해서 Seirial.write(c)를 이용하여 한글자씩 콘솔에 출력하였다.

실행 결과는 다음과 같다.



결론

테스트를 하면서 가장 어려웠던 점이 아두이노 우노에서 ESP01 로 소프트웨어 시리얼 통신을 하는 경우 HTTP나 WIFI SDK를 찾기가 어려웠다. 대부분 ESP8266을 MCU로 하는 보드 (예를 들어 nodeMCU, ESP12,Wemo D1/D1 mini)를 베이스로 하는 경우가 많았는데, 그도 그럴것이 개발이나 테스트 용도가 아니라 실제 디바이스로 만들어서 사용하려면 우노 + ESP01 조합은 크기도 크고 연결도 복잡해서 효용성이 없다. 네트워크 통신을 하는 시나리오등은 IOT와 같이 센서 데이타를 얻어서 서버에 전송하는 케이스이기 때문에,  하나의 소형 디바이스로 처리가 가능하다면 하나의 디바이스를 사용하는 것이 훨씬 효율적이다. (가격이나 배터리 용량면등).

다음 글에서는 실제로 센서에서 데이타를 읽어서 HTTP를 이용해서 서버에 전송하는 부분을 고민해보도록 하겠다.

참고자료



ESP01 (ESP8266) 사용하기

프로그래밍/아두이노 | 2018.09.30 00:00 | Posted by 조대협

아두이노 ESP01 모듈 사용하기

조대협 (http://bcho.tistory.com)

아두이노 WIFI 모듈

아두이노 WIFI 모듈은 여러가지가 있는데, 아두이노용으로 나온 와이파이 실드의 경우에는 가격이 비싸다. (아두이노에서 WIFI 연결하는 방법은 http://bcho.tistory.com/1280 자료 참고) 그래서 가장 범용적으로 사용되는 칩셋은 ESP8266 칩셋인데, ESP8266 칩셋으로 나온 보드는 여러가지가 있다. ESP01~ESP14 모듈등이 있고, 조금더 사용이 편한 모듈로는 nodemcu와 같은 모듈이 있다.




ESP8266 모듈 시리즈 https://en.wikipedia.org/wiki/ESP8266

오늘 다루는 모듈은 이중에서 가장 저렴한 ESP01 모듈이다.

아두이노에서 이모듈을 사용하기에는 몇가지 넘어야할 산이 있다.

전원

ESP 01은 3V로 동작을 하는데, 전류 소모량이 많다. 그래서 아두이노 보드의 3.3V 단자에 연결하게 되면 전력양이 낮아서 오작동하는 경우가 많고 GND와 전원으로 들어가는 선이 많아서, 아래와 같이 배선이 복잡해진다.


<출처 : https://m.blog.naver.com/roboholic84/221261124179>

통신속도와 펌웨어 업그레이드

그리고 가장 난관중 하나가, 아두이노의 시리얼 통신의 경우 9600bps를 사용하는데, 불행하게도 ESP01의 기본 통신속도는 115200bps로 설정되어 있기 때문에 펌웨어 업그레이드를 통해서 디폴트 통신 속도를 9600 bps로 변경해줘야 한다. 이 과정에 여러 배선 설계를 해야 하고 별도의 펌웨어 업그레이드 프로그램을 설치해야하기 때문에 그 과정이 까다롭다.



<그림 USB to ESP01 연결 아답터>

그래서 아두이노 보드를 거치지 않고 바로 PC USB에서 ESP01로 연결을해서 쉽게 펌웨어를 업데이트할 수 있게 해주는 USB to ESP01 아답터가 있기는 하지만 여전히 펌웨어 업데이트가 필요하다.


ESP01 아답터

그래서 검색을 하다 찾은 아답터가 ESP01 아답터 이다.


이렇게 아답터 위에 ESP01 보드를 설치하면 되는 형태이다. (구매 링크)

https://m.blog.naver.com/roboholic84/221261124179 글에 상세한 소개와 설명이 잘 나와 있는데, 따라해보니 ESP01의 펌웨어 자체가 업그레이드 되어 있어서, 명령어가 동작하지 않는 부분이 있어서 몇가지 수정을 하였다. 포스팅 내용을 참고하여 몇가지 부분을 수정하였다.

배선 작업은 아래와 같다.


대략 빵판에 연결하면 다음과 같은 모습이된다.



레큘레이터가 내장되어 있기 때문에 아두이노 5V에 VCC를 연결하면 되고, RX와 TX를 각각 3번과 2번 포트에 연결한다.

다음에 아래와 같은 코드를 작성하여 실행한다.

#include <SoftwareSerial.h>


SoftwareSerial mySerial(2, 3); // RX, TX


void setup() {

 Serial.begin(9600);

 mySerial.begin(115200);

}


void loop() {

 if (mySerial.available()) {

   Serial.write(mySerial.read());

 }

 if (Serial.available()) {

   mySerial.write(Serial.read());

 }

}


위의 예제는 아두이노 콘솔에서 받은 명령을 ESP01 시리얼 포트로 전송하고 ESP01 에서 나온 결과값을 아두이노 콘솔에 출력하도록 하는 코드이다. ESP01의 디폴트 통신속도가 115200이기 때문에 mySerial.begin에서 통신 속도를 115200으로 설정하였다. (추후 바꿀것이다.)


를 실행해서 AT 명령을 실행해보자. 연결이 제대로 되었으면 아래와 그림과 같이 OK 응답이 오는 것을 볼 수 있다.



다음 ESP01 보드의 통신 속도를 변경해보자,원본 문서에는 AT+CIOBAUD=9600 명령으로 변경하도록 되어 있는데, 이 명령은 최신 펌웨어에서는 동작하지 않고 AT+IPR이라는 명령을 사용해야 하는데, 이 명령은 연결되어 있는 동안만 통신 속도를 변경하고 다시 ESP01 디바이스를 뺐다가 다시 끼면 원래 통신속도로 돌아간다.

ESP01의 통신속도를 영구적으로 바꿔줄 수 있는 명령이 있는데, AT_UART_DEF라는 명령을 사용하면 된다. (참고 : https://www.esp8266.com/viewtopic.php?f=13&t=718)

사용법 : AT+ UART_DEF=<baudrate>,<databits>,<stopbits>,<parity>,<flow control>


통신속도를 9600으로 영구적으로 변경하기 위해서는 아래 명령을 수행한다.

AT+UART_DEF=9600,8,1,0,0



통신 속도를 9600으로 변경하였기 때문에 코드상에서도 ESP01로 통신하는 속도를 9600으로 변경해줘야 한다.

 mySerial.begin(115200);

부분을

 mySerial.begin(9600);

으로 변경하여 실행하자


WIFI 연결 테스트

네트워크 모드

ESP8266은 네트워크 연결에 대해 3가지 모드를 제공한다.

  • 1 : Stand alone

  • 2 : AP

  • 3 : AP + Standalone

Stand alone 모드는 클라이언트로 작동하는 모드로 AP에 붙어서 네트워크 통신을 할 수 있다.

AP 모드는 ESP8266이 서버가 되는 모드로 다른 단말이 ESP8266에 Wifi로 연결될 수 있게 한다. 그리고 AP+Stand alone 모드는 서버와 클라이언트를 동시에 지원하는 모드이다. 여기서는 1번 AP+Standalone 모드를 사용하도록 하겠다.

모드 전환은 AT+CWMODE={모드 번호}로 가능하다


WIFI 연결하기

클라이언트 모드로 연결을 하였으면 WIFI에 연결해보자.

WIFI 목록을 찾는 명령은 AT+CWLAP 이다. 명령을 실행하면 아래 그림과 같이 연결 가능한 WIFI 목록이 출력된다.


다음 AT+CWJAP=”SSID”,”비밀번호" 명령을 이용하여 연결하고자 하는 WIFI 네트워크에 연결이 가능하다. 여기서는 U+NetC070 네트워크에 연결해보도록 하겠다

AT+CWJAP="U+NetC070","WIFI비밀번호"


명령을 실행하면 아래와 같이 WIFI에 연결이 된것을 확인할 수 있다.



연결이 완료 되었으면

AT+CIFSR

명령을 이용하면 연결된 IP 주소를 읽어낼 수 있다.


이렇게 연결이 된 상태에서는 아두이노의 전원을 껐다가 켜도 다시 같은 네트워크로 자동으로 붙기 때문에, 연결을 명시적으로 끊으려면

AT+CWQAP

명령을 이용하여 명시적으로 연결을 끊어줘야 한다.

다음글에서는 ESP01 모듈을 이용하여 서버와 HTTP 통신을 하는 방법에 대해서 알아보도록 한다.



서보 모터 제어

프로그래밍/아두이노 | 2018.09.28 00:11 | Posted by 조대협


서보 모터 컨트롤 하기


아두이노에서 컨트롤 할 수 있는 모터중 한 종류인 서보 모터를 제어해봤다.

서보 모터는  (Servo Motor) DC 모터와는 다르게 정밀한 컨트롤이 가능한 모터이다.

정확한 각도나 속도로 회전을 할 수 있다. 


테스트에 사용한 모터는 저렴한 서보 모터를 사용했는데, 그래서 그런지 90도, 180도로 각도를 돌려봐도 정확하게 90도, 180도로 돌지는 않았다.


서보 모터는 종류에 따라서 180도만 회전하는 모터, 360 회전하는 모터등으로 최대 회전 각이 다르다.




이런 모양으로 생겼는데, 붉은 선은 5V, 갈색선은 GND, 오렌지 선이 컨트롤 선이다.

이 선을 아래 그림과 같이 9번 핀에 연결하였다.



그리고 아래와 같은 예제 코드를 사용하였다.


#include<Servo.h>


Servo servo;

int value = 0;

void setup() {

  // put your setup code here, to run once:

  servo.attach(9);

  servo.write(0);

  delay(3000);

  servo.write(90);

  delay(3000);

  servo.write(0);

}


void loop() {

  // put your main code here, to run repeatedly:


  servo.write(value);

  value+=10;

  delay(500);

  if(value > 180)

    value = 0;

    

}


Servo.h 라이브러리를 사용해야 하는데, 이클립스에서는 include 에러가 난다. C/C++ 컴파일러 경로 설정을 변경해야 하는데, 귀찮아서 패스. 그냥 아두이노 IDE를 사용하였다.


servo.write에 각도를 인자를 주면 그 각도로 회전이 된다.





아두이노 무선 통신 모듈

프로그래밍/아두이노 | 2018.09.21 00:41 | Posted by 조대협

아두이노 무선 통신 모듈


아두이노를 어느정도 테스트해보니, 서버에 붙여서 몬가를 해봐야겠다는 생각에 와이파이 지원 모듈을 찾다보니 꽤나 복잡해서 정리를 해본다.

아두이노의 무선 통신 모듈은 원래 아두이노 와이파이 실드라는 파츠로, 아두이노 우노 위에 붙여서 사용하는 형태 였는데, 사용방법은 편리하나 가격이 비싼 편이고, 아두이노 우노 시리즈에만 호환되는 단점을 가지고 있다.


<그림 아두이노 와이파이 실드 정품 >


그러다가 WIFI가 대중화된것이 ESP8266 이라는 칩셋인데, 아주 저렴한 가격에 (인터넷에서 2000원 수준) 이를 통해서 많이 대중화가 되었다.

<그림 AI Cloud사의 ESP8266 모듈>

가격은 저렴하지만 3.3V 전류를 사용하기 때문에, 별도의 저항등의 배선 설정이 필요하고, 특히 시리얼 라인 속도도 조정해야 하고, 펌웨어를 업그레이드해야 하는등 번거로운 작업이 필요하다. (특히 나같은 맥북 사용자에게는 쥐약인..)

ESP8266 모듈의 호한 모듈로는 AI Thinker사의 제품이 많은데 ESP-OO 식의 이름을 가지고 있는데, 인터넷 상에서 파는 제품은 ESP-12 시리즈가 많다. ESP-12등은 ESP8266 모듈 호환이라고 생각하면 된다. 


그래서 대체품을 찾은것이 nodemcu 라는 제품인데

<그림 ESP8266 기반의 nodemcu>


ESP 8266 모듈을 기판에 붙여 놓고 입출력 IO핀을 제공하면서도, USB 단자가 있어서 펌웨어 업그레이드를 상대적으로 편하게 할 수 있으며, Lua 스크립트로도 코딩이 가능하다.

즉 아두이노가 없이도 단독적으로 기능 수행이 가능하다는 이야기인데, 크기가 작고 와이파이 기능이 탑재되어 있어서 IOT 기기류로 많이 활용되는 듯하다. 특히 Lua 의 경우 HTTP나 MQTT와 같은 IOT 프로토콜을 손쉽게 호출할 수 있는 라이브러리가 있어서 어떤면에서는 아두이노보다 통신 프로그램에는 유리하지 않은가 싶다. 


ESP8266이 많이 사용되기는 했지만, 다음 버전으로 ESP32 라는 프로세서가 등장하는데, WIFI뿐 아니라 블루투스 통신을 함께 지원한다.

아무래도 후속 기중인 만큼 더 많은 GPIO 포트와, 더 빠른 WIFI통신을 지원하기는 하지만, 가격이 약간 더 비싸다는 단점이 있다. (6$~12$선)


<그림 ESP 32S 칩을 내장한 nodemcu 모듈 >


그외에, 아두이노 호환보드중에는 WIFI 기능을 내장한 보드들이 꽤 많다. 대표적인 보드로는 Wemos 사의 제품이 있는데, ESP8266 을 메인 CPU로 한후에, 우노에 맞는 사이즈와 핀 배열과 기능을 제공하면서 기본적으로 ESP8266 기반의 와이파이 통신을 지원한다. 


또는 아두이노 WIFI 실드 제품을 사용하는 것도 방법이 된다.






'프로그래밍 > 아두이노' 카테고리의 다른 글

ESP01 (ESP8266) 사용하기  (1) 2018.09.30
서보 모터 제어  (0) 2018.09.28
아두이노 무선 통신 모듈  (1) 2018.09.21
아두이노 기울기 센서와 소음 센서  (0) 2018.09.18
아두이노 조도 센서  (0) 2018.09.16
Hello 아두이노  (0) 2018.09.16

아두이노 기울기 센서와 소음 센서


아두이노 기울기와 소음센서를 간단하게 테스트 해봤다.


소음 센서

소음 센서는 소리가 나면 그 값을 아닐로그값으로 바꿔서 준다. +5V와 GND에 연결하고, 데이타값은 아날로그 포트에 연결해서 받는다. 



아래는 간단한 코드

#include <Arduino.h>


void setup() {

Serial.begin(115200);

}


void loop() {

int sound = 1024-analogRead(A0);

Serial.println(sound);

delay(20);

}


--- 9월 18일 수정 ---

위의 센서는 아날로그가 아니라 디지털임.

소리가 날때, 작은 값이 나오고, 소리가 안날때 1024값이 나오는데, 이건 중간에 가변 저항을 돌려보면 반대로 만들 수 있음 (포텐셔미터라고들 부르는데)

"디지탈 센서의 출력을 아날로그로 읽었으니 0과 1024 혹은 그에 가까운 값이 나오는것이 맞고, 그 사이값 30, 600, 900 이런 값들은 디지탈 출력이 빠른 시간에 ON/OFF 되는 것이 마치 PWM 출력처럼 읽혀서 나오는 값입니다." 커뮤니티에서 임성국님이 정리해주신 내용


기울기 센서

각도등은 받을 수 없고, 디지털 센서로 기울어진 여부만 측정한다.



마찬가지로 5V와 GND 단자에 연결한 후에, 데이타 단자를 디지털 단자에 연결하고, 이 단자를 입력값으로 설정하여 기울어진 여부를 입력 받는다.


#include <Arduino.h>


void setup() {

pinMode(13,INPUT);

Serial.begin(115200);


}


void loop() {

boolean tilt = digitalRead(13);

delay(300);

Serial.print(tilt);


}





'프로그래밍 > 아두이노' 카테고리의 다른 글

ESP01 (ESP8266) 사용하기  (1) 2018.09.30
서보 모터 제어  (0) 2018.09.28
아두이노 무선 통신 모듈  (1) 2018.09.21
아두이노 기울기 센서와 소음 센서  (0) 2018.09.18
아두이노 조도 센서  (0) 2018.09.16
Hello 아두이노  (0) 2018.09.16

아두이노 조도 센서

프로그래밍/아두이노 | 2018.09.16 00:59 | Posted by 조대협

가지고 있는 센서가 몇개 안되서, 그중에 간단한 조도 센서를 테스트해봤다.

5V와 아날로그 INPUT 단자를 이용하면, 쉽게 값을 받을 수 있다.




코드는

#include <Arduino.h>


void setup() {

Serial.begin(115200);

}


void loop() {

int light = analogRead(A0);

Serial.println(light);

delay(500);

}


특별한 부분은 없고, analogRead 함수를 써서, 읽고자 하는 아날로그 포트를 지정해주면 된다.

노트북 빼고 연결 가능하게, 외부 전원 설치방법과, WIFI 연결, HTTP REST API 호출, LCD 출력등을 좀 더 테스트 해봐야겠다.

SERVO 모터를 이용해서, 조정하는 것도 해보고. 이걸 하면 로보트팔을 만들 수 있지 않을까?



'프로그래밍 > 아두이노' 카테고리의 다른 글

ESP01 (ESP8266) 사용하기  (1) 2018.09.30
서보 모터 제어  (0) 2018.09.28
아두이노 무선 통신 모듈  (1) 2018.09.21
아두이노 기울기 센서와 소음 센서  (0) 2018.09.18
아두이노 조도 센서  (0) 2018.09.16
Hello 아두이노  (0) 2018.09.16

Hello 아두이노

프로그래밍/아두이노 | 2018.09.16 00:39 | Posted by 조대협


잠깐 아두이노를 만져보고 단상 노트


우연한 기회에 아두이노를 보게 되서, 예전에 딸 학습용으로 사놨던 아두이노 키트를 꺼내서 이리저리 만져보았다.

요즘 아이들이 아두이노로 메이커를 많이 한다고 해서, 난이도가 높지 않을것이라고는 예상 했지만, 직접 해보니, 상당히 심플하다.

개발 환경 설정에서 부터, 코드를 올리는 과정까지 IDE에서 손쉽게 접근이 가능하고, 브래드보드 덕분인지, 회로 구현도 편하고, 부품 수급도 편리하다.

더군다나, 시장에 많이 풀린 덕분인지 컨텐츠도 무궁무진해서, 손쉽게 접근이 가능하다.


13개의 핀을 IN/OUT으로 설정하고 단순하게 신호를 보내거나 받아서 처리하는 구조인데...

저항이나 콘덴서와 같은 전자 부품을 어떻게 다룰지 약간 걱정은 되지만, 아이들도 한다고 하니, 크게 문제는 없을듯 하다.


대략 감도 잡고 환경도 구축을 했는데, 무엇을 해볼까 고민중

아무래도 백앤드 전문이니, WIFI 를 달아서, 센서로 값들을 수집하는 IOT 시나리오를 구축하는 것도 괜찮을거 같고

ML API나 쳇봇 API를 이용해서, 간단한 로봇을 만들거나, 아니면 라즈베리 파이로 넘어가서 텐서플로우 모델을 내려보는것도 괜찮을거 같기는 한데, 어떤 시나리오를 할지 역시 아이디어가 문제다.





아래는 오늘 개발 환경 구축에 참고한 영상인데, 아무래도 이클립스와 같은 툴에 익어 있다 보니, 아두이노 정식 IDE보다는 이클립스가 날거 같아서 설치했는데, 역시 요즘은 글보다는 영상이 대세인가 보다. 이해도 빠르고.. 따라하기도 편리하다. 블로그 대신 이제 영상으로 넘어가야 하나??



'프로그래밍 > 아두이노' 카테고리의 다른 글

ESP01 (ESP8266) 사용하기  (1) 2018.09.30
서보 모터 제어  (0) 2018.09.28
아두이노 무선 통신 모듈  (1) 2018.09.21
아두이노 기울기 센서와 소음 센서  (0) 2018.09.18
아두이노 조도 센서  (0) 2018.09.16
Hello 아두이노  (0) 2018.09.16

구글 프로토콜 버퍼 (Protocol buffer)

프로그래밍 | 2017.06.25 19:30 | Posted by 조대협


구글 프로토콜 버퍼

조대협 (http://bcho.tistory.com)


텐서 플로우로 모델을 개발하다가 학습이 끝난 모델을 저장하여, 예측하는 데 사용하려고 하니, 모델을 저장하는 부분이 꽤나 복잡하여 찾아보니, 텐서플로우는 파일 저장 포맷을 프로토콜 버퍼를 사용한다는 것을 알았다.


그래서, 오래전에 살펴보았던 프로토콜 버퍼를 다시 살펴보았다.

개요 및 특징

프로토토콜 버퍼는 구글에서 개발하고 오픈소스로 공개한, 직렬화 데이타 구조 (Serialized Data Structure)이다. C++,C#, Go, Java, Python, Object C, Javascript, Ruby 등 다양한 언어를 지원하며 특히 직렬화 속도가 빠르고 직렬화된 파일의 크기도 작아서 Apache Avro 파일 포맷과 함께 많이 사용된다.

(직렬화란 데이타를 파일로 저장하거나 또는 네트워크로 전송하기 위하여 바이너리 스트림 형태로 저장하는 행위이다.)


특히 GRPC 라는 네트워크 프로토콜의 경우 HTTP 2.0 을 기반으로 하면서, 메세지를 이 프로토콜 버퍼를 이용하여 직렬화하기 때문에, 프로토콜 버퍼를 이해해놓으면 GRPC를 습득하는 것이 상대적으로 쉽다.


프로토콜 버퍼는 하나의 파일에 최대 64M까지 지원할 수 있으며, 재미있는 기능중 하나는 JSON 파일을 프로토콜 버퍼 파일 포맷으로 전환이 가능하고, 반대로 프로토콜 버퍼 파일도 JSON으로 전환이 가능하다.

설치 및 구성

프로토콜 버퍼 개발툴킷은 크게 두가지 부분이 있다. 데이타 포맷 파일을 컴파일 해주는 protoc 와 각 프로그래밍 언어에서 프로토콜 버퍼를 사용하게 해주는 라이브러리 SDK가 있다.


protoc 컴파일러와, 각 프로그래밍 언어별 SDK는 https://github.com/google/protobuf/releases  에서 다운 받으면 된다.


protoc 는 C++ 소스 코드를 직접 다운 받아서 컴파일하여 설치할 수 도 있고, 아니면 OS 별로 미리 컴파일된 바이너리를 다운받아서 설치할 수 도 있다.  


각 프로그래밍 언어용 프로토콜 버퍼 SDK는 맞는 버전을 다운 받아서 사용하면 된다. 파이썬 버전 설치 방법은  https://github.com/google/protobuf/tree/master/python 를 참고한다.

이 글에서는 파이썬 SDK 버전을 기준으로 설명하도록 한다.

구조 및 사용 방법

프로토콜 버퍼를 사용하기 위해서는 저장하기 위한 데이타형을 proto file 이라는 형태로 정의한다. 프로토콜 버퍼는 하나의 프로그래밍 언어가 아니라 여러 프로그래밍 언어를 지원하기 때문에, 특정 언어에 종속성이 없는 형태로 데이타 타입을 정의하게 되는데, 이 파일을 proto file이라고 한다.

이렇게 정의된 데이타 타입을 프로그래밍 언어에서 사용하려면, 해당 언어에 맞는 형태의 데이타 클래스로 생성을 해야 하는데, protoc 컴파일러로 proto file을 컴파일하면, 각 언어에 맞는 형태의 데이타 클래스 파일을 생성해준다.


다음은 생성된 데이타 파일을 프로그래밍 언어에서 불러서, 데이타 클래스를 사용하면 된다.

예제

간단한 파이썬 예제를 통해서 사용법을 익혀보자. 저장하고자 하는 데이타 포맷은 Person 이라는 클래스형으로, 이름,나이,이메일을 순차적으로 가지고 있는 데이타 포맷을 정의하여, Person 객체를 생성하여 데이타를 저장하고 이 객체를 파일에 저장했다가 읽어 들이는 예제이다.


이름과 이메일은 문자열, 나이는 숫자로 저장된다. 이 데이타형을 proto 형으로 정의하면 다음과 같다.

address.proto

syntax = "proto3";

package com.terry.proto;


message Person{

 string name = 1;

 int32 age=2;

 string email=3;

}


이 파일을 address.proto 라는 이름으로 저장한다. 다음 proto 파일을 파이썬용 코드로 컴파일한다. protoc 명령을 이용하면 되는데,


protoc -I=./ --python_out=./ ./address.proto


  • -I에는 이 protofile이 있는 소스 디렉토리

  • --python_out에는 생성된 파이썬 파일이 저장될 디렉토리

  • 그리고 마지막으로 proto 파일을 정의한다.


이렇게 컴파일을 하면 --python_out으로 지정된 디렉토리에 address_pb2.py 라는 이름으로 파이썬 파일이 생성된다. (pb2는 protocol buffer2를 의미하는 확장자이다.)


다음은 생성된 Person 클래스를 이용하여 객체를 만들고, 값을 지정한 후 이를 파일로 저장하는 예제이다.

write.py

import address_pb2


person = address_pb2.Person()


person.name = 'Terry'

person.age = 42

person.email = 'terry@mycompany.com'


try:

f = open('myaddress','wb')

f.write(person.SerializeToString())

f.close()

print 'file is wriiten'

except IOError:

print 'file creation error'


protoc에 의해 컴파일된 address_pb2 모듈을 import 한후에, address_pb2.Person()으로 person 객체를 생성한다. 다음에 person.name, person.age, person.email에 값을 넣은 후 파일을 열어서 파일에 person 객체의 내용을 넣는데, 이때 SerializeToString() 메서드를 이용하여 문자열로 직렬화 한다.


다음 코드는 이렇게 파일로 저장된 person 객체를 다시 파일로 부터 읽는 코드이다.

read.py

import address_pb2


person = address_pb2.Person()


try:

f = open('myaddress','rb')

person.ParseFromString(f.read())

f.close()

print person.name

print person.age

print person.email

except IOError:

print 'file read error'


앞의 코드와 같이 빈 person 객체를 만든 후에, 파일에서 문자열을 읽어서 ParseFromString() 메서드를 이용하여 문자열을 person 객체로 파싱한후에, 그 내용을 출력한다.

데이타 구조

위의 예제에서는 간단하게 name,age,email 정도의 구조만 간단하게 정의했지만, JSON과 같이 계층을 가지거나 배열형의 데이타 구조도 같이 정의할 수 있고, enum과 같은 타입 정의도 가능하다.

자세한 설명은 https://developers.google.com/protocol-buffers/docs/proto 를 참고하기 바란다.

간단한 팁 - JSON 변환

앞서 설명했듯이, 프로토콜 버퍼의 다른 장점중의 하나는 프로토콜 버퍼로 저장된 데이타 구조를 JSON으로 변환하는 것도 가능하고 역으로 JSON 구조를 프로토콜 버퍼 객체로 만들 수 도 있다.

아래 코드는 프로토콜 버퍼 객체인 person을 JSON으로 변환하여 출력하는 부분이다. MessageToJson 메서드를 사용하면 된다.


print person.name

print person.age

print person.email


from google.protobuf.json_format import MessageToJson

jsonObj = MessageToJson(person)

print jsonObj


다음은 실행 결과이다.


Terry

42

terry@mycompany.com

{

 "age": 42,

 "name": "Terry",

 "email": "terry@mycompany.com"

}



이 기능을 사용하면, 클라이언트(모바일)에서 서버로 HTTP/JSON 과 같은 REST API를 구현할때, 전송전에, JSON을 프로토콜 버퍼 포맷으로 직렬화 해서, 전체적인 패킷양을 줄여서 전송하고, 서버에서는 받은 후에, 다시 JSON으로 풀어서 사용하는 구조를 취할 수 있다. 사실 이게 바로 GRPC 구조이다.

API 게이트웨이를 백앤드 서버 전면에 배치 해놓고, 프로토콜 버퍼로 들어온 메세지 바디를 JSON으로 변환해서 백앤드 API 서버에 넘겨주는 식의 구현이 가능하다.


파이썬 전역 변수

프로그래밍/Python | 2017.04.11 00:05 | Posted by 조대협

파이썬에서 전역변수 사용하기 (2.7X 버전)


조대협 (http://bcho.tistory.com)


파이썬에서 전역 변수를 사용하려고 하니 "Unbound Local Error"가 나더라.

파이썬은 로컬 변수를 자바처럼 쓸수가 없다.


잘못된 코드


global_value = 1


def myfunction():

  global_value=global_value + 1


올바른 코드


global_value = 1


def myfunction():

  global global_value

  global_value=global_value + 1


글로벌 변수로 쓰려면, 글로벌 변수를 쓰려는 곳에서 global 이라는 키워드로 선언을 해줘야 그 전역 변수를 불러다가 쓸 수 있다.



Hashtable의 이해와 구현 #1

프로그래밍/알고리즘 | 2016.02.06 02:40 | Posted by 조대협

해쉬 테이블의 이해와 구현 (Hashtable)


조대협 (http://bcho.tistory.com)


기본적인 해쉬 테이블에 대한 이해


해쉬 테이블은 Key Value를 저장하는 데이타 구조로, value := get(key)에 대한 기능이 매우매우 빠르게 작동한다. 개발자라면 자주 쓰는 데이타 구조지만, 실제로 어떻게 작동하는지에 대해서 정확하게 알고 있지는 모르는 경우가 많다. 이 글에서는 해쉬 테이블에 대한 기본적인 구조와, 구현 방식에 대해서 설명 하도록 한다.

 

해쉬 테이블의 기본적인 개념은 다음과 같다.

이름을 키로, 전화 번호를 저장하는 해쉬 테이블 구조를 만든다고 하자.  전체 데이타 양을 16명이라고 가정하면

 

John Smith의 데이타를 저장할때, index = hash_function(John Smith) % 16  를 통해서 index 값을 구해내고, array[16] = John Smith의 전화 번호 521-8976”을 저장한다.



(출처 :https://en.wikipedia.org/wiki/Hash_table )

 

이런 형식으로 데이타를 저장하면, key에 대한 데이타를 찾을때, hash_function을 한번만 수행하면 array내에 저장된 index 위치를 찾아낼 수 있기 때문에, 데이타의 저장과 삭제가 매우매우 빠르다.

 

충돌 처리 방식에 따른 알고리즘 분류

 

그런데, 이 해쉬 테이블 문제는 근본적인 문제가 따르는데, hash_function(key) / size_of_array의 값이 중복이 될 수 가 있다.

 

예를 들어 저장하고자 하는 key가 정수라고 하고, hash_function key%10 이라고 하자. 그리고 size_of_array 10일때, key 1,11,21,31은 같은 index 값을 가지게 된다. 이를 collision (충돌)이라고 하는데, 이 충돌을 해결하는 방법에 따라서 여러가지 구현 방식이 존재한다.

 

1. Separate chaining 방식

 

JDK내부에서도 사용하고 있는 충돌 처리 방식인데, Linked List를 이용하는 방식이다.

index에 데이타를 저장하는 Linked list 에 대한 포인터를 가지는 방식이다.



(출처 :https://en.wikipedia.org/wiki/Hash_table )

 

만약에 동일  index로 인해서 충돌이 발생하면 그 index가 가리키고 있는 Linked list에 노드를 추가하여 값을 추가한다.  이렇게 함으로써 충돌이 발생하더라도 데이타를 삽입하는 데 문제가 없다.

 

데이타를 추출을 하고자할때는 key에 대한 index를 구한후, index가 가리키고 있는 Linked list를 선형 검색하여, 해당 key에 대한 데이타가 있는지를 검색하여 리턴하면 된다. 

삭제 처리


key를 삭제하는 것 역시 간단한데, key에 대한 index가 가리키고 있는 linked list에서, 그 노드를 삭제하면 된다.

Separate changing  방식은 Linked List 구조를 사용하고 있기 때문에, 추가할 수 있는 데이타 수의 제약이 작다.

 

참고 : 동일 index에 대해서 데이타를 저장하는 자료 구조는 Linked List 뿐 아니라, Tree를 이용하여 저장함으로써, select의 성능을 높일 수 있다. 실제로, JDK 1.8의 경우에는 index에 노드가 8개 이하일 경우에는 Linked List를 사용하며, 8개 이상으로 늘어날때는 Tree 구조로 데이타 저장 구조를 바꾸도록 되어 있다.

 

2. Open addressing 방식

 

Open addressing  방식은 index에 대한 충돌 처리에 대해서 Linked List와 같은 추가적인 메모리 공간을 사용하지 않고, hash table array의 빈공간을 사용하는 방법으로, Separate chaining 방식에 비해서 메모리를 덜 사용한다. Open addressing  방식도 여러가지 구현 방식이 있는데, 가장 간단한 Linear probing 방식을 살펴보자

 

Linear Probing

 

Linear Probing 방식은 index에 대해서 충돌이 발생했을 때, index 뒤에 있는 버킷중에 빈 버킷을 찾아서 데이타를 넣는 방식이다. 그림에서 key % 10 해쉬 함수를 사용하는  Hashtable이 있을때, 그림에서는 충돌이 발생하지 않았다.

 

 


아래 그림을 보자, 그런데, 여기에 11을 키로 하는 데이타를 그림과 같이 넣으면 1이 키인 데이타와 충돌이 발생한다. (이미 index1인 버킷에는 데이타가 들어가 있다.) Linear Probing에서는 아래 그림과 같이 충돌이 발생한 index (1) 뒤의 버킷에 빈 버킷이 있는지를 검색한다. 2번 버킷은 이미 index2인 값이 들어가 있고, 3번 버킷이 비어있기 3번에 값을 넣으면 된다.


검색을 할때, key 11에 대해서 검색을 하면, index1이기 때문에, array[1]에서 검색을 하는데, key가 일치하지 않기 때문에 뒤의 index를 검색해서 같은 키가 나오거나 또는 Key가 없을때 까지 검색을 진행한다. 


삭제  처리


이러한 Open Addressing의 단점은 삭제가 어렵다는 것인데, 삭제를 했을 경우 충돌에 의해서 뒤로 저장된 데이타는 검색이 안될 수 있다. 아래에서 좌측 그림을 보자,  2index를 삭제했을때, key 11에 대해서 검색하면, index1이기 때문에 1부터 검색을 시작하지만 앞에서 2index가 삭제되었기 때문에, 2 index까지만 검색이 진행되고 정작 데이타가 들어 있는 3index까지 검색이 진행되지 않는다.

그래서 이런 문제를 방지하기 위해서 우측과 같이 데이타를 삭제한 후에, Dummy node를 삽입한다. Dummy node는 실제 값을 가지지 않지만, 검색할때 다음 Index까지 검색을 연결해주는 역할을 한다.


Linear probing에 대한 샘플 코드는

http://www.cs.rmit.edu.au/online/blackboard/chapter/05/documents/contribute/chapter/05/linear-probing.html

http://www.tutorialspoint.com/data_structures_algorithms/hash_data_structure.htm

를 참고하기 바란다.

Dummy Node를 이용해서 삭제를 할때, 삭제가 빈번하게 발생을 하면, 실제 데이타가 없더라도 검색을 할때, Dummy Node에 의해서, 많은 Bucket을 연속적으로 검색을 해야 하기 때문에, Dummy Node의 개수가 일정 수를 넘었을때는 새로운 array를 만들어서, 다시 hash를 리빌딩 함으로써, Dummy Node를 주기적으로 없애 줘야 성능을 유지할 수 있다.


Resizing

Open addressing의 경우, 고정 크기 배열을 사용하기 때문에 데이타를 더 넣기 위해서는 배열을 확장해야 한다. 또한 Separate changing에 경우에도 버킷이 일정 수준으로 차 버리면 각 버킷에 연결되어 있는 List의 길이가 늘어나기 때문에, 검색 성능이 떨어지기 때문에 버킷의 개수를 늘려줘야 한다. 이를 Resizing이라고 하는데, Resizing은 별다른 기법이 없다. 더 큰 버킷을 가지는 array를 새로 만든 다음에, 다시 새로운 arrayhash를 다시 계산해서 복사해줘야 한다.


해쉬 함수


해쉬 테이블 데이타 구조에서 중요한 것중 하나가 해쉬 함수(hash function)인데, 좋은 해쉬 함수란, 데이타를 되도록이면 고르게 분포하여, 충돌을 최소화할 수 있는 함수이다. 수학적으로 증명된 여러가지 함수가 있겠지만, 간단하게 사용할 수 있는 함수를 하나 소개하고자 한다. 배경에 대해서는 http://d2.naver.com/helloworld/831311 에 잘 설명되어 있으니 참고하기 바란다. (필요하면 그냥 외워서 쓰자)

String key

char[] ch = key.toChar();

int hash = 0;

for(int i=0;i<key.length;i++)

 hash = hash*31 + char[i]

 

Cache를 이용한 성능 향상


해쉬테이블에 대한 성능 향상 방법은 여러가지가 있지만, 눈에 띄는 쉬운 방식이 하나 있어서 마지막으로 간략하게 짚고 넘어가자. 해쉬테이블의 get(key)put(key)에 간단하게, 캐쉬 로직을 추가하게 되면, 자주 hit 하는 데이타에 대해서 바로 데이타를 찾게 함으로써, 성능을 간단하게 향상 시킬 수 있다.  

다음은 실제로 간단한 HashTable 클래스를 구현하는 방법에 대해서 알아보도록 하겠다. 

dynamic array resizing에 대해서.

프로그래밍/알고리즘 | 2016.02.05 02:52 | Posted by 조대협

알고리즘쪽을 파다보니 재미있는게, 예전에 알았던 자료 구조도 구현 방식등에 대해서 다시 되짚어 볼 수 있는게 좋은데. (그간 생각하던 구현 방식과 다른 방식도 종종 나와서.)


보통 메모리 문제 때문에 불확실한 데이타 크기를 가지는 데이타 구조는 LinkedList를 사용하는게 유리하다고 생각했는데, 내용중에, 배열을 사용하고, 배열이 다 차면 그크기를 늘리는 (새롭게 더 큰 배열을 만들어서 기존 배열 내용을 복사해서 대처 하는것) 방식 (Array Resize)를 봤다.  일반적인 방식이기는 하지만 메모리 소모량이나 배열 복사 속도 때문에 그다지 바람직하다고 생각 안하고 있었는데, JDK내의 Map 클래스의 구현 부분을 보니, 실제로 Map 클래스에서도  array resize를 사용하고 있다.


(출처 : http://grepcode.com/file/repository.grepcode.com/java/root/jdk/openjdk/6-b14/java/util/HashMap.java#HashMap.addEntry%28int%2Cjava.lang.Object%2Cjava.lang.Object%2Cint%29 )

꽉 막혀서 생각할 것이 아니라, 이런 방식도 융통성 있게 고려를 해봐야겠다.



튜토리얼 포인트

자료 구조에 대한 설명과 코드들을 간략하게 잘 정리해 놓음

http://www.tutorialspoint.com/data_structures_algorithms/binary_search_tree.htm 


코세라 프린스턴 알고리즘 강의

https://class.coursera.org/algs4partI-010


코세라 데이타 구조에 대한 강의 (그래프 구조에 대한 문제가 잘 정리되어 있음)

https://class.coursera.org/algs4partI-010


알고리즘에 대한 일반적인 설명 (Algorithm 4th edition)

http://algs4.cs.princeton.edu/


Octree와 QuadTree에 대한 설명 (게임에서의 응용)

http://www.gamedev.net/page/resources/_/technical/game-programming/introduction-to-octrees-r3529


동적 연결 알고리즘 (Dynamic Connectivity)


조대협 (http://bcho.tistory.com)


요즘 알고리즘이 대세라 기초를 다지는 차원에서 다시 알고리즘을 보고 있는데, 오늘은 동적 연결 알고리즘에 대해서 공부한 내용을 간략하게 정리해본다.


동적 연결 알고리즘은 노드끼리 연결이 되어 있는지를 찾는 알고리즘이다.

각 도시간에 연결이 되어 있는지, SNS에서 친구끼리 서로 연결이 되어 있는지와 같은 연결성만을 판단한다.


예전에 이러한 문제를 그래프 형태의 자료구조를 이용해서 풀려고 했는데, 여기서 문제의 핵심은 노드 A와 B가 연결되었는지만 판단하면 된다. 즉 자료 구조상에서, 어떤 노드가 어떤 노드와 인접해 있는지등은 표시할 필요가 없다. 아래 그림을 보자, 아래 그림에서 1과 5는 연결이 되어 있다. (1->2->5 경로) 4,2는 연결되어 있지 않다.



이 처럼 노드간의 연결 여부만 판단 하는 것이 동적 연결 알고리즘 (Dynamic Connectivity)문제이다.

 

QuickUnionFind


이를 구현하는데 몇가지 알고리즘이 있는데, 가장 간단한 알고리즘으로는 QucikUnionFind라는 알고리즘이다.

QuickUionFind 알고리즘은 아래와 같이 일차원 배열을 이용해서 구현하는데, 배열의 Index가 노드명, 그 값이 ID이다. ID가 같은 노드들은 서로 연결되어 있는 것으로 취급 한다.



이런식으로 된다. 값이 9,8,7 3의 컴포넌트로 나뉘어 짐을 알 수 있다.

이 알고리즘의 경우 구현은 쉽지만, 매번 연결을 추가할때 마다 ID값을 스캔해서, 같은 컴포넌트에 있는 노드의 ID값을 매번 변경해야 하기 때문에 성능이 매우 낮다. O(N^2)의 복잡도를 갔는다.


Tree (QuickFindUF)


그래서 이를 보완하는 알고리즘으로는 Tree를 사용하는 방법이 있는데, Tree의 값에는 이 노드와 연결된 상위 노드의 인덱스 값을 가지게 한다.

이때 주의해야 하는 것이, Tree에서 표현되는 상하위 노드의 연결 내용은 중요하지 않다. 실제로 그림에서 1,3 노드간에는 연결은 없지만, 필요하다면 Tree에서는 1,3 노드를 연결해서 표현하되, 1,3이 하나의 트리에만 있으면 된다.

헷갈릴 수 있는 부분이, 각 노드간의 연결을 온전히 저장하는 것이 아니라, 컴포넌트에 어떤 노드가 있는지를 저장하는 것이기 때문에, 각 노드 간의 연결성에 초점을 맞출 필요가 없다. 



위의 그래프 저장 결과는 배열에서 다음과 같다.

 



여기서 노드가 연결되어 있는지를 찾으려면, root 노드가 같은지를 비교하면 된다.

즉, 노드 9,5가 연결되어 있는지 찾으려면 9 --> 5 까지의 경로를 트래버스 하는 것이 아니라, 9와 5의 root 노드(1)을 찾아서 동일한지를 비교하면 된다.


WeightTree

위의 트리 기반의 알고리즘의 경우, Depth가 비약적으로 길어질 수 있는 문제가 있는데, 이를 해결하기 위해서는 WeightTree라는 알고리즘을 사용할 수 있다. 이 알고리즘은 두개의 트리를 병합할때, 항상 작은 트리를 큰 트리의 루트에 붙이게 함으로써 전체 트리의 Depth를 줄이는 방법이다.


아마 이 알고리즘을 보지 않았더라면, Dynamic Connectivity 문제도 Node *  기반의 자료 구조를 만들어서 DFS(깊이 우선 검색)으로 해결하려고 하지 않았을까? (성능은 무지 안나오겠지)


참고자료 및 소스

http://algs4.cs.princeton.edu/15uf/


안드로이드 채팅 UI 만들기 #2 


나인패치 이미지를 이용한 채팅 버블


조대협 (http://bcho.tistory.com)


지난 글에서는 ListView를 이용하여 스크롤이 가능한 텍스트 기반의 간단한 채팅창을 만들어보았다.

이번글에는 채팅 메세지에 이미지로 채팅 버블을 입히는 방법을 알아보도록 한다.


채팅 버블 이미지를 입히는 방법이나 원리는 간단한데, 채팅 메세지를 출력하는 TextView에 백그라운드이미지를 입혀서 출력하면 된다. 그런데 여기서 문제가 생기는데, 채팅 메세지 버블의 크기는 메세지의 글자수에 따라 가변적으로 변경되기 때문에, 일반적인 이미지를 백그라운드로 넣어서 가로로 늘이거나 줄이게 되면 채팅창이 이상하게 가로로 늘어날 수 가 있다.. (아래 그림에서 가로로 늘렸을때 말꼬리 부분 삼각형이 원본과 다르게 늘어난것을 확인할 수 있다) 



< 원본 이미지 > 



<가로로 늘린 이미지 >



그래서 필요한 것이, 특정 부분만 늘어나게 하는 것이 필요한데. 이렇게 크기가 변경되어도 특정 구역만 늘어나게 하는 이미지를 나인패치 이미지 (9-patch image라고 한다.). 나인패치 이미지를 이용하여 말풍선을 느리게 되면, 말꼬리 부분은 늘어나지 않고 텍스트가 들어가는 영역만 늘어난다. 




< 나인패치 이미지를 가로로 늘린 경우> 


나인패치 이미지 만들기


나인 패치 이미지는 안드로이드 SDK에 내장된 draw9patch라는 도구를 이용해서 만들 수 있다.

보통 안드로이드 SDK 가 설치된 디렉토리인 ~/sdk/tools 아래 draw9patch라는 이름으로 저장되어 있다.

실행하면 아래와 같은 화면이 뜨는데, 

좌측은 일반 이미지를 나인패치 이미지로 만들기 위해서 늘어나는 영역을 지정하는 부분이고 (작업영역), 우측은 가로, 세로등으로 늘렸을때의 예상 화면 (프리뷰)을 보여주는 화면이다.




그러면 9 patch  이미지는 어떻게 정의가 될까? draw9patch에서 가이드 선을 드래그해서 상하좌우 4면에, 가이드 선을 지정할 수 있다.



좌측은 세로로 늘어나는 영역, 상단을 가로로 늘어나는 영역을 정의하고, 우측은 세로로 늘어났을때 늘어나는 부분에 채워지는 이미지를, 하단은 가로로 늘어났을때 채워지는 이미지 영역을 지정한다. 

이렇게 정의된 나인 패치 이미지는 어떻게 사용하는가? 일반 이미지 처럼 사용하면 되고, 크기를 조정하면 앞서 정의한데로, 늘어나는 부분만 늘어나게 된다.


나인패치 이미지를 채팅 메세지에 적용하기 


그러면 이 나인패치이미지를 앞에서 만든 채팅 리스트 UI에 적용하여 말 풍선을 만들어보도록 하자.

여기서는 채팅 버블을 좌측 우측용 양쪽으로 만들도록 하고, 서버에 연결된 테스트용이기 때문에, 메세지를 입력하면 무조건 좌/우 버블로 번갈아 가면서 출력하도록 한다.


앞의 코드 (http://bcho.tistory.com/1058) 에서 별도로 바위는 부분은 ChatMessageAdapter의 getView 메서드만 아래와 같이 수정하고 채팅 버블로 사용할 이미지를 ~/res/drawable/ 디렉토리 아래 저장해 놓으면 된다. 




그러면 수정된 getView 메서드를 살펴보도록 하자.


   @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        View row = convertView;

        if (row == null) {

            // inflator를 생성하여, chatting_message.xml을 읽어서 View객체로 생성한다.

            LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            row = inflater.inflate(R.layout.chatting_message, parent, false);

        }


        // Array List에 들어 있는 채팅 문자열을 읽어

        ChatMessage msg = (ChatMessage) msgs.get(position);


        // Inflater를 이용해서 생성한 View에, ChatMessage를 삽입한다.

        TextView msgText = (TextView) row.findViewById(R.id.chatmessage);

        msgText.setText(msg.getMessage());

        msgText.setTextColor(Color.parseColor("#000000"));


        // 9 패치 이미지로 채팅 버블을 출력

        msgText.setBackground(this.getContext().getResources().getDrawable( (message_left ? R.drawable.bubble_b : R.drawable.bubble_a )));


        // 메세지를 번갈아 가면서 좌측,우측으로 출력

        LinearLayout chatMessageContainer = (LinearLayout)row.findViewById(R.id.chatmessage_container);

        int align;

        if(message_left) {

            align = Gravity.LEFT;

            message_left = false;

        }else{

            align = Gravity.RIGHT;

            message_left=true;

        }

        chatMessageContainer.setGravity(align);

        return row;


    }


수정 내용은 간단한데, 좌측/우측용 채팅 버블을 출력하는 부분과, 좌측 버블은 좌측 정렬을, 우측 버블은 우측 정렬을 하는 내용이다.


채팅 버블을 적용하는 방법은 TextView에서 간단하게 setBackground 메서드를 이용하여 백그라운드 이미지를 나인패치 이미지를 적용하면 된다.


msgText.setBackground(this.getContext().getResources().getDrawable( (message_left ? R.drawable.bubble_b : R.drawable.bubble_a )));


나인패치이미지가  resource아래 drawable 아래 저장되어 있기 때문에, getResource().getDrawable() 메서드를  이용하여 로딩 한다.


        LinearLayout chatMessageContainer = (LinearLayout)row.findViewById(R.id.chatmessage_container);

        int align;

        if(message_left) {

            align = Gravity.LEFT;

            message_left = false;

        }else{

            align = Gravity.RIGHT;

            message_left=true;

        }

        chatMessageContainer.setGravity(align);


다음으로는 채팅 버블을 번갈아 가면서 좌/우측에 위치 시켜야 하는데, 채팅 버블의 위치는 채팅 메세지를 담고 있는 LinearLayout을 가지고 온후에, LinearLayout의 Gravity를 좌우로 설정하면 된다.


나인패치 이미지를 이용한 완성된 채팅 버블 UI는 다음과 같다. 






안드로이드에서 ListView를 이용한 채팅 UI 만들기


조대협 (http://bcho.tistory.com)


안드로이드 프로그래밍 기본 개념이 어느정도 잡혀가기 시작하니, 몬가 만들어봐야겠다는 생각이 들어서 생각하던중에 결론 낸것이, 간단한 채팅 서비스, 기존에 node.js 하면서 웹용 채팅을 만들어보기도 했고, 찾아보니, 안드로이드용 SocketIO 라이브러리도 잘되어 있어서 서버 연계도 어려울것이 없을것 같고, 또한 메세지가 왔을때 푸쉬 알림을 써야 하는 등 이것저것 실습이 될것 같아서, 결국은 채팅으로 정했다.


서버나 연계 코드 구현보다, 가장 어려운게 역시나 UI 디자인과 프로그래밍인데, 가장 쉬운 방법으로는 ListView를 사용하는 방법이 무난하다. (결국 코딩을 하고 나니 여러가지 한계를 느껴서 다른  UI를 찾으려고 하고는 있지만)


궁극적으로 만들고자 하는 UI는 카카오톡 처럼 말풍선이 나오는 UI이다. 





말풍선은 Ninepatch (나인패치) 이미지 라는 것으로 만들 수 가 있는데, 나인 패치 이미지에 대해서는 나중에 알아보도록 하고, 여기서는 말풍선 없이, 화면에 스크롤되서 내려가는 텍스트 기반의 대화창을 만드는 것을 먼저 진행하도록 한다.  스크롤이 되는 채팅창은 ListView 컴포넌트를 사용해서 구현하는데, 아래 그림과 같이 지난 메세지는 화면에 나오지 않고 현재 대화되는 상황만 보이도록 한다. 





리스트뷰(ListView) 에 대해서


그렇다면 리스트뷰는 무엇인가? 리스트뷰는 안드로이드 뷰 그룹 (View Group)의 일종으로, 스크롤이 가능한 아이템들의 리스트를 출력해주는 그룹이다.



아답터(Adaptor) 의 개념


채팅용 리스트뷰를 만들기 위해서는 아답터(Adaptor)의 개념을 이해해야 하는데, 아답터는 크게 두가지 기능을 한다. 리스트뷰에서 보여질 아이템들을 저장하는 데이타 저장소의 역할과, 리스트뷰안에 아이템이 그려질때 이를 렌더링하는 역할을 한다.


add 메서드를 이용하여, 아이템을 추가하고

getItem(int index)를 이용하여, index  번째의 아이템을 리턴하며 (자바의 일반적인 List형과 유사하다)

View getView(int position, xxx )이 중요한데, position 번째의 아이템을 화면에 출력할때 렌더링하는 역할을 한다.


그러면 실제로 작동하는 코드를 만들어보자. 이 예제에서는 텍스트를 입력하면 리스트 뷰에 추가되고, 텍스트가 입력됨에 따라 쭈욱 아래로 리스트뷰가 자동으로 스크롤되는 예제이다. 





아답터 클래스 구현


제일 먼저 채팅 메세지 리스트를 저장할 아답터 클래스를 구현해보자


package com.example.terry.simplelistview;


import android.content.Context;

import android.graphics.Color;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.TextView;


import java.util.ArrayList;

import java.util.List;


/**

 * Created by terry on 2015. 10. 7..

 */

public class ChatMessageAdapter extends ArrayAdapter {


    List msgs = new ArrayList();


    public ChatMessageAdapter(Context context, int textViewResourceId) {

        super(context, textViewResourceId);

    }


    //@Override

    public void add(ChatMessage object){

        msgs.add(object);

        super.add(object);

    }


    @Override

    public int getCount() {

        return msgs.size();

    }


    @Override

    public ChatMessage getItem(int index) {

        return (ChatMessage) msgs.get(index);

    }


    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        View row = convertView;

        if (row == null) {

            // inflator를 생성하여, chatting_message.xml을 읽어서 View객체로 생성한다.

            LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            row = inflater.inflate(R.layout.chatting_message, parent, false);

        }


        // Array List에 들어 있는 채팅 문자열을 읽어

        ChatMessage msg = (ChatMessage) msgs.get(position);


        // Inflater를 이용해서 생성한 View에, ChatMessage를 삽입한다.

        TextView msgText = (TextView) row.findViewById(R.id.chatmessage);

        msgText.setText(msg.getMessage());

        msgText.setTextColor(Color.parseColor("#000000"));


        return row;


    }

}


add나 getItem,getCount등은 메세지를 Java List에 저장하고, n 번째 메세지를 리턴하거나 전체 크기를 저장하는 방식으로 구현한다.


가장 중요한 부분은 getView 메서드인데,리스트의 n 번째 아이템에 대한 내용을 화면에 출력하는 역할을 하며 여기서는 두 단계를 거쳐서 렌더링을 진행한다.


첫번째로는 인플레이터 (inflator)를 사용하여, 아이템을 렌더링할 View 컴포넌트를 ~/layout/XX.XML 에서 읽어오는 역할을 한다.

인플레이터에 대해서 간략하게 짚고 넘어가면, View등 화면등을 디자인할 때 안드로이드에서는 XML 을 사용하여 쉽게 View를 정의할 수 있다. 이렇게 정의된 XML을 실제 View 자바 Object로 생성을 해주는 것이 인플레이터(inflator)이다. 


    LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); 


를 통해서 인플레이터를 생성하고, 이 인플레이터를 통해서 각 아이템을 출력해줄 View를 생성하여 row라는 변수에 저장한다.


 row = inflater.inflate(R.layout.chatting_message, parent, false);


이때, 레이아웃을 정의한 XML 파일은 chatting_message.xml 로 안드로이드 프로젝트의 ~/layout 디렉토리 아래에 있으며, 인플레이트 할때는 R.layout.chatting_message라는 이름으로 지칭한다.


chatting_message.xml 의 내용은 다음과 같다.


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">


    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:textAppearance="?android:attr/textAppearanceMedium"

        android:text="Chat message"

        android:id="@+id/chatmessage"

        android:gravity="left|center_vertical|center_horizontal"

        android:layout_marginLeft="20dp" />

</LinearLayout>



이렇게 아이템을 표시할 View가 생성되었으면, 그 안에 알맹이를 채워넣어야 하는데, 채팅 메세지를 저장하는 List 객체에서, position 번째의 채팅 메세지를 읽어온 후에, row 뷰 안에 있는 TextView에 그 채팅 메세지를 채워 넣는다. 


getView 코드에서 주의해서 봐야할 부분이


  View row = convertView;

        if (row == null) { …


인데, 가만히 보면 row가 null 일 경우에만 인플레이터를 이용해서 row를 생성하는 것을 볼 수 있다.


ListView의 특징중 하나는, 아이템을 랜더링 하는 View 객체가 매번 생성되는 것이 아니라, 해당 아이템에 대해서 이미 생성되어 있는 View가 있다면, getView( .. ,View convertView, ..) 를 통해서 인자로 전달된다.


그래서, convertView가 null 인지를 체크하고, 만약에 null이 아닌 경우에만 View를 생성한다. 


여기까지가 채팅 메세지를 저장하고, 각 메세지를 렌더링 해주는 ListView 용 아답터의 구현이었다. 

그러면 아답터를 이용한 ListView를 사용하여 채팅 메세지를 출력하는 부분을 구현해보자


아래는 ListView를 안고 있는 MainActivity이다.


package com.example.terry.simplelistview;


import android.database.DataSetObserver;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AbsListView;

import android.widget.EditText;

import android.widget.ListView;



public class MainActivity extends ActionBarActivity {

    ChatMessageAdapter chatMessageAdapter;


    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }


    @Override

    public boolean onCreateOptionsMenu(Menu menu) {


        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);


        chatMessageAdapter = new ChatMessageAdapter(this.getApplicationContext(),R.layout.chatting_message);

        final ListView listView = (ListView)findViewById(R.id.listView);

        listView.setAdapter(chatMessageAdapter);

        listView.setTranscriptMode(ListView.TRANSCRIPT_MODE_ALWAYS_SCROLL); // 이게 필수


        // When message is added, it makes listview to scroll last message

        chatMessageAdapter.registerDataSetObserver(new DataSetObserver() {

            @Override

            public void onChanged() {

                super.onChanged();

                listView.setSelection(chatMessageAdapter.getCount()-1);

            }

        });

        return true;

    }


    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();


        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }


        return super.onOptionsItemSelected(item);

    }


    public void send(View view){

        EditText etMsg = (EditText)findViewById(R.id.etMessage);

        String strMsg = (String)etMsg.getText().toString();

        chatMessageAdapter.add(new ChatMessage(strMsg));

    }

}


먼저 send는 “SEND” 버튼을 눌렀을때, 화면상에서 채팅 메세지를 읽어드려서 Adapter에 저장하는 역할을 한다.

가장 중요한 메서드는  onCreateOptionsMenu인데, 이 메서드의 주요 내용은, Adapter를 생성하여, Adapter를 listView에 바인딩한다.


  chatMessageAdapter = new ChatMessageAdapter(this.getApplicationContext(),R.layout.chatting_message);

        final ListView listView = (ListView)findViewById(R.id.listView);

        listView.setAdapter(chatMessageAdapter);


다음 기능으로는, 새로운 아이템이 listView에 추가되었을때, 맨 아래로 화면을 스크롤 하는 기능인데, 이는 Adapter에 DataObserver를 바인딩해서, 데이타가 바뀌었을때 즉 채팅 메세지가 추가되었을때, listView에서 리스트업 되는 아이템 목록을 맨 아래로 이동 시킨다.


        // When message is added, it makes listview to scroll last message

        chatMessageAdapter.registerDataSetObserver(new DataSetObserver() {

            @Override

            public void onChanged() {

                super.onChanged();

                listView.setSelection(chatMessageAdapter.getCount()-1);

            }

        });


이렇게 DataObserver를 추가하더라도, 아래로 스크롤이 안되는데, 새로운 아이템이 리스트뷰에 추가되었을 때 스크롤을 하게 해줄려면 TranscriptMode에 새로운 아이템이 추가되었을때 스크롤이 되도록 설정을 해줘야 한다. (디폴트는 새로운 아이템이 추가되더라도 스크롤이 되지 않는 옵션으로 설정되어 있다.)


listView.setTranscriptMode(ListView.TRANSCRIPT_MODE_ALWAYS_SCROLL); // 이게 필수



간단하게, ListView를 이용한 채팅 UI를 만들어봤다. 다음에는 나인패치 이미지를 이용하여, 말풍선을 넣는 기능을 추가해보도록 한다.


참고 : http://javapapers.com/android/android-chat-bubble/



안드로이드 Fragement 이해하기


조대협 (http://bcho.tistory.com)


안드로이드에서 하나의 화면은 하나의 Activity로 대변된다.

이러한 Activity를 View등을 이용해서 여러개로 쪼갤 수 있지만, 타블렛이나 팬블릿과 같이 스마트 폰과 다른 해상도를 사용할때 일일이 View를 다시 디자인 해야 하며, 또한 해당 화면 레이아웃이나 배치등을 다른 Activity에서 사용하고자 하면 매번 다시 만들어야 한다.





<출처 : http://developer.android.com/guide/components/fragments.html >


왼쪽은 타블렛 화면 레이아웃으로, 좌측에 메뉴와 오른쪽에 다른 형태의 컨텐츠가 나타난다.

이를 스마트 폰에서 볼때는 화면이 작기 때문에, 한 화면에서는 메뉴를 출력하고, 메뉴를 클릭하면 컨텐츠 화면으로 이동하도록 하는 형태인데, 이를 그냥 각각 구현하려면, 각 Activity에서 중복된 코드를 일일이 개발해야 한다. 

만약에 이러한 메뉴와 컨텐츠 화면이 포터블한 컴포넌트 형태로 묶이게 된다면 이를 재 사용해서 쉽게 만들 수 있다. 즉 타블릿 화면에는 메뉴와 컨텐츠 컴포넌트를 출력하고, 스마트 폰에는 메뉴 화면에는 메뉴 컴포넌트를, 컨텐츠 화면에는 컨텐츠 컴포넌트를 출력하면 쉽게 개발이 가능하다.


그래서 Activity안에 다른 Activity를 구현하는 것과 같은 형태의 컴포넌트를 제공하는 데 이를  Fragment라고 한다.


Fragment를 사용하는 방법은 단순하다. Activity의 Layout XML 안에, <fragment> 라는 태그를 이용하여, <fragment>를 추가해주면 된다. ( 또는 자바 코드를 이용하여 fragment를 추가할 수 있다.)



다음은 간단한 TextView를 포함한 Fragement를 정의한 fragement_main.xml 이다.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivityFragment">


    <TextView android:text="Hello!! I&apos;m fragment" android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/tvHello" />


</RelativeLayout>


Activity의 Layout을 정의하는 방법과 유사하게, fragment의  layout도 정의한다.

다음으로 Fragment class를 상속받아서 MainActivityFragement를 정의한다.


public class MainActivityFragment extends Fragment {


    public MainActivityFragment() {

    }


    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_main, container, false);

    }

}


여기까지 진행했으면 Fragment를 만든것이다. 다음으로, 이 Fragement를 Activity 위에 배치해보자.

아래는 MainActivity에서 사용하는 Layout을 정의한 activity_main.xml 이다.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivityFragment">


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment1"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        />


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment2"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/fragment1"

        android:layout_alignParentEnd="true" />


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment3"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/fragment2"

        android:layout_alignParentEnd="true" />



</RelativeLayout>


안에 <fragment ..> 라는 이름으로 앞서 정의한 MainActivityFragment를 3개 순차적으로 배치했음을 볼 수 있다.