Nextion 디스플레이로 Fridgeye 앱 구축

Arduino를 프로그래밍한 후 도구에서 직렬 모니터를 엽니다. 메뉴. 전송 속도가 9600으로 설정되어 있는지 확인하십시오. 약 0.5초마다 조명 수준을 나타내는 새로운 정수 값이 표시되어야 합니다. 자, 잠시 시간을 내어 가지고 놀아보세요. 센서를 덮고 조명을 켜고 끄며 스마트폰 손전등을 비춰볼 수도 있습니다. 값이 변하는 것을 지켜보십시오. 완전한 어둠 속에서 거의 0에서 빛을 받으면 거의 1024까지 범위가 있음을 알 수 있습니다.

Fridgeye 앱이 무엇인가요?

Fridgeye 앱은 Fridgeye 장치의 신뢰할 수 있는 동반자입니다. 기기가 정체되는 시대는 지났습니다. 오늘날의 거대한 IoT 세계에서 어떤 종류의 앱이 있어야만 장치가 작동할 수 있다는 사실은 누구나 알고 있습니다. 땅콩 버터와 젤리, 우유와 시리얼, 완두콩과 당근입니다.

앱은 매우 간단합니다. Kickstarter 페이지를 살펴보면 말 그대로 Fridgeye가 감지하는 빛의 비율이며 0 또는 100%인 것처럼 보입니다.

나는 우리가 조금 더 잘할 수 있고 그 사이에 99개의 값 중 일부를 사용하여 기분이 나쁘지 않을 것이라고 확신합니다. 개념 도면에서 바로 이동하여 실제 세계로 가져와 보겠습니다.

Nextion 디스플레이 시작하기

이 프로젝트에서 저는 Nextion Enhanced 3.5" 터치 디스플레이를 사용하고 있습니다. 이것은 Arduino와 같은 초저가 장치라도 한 쌍을 통해 통신할 수 있도록 그래픽 제어의 무거운 작업을 처리하기 위한 완전한 저항막 터치 스크린 디스플레이입니다. 디스플레이 자체는 매우 훌륭하지만 문서는 탐색하기 매우 어려울 수 있습니다. 특히 초보자는 한 번에 한 단계씩 살펴보겠습니다.

디스플레이 프로그래밍 모델

디스플레이를 사용하도록 Arduino를 프로그래밍한 적이 있다면 아마도 화면 표면에 그리는 낮은 수준의 명령을 추상화한 간단한 그래픽 라이브러리와 같은 것을 사용했을 것입니다. 매우 훌륭하지만 이러한 라이브러리는 여전히 화면에 무언가를 그리기 위해 많은 픽셀 푸시를 수행해야 합니다. Nextion 디스플레이는 MVVM 또는 MVC 패턴에 익숙하다면 매우 친숙하게 느껴질 다른 접근 방식을 사용합니다. 기본적으로 앱 모양은 전면에 완전히 구성되고 화면 자체에 저장됩니다. 런타임에 Arduino는 미리 할당된 ID를 사용하여 UI 조각을 참조합니다. Arduino도 같은 방식으로 터치 이벤트와 같이 화면에서 정보를 다시 얻습니다. 즉, 런타임에 그림을 그리는 대신 Arduino가 보기와 컨트롤의 지휘자 역할만 합니다. 그것이 이해가 되지 않는다면 우리가 그 단계를 밟을 때 조금만 더 기다려 주십시오.

보기 준비

Fridgeye 앱은 매우 간단하기 때문에 한 페이지만 필요합니다. 그러나 Nextion 디스플레이는 여러 페이지와 전환이 있는 매우 복잡한 응용 프로그램을 처리할 수 있습니다. 우리와 같은 간단한 앱을 디자인하든 매우 복잡한 앱을 디자인하든 Nextion GUI 편집기를 사용할 것입니다. Nextion 디스플레이 제품군을 위한 WYSIWYG 편집기이며 레이아웃을 올바르게 만드는 데 도움이 됩니다. 다시 말하지만, 문서화 및 시작하는 경험은 초보자에게 매우 어려울 수 있지만 일단 익숙해지면 복잡한 레이아웃을 빠르게 디자인할 수 있습니다.

