GUI Programming in Embedded Linux

1. GUI Programming in Embedded Linux 경희대학교 컴퓨터공학과조 진 성

2. 주요 내용 • 주요내용 • 임베디드 시스템에 사용 가능한 GUI 이해 • 임베디드 시스템에서의 네트워크 프로그래밍 이해 • 간단한 1:1 오목게임 구현

3. Qt 소개 • QT는 trolltech에서 개발하고 배포하는 cross 플랫폼 GUI 라이브러리 • QT를 이용해서 만들어진 코드는 (약간만 신경 써준다면), 윈도우, Mac, Linux, *nix에 관계없이 컴파일 해서 사용 가능 • C++을 이용해서 완전히 객체지향적으로 작성되었다는 것도 큰 장점 • Qt는 유닉스와 X11시스템을 위한 C++라이브러리이자 GUI 툴킷이다. • 유닉스 운영체제(리눅스, 솔라리스 포함)를 위한 프리 소프트웨어를 개발한다면 라이센스 비용이 들지 않는다. • Qt를 이용한 프로그램은 속도가 매우 빠르다.

4. Qt/Embedded 소개 • Qt 라이브러리를 기본으로 하여 개발된 임베디드 시스템용 GUI 라이브러리 • X-윈도우 없이 리눅스 커널에서 제공하는 Frame Buffer를 이용하여 그래픽 장치에 접근 • 개발에 필요한 사양 1. CPU – 셀 300 이상 2. RAM – 128 3. HDD – 8G(linux-2G) 4. Serial Port 5. internet 6. Embeded 기기 – 16bit color 지원 모델(iPAQ) 7. 시리얼케이블(커널 X -> 필요)

5. QT /Embedded 설치 및 환경 설정(1) • QT /Embedded 다운로드ftp://ftp.trolltech.com/qt/source/qt-embedded-free-3.3.4.tar.bz2를 root 디렉토리에 다운로드 • 압축 해제(host) • QT/ Embedded 환경설정(host) - QTDIR : QT가 설치되어 있는 디렉토리 - LD_LIBRARY_PATH : QT에서 사용하는 공유 라이브러리를 이용 할 수 있도록 다음을 추가 # tar xvjf qt-embedded-free-3.3.4.tar.bz2 //압축제거 # ln –s qt-embedded-free-3.3.4 qte //생성된 디렉토리를 qte로 심볼릭을 해줌 /* ~/.bash_profile 에 다음을 추가 */ export QTDIR=/root/qte export LD_LIBRARY_PATH=/root/qte/lib:$ LD_LIBRARY_PATH

6. QT /Embedded 설치 및 환경 설정(2) • 환경설정 적용(host) • QT/Emdedded Configuration(host) # source ~/.bash_profile//.bash_profile을 재 적용 yes 를 입력 # ./configure -embedded ipaq -shared -depths 8,16,24,32 -thread -no-cups -qt-mouse-linuxtp

7. QT /Embedded 설치 및 환경 설정(3) • libstdc++.a라이브러리 설치(host) • 각 키트에서 제공해주는 툴 체인에는 libstdc++.a 라이브러리가 없기 때문에 부가적으로 libstdc++라이브러리를 해당 툴체인의 lib 디렉토리에 카피하거나 링크를 걸어주어야 한다. • /usr/lib/gcc-lib/i386-redhat-linux/3.2.2/libstdc++.a (위치) • Uic설치(host) • QT/Embedded 를 컴파일 하기 위해서는 qt-x11용 uic가 필요하다. • /usr/lib/qt-3.1/bin/uic (위치) # cd /usr/lib/gcc-lib/i386-redhat-linux/3.2.2 # cp libstdc++.a /usr/local/huins-arm-linux-R1.1/lib/libstdc++.a # cd /usr/lib/qt-3.1/bin/uic # cp uic $QTDIR/bin

