아두이노 탐구_WeMOS D1 mini_소프트웨어 완료!

드디어 소프트웨어 부분을 다 만들었습니다!!🕺🕺

소프트웨어 부분은 크게

     ✔︎ 안드로이드 앱과

     ✔︎ 아두이노+LCD       두 부분이 있습니다.

---

[안드로이드 앱]

정상 작동하는 앱의 모습입니다.❤️

사실 카드만들기랑 사물함 부분도 만들어야 해서 아직 앱이 완성된 상태는 아닙니다. 

그래도 메모 램프를 완성한 것이 어디냐~ 하면서 즐거워하고 있는 중입니다.🕺ㅎㅎ

 

github.com/juhong7586/TMT

juhong7586/TMT

프론트엔드는 안드로이드 스튜디오에서 코틀린으로 만들었습니다. 

앱 개발이 끝난게 아니라서 코드는 아직 조금 정신없는 상태입니다. ㅋㅋ 

 

버튼 같은 것은 일러스트레이터와 포토샵으로 직접 만들어보았습니다. 

thenounproject.com/에서 다운로드 받아 편집하여 사용했습니다. 

아무래도 3D 느낌으로 그림자를 주니 조금 더 괜찮아 보이는 것 같더라구요~ㅋㅋ 

 

백엔드는 구글 클라우드 플랫폼을 이용하여 노드레드(ㅎㅎ)와 mySQL로 만들었습니다. 

 

열심히 개발한 흔적입니다. ㅋㅋㅋ

---

[아두이노+LCD]

사용한 도구는 다음과 같습니다. 

아두이노 WeMOS D1 mini, Nextion LCD 5인치

넥션 LCD 전용 에디터입니다. 

윈도우에서만 사용할 수 있습니다. 

원래 화면 구성도 좀 화려하게 해보려고 했다가, 메모 램프를 만들고 나니 심플한 컨셉 그대로 가는 게 좋을 것 같아서 이렇게 만들어 보았습니다. 

 

문제는 넥션 LCD와 아두이노를 연결하는 부분이었는데요,

아두이노 우노 + 넥션은 연결이 잘 되는데, 우노에 esp01  모듈을 달아보니 연결이 잘 되지 않았습니다. 

어댑터까지 샀는데 플래시 모드로 어떻게 전환하는지 모르겠더라구요. 

*이제는 압니다! GPIO0핀과 GND핀을 연결해둔 상태로 업로드하면 됩니다. 

 

그리고 넥션 LCD를 활용한 프로젝트들은 다 WeMOS D1 을 사용하고 있어서, 저도 한번 사용해봤습니다. 

그랬더니! 이렇게 쉽게 되어버리기 있나요 ㅋㅋㅋ 

오른쪽 화면처럼 바로 json 데이터가 날아왔습니다. 감동의 순간이었습니다. ㅠㅠ 

 

그럼데 이 부분을 만들면서 잡지 못한 벌레와 잡을 수 없는 벌레가 있었습니다. 

 

잡지 못한 벌레는 바로 LCD버튼입니다. 

LCD 화면 상의 버튼을 누르면 get 신호를 보내 업데이트를 하고 싶었는데요, 구현하지 못했습니다. 

정말 다양한 자료를 보았는데요, 이것저것 따라해봐도 안되더라구요.ㅠㅠ

넥션 라이브러리의 헤더 파일을 아무리 보아도 어디가 문제인지 모르겠습니다. 허허

 

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <Nextion.h>
#include <ArduinoJson.h>
 
const char* ssid = "juhong";
const char* password = "Hoorayhongwon!";


//nextion
NexText content0 = NexText(0, 1, "content0");
NexText content1 = NexText(1, 1, "content1");
NexText content2 = NexText(2, 4, "content2");
NexText title0 = NexText(0, 2, "title0");
NexText title1 = NexText(1, 2, "title1");
NexText title2 = NexText(2, 2, "title2");
NexText datetime0 = NexText(0, 5, "datetime0");
NexText datetime1 = NexText(1, 5, "datetime1");
NexText datetime2 = NexText(2, 5, "datetime2");