편집기를 열기 전에 배경 자산을 준비해야 합니다. 위의 모의 이미지를 참조하면 런타임에 디스플레이에서 변경되는 유일한 것은 감지된 빛의 비율이라는 것을 알 수 있습니다. 로고, 배경색, 하단의 녹색 막대는 정적입니다. 배경으로 사용할 수 있는 항목으로 이미지를 만들어 보겠습니다. 김프에서 5분이 소요되었으며 이렇게 생겼습니다.

여기서 기억해야 할 중요한 점은 이미지를 화면에 필요한 정확한 크기로 만드는 것입니다. 제 경우에는 480 x 320 픽셀로 변환되는 3.5인치 화면을 사용하고 있습니다. 김프에서 이미지를 만든 크기가 바로 이 크기입니다.

Nextion 편집기 사용

참고: Nextion Editor에는 .NET Framework가 필요하며 현재 Windows에서만 지원됩니다. 내 Macbook에서 Parallels를 통해 Windows 10 가상 머신에서 문제 없이 실행할 수 있었습니다. Linux의 Wine에서 테스트하지 않았습니다.

다음 단계는 Nextion 편집기에서 간단한 앱 레이아웃을 만드는 과정을 안내합니다. Nextion 편집기를 연 상태에서 다음 단계를 수행하십시오.

1. 파일->새로 만들기 . 프로젝트에 컴퓨터의 이름과 위치를 지정합니다.

2. 장치를 선택하라는 대화 상자가 나타납니다. 제 경우에는 고급 및 3.5인치 모델 번호를 선택했습니다. 확인을 클릭하지 마십시오. . 3단계로 계속 진행합니다.

3. 디스플레이를 클릭합니다. 대화 상자의 왼쪽 상단에 있는 탭. 90 수평 표시 방향을 선택합니다.

4. 이제 확인을 클릭할 수 있습니다.

5. 사진을 클릭합니다. 왼쪽의 도구 상자에서 그러면 p0 요소가 추가됩니다. 당신의 개요에.

6. 그림/글꼴에서 창 왼쪽 하단에 사진이 있는지 확인 탭이 선택되었습니다.

7. +를 클릭합니다. 상징.

8. 앱의 배경을 제공하는 김프에서 만든 이미지로 이동하고 열기를 클릭합니다. .

9. 오른쪽의 속성 창에서 그림을 두 번 클릭합니다. 속성 값 영역. 앱 배경과 함께 사진 선택 대화 상자가 열립니다.

10. 앱 배경을 선택하고 확인을 클릭합니다. .

11. 텍스트를 클릭합니다. 도구 상자에서. 그러면 t0이라는 텍스트 영역이 추가됩니다. 디스플레이의 왼쪽 상단 모서리에 있습니다. id 값을 기록해 둡니다. 나중에 Arduino를 프로그래밍할 때 필요하므로 속성.

12. 텍스트 영역을 "Light Status" 단어 아래의 원하는 위치로 드래그하고 큰 영역을 채우도록 크기를 조정합니다.

13. 흰색 배경을 수정하려면 텍스트 영역 배경을 기본 배경의 잘린 버전으로 설정해야 합니다. t0 사용 선택 변경 sta 단색에서 이미지 자르기까지 속성 창 내의 속성 .

14. picc 두 번 클릭 텍스트 영역 t0의 속성 값 . 그러면 사진 선택 대화 상자가 열립니다. 기본 배경 이미지를 다시 선택하고 확인을 클릭합니다. . 이것은 텍스트 영역 배경을 투명하게 만드는 효과가 있습니다.

15. pco 변경 t0 속성 원하는 글꼴 색상이 될 수 있습니다. 저는 Red:125, Green:231, Blue:191의 커스텀 컬러로 진행했습니다.

