Custom CAN ID 프로토콜은 산업 자동화 분야의 장비 제어에 폭넓게 활용되고 있습니다. 이러한 환경에서 Arduino 보드는 시스템 통합은 물론 Smart Display의 호스트 컨트롤러로 활용할 수 있으며, 특히 터치 기능이 없는 Smart Display를 제어하는 데 유용합니다. Custom CAN ID 프로토콜을 활용하면 Arduino 보드를 통해 비터치 방식의 Smart Display를 효과적으로 제어할 수 있습니다.

본 문서에서는 Arduino UNO와 CAN Shield를 사용하여 Custom CAN ID 프로토콜로 Smart Display를 제어하고, OLED Knob Display와 연동하는 데모 프로그램을 소개합니다. 이 프로그램을 통해 비터치 Smart Display의 다양한 제어 기능과 동작을 확인할 수 있습니다. 또한 OLED Knob Display를 활용한 터치 및 비터치 Smart Display 제어와 시스템 통합 방법을 이해하고자 하는 개발자에게 실제 구현을 위한 참고 자료로 활용될 수 있습니다. 아래 그림은 해당 애플리케이션 프로그램의 구현 방식을 보여줍니다.

본 애플리케이션을 구현하려면 다음 구성 요소가 필요합니다.

1. 10.1인치 Smart Display (Custom CAN ID)
2. Arduino UNO
3. Arduino UNO용 CAN Bus Shield
4. OLED Display Knob Rotator 모듈
5. ST-Link CAN Bus Dongle
6. GUI Builder v0.4.2 이상
7. Arduino IDE v2.0.4

 

데모는 다음 세 단계로 구성됩니다.

1. GUI Builder에서 데모 프로젝트 설계
2. 프로젝트 빌드 및 업로드
3. Arduino 호스트 프로그램 작성

 

GUI Builder에서 데모 프로젝트 설계

먼저 최신 버전의 GUI Builder를 실행하여 새 프로젝트를 생성합니다. 원하는 프로젝트 이름을 입력하고 프로젝트 폴더가 자동으로 선택되었는지 확인합니다. 다음으로 Device Type에서 이번 데모에 사용할 10.1인치 디스플레이를 선택합니다. 사용할 프로토콜을 지정하고 디스플레이 방향은 기본 설정인 가로 모드로 유지합니다. Blank UI Template을 선택한 후 Create 버튼을 클릭하여 프로젝트를 생성합니다. 자세한 설정 과정은 아래 그림을 참고하십시오.

프로젝트를 생성하면 아래와 같은 화면이 표시됩니다.

이번 데모 시나리오에는 총 4개의 페이지가 필요하므로 3개의 페이지를 추가로 생성해야 합니다. Page 버튼을 클릭한 다음 Plus 버튼을 눌러 페이지 3개를 추가합니다.

다음으로 사용자 지정 배경을 추가합니다. Resource 영역에서 Background 옵션을 선택합니다. 옵션 2에는 Industry, Medical, Vehicle 페이지용으로 미리 설정된 3개의 배경이 있습니다. 새로운 배경을 추가하려면 옵션 3의 Add Widget 버튼을 클릭한 다음, 옵션 4에서 Reset 버튼 왼쪽에 있는 점 3개(...) 버튼을 클릭합니다. 여기에서 사용자 지정 배경 이미지를 추가하여 첫 번째 페이지에 사용할 기본 배경 이미지를 교체할 수 있습니다.

이제 아래 그림과 같이 Pages 영역에서 각 페이지에 적용할 배경 스타일을 선택할 수 있습니다.

다음으로 사용자 지정 Widget을 추가합니다. 이번 데모에서는 Industry, Medical, Vehicle 페이지를 선택할 수 있도록 사용자 지정 Multistate Widget을 사용합니다. 먼저 첫 번째 페이지의 Controls 영역으로 돌아간 다음 Resource 영역에서 Multistate Widget 옵션을 선택합니다. 옵션 2의 Add Widget 버튼을 클릭하고 옵션 3의 Modify 버튼을 선택합니다. 4단계에서는 해당 Widget에 등록된 기본 이미지를 모두 삭제합니다. 이어서 옵션 5의 Add 버튼을 클릭하고, 6단계에서 PC의 로컬 폴더에 저장된 사용자 지정 Widget 이미지를 하나씩 선택하여 추가합니다. 마지막으로 7단계에서 OK 버튼을 클릭하면 아래 그림과 같이 사용자 지정 이미지가 Multistate Widget 목록에 추가됩니다.