DynamicJsonDocument doc(1024);

void setup () {
 
Serial.begin(9600);
WiFi.begin(ssid, password);
nexInit();   

while (WiFi.status() != WL_CONNECTED) {
 
delay(1000);
Serial.print("Connecting..");
 
}
if (WiFi.status() == WL_CONNECTED) { //Check WiFi connection status
 
HTTPClient http;  //Declare an object of class HTTPClient
 
http.begin("http://34.64.143.75:1880/memos/lamp");  //Specify request destination
int httpCode = http.GET();                                                                  //Send the request
 
if (httpCode > 0) { //Check the returning code
String payload = http.getString();//Get the request response payload
deserializeJson(doc, payload);
}
http.end(); 
}
}

void loop() {
JsonArray array = doc.as<JsonArray>();
JsonObject obj = array[0].as<JsonObject>();
content0.setText(obj["content"].as<char*>());
title0.setText(obj["title"].as<char*>());
datetime0.setText(obj["datetime"].as<char*>());

obj = array[1].as<JsonObject>();
content1.setText(obj["content"].as<char*>());
title1.setText(obj["title"].as<char*>());
datetime1.setText(obj["datetime"].as<char*>());

obj = array[2].as<JsonObject>();
content2.setText(obj["content"].as<char*>());
title2.setText(obj["title"].as<char*>());
datetime2.setText(obj["datetime"].as<char*>());

delay(200);
}

아두이노 코드입니다. 

 

*컴퓨터 -> 아두이노 스케치 업로드: 아두이노의 D3 핀과 GND 핀을 연결합니다. 그럼 아두이노가 플래시 모드가 되어, 스케치를 업로드할 수 있습니다.  TX, RX 핀은 빼둡니다. 

*아두이노 -> LCD 데이터 전송: 아두이노의 D3 핀과 3V 핀을 연결합니다. 그럼 아두이노가 런 (Run) 모드가 됩니다. TX, RX핀을 연결합니다. 

*아두이노 -> LCD 데이터 업데이트: 아두이노의 D3 핀과 3V 핀의 연결을 해제하고, RST 핀과 GND 핀을 잠시 연결합니다. 그리고 다시 D3 핀과 3V 핀을 연결합니다. (스위치로 만들 것입니다.)

 

작동하는 모습입니다! 

Http 통신과 json 형식 파일 처리는 라이브러리 다운로드로 해결 가능합니다. 

그래도 이것도 아주 감동이에요.ㅠㅠ

 

잡을 수 없는 벌레는 바로 한글 문제입니다. 

이 LCD 화면을 디자인할 때 한글을 적어 넣으면 넣을 수 있는데요, 

외부에서 전송한 한글 데이터를 보여줄 수는 없습니다. 

 

그리고 일부 문단 형식을 표현할 수 없습니다.

대표적으로 엔터를 인식하지 못합니다. ascii 코드로만 이해하거든요. 

저기 '흠'은 사실 \r 입니다.ㅋㅋㅋㅋ 한글을 인코딩할 수 있게 설정해두면 저렇게 뜹니다. 

온전히 영어만 인코딩할 수 있게 설정하고, 폰트도 영어 전용 폰트로 설정해두면 엔터 인식이 가능할 것 같긴 합니다. 

 

맥북 한 대, 윈도 한 대와 보조 모니터 하나는 기본이죠 후후

여차 저차하면서 지난 2주동안 정말 개발밖에 안 한 것 같습니다. 

그런데 정말 재미있어서 어제도 2시간 반 잤어요!!ㅋㅋㅋㅋ

배우고 만드는 즐거움에 푹 빠져 지내는 요즘입니다.🥰