16. 도구에서 메뉴 선택 글꼴 생성기

17. 글꼴 생성기 대화 상자에서 높이를 96으로 선택하고 사용하려는 글꼴을 선택합니다. 제 것은 몬세라트입니다.

18. 글꼴 이름을 지정하고 글꼴 생성을 클릭합니다. . 기억하기 쉬운 위치에 반드시 저장하십시오. 잠시 후 다시 필요합니다.

19. 글꼴 생성기 대화 상자를 닫습니다. 생성된 글꼴을 추가할 것인지 묻는 메시지가 표시됩니다. 예를 클릭합니다. . 해당 글꼴은 이제 글꼴 색인 0으로 참조됩니다.

20. t0에 더미 텍스트 추가 t0의 txt 속성을 변경하여 어떻게 보일지 보려면 100%로. 업데이트할 편집기 영역의 속성 값 영역을 클릭해야 합니다.

21. 재배치 t0 당신의 취향에.

22. 컴파일을 클릭합니다. 상단 툴바에서

모든 것이 잘 되었다면 이제 %AppData%\Nextion Editor\bianyi에 사용할 준비가 된 컴파일된 TFT 파일이 있을 것입니다. .

디스플레이 업데이트

우리의 멋진 새 디자인을 디스플레이 자체에 적용하는 몇 가지 방법이 있습니다. USB-to-TTL 변환기가 있는 경우 Nextion IDE 내에서 화면에 직접 연결하고 컴파일된 TFT 파일을 직접 업로드할 수 있습니다. 그렇지 않으면 화면 뒷면의 슬롯에 직접 삽입할 수 있는 마이크로 SD 카드에 컴파일된 TFT 파일을 복사해야 합니다. SD 카드는 FAT32 형식이어야 하며 단일 TFT 파일이 있어야 합니다. 그렇지 않으면 오류가 발생합니다. Nextion Editor는 성공적으로 컴파일된 파일을 Windows의 다음 디렉터리에 넣습니다.

C:\Users\[사용자 이름]\AppData\Roaming\Nextion IDE\bianyi\[프로젝트 이름].tft  

참고:AppData 폴더가 숨김으로 표시되어 있으므로 숨김 파일 보기를 활성화해야 할 수 있습니다.

SD 카드의 TFT 파일로 다음 단계를 수행하십시오.

Arduino에게 Nextion 말하는 방법 가르치기

디스플레이에 앱 보기가 있으므로 Arduino와 상호 작용하고 조명 상태 백분율을 설정할 수 있도록 Arduino에 몇 가지 코드를 작성해야 합니다.

Nextion 라이브러리 설치

1. Nextion Arduino 라이브러리의 최신 버전을 다운로드합니다.

2. 전체 ITEADLIB_Arduino_Nextion 복사 폴더를 Arduino 라이브러리 폴더로 이동합니다. Windows의 경우 다음 위치에 있습니다.

C:\Users\[사용자 이름]\Documents\Arduino\libraries 

Mac의 경우 다음 위치에 있습니다.

~/Documents/Arduino/libraries 

3. Arduino Mega를 사용하는 경우 7단계로 건너뜁니다.

4. Arduino Uno를 사용하는 경우 NexConfig.h를 엽니다. ITEADLIB_Arduino_Nextion에 있는 파일 방금 Arduino 라이브러리 폴더에 복사한 폴더입니다.

5. 다음 줄을 주석 처리:

#define DEBUG_SERIAL_ENABLE #define dbSerial 직렬  

6. #define 변경 nexSerial용 Serial2가 아닌 Serial이어야 합니다. 이를 통해 디스플레이를 UNO의 RX 및 TX 라인에 직접 연결할 수 있습니다.

#define nexSerial 시리얼  

7. Arduino IDE가 이미 열려 있는 경우 다시 시작합니다. 이렇게 하면 메뉴를 통해 라이브러리를 사용할 수 있습니다.