다시 첫 번째 페이지의 Controls 영역으로 이동합니다. 이번 데모 시나리오에 맞게 Industry, Medical, Vehicle 페이지를 선택하는 데 사용할 사용자 지정 Multistate Widget을 선택한 후, 해당 Widget을 지정된 페이지 레이아웃 영역으로 드래그 앤 드롭합니다. 이렇게 하면 첫 번째 페이지 구성이 완료됩니다.

나머지 3개 페이지에도 동일한 방식으로 Widget을 배치합니다. 두 번째 페이지에는 Industry 관련 Widget을 선택하고, 세 번째 페이지에는 Medical 관련 Widget을 선택합니다. 마지막 네 번째 페이지에는 Vehicle 관련 Widget을 선택한 후, 각 Widget을 해당 페이지의 레이아웃 영역으로 드래그 앤 드롭합니다.

프로젝트 빌드 및 업로드

4개의 페이지를 생성하고 각 페이지에 해당 Widget을 배치한 후, 시작 페이지에 Industry, Medical, Vehicle 페이지를 선택할 수 있는 사용자 지정 Multistate Widget이 추가되어 있는지 확인합니다. 이제 프로젝트를 빌드하고 업로드합니다. Page Information 영역에서 Device 버튼을 클릭한 다음 Device Properties를 선택합니다. 프로토콜 설정이 올바른지 확인하고 사용할 COM Port와 Baud Rate를 설정합니다. 이후 "Connect to Device" 버튼을 클릭하여 장치와 연결합니다. 연결이 완료되면 아래 그림과 같이 Upload 버튼을 클릭하여 프로젝트 업로드를 시작하고, 업로드가 완료될 때까지 기다립니다.

프로젝트 업로드가 완료되면 아래 그림과 같이 OK 버튼을 클릭합니다.

업로드가 완료되면 아래 그림과 같이 시작 화면이 표시됩니다.

시작 화면이 표시된 후 첫 번째 페이지로 전환됩니다. 아래 그림과 같이 GUI Builder를 통한 프로젝트 빌드 및 업로드가 완료됩니다.

Arduino 호스트 프로그램 작성

아래 코드의 시작 부분에는 프로그램 실행에 필요한 라이브러리와 헤더 파일을 불러오는 includes 영역이 있습니다. 여기에는 Adafruit_SSD1327, Adafruit_FT6206, Adafruit_GFX, SPI 등의 라이브러리와 함께 mcp2515_can.h, lcdgfx_gui.h, lcdgfx.h와 같은 사용자 정의 헤더 파일이 포함됩니다.

includes 영역 다음에는 특정 상수와 핀 설정을 정의하는 defines 영역이 있습니다. 이 영역에서는 로터리 엔코더, OLED 디스플레이 크기, CAN Bus 설정, Widget 설정 등 프로그램 동작에 필요한 주요 항목을 정의합니다.

마지막으로 사용 중인 마이크로컨트롤러의 종류를 확인하여 적절한 시리얼 인터페이스를 선택하는 조건문이 있습니다. SAMD 마이크로컨트롤러에서 실행되는 경우 SerialUSB 인터페이스를 사용하고, 그 외의 경우에는 기본 Serial 인터페이스를 사용합니다.

정리하면, 아래 코드는 프로그램 실행에 필요한 라이브러리와 헤더 파일을 불러오고, 주요 상수 및 핀 설정을 정의하며, 마이크로컨트롤러 종류에 따라 사용할 시리얼 인터페이스를 선택하도록 구성되어 있습니다.

다음으로 프로그램에서 사용하는 주요 변수와 핀을 선언하고 초기화합니다. 예시는 다음과 같습니다.

