Blynk로 캐릭터 제어 어플리케이션 만들기

by 조혜인 | 2017-03-17 17:57
arduino BLE blynk iot mp3 rtc 노래 블루투스 시계 아두이노 알람 알람설정

캐릭터 컨트롤 어플리케이션을 어떻게 만들지 고민을 했습니다. 안드로이드로 개발을 하면 가장 best겠지만, 제 실력으로는 시간이 너무 오래 걸리기 때문에ㅠㅠ 뒤로 미뤄두고 있었습니다. iOS는 개발경험이 아예 없습니다. 간단한 테스팅 앱이면 되는데... 

그러던 차에 아주 좋은 방법을 발견해 소개합니다.



1. Blynk란?

Blynk는iOS 및 Android 앱에서 Arduino, Raspberry Pi 등을 제어 할 수 있게 돕는 플랫폼입니다.

Blynk앱만 설치하면 위젯을 드래그 앤 드롭하여 프로젝트의 그래픽 인터페이스를 아주 빠르게 만들 수 있습니다!

게다가 안드로이드와 iOS 모두 적용되는 앱을 퍼블리싱할 수 있습니다.


2. 준비물

- 아두이노 나노

- BLE4.0 모듈 (CC2541)

- 스마트폰


3. 만드는 방법

3-1. Blynk 어플리케이션

STEP 1. Blynk 앱 다운로드 하기

Blynk 어플을 설치합니다. (안드로이드, iOS)


STEP 2. Auth Token 얻기

Blynk에서 제공하는 Auth Token을 얻어야 합니다. Blynk app과 하드웨어를 연결하기 위해서는 auth token이 필요합니다. 이후 아두이노 코드에 넣습니다.

1. Blynk App에 새 계정을 만듭니다.

2. 새 프로젝트를 만듭니다. 그런 다음 사용할 보드와 연결을 선택하십시오.

3. 프로젝트가 생성 된 후 이메일을 통해 인증 토큰을 보내드립니다.

저 같은 경우엔 Arduino Nano를 선택했습니다.

  

4. 이메일받은 편지함을 확인하고 인증 토큰을 찾으세요.

저 같은 경우엔 메일을 확인하니 아래처럼 왔습니다.



STEP 4. Blynk 인터페이스 구성하기

1. Blynk에서는 다양한 UI를 제공합니다. 가져와 쓰면 됩니다. 오른쪽 상단에 + 버튼을 누르시면 됩니다.

저는 BLE와 Button, Timer, Slider를 가져왔습니다.





3-2. 아두이노

STEP 1. PC에 Blynk 라이브러리 설치하기

Blynk라이브러리를 설치합니다. (설치링크)


STEP 2. 코드 만들기

1. Blynk에서는 보드와 필요한 connection 기능에 맞는 예제코드를 제공합니다. 정말 편리합니다. (링크)

저는 Arduino Nano와 cc2541칩을 사용하는 블루투스 모듈인 HM10을 선택했습니다.

왼쪽 초록색 부분에서 선택하시면 됩니다.


2. 그리고 생성된 코드를 아두이노 IDE에 가져왔어요. 그리고 코드를 업로드 했습니다.

- TX, RX핀을 제가 이용하고 있는 7,8번 핀으로 바꾸어 주었어요. (37번째 줄)

BLYNK_WRITE(V1)V1핀으로 앱에서 보낸 데이터값을 읽어오겠다는 의미입니다. (41번째 줄)

V1핀은 Blynk App에서 설정합니다.

auth[]에 이메일에 받아두었던 Auto Token을 복사 붙여넣기 합니다.

""안에 넣으면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*************************************************************
  Blynk is a platform with iOS and Android apps to control
  Arduino, Raspberry Pi and the likes over the Internet.
  You can easily build graphic interfaces for all your
  projects by simply dragging and dropping widgets.
 
    Downloads, docs, tutorials: http://www.blynk.cc
    Blynk community:            http://community.blynk.cc
    Social networks:            http://www.fb.com/blynkapp
                                http://twitter.com/blynk_app
 
  Blynk library is licensed under MIT license
  This example code is in public domain.
 
 *************************************************************
  This example shows how to use Serial BLE modules (HM-10, HC-08)
  to connect your project to Blynk.
 
  You can use this sketch as a debug tool that prints all incoming values
  sent by a widget connected to a Virtual Pin 1 in the Blynk App.
 
  App project setup:
    Slider widget (0...100) on V1
 *************************************************************/
 
/* Comment this out to disable prints and save space */
#define BLYNK_PRINT Serial
 
 
#include <BlynkSimpleSerialBLE.h>
#include <SoftwareSerial.h>
 
// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "YourAuthToken";
 
SoftwareSerial SerialBLE(78); // RX, TX
 
// This function will be called every time Slider Widget
// in Blynk app writes values to the Virtual Pin 1
BLYNK_WRITE(V1)
{
  int pinValue = param.asInt(); // assigning incoming value from pin V1 to a variable
  // You can also use:
  // String i = param.asStr();
  // double d = param.asDouble();
  Serial.print("V1 Slider value is: ");
  Serial.println(pinValue);
}
 
void setup()
{
  // Debug console
  Serial.begin(9600);
 
  SerialBLE.begin(9600);
  Blynk.begin(SerialBLE, auth);
 
  Serial.println("Waiting for connections...");
}
 
void loop()
{
  Blynk.run();
}
cs



STEP 3. 하드웨어 연결

다음과 같이 연결해 주세요.

아두이노 나노블루투스 BLE4.0
D7TX
D8RX
5V5V
GNDGND




3-3. 앱과 아두이노 연동하기

STEP 1. Button 핀과 데이터 설정하기

Button 아이콘을 클릭합니다. 아두이노와 통신할 핀과 데이터를 설정합니다.

아두이노로 보낼 데이터는 255, 0로 설정했습니다.


핀은 'V1'으로 설정하시면 됩니다.

'V1'은 아두이노 코드를 수정하면서 확인했던 BLYNK_WRITE(V1) 함수의 파라미터 입니다. 




STEP 2. Blynk앱에서 블루투스 연결하기

1. Blynk 앱에서 BLE 아이콘을 누른 후, 나의 BLE 모듈과 연결합니다. 저는 아두이노에 연결해둔 블루투스 모듈인 Kevin과 연결했습니다.


2. 뒤로가기를 눌러 메인화면으로 돌아가서 오른쪽 상단 재생 버튼을 누릅니다.

- 블루투스와 잘 연결됐는지 확인하는 방법

오른쪽 상단에 첫번째 버튼을 눌러주세요. 아래 사진에 Online이라고 뜹니다. 블루투스와 잘 연결되었다는 의미입니다.







4. 아두이노 시리얼 창으로 확인하기

아두이노 시리얼 창을 킨 후, 앱에 있는 Button을 터치하면 255, 0이 아두이노로 전송되는 것을 확인할 수 있습니다.

멋지죠? UI를 좀 더 추가해서 컨트롤 어플을 완성해 보겠습니다.

다음 시간엔 앱을 다른 사람들이 다운받을 수 있도록 google appstore에 퍼블리싱 해보겠습니다.

그리고 이어서 iOS앱도 완성해 보겠습니다.


댓글 2

캐릭터 알람시계 만들기

Blynk로 캐릭터 제어 어플리케이션 만들기

by 조혜인

MADE BY

조혜인

arduino, processing, rhino, sketchup, 아두이노, 에프터이펙트, 포토샵, 프리미어