8. 파일에서 메뉴 선택 새로 만들기 새 스케치를 생성합니다.

9. 기본 스케치 코드를 다음으로 바꿉니다.

#include "Nextion.h" long lastUpdate; 정수 센서 =A0; NexText t0 =NexText(0, 2, "t0"); 무효 checkSensor() { int val =map(analogRead(센서), 0, 1024, 0, 100); 문자열 displayText =문자열(val) + "%"; t0.setText(디스플레이텍스트.c_str()); } 무효 설정(무효) { lastUpdate =millis(); 핀모드(센서, 입력); nexInit(); } 무효 루프(무효) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); 마지막 업데이트 =밀리(); } }  

코드 연습

Arduino foo가 해당 스케치를 이해할 수 있다면 이 섹션을 완전히 건너뛸 수 있습니다. 당신은 굉장합니다. Arduino 코드가 처음이라면 이것이 당신을 놀라게 하지 마십시오. 이 스케치를 하나씩 살펴보겠습니다.

#include "Nextion.h"  

이것은 Nextion 라이브러리를 사용하려는 의도를 나타냅니다. Arduino IDE는 라이브러리 폴더에 저장하므로 찾을 위치를 알고 있으므로 다른 작업을 수행할 필요가 없습니다.

long lastUpdate; 

이것은 단순히 lastUpdate라는 이름의 변수입니다. 그러면 나중에 스케치에서 화면을 업데이트하는 빈도를 제어할 수 있습니다.

int 센서 =A0;  

여기에서는 나중에 참조하는 데 사용할 수 있도록 Arduino의 A0 핀에 코드 읽기 쉬운 이름을 지정합니다. 이것은 우리가 다루고 있는 유일한 I/O 핀이기 때문에 이 스케치에서 실제로 중요하지 않지만 Arduino에 연결된 많은 것들이 있을 때 편리할 것이기 때문에 좋은 습관입니다.

<사전><코드>NexText t0 =NexText(0, 2, "t0");

여기서 우리는 GUI에서 생성한 텍스트 요소를 참조하는 스케치에 객체를 생성합니다. 이름을 "t0 ". 첫 번째 인수는 우리의 경우 0인 페이지 번호이고 두 번째 인수는 이전에 기억했던 구성 요소 ID가 2입니다. 기록하는 것을 잊은 경우 Nextion Editor로 돌아가서 <강한>t0 요소를 클릭하고 속성 창에서 ID를 확인합니다.

<사전><코드> 무효 checkSensor() { int val =map(analogRead(SENSOR), 0, 1024, 0, 100); 문자열 displayText =문자열(val) + "%"; t0.setText(디스플레이텍스트.c_str()); }

checkSensor() 우리 앱의 고기입니다. 첫 번째 줄에서는 실제로 두 가지 작업을 수행하고 있습니다. 먼저 analogRead(SENSOR)를 호출합니다. 이것은 핀 A0에 존재하는 전압을 나타내는 정수 값을 제공합니다(우리가 그것을 SENSOR라고 불렀음을 기억하십시오). Arduino UNO에서 analogRead 호출은 0에서 1024 사이의 값을 반환하지만 우리는 이를 0에서 100% 범위로 매핑하려고 합니다. 문제 없어요. Arduino IDE에는 내장된 map()이 포함되어 있습니다. [from range] 및 [to range] 뒤에 오는 값을 지정할 수 있는 함수입니다. 그런 다음 해당 int 값을 String 유형으로 변경하고 % 기호를 붙입니다. 마지막 단계는 setText()를 호출하는 것입니다. NexText t0에서 앞서 만든 객체.

void setup(void) { lastUpdate =millis(); 핀모드(센서, 입력); nexInit(); }  

이것은 다른 스케치 코드보다 먼저 실행되는 표준 Arduino 설정 기능입니다. lastUpdate를 초기화합니다. millis()를 호출하여 지금 바로 기능을 사용하려면 A0 핀을 입력으로 설정하고 Nextion 라이브러리를 초기화합니다.

