'위젯'에 해당되는 글 2건

  1. 2020.08.11 Software | Blynk 사용해 보기
  2. 2019.03.24 Hardware | AirPods 구입기

Software | Blynk 사용해 보기

|

Arduino 나 ESP8266 을 사용하면서, sensor 로부터 받은 데이터를 표현해주는 방법이 몇 가지 있습니다.

일전에는 ThingSpeak 라는 것을 사용해 봤었죠.


* Software | ThingSpeak 등록하여 IoT 데이터 펼처보기

https://chocoball.tistory.com/entry/Software-ThingSpeak-IoT-monitoring


어느 분께서 댓글 달아 주시길, Blynk 도 좋다고 합니다. 사용해 봤습니다.





1. Blynk 란?


Data 는 있지만, 그 값들을 이해하기 쉬운 방법으로 표시해 주고 모니터링 해주는 어플리케이션 이죠.



클라우드 펀딩으로 시작한 솔루션 입니다.


* Blynk - build an app for your Arduino project in 5 minutes

- https://www.kickstarter.com/projects/167134865/blynk-build-an-app-for-your-arduino-project-in-5-m



Arduino project 를 5분만에 시작할 수 있다고 하지만, 숙련된 사람 이야기 이고, 학습하는 시간이 필요합니다.

다만, 각 프로젝트에 따른 예시나 모듈이 잘 되어 있어서, 하다 보면, 아니... 이렇게 쉽게? 라는 생각이 잠시 드는 때도 있습니다.


KickStarater 클라우드 펀딩을 성공적으로 마무리 하고, 아래 사이트에서 정식 런칭하였습니다.


* Blynk Inc

https://blynk.io/





2. Library 설치


저는 Arduino / ESP8266 에서 받은 값을 전달할 목적이므로, Arduino IDE 에서 모듈을 인스톨 합니다.


Tools > Manage Libraries > Blynk


모듈이 인스톨 되면, Arduino > libraries 에 등록 되어 있는 것을 확인 할 수 있습니다.



자동으로 설치해 주는 방법 외에도, 수동으로 파일을 받아서 설치 할 수도 있습니다.


* Blynk Arduino Library

https://github.com/blynkkk/blynk-library/releases/latest





3. App 설치


프로그래밍을 위한 환경이나 라이브러리가 설치되었으면, 실제로 그 값들을 모니터링 하고 확인할 수 있는 인터페이스가 필요합니다.

Blynk 는 모바일 환경에 최적화가 되어 있으므로, 스마트폰에 관련 어플을 설치합니다.


평점이 좋네요.





4. Project 시작하기


모바일앱에서 어플을 시작하면, 등록이 나옵니다.



Facebook 계정 연동으로 시작해도 되나, 저는 그냥 email 로 사용자 등록 하였습니다.



계정을 만들고 로그인 합니다.



New Project 를 선택합니다. My Apps 메뉴를 이용해서, 개인 전용앱 처럼 꾸밀 수도 있다고 합니다.



시작할 새로운 Project 는 주로 어떤 IoT 기기와 연결될 것 인지를 선택합니다.

저는 ESP8266 을 이용하여, WiFi 연결 뿐만 아니라, arduino 처럼 처리도 시킬 것이기 때문에, ESP8266 을 선택 했습니다.



포름알데히드 센서를 이용한 그래프 모니터링용 이니, 그에 맞게 Title / Device / Connection Type 을 선택해 줍니다.

저는 Formaldehyde / ESP8266 / WiFi 를 선택 했습니다.



Create Project 를 최종적으로 누르면, 새로 생성한 project 에 대한 전용 인증 코드가 생성됩니다.

이 코드는 project 마다 유니크 하며, 메일로도 알려 줍니다.



계정 생성시 사용 했던 email 로 관련된 정보가 왔습니다.


Auth Token





5. 소스코드 생성


누가 5분만에 가능하다 했나... 5분은 여기까지 오느라 훨씬 지났습니다.

다만, 코딩을 쉽게 도와주기 위해 "Sketch generator" 라는 메뉴가 준비되어 있어요.


* Sketch generator

https://examples.blynk.cc/


접속하면, 아래처럼 Board (Device) / Connection 방법 / Auth Token 및 예시를 선택하면 소스코드를 만들어 줍니다!



이 페이지에서 만들어준 기본 코드에, 포름알데히드 측정에 사용되었던 코드를 살짝 추가 하였습니다.


Blynk 사용하지 않은 코드


#include "ze08_ch2o.h"
#include "SoftwareSerial.h"
 