SPI_CS_PIN: 값이 9로 설정된 상수로, SPI 통신에서 Chip Select 핀을 지정합니다.
CAN_INT_PIN: 값이 2로 설정된 상수로, CAN Bus의 인터럽트 핀을 지정합니다.
CAN: mcp2515_can 클래스의 인스턴스를 생성하고 SPI_CS_PIN 값으로 초기화합니다. CAN Bus 통신에 사용됩니다.
ts: Adafruit_FT6206 클래스의 인스턴스로, 터치스크린 기능을 처리하는 데 사용됩니다.
display: DisplaySSD1327_128x128_SPI 클래스의 인스턴스를 생성하고 SSD1327 디스플레이와 SPI 통신을 수행할 수 있도록 관련 핀 설정으로 초기화합니다.

아래 코드에서는 여러 개의 unsigned char 배열을 선언하고 초기화합니다. 각 배열의 용도는 다음과 같습니다.

configMsg: 설정 메시지를 저장하는 8개의 unsigned char 요소로 구성된 배열입니다.
PageIndex_0 ~ PageIndex_3: 각각 8개의 unsigned char 요소로 구성되며, Page Index 0부터 3까지의 데이터를 나타냅니다.
displayMode: Display Mode 정보를 저장하는 8개의 unsigned char 요소로 구성된 배열입니다.

또한 stmp, stmp1, stmp2부터 stmp12까지 여러 배열이 정의되어 있습니다. 각 배열 역시 8개의 unsigned char 요소로 구성되며, 다양한 Widget 또는 구성 요소와 관련된 데이터 바이트를 저장하는 데 사용됩니다. 배열 이름은 해당 데이터가 어떤 Widget 또는 기능에 사용되는지 구분하기 위한 용도로 활용됩니다.

정리하면, 이러한 배열에는 설정 메시지, Page Index, Display Mode, Widget 관련 데이터 등 프로그램 동작에 필요한 주요 데이터가 저장됩니다.

아래 코드는 정수형 매개변수 imageIndex를 사용하는 bitmapDemo 함수를 정의합니다. 이 함수는 OLED Knob Display에 이미지를 그리는 역할을 합니다.
표시할 이미지와 각 이미지의 위치 및 크기는 Image.h 헤더 파일에 정의되어 있습니다.

아래 함수는 일정 시간 간격으로 대기하면서 Recv 플래그 값을 반복적으로 확인하여 CAN Bus의 응답을 기다립니다. 응답이 수신되면 Recv 플래그를 0으로 초기화합니다.

아래 코드는 CAN Bus 통신에서 페이지 값을 변경하는 changePageFunction 함수를 정의합니다. 이 함수는 전달된 pageValue 매개변수에 따라 CAN Bus로 메시지를 전송하여 페이지 값을 변경합니다. 전송되는 메시지는 pageValue 값에 따라 결정되며, 각각 해당하는 PageIndex 배열을 사용합니다.

handleTouchEvents 함수는 터치스크린의 터치 이벤트를 처리합니다. 터치 입력을 감지하고 좌표를 변환한 후, 터치 압력과 지속 시간에 따라 해당 동작을 수행합니다. 또한 터치 입력에 따라 현재 페이지를 변경하기 위해 changePageFunction을 사용합니다. 예를 들어 Long Press가 감지되면 nowPage 값을 사용하여 changePageFunction을 호출하고 Home Page로 전환합니다. 반대로 Short Press가 감지되면 nowPage 값을 사용하여 changePageFunction을 호출하고 선택한 페이지로 전환합니다.

아래 코드는 Arduino의 setup 함수로, 프로그램이 시작될 때 한 번 실행됩니다. 이 함수에서는 핀 초기화, 시리얼 통신 설정, 디스플레이 구성, CAN Bus 설정 및 터치스크린 컨트롤러 초기화를 수행합니다.

먼저 pinA, pinB, pinC, EN_Pin의 핀 모드를 설정합니다. 각 핀은 풀업 저항이 활성화된 입력 또는 출력으로 설정되며, 출력 핀인 EN_Pin은 High 레벨로 설정됩니다.