8. QT /Embedded 설치 및 환경 설정(4) • 컴파일 (host) • 컴파일이 성공적으로 끝났으면 QT/Embedded 라이브러리를 확인 # cd $QTDIR # make ARM 용으로 컴파일 된 library 을 볼 수 있다.

9. QT /Embedded 설치 및 환경 설정(5) • 타겟보드 환경설정 • ARM용으로 컴파일된 qt-embedded-free-3.3.4 즉 qte를 NFS설정을 통해서 마운트 한다.(target) • 타겟에서 호스트에 있는 qt라이브러리를 참조하기 위해 NFS 설정을 한다.(host) – 아래 내용은 각자 환경에 따라 적절히 변경 할 것 • ~/.profile환경설정 (target) /* /etc/exports 파일에 다음을 추가 */ /root/qte 192.168.1.253(rw, no_root_squash) # service nfs restart //서비스 restart target# mount –t nfs 192.168.1.252:/root/qte /mnt/nfs/qte //nfs mount /* ~/.profile에 다음을 추가 */ export QTDIR=/mnt/nfs/qteexport LD_LIBRARY_PATH=/mnt/nfs/qte/lib:$LD_LIBRARY_PATH export QWS_MOUSE_PROTO=linuxtp:/dev/ts target# source ~/.profile //설정 적용

10. QT /Embedded 설치 및 환경 설정(6) • libstdc++ 라이브러리 설치(target) target# cp libstdc++.a /lib //host에 있는 libstdc++을 target에 복사 target# cd /lib //’/lib’로 이동 target# ln –s /lib/libstdc++.a libstdc++-libc6.1-2.so.3 //라이브러리를 심볼릭 해줌 Host에서 target으로 라이브러리 복사과정은 생략 – 적절한 방식으로 옮길 것 ~/.profile ~/.profile 적용 심볼릭

11. QT /Embedded 설치 및 환경 설정(7) • 예제프로그램 테스트 Host쪽의 Qt/Embedded의 샘플 프로그램을 컴파일한다. Qt프로그램을 실행하기 위해서는 Xindow 종료시켜야한다. 따라서, ps로 xwindow를 확인한후 ‘kill -9 75’ 를 실행하여 xwindow 를 종료시킨다.

12. QT /Embedded 설치 및 환경 설정(8) • 응용프로그램을 다운로드후 실행(target) # ./hello –qws //응용프로그램 실행 프로그램 다운로드 과정 생략 • X 프로세스를 죽인 후 실행시키면 터치 스크린의 초록바탕에 실행 되는 것을 확인 할 수 있다.

13. QT /Embedded Application(1) • 어플리케이션 개요 • 임베디드 키트상에서 Qt/E를 이용하여 간단한 1:1네트워크 게임 실행 • 간단한 리눅스 용 프로그램을 임베디드 키트상에 올려봄으로써 임베디드 기기와 리눅스에 대한 이해

14. 메뉴 버튼 (좌부터) . Connect . Disconnect . IP information 검은 돌/하얀 돌 놓은 개수 표시 오목판 로고 턴 알림 QT /Embedded Application(2) • 어플리케이션 인터페이스 - 메인화면

15. 1. Connect 버튼 클릭 2. 터치 패드로 입력 3. OK 버튼 클릭 IP 주소 입력 IP number 알림 창 Port 번호 입력 QT /Embedded Application(3) • 어플리케이션 인터페이스 – 네트워크 연결

16. QT /Embedded Application(4) • 어플리케이션 상속도 • CSockIo : 소켓통신(UDP 이용) 관련 클래스 • CConnectDlg : 접속대화상자 관련 클래스 • CGameBoard : 오목게임 메인 클래스 • MainWindow : MainWindow 폼 클래스

17. 네트워크 연결 턴 방식 Client First Server Client Start Start ok Game 패킷 Game 패킷 게임적용 게임적용 네트워크 종료 게임 종료 QT /Embedded Application(5) • 어플리케이션 흐름도