// Instantiate a serial port, whatever Stream you have
// SoftwareSerial ch2oSerial(4, SW_SERIAL_UNUSED_PIN); // RX, TX
SoftwareSerial ch2oSerial(14, 14); // RX, TX
 
// Instantiate a sensor connected to the previous port
Ze08CH2O ch2o{&ch2oSerial};
 
void setup() {
    ch2oSerial.begin(9600);
    ch2oSerial.listen();
    Serial.begin(115200); // Serial Monitor
}
 
void loop() {
    Ze08CH2O::concentration_t reading;
     
    if (ch2o.read(reading)) {
        Serial.print("New value: ");
        Serial.println(reading);
    }
}



Blynk 기능을 입힌 코드


#include "ze08_ch2o.h"
#include "SoftwareSerial.h"

SoftwareSerial ch2oSerial(14, 14); // RX, TX
Ze08CH2O ch2o{&ch2oSerial};

int sensorData;

/* Comment this out to disable prints and save space */
#define BLYNK_PRINT Serial

#include "ESP8266WiFi.h"
#include "BlynkSimpleEsp8266.h"

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "XXXXXXXXXXXX";
char pass[] = "YYYYYYYYYYYYYYYYYYY";

BlynkTimer timer;

// This function sends Arduino's up time every second to Virtual Pin (5).
// In the app, Widget's reading frequency should be set to PUSH. This means
// that you define how often to send data to Blynk App.
void myTimerEvent() {
	// You can send any value at any time.
	// Please don't send more that 10 values per second.
	
	Ze08CH2O::concentration_t reading;
	if (ch2o.read(reading)) {
		Serial.print("ZE08-CH2O : ");
		Serial.println(reading);
		
		sensorData = reading;
	}
	Blynk.virtualWrite(V5, sensorData);
}

void setup() {
	// Debug console
	Serial.begin(115200);
	
	ch2oSerial.begin(9600);
	ch2oSerial.listen();
	
	Blynk.begin(auth, ssid, pass);
	// You can also specify server:
	//Blynk.begin(auth, ssid, pass, "blynk-cloud.com", 80);
	//Blynk.begin(auth, ssid, pass, IPAddress(192,168,1,100), 8080);
	
	// Setup a function to be called every second
	timer.setInterval(5000L, myTimerEvent);
}

void loop() {
	Blynk.run();
	timer.run(); // Initiates BlynkTimer
}


위의 Before / After 를 비교해 보면, "Sketch generator" 코드에서 자동으로 만들어준 소스에, 원래 소스를 살짝 입히기만 했습니다.

참 쉽죠?! 제가 작업한 것은 다음 세 가지 뿐 입니다.


- 기본 소스 코드 생성 (이것 마저도 인터넷에서 따옴)

- Sketch generator 이용하여 Blynk 연결 소스 만듬

- Auth Token / WiFi 접근 SSID / Password 적용


가장 눈여겨 들여다 봐야 할 부분은 아래 코드 부분입니다.


	Blynk.virtualWrite(V5, sensorData);


Blynk 는 ESP8266 / ESP32 등에서 받는 data 값 들을, 가상의 Pin 으로 보내는 기능이 있습니다.

Analog / Digital 값들이 다양한 Pin 들을 통해 들어온다 하여도, Blynk 로 보낼 때에는 하나의 가상 Pin 으로 고정해서 보낼 수 있습니다.


이렇게 되면, Device 가 변경되더라도 Blynk 앱에서는 변경을 하지 않아도 됩니다. 자세한 내용은 아래 링크를 참고해 보세요.


* What is Virtual Pins

http://help.blynk.cc/en/articles/512061-what-is-virtual-pins


* How to display ANY sensor data in Blynk app

http://help.blynk.cc/en/articles/512056-how-to-display-any-sensor-data-in-blynk-app





6. ESP8266 에서 실행


ESP8266 에 소스를 입히고 실행시키면, 다음과 같은 화면이 Serial Monitor 에 출력 됩니다.


[5220] Connected to WiFi
[5221] IP: 192.168.1.90
[5221] 
    ___  __          __
   / _ )/ /_ _____  / /__
  / _  / / // / _ \/  '_/
 /____/_/\_, /_//_/_/\_\
        /___/ v0.6.1 on ESP8266

[5227] Connecting to blynk-cloud.com:80
[5586] Ready (ping: 125ms).
ZE08-CH2O : 66
ZE08-CH2O : 112
ZE08-CH2O : 114
ZE08-CH2O : 117
ZE08-CH2O : 116
ZE08-CH2O : 114
...


ASCII code 를 이용하여 Blynk 문자를 잘 만들었네요 :-)