무효 루프(무효) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); 마지막 업데이트 =밀리(); } }  

Arduino 프로그래밍에서 loop() 기능은 Arduino의 전원을 껐다가 다시 켜거나 다른 방법으로 재설정할 때까지 계속 실행됩니다. nexLoop()를 호출하여 Nextion 라이브러리를 지속적으로 서비스해야 합니다. . NULL 매개변수는 이 예에서 화면의 터치 이벤트를 수신하지 않음을 의미합니다. 그런 다음 마지막 센서 판독 이후 100밀리초 이상 경과했는지 확인하는 매우 간단한 검사가 수행됩니다. 그렇다면 checkSensor()를 호출합니다. 메소드를 설정하고 lastUpdate millis()에 대한 다른 호출로 지금 변수 .

그게 다야 30줄 미만의 코드만 있으면 Arduino에서 Nextion 디스플레이와 상호 작용할 수 있습니다.

디스플레이 연결

디스플레이를 Arduino에 실제로 연결하기 전에 상단 표시줄의 작은 오른쪽 화살표를 클릭하거나 단축키 Ctrl+U를 사용하여 IDE에서 스케치 코드를 IDE로 밀어 넣습니다.

Arduino UNO에서 디스플레이가 사용하는 것과 동일한 직렬 라인이 IDE에서 새 스케치를 푸시하기 위해 필요하기 때문에 업로드하는 동안 화면을 연결할 수 없습니다. 대신 Arduino Mega를 사용하고 있다면 그것에 대해 걱정할 필요가 없습니다.

이제 코드를 Arduino에 푸시하고 디스플레이를 연결해 보겠습니다. 먼저 Arduino에서 전원을 제거하는 것을 잊지 마십시오. 연결 정보는 Fritzing 다이어그램을 참조하십시오.

Arduino 백업에 전원을 공급하면 Fridgeye 앱이 현재 광 센서 판독값을 기쁘게 표시해야 합니다.

마무리

아휴! 우리는 해냈다. 그래서, 이 시점에서 당신은 약간의 분노의 어조로 "이게 뭐야? 냉장고에 다 넣어둬야 화면도 볼 수 없게 될 거야"라고 물을 수도 있습니다. 당신은 매우 기민한 학생이지만 나는 이것이 유용하다고 말한 적이 없습니다. 단지 만들고 배우는 것이 매우 재미있을 뿐입니다.

기분이 좋아진다면 이 프로젝트에서 한 단계 더 나아가 센서를 냉장고에 넣고 디스플레이를 다른 곳에 둘 수 있는 방법을 알아내도록 도전합니다. 그 목표를 달성하는 방법은 매우 많습니다. WiFi, Bluetooth, Zigbee 및 일반 라디오 송신기는 마음에 떠오르는 몇 가지입니다. 많은 옵션과 배울 것이 많습니다. 당신이 그것을 시도한다면 Twitter @KevinSidwar에서 저에게 연락하거나 저에게 이메일을 보내주십시오(sidwar dot com의 Kevin). IoT에서의 모험에 대해 듣고 싶습니다. 다음 시간까지, 해피 해킹.

제 게시물이 마음에 들었고 IoT 시작에 대해 자세히 알고 싶다면 현재 Fridgeye 개념을 중심으로 만들고 있는 과정 <엠>. 그렇지 않다면, 정말 끝까지 읽어주셔서 진심으로 감사드립니다. 멋진 하루 보내시기 바랍니다. 당신은 그럴 자격이 있습니다.

<섹션 클래스="섹션 컨테이너 섹션 축소 가능" id="코드">

코드

Fridgeye 앱용 Arduino Sketch

이것은 Arduino에서 실행되어 Nextion 디스플레이와 통신하고 현재 광 센서 판독기를 표시할 수 있는 코드입니다.

회로도

아두이노와 포토레지스터, 저항, 스크린을 연결하여 본 프로젝트를 생성하는 방법에 대한 배선도입니다.