18. QT /Embedded Application(6) • 어플리케이션 알고리즘 • 게임보드는 14*14 크기의 2차원 배열을 적용하여 배열상에서 흰돌과 검은돌을 넣고 뺄 수 있도록 한다. • 오목게임의 룰을 적용하여 연속으로 5개의 같은 돌이 놓였을 경우 게임이 끝나게 된다. • 돌을 놓을 경우 첫 번째 배열 • 부터 Vertical, Horizontal, • LeftDown, RightDown 체크를 • 하여 연속된 돌이 5개 있는지 • 체크한다. • 오목판에 돌이 다 차면 • 비기고 새 게임이 시작 • 된다

19. 서버 클라이언트 socket socket udp packet Client Client QT /Embedded Application(7) • 네트워크 부분 • 턴 방식의 게임 진행을 한다. • 하나의 프로그램에서 서버 / 클라이언트의 역할을 동시에 하고, 접속을 하는 쪽이 클라이언트가 된다. • 항상 클라이언트부터 게임을 시작한다. • 한 게임이 끝나면 진 사람부터 다시 게임을 시작한다. • 네트워크 구성

20. command x y message QT /Embedded Application(8) • 네트워크 프로토콜

21. client server connect OnNewPacketConnect() connect_ack OnNewPacketConnectAck() game start shoot OnNewPacketShoot() shoot_ack OnNewPacketShootAck() ...... close OnNewPacketClose() game quit QT /Embedded Application(9) • 네트워크 흐름도

22. 작성된 어플리케이션 폴더에서 프로젝트 파일생성 생성된 프로젝트 파일 *파일은 폴더명으로 생성됨 QT /Embedded Application(10) • 어플리케이션 프로젝트 생성

23. QT /Embedded Application(11) • Makefile생성 • Makefile설정 생성된 Makefile #qmake –spec /root/qt-embedded-free-3.3.4/mkspecs/qws/linux-ipag-g++ -o Makfile omol_arm.pro qmake시 주어지는 옵션을 자세히 모를 경우 ‘$QTDIR/example’에 있는 예제 응용프로그램의 Makefile을 참고. 생성된 Makefile의 컴파일러를 확인한다. Gcc로 되어 있을경우 arm-linux-gcc로 변경한다.

24. QT /Embedded Application(12) • 컴파일 • 타겟보드에 QT라이브러리와 어플케이션 복사 • 타겟보드에서 QT app를 실행하기 위해 라이브러리를 복사 위 그림에서는 nfs로 연결해 호스트에 있는 어플리케이션과 라이브러리를 타겟으로 복사하고 있다.

25. QT /Embedded Application(13) • 타겟보드의 환경설정 • 라이브러리의 심볼릭을 해준다. 타겟보드의 ~/.profile을 열어 host에서 복사된 QT라이브러리의 위치를 잡고, 터치스크린을 이용할수 있도록 마우스 프로토콜을 설정한다. # source ~/.profile 하는 것을 잊지 않도록 한다. #cd /qte/lib #ln –s libqte-mt.so.3.3.4 libqte-mt.so.3 심볼릭을 해주는 이유는 어플리케이션 실행 시 해당 이름의 라이브러리를 찾기 때문이다.

26. QT /Embedded Application(14) • 어플리케이션 실행 • 작성된 app가 네트워크 프로그램이므로 실행 전에 ip를 맞춰 준다. 타겟 1 타겟 2 이전까지의 어플리케이션 복사와 라이브러리 설치는 두 타겟 모두 동일하게 설치된다. #ps #kill -9 75 #./omok -qws 타겟의 xwindow을 종료하고 app을 실행한다.

27. 키트 실행 화면 QT /Embedded Application(15) • 실행화면1

28. KIT 2개를 연결하여 게임을 실행 한 모습 QT /Embedded Application(16) • 실행화면2