Library 는 Heartbeat 를 통한 연결상태 확인도 해주는 군요. 잘 만들어져 있습니다.



여기까지 진행하면 ESP8266 에서 할 것은 이제 다 했습니다.




7. Blynk 모바일앱에서 설정


Blynk 로 데이터는 들어오고 있으니, 받을 수 있도록 연동 설정하면 됩니다.

데이터를 표현해주는 방법은 여러 가지가 있으나, 대략 Gauge / SuperChart 로 해결 됩니다.


스마트 폰에서 Create Project 후에 나오는 빈 화면 아무곳을 터치하면, Widget Box 가 아래처럼 뜹니다.

건전지 아이콘에 2000 크레딧이 미리 충전 (무료) 되어 있습니다.

이걸 다 쓰면, 돈을 충전해서 사용해야 합니다. 각 메뉴 추가시 크레딧이 차감되니 신중하게 위젯을 만들어야 합니다.



처음에 멋도 모르고 "Value Display" 를 설정 했더랬습니다. 그냥 조금하게 값만 표시됩니다.



역시 데이터 값 표현은 차트죠. SuperChart 만들어 봅니다.

PIN 정보는 항상 "Virtual 5 PIN" 으로 했습니다만, 다른 Pin 들도 다이렉트로 사용할 수 있나 봅니다.



만들어진 위젯에 손가락을 잠깐 동안 올려 놓으면, 위치를 이동 시킬 수 있습니다.



이제 센서 값들의 모니터링은 일상으로 사용하는 스마트폰에서 바로바로 확인이 가능하게 됩니다.

웹페이지를 띄울 필요도 없고, 인증을 걸 필요도 없이, 하나의 앱 처럼 사용할 수 있어서 편하긴 합니다.




FIN


And

Hardware | AirPods 구입기

|

1. 택배왔다~


한번도 써보지 못한 사람은 있어도, 한번만 사용한 사람은 없다는, 그 AirPods.

거진 1년동안 고민하고 구입한 AirPods 가 도착했습니다.



Apple 의 제품답게 깔끔 그 자체군요.

생산 시기는 올해 1월입니다.



라이트닝 케이블로 케이스를 충전하면, 그 안에 있는 이어폰 부품도 충전되는 형식입니다.






2. 개봉


뚜껑을 열면 안내서와 본체가 보입니다.



그 밑에는 라이트닝 케이블이 놓여 있습니다.






3. 본체


본체의 얇은 투명 플라스틱 비닐을 벗겨 냅니다.



제품이 너무 깔끔해서 이걸 그대로 들고 다니면서 스크레치가 나면 마음이 아플 듯 합니다.



나중에 알았지만, 뒷면에 있는 저 둥그런 버튼같은 것은 Bluetooth pairing 할 때, 사용되는 버튼입니다.





4. 이어폰


본체 뚜껑을 열면 바로 이어폰이 보입니다.

뚜껑은 자석으로 되어 있어서, 착 하고 경쾌하게 닫힙니다.



오오오오오오! 영롱하군요.



신기하게 iPhone 근처에서 뚜껑을 열면, 따로 pairing 할 필요 없이 인식을 합니다.

처음이라서 그런가? 다른 iPhone 이 있으면 그쪽에도 인식 될까?



바로 잠금 해제합니다.

이제 이 AirPods 는 제껍니다. 제가 마음대로 할 수 있는겁니다.



싱겁게 iPhone 에서 인식되고, 연결이 완료되었습니다.





5. 소리를 들어보자


출퇴근시 사용하는 BBC NEWS 어플을 띄워 봅니다.

귀에 이어폰을 꼽자 마자, 아래 그림처럼 헤드폰 아이콘이 생겨나면서 바로 소리가 흘러 나옵니다. 오오오오오~!



제가 막귀라서 다른 이어폰과 음질 차이는 잘 모르겠습니다.

다만 중저음이 잘 들리고, iPhone 과의 거리가 10m 이상 떨어져 있어도 잡음 없이 잘 들립니다.





6. 실리콘 케이스


스크레치 날것이 두려워, 실리콘 케이스가 도착하기 전까지 사용을 참아 봅니다.



실리콘 케이스는 투톤으로 된 것을 구입했습니다.



뚜껑 색을 두가지로 바꿀 수 있는 제품입니다.






7. 충전 어뎁터


충전은 라이트닝 케이블로 합니다만, 자꾸 꼈다 뺐다 하면 근처에 스크레치도 나고,

구멍에 먼지도 끼일것 같아, 자석형 충전 케이블용 어뎁터를 끼워 넣어 줍니다.