이후 Baud Rate를 115200으로 설정하여 시리얼 통신을 시작하고, 연결이 완료될 때까지 대기합니다.

다음으로 display 객체를 초기화하고 Font, Color 등의 설정을 구성합니다. 지정된 위치에 Bitmap 이미지를 표시한 후 2초 동안 대기합니다.

CAN_INT_PIN에 인터럽트를 설정하고, 인터럽트 발생 시 실행할 루틴으로 MCP2515_ISR 함수를 지정합니다. 이 인터럽트는 신호의 Falling Edge에서 트리거됩니다.

CAN Bus는 250k의 Baud Rate로 초기화됩니다. 초기화에 실패하면 일정 시간 대기한 후 다시 시도합니다. 초기화가 완료되면 CAN Bus를 Normal Mode로 설정하고, 시리얼 출력에 성공 메시지를 표시합니다.

이후 Extended Frame을 포함한 모든 프레임을 수신할 수 있도록 Filter Mask와 Filter를 설정합니다.

터치스크린 컨트롤러를 초기화합니다. 초기화에 실패하면 오류 메시지를 출력하고 프로그램은 무한 루프 상태로 진입합니다.

터치스크린이 정상적으로 시작되면 마지막으로 시리얼 출력에 성공 메시지를 표시합니다.

이 함수는 CAN 컨트롤러인 MCP2515의 인터럽트 서비스 루틴(ISR)으로 추정되며, 인터럽트가 발생하면 플래그를 설정하고 메시지를 출력합니다.

아래 함수들은 Knob의 상태를 관리합니다. setKnobState 함수는 Knob의 상태를 업데이트하고 Idle 상태 감지를 위한 타이머를 설정하며, isKnobIdle 함수는 타이머 값을 기준으로 현재 Knob이 Idle 상태인지 확인합니다.

redrawScreen() 함수는 현재 Knob 상태에 따라 디스플레이 화면을 업데이트합니다. Knob의 상태 변경 여부를 확인한 후 화면을 지우고, 현재 상태에 맞는 Bitmap 이미지를 표시합니다.

아래 loop() 함수의 코드는 3개 핀의 상태를 읽고 해당 값을 기준으로 새로운 상태를 결정합니다. 새로운 상태가 이전 상태와 다르면 Counter와 MultiStateValue, GaugeValue를 비롯한 여러 Widget 관련 변수의 값을 업데이트합니다.

이어지는 loop() 함수의 코드는 Knob이 특정 방향으로 회전하는 경우의 동작을 처리합니다. 회전 방향에 따라 관련 변수 값을 업데이트하고 필요한 함수를 호출한 다음, 다음 loop() 실행을 위해 이전 상태 값을 업데이트합니다.

아래는 loop() 함수의 나머지 코드로, 앞선 코드에 이어 다음과 같은 동작을 수행합니다.

oldState 변수는 newState 값으로 업데이트됩니다.

nowPage가 0이거나 페이지 번호가 1인 경우, MultiStateValue와 LastMultiStateValue가 서로 다른지 확인합니다. 두 값이 다르면 LastMultiStateValue를 MultiStateValue 값으로 업데이트하고, MultiStateValue 값을 stmp1 배열에 저장합니다. 이후 Multi-State ID 0x716을 사용하여 MultiStateValue 값이 포함된 메시지를 CAN Bus로 전송합니다.

nowPage가 1이거나 페이지 번호가 2인 경우, 여러 Widget 변수에 대해 유사한 방식으로 값의 변경 여부를 확인합니다. 대상 변수에는 CircleProgressValue, HorizontalSliderValue, VerticalSliderValue, TemperatureValue, GaugeValue, FixedWidgetValue, IndicatorValue 등이 포함됩니다. 각 변수의 현재 값이 이전 값과 다르면 이전 값을 갱신하고, 새로운 값이 포함된 메시지를 해당 ID와 함께 CAN Bus로 전송합니다.