자석식 충전 케이블에 대해서는 아래 글을 참조해 보세요.


* Hardware | 또다른 Magnetic Charging Cable 구매기

https://chocoball.tistory.com/entry/Hardware-another-Magnetic-Charging-Cable


Lightning Cable 구멍에 충전용 어뎁터가 딱 들어 맞습니다.

실리콘 케이스와의 간섭도 전혀 없습니다.



충전 케이블 끝단은 아래와 같이 되어 있어요.



자석식이니 케이블을 가져다 놓으니 "착" 하고 달라 붙습니다.

실리콘 케이스와의 간격이 거의 없을 정도로, 맟춤 제품처럼 서로 딱 들어 맞습니다.



충전 잘 되고 있다고 뚜껑 안쪽의 LED 가 빨간색으로 변합니다.



iPhone 에서도 충전 상황을 확인할 수 있습니다.



iPhone 의 위젯에 "베터리" 항목을 등록하여 따로 확인할 수도 있습니다.






8. Windows 7 에서 인식시키기


Windows 10 에서는 아마 문제 없겠지만, Windows 7 에서는 Bluetooth 인식에 문제가 많습니다.

해결을 위해서 아래 link 를 참고했습니다.


* Bluetooth Peripheral Device Driver Not Found on Windows 7 [Solved]

https://www.drivereasy.com/knowledge/solved-bluetooth-peripheral-device-driver-not-found-error-on-windows-7-vista/


A. Bluetooth 기기의 driver 인스톨

자기 PC 의 기기에 맞는 driver 를 인스톨 해줍니다.

저의 경우는 Intel® Dual Band Wireless-AC 7260 이므로, 관련 Wireless 및 Bluetooth 드라이버를 최신으로 업데이트 했습니다.


B. Microsoft Mobile Device

Microsoft 에서 나온 Device 프로그램을 인스톨 합니다.

저는 Windows 7 64 bit 이니, 아래 링크에서 다운로드 받아서 인스톨 했습니다.


https://www.microsoft.com/en-us/download/details.aspx?id=3182


C. Bluetooth 인식시키기

AirPods 의 뒷면 pairing 버튼으로 연결을 시작합니다.



보통은 자동으로 Bluetooth 관련 드라이버를 인스톨 해주나, 실패합니다.


D. 수동으로 Bluetooth 인식시키기

장치장리자에서 인식에 실패한 기기에서 오른쪽 클릭하여, 수동으로 드라이버를 지정해 줍니다.



요 부분은 스샷을 뜨지 못해, 참조한 사이트에서 그림을 빌려와 봅니다.



E. 최종 확인

위의 과정이 완료되면, "Windows Mobile-based device support" 가 새로 생깁니다.



마지막으로 디바이스 메뉴에서, 새롭게 등록된 AirPods 를 확인할 수 있습니다.






9. 아...


주말에 직장 동료로부터 메신저에 링크 하나가 옵니다.


* Newest w1 chip 1:1 Airps battery pop up Mini Wireless Bluetooth Connect Headphone & Earphone For iPhone 7 8 X XS Max Pad

https://www.aliexpress.com/item/Newest-w1-chip-1-1-Airps-battery-pop-up-Mini-Wireless-Bluetooth-Connect-Headphone-Earphone-For/32982028610.html



AirPods 2 가 3월 20일 발표되자 마자, AliExpress 에서 1세대 copy 버전이 마구 풀리는것 같습니다.

제품은 끝물에 사지 말아야 함을 다시금 깨닫게 해 줍니다.


뭐 이건 그냥 정품이랑 같은... ㅠㅠ





10. 총평


마지막으로 총평 해봅니다.


A. 걸리적거리는 줄이 없어서 개운하다

B. 충전하면 몇 일은 사용한다

C. 10m 이상에서도 음질 저하없이 Bluetooth 통신으로 음악을 들을 수 있다

D. Windows 7 에서 인식시키기 그지같다

E. 귓구멍이 큰 사람 (저의 경우) 은 쉽게 빠진다

이거 꽤 심각한 문제로, 인터넷 보면 한쪽만 산다는 사람이 그렇게 많음

저는 출퇴근시 벌써 3번 빠졌습니다.

버스에 앉아서 졸고 있을 때, 고개가 한쪽으로 넘어가면 귓볼에 간섭되면서 빠집니다. 잊어버릴까봐 얼마나 식겁하던지.

F. 2세대가 발표되면서, 중국에서 copy 판이 1/3 가격으로 판치고 있슴 (ㅠㅠ)



And
prev | 1 | next