nowPage가 2이거나 페이지 번호가 3인 경우에도 페이지 3에서 사용하는 Widget에 대해 동일한 방식으로 값을 확인합니다. 예를 들어 CircleProgressValue, HorizontalSliderValue, GraphValue, AnimationValue 등이 대상입니다. 각 변수의 현재 값이 이전 값과 다르면 이전 값을 갱신하고, 새로운 값이 포함된 메시지를 해당 ID와 함께 CAN Bus로 전송합니다.

nowPage가 3이거나 페이지 번호가 4인 경우에도 해당 페이지에서 사용하는 Widget에 대해 같은 방식으로 값을 확인합니다. 대상 변수에는 HorizontalSliderValue, GaugeValue, FixedWidgetValue, AnimationValue, IndicatorValue, ToggleButtonValue 등이 포함됩니다. 각 변수의 현재 값이 이전 값과 다르면 이전 값을 갱신하고, 새로운 값이 포함된 메시지를 해당 ID와 함께 CAN Bus로 전송합니다.

이후 loop() 함수에서 handleTouchEvents() 함수를 호출하여 터치 이벤트를 처리합니다.

Knob이 Idle 상태인 경우, 즉 isKnobIdle() 함수가 1을 반환하면 setKnobState() 함수를 사용하여 Knob 상태를 KNOB_IDLE로 설정합니다. 이어서 redrawScreen() 함수를 호출하여 화면을 다시 표시합니다. 이 부분을 끝으로 데모 프로젝트의 주요 코드가 완료됩니다.

Arduino IDE에서 프로그램 검증과 업로드를 정상적으로 완료하면 OLED Knob Display의 화면이 변경됩니다. 기존 Smart Display 이미지 화면에서 Touch 또는 Rotate 이미지 화면으로 전환되며, 이 시점에서 Smart Display와 OLED Knob Display 모두 기본 Home Page를 표시합니다.

이제 데모 시나리오를 실행할 수 있습니다. Home Page에서 Rotator를 돌리면 아래 그림과 같이 Industry, Medical, Vehicle의 3개 페이지 중 하나를 선택할 수 있습니다.

페이지를 선택한 후 OLED Knob Display를 짧게 터치하면 Smart Display가 선택한 페이지로 바로 전환됩니다.

데모 동작을 다시 살펴보면, 먼저 Home Page에서 Rotator를 돌려 나머지 3개 페이지 중 하나를 선택합니다. 아래 예에서는 Medical 페이지를 선택합니다.

Medical 페이지를 선택한 후 OLED Knob Display를 터치하면 Smart Display에서 선택한 Medical 페이지로 이동합니다.

OLED Knob Display의 Rotator를 좌우로 돌리면 아래 그림과 같이 해당 페이지에 배치된 각 Widget을 제어할 수 있습니다.

OLED Knob Display를 길게 터치하면 자동으로 Home Page, 즉 Page 1로 돌아갑니다. 또한 OLED Knob Display를 10초 동안 회전하거나 터치하지 않으면 화면이 초기화되고 Home Page로 복귀합니다.

이로써 10.1인치 Smart Display와 OLED Knob Rotator Display를 활용한 데모 구성이 완료됩니다. 이 데모에서는 OLED Knob Rotator Display의 Short Touch 및 Long Touch 동작을 통해 페이지를 선택하고 전환할 수 있으며, 각 페이지에 배치된 다양한 Widget도 제어할 수 있습니다.

위 프로그램을 다운로드하고 데모 프로젝트에 대한 자세한 내용을 확인하려면 GitHub 링크 https://bit.ly/3oT0o5M를 참고하십시오.

실제 하드웨어 구성은 아래 그림과 같습니다.

본 프로그램은 Arduino 보드와 OLED Knob Rotator Display를 연동하고 Custom CAN ID 프로토콜을 사용하여 여러 페이지를 제어하며, Short Touch 및 Long Touch 동작으로 페이지를 전환하는 실제 구현 예제를 보여줍니다. 또한 각 페이지에 배치된 다양한 Widget을 조작하고 제어할 수 있습니다. 호스트 프로그래밍과 Smart Display 제어 응용, 특히 터치 기능이 없는 Smart Display의 제어 방법을 이해하고자 하는 초보자부터 경험이 풍부한 개발자까지 실제 개발에 참고할 수 있는 유용한 예제입니다.