QT /Embedded 와 웹 서버

1. QT/Embedded와 웹 서버 Qt/Embedded 개요 Qt/Embedded 개발 환경 구축 Qt/Embedded 실행 환경 구축 및 테스트 임베디드 웹 서버 임베디드 웹 서버 응용

2. Qt/Embedded 개요 • 임베디드 리눅스에서 많이 쓰는 GUI 프로그래밍 도구 • TinyX, GTK, C • SDL, C/C++ • Qt/Embedded • Qt/Embedded의 특징 • 원시 코드가 공개되어 쉽게 수정해 사용 가능 • 많은 이미지 형식을 지원하지만 메모리 효율이 좋음 • i386, ARM, MIPS, PowerPC 등 다양한 플랫폼 지원 • Qt 기반의 코드와 호환성이 양호하고 쉽게 변환 가능 • 프레임 버퍼를 직접 접근할 수 있고 가속 드라이버를 사용해 성능을 개선 가능 • 다수의 응용 프로그램을 동시에 실행 가능 • 다국적 언어 및 유니 코드 지원 • 풍부한 API 제공 • 시그널/슬롯 구조 채택

3. Qt/Embedded 개요 • 개발 환경 구축을 위해 Qt/Embedded, QVFB, UIC 를호스트 시스템에 설치 • QVFB(Qt Virtual Frame Buffer) • X 윈도우에서 프레임 버퍼를 구현해주는 기능 • 임베디드시스템 환경에서 비디오 카드와는 독립적인 프레임 버퍼를 사용 • X 윈도우와 콘솔 상의 화면을 전환할 필요가 없고 화면 갈무리, 화면 확대 및 축소 등도 가능 • UIC(User Interface Compiler) • Qt 설계자에 의해 XML로 생성된 사용자 인터페이스 정의를 읽어서 C++ 헤더나 소스 파일들을 생성하는 도구

4. Qt/Embedded 개요 • 강의홈페이지에서 다운로드할 파일 • Qt/Embedded: qt-embedded-free-3.3.3.tr.bz2 • Qt 라이브러리: qt_lib.zip • Qt 도구(qvfb, uic): source1.tar

5. ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ 실습 Qt/Embedded 환경 설정 • 다운로드받은 파일의 압축을 풀고 경로를 재설정, 터치 스크린을 인식하도록 관련 파일을 수정

6. 실습 Qt/Embedded 환경 설정 • ⑥ #gedit ~/.bash_profile • ⑧ #gedit src/embedded/qmouselinuxtp_qws.cpp

7. 실습 Qt/Embedded 환경 설정 • Makefile 수정. 컴파일 시간이 많이 소요되는 부분 제거 • configure 명령을 사용해 ARM용으로 환경을 설정 ① ②

8. 실습 Qt/Embedded 환경 설정 • 환경 설정을 진행하면서 메시지 출력을 관찰 • 정상적으로 환경 설정이 끝난 것을 확인 ① ②

9. ① ② ③ ④ ⑤ ⑥ 실습 Qt/Embedded 라이브러리와 도구 설치 • 라이브러리 압축 파일(qt_lib.zip)을 사용해 libstdc++.so를 심볼릭 링크하고 복사

10. ① ② ③ ④ ⑤ ⑥ 실습 Qt/Embedded 라이브러리와 도구 설치 • QVFB와 UIC 도구를 사용할 수 있도록 Qt/Embedded의 bin 디렉토리에 설치

11. 실습 Qt/Embedded 라이브러리와 도구 설치 • Qt/Embedded의 홈 디렉토리로 이동한 후 Make 유틸리티를 사용해 컴파일 • 컴파일 결과

12. ① ② ③ 실습 Qt/Embedded 라이브러리와 도구 설치 • 정상적으로 컴파일되었는지 확인

13. ① ② ③ ④ ⑤ ⑥ 실습 NFS를 이용한 Qt/Embedded실행 환경의 타겟 시스템 탑재 • 호스트 시스템에서 생성한 Qt/Embedded 자원을 NFS 마운트 디렉토리 /mnt/nfs_host로 복사

14. 실습 NFS를 이용한 Qt/Embedded실행 환경의 타겟 시스템 탑재 • NFS 마운트 디렉토리 공유 설정 파일인 /etc/exports 파일이다음 내용을 포함하도록편집 • /mnt/nfs_host 192.168.233.200(rw,sync,no_root_squash) • 호스트 시스템에 NFS 데몬을 재실행

15. ① ② ③ ④ ⑤ ⑥ 실습 NFS를 이용한 Qt/Embedded실행 환경의 타겟 시스템 탑재 • 타겟 시스템에 마운트하고, Qt 라이브러리를 위한 심볼릭 링크를 생성

16. Qt/Embedded 응용 프로그램(main.cpp) 11 #include "hello.h" 12 #include <qapplication.h> …… 20 int main( int argc, char **argv ) 21 { 22 QApplication a(argc,argv); 23 QString s; 24 for ( int i=1; i<argc; i++ ) { 25 s += argv[i]; 26 if ( i<argc-1 ) 27 s += " "; 28 } 29 if ( s.isEmpty() ) 30 s = "Hello, World"; 31 Hello h( s ); …… 35 QObject::connect( &h, SIGNAL(clicked()), &a, SLOT(quit()) ); 36 h.setFont( QFont("times",32,QFont::Bold) ); // default font 37 h.setBackgroundColor( Qt::white ); // default bg color 38 a.setMainWidget( &h ); 39 h.show(); 40 return a.exec(); 41 }

17. Qt/Embedded 응용 프로그램(hello.cpp) 10 #include "hello.h" …… 20 Hello::Hello( const char *text, QWidget *parent, const char *name ) 21 : QWidget(parent,name), t(text), b(0) 22 { 23 QTimer *timer = new QTimer(this); 24 connect( timer, SIGNAL(timeout()), SLOT(animate()) ); 25 timer->start( 40 ); 26 27 resize( 260, 130 ); 28 } …… 35 void Hello::animate() 36 { 37 b = (b + 1) & 15; 38 repaint( FALSE ); 39 } …… 48 void Hello::mouseReleaseEvent( QMouseEvent *e ) 49 { 50 if ( rect().contains( e->pos() ) ) 51 emit clicked(); 52 } …… 61 void Hello::paintEvent( QPaintEvent * ) 62 { 63 static int sin_tbl[16] = { 64 0, 38, 71, 92, 100, 92, 71, 38, 0, -38, -71, -92, -100, -92, -71, -38}; 65 66 if ( t.isEmpty() ) 67 return; 68

18. Qt/Embedded 응용 프로그램(hello.cpp) 69 // 1: Compute some sizes, positions etc. 70 QFontMetrics fm = fontMetrics(); 71 int w = fm.width(t) + 20; 72 int h = fm.height() * 2; 73 int pmx = width()/2 - w/2; 74 int pmy = height()/2 - h/2; 75 76 // 2: Create the pixmap and fill it with the widget's background 77 QPixmap pm( w, h ); 78 pm.fill( this, pmx, pmy ); 79 80 // 3: Paint the pixmap. Cool wave effect 81 QPainter p; 82 int x = 10; 83 int y = h/2 + fm.descent(); 84 int i = 0; 85 p.begin( &pm ); 86 p.setFont( font() ); 87 while ( !t[i].isNull() ) { 88 int i16 = (b+i) & 15; 89 p.setPen( QColor((15-i16)*16,255,255,QColor::Hsv) ); 90 p.drawText( x, y-sin_tbl[i16]*h/800, t.mid(i,1), 1 ); 91 x += fm.width( t[i] ); 92 i++; 93 } 94 p.end(); 95 96 // 4: Copy the pixmap to the Hello widget 97 bitBlt( this, pmx, pmy, &pm ); 98 }

19. ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ 실습 Hello 응용 프로그램의 컴파일 • 호스트 시스템에서 Hello 프로그램을 컴파일하고 NFS 마운트 디렉토리로 복사

20. 실습 Hello 응용 프로그램의 컴파일 ⑤ #gedit Makefile

21. ① ② ③ ④ ① ② 실습 타겟 시스템에서 Hello 응용 프로그램 실행 • 타겟 시스템에서 실행 중인 X-Server를 종료 • 타겟 시스템의 Qt/Embedded와 관련된 환경 변수를 설정하고 hello 파일을 실행

22. Qt/Embedded 웹서버 • 임베디드시스템용 웹 서버의 특징 • 웹 서버 수행 파일의 크기가 매우 작아야 함(수십~수백 KB) • 시스템의 성능을 저하를 막기 위해 힙 메모리의 사용을 최소화 • 정적 웹 페이지는 압축되어 저장되어 있다가 클라이언트의 요구가 있을 때 압축을 풀어서 제공 • 표준화된 인터페이스로 쉬운 이식성 • 인터넷을 통해 시스템을 관리할 수 있는 기능

23. Qt/Embedded 웹서버 • GoAhead 웹 서버 • 크기가 적으면서도 다양한 기능을 제공 • 컴파일하기 쉽고, 사용이 단순 • 실행 파일의 용량이 적어 임베디드시스템에 적합 • 사건 타이머(event timer)와 TCP/IP 스택 필요 • ASP, CGI, 임베디드 자바 스크립트를 지원 • HTTP 1.0 프로토콜을 사용 • 보안을 위해서 SSL(Secure Socket Layer) v3.0, DAA(Digest Access Authentication)를 지원 • 리눅스, 윈도우 CE, VxWorks, QNX, eCOS 등 다양한 운영체제에서 동작 • 무료

24. ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ 실습 GoAhead 웹 서버 컴파일 및 설치 • 다운로드받은 파일의 압축을 풀고 경로를 재설정. 관련 파일을 수정

25. 실습 GoAhead 웹 서버 컴파일 및 설치 ⑦ #gedit Makefile

26. 실습 GoAhead 웹 서버 컴파일 및 설치 • 컴파일 결과 확인 • web 디렉토리를 tar 명령을 사용해 하나의 파일로 압축 ① ② ① ②

27. ① ② ③ ④ ⑤ ⑥ 실습 GoAhead 웹 서버 컴파일 및 설치 • 컴파일된 웹 서버 webs와 web.tgz를 타겟 시스템으로 전송 • 타겟 시스템에서 web.tgz 파일의 압축을 풀고 웹 서버를 실행

28. 실습 GoAhead 웹 서버 컴파일 및 설치 • 호스트 시스템의 Firefox 웹 브라우저를 사용해 타겟 시스템의 웹 서버에 접속.→http://192.168.233.200/home.asp를 입력해 웹 서버가 작동되는지 확인

29. Qt/Embedded 웹서버 응용 • 웹 브라우저를 사용해 임베디드시스템 내의 각종 디바이스 제어 가능 • 웹을 이용하여 타겟 시스템의 FND 디바이스에 숫자를 표시 하기 위해 필요한 프로그램 • 11장에서 작성한 FND 디바이스 드라이버 • 웹 페이지를 표시하기 위한 HTML 문서 • 동적 웹 문서 전달을 위한 CGI(Common Gateway Interface) 프로그램.

30. 실습 FND 제어용 HTML 문서 작성(fnd.htm) 01 <html> 02 <head><title>Web Server Application</title></head> 03 <body> 04 <H1>Web Server Application</H1> 05 06 <form method="GET" action="cgi-bin/fnd"> 07 Enter a 8-digit number: 08 <input name="send_number" maxlength="8" type="text" size="20"> 09 <input type="submit" value="SEND"> 10 </form> 11 <br> 12 Then see the FND device on the taget system. 13 <br> 14 </body> 15 </html>

31. 실습 FND 디바이스 제어용 CGI 프로그램 작성(fnd.c) 016 #include <stdio.h> …… 025 static char fndDev[] = "/dev/FND"; 026 static int fndFd = (-1); 027 028 asc2fnd(char *s, long n) 029 { 030 char c; 031 int l; 032 while (n > 0) { 033 l = n % 10; 034 switch (l) { 035 case 0: c = 0x3f; break; …… 046 } 047 *s++ = c; 048 n = n/10; 049 } 050 } 051 052 int send_number_FND(long av) 053 { 054 int n; 055 char buf[MAXFND+1]; 056 057 fndFd = open( fndDev, O_RDWR); 058 if (fndFd < 0) { 059 fprintf(stderr, "cannot open FND (%d)", fndFd); 060 exit(2); 061 } 062 memset(buf, 0, sizeof(buf)); 063 064 asc2fnd(buf, av); 065 write(fndFd, buf, MAXFND); 066 return 0; 067 } ……

32. 실습 FND 디바이스 제어용 CGI 프로그램 작성(fnd.c) 073 int main(int argc, char *argv[]) 074 { 075 char *cgiinput ; 076 long send_number; …… 082 printf("Content-type:text/html;charset=iso-8859-1%c%c\n\n",13,10) ; …… 086 printf("<html>\n"); 087 printf("<head><title>Web Server Application</title></head>\n"); 088 printf("<body>\n"); 089 printf("<H1>Web Server Application</H1>\n"); 090 091 cgiinput= getenv("QUERY_STRING"); 092 if(cgiinput == NULL) 093 printf("<P>Error in passing data from form to script."); 094 else if(sscanf(cgiinput, "send_number=%ld", &send_number)!=1) 095 printf("<P>Invalid data. Data must be numeric."); 096 else 097 send_number_FND(send_number); 098 099 printf("<center> Check the FND, [%ld] is displayed</center>\n", send_number); 100 printf("</body>\n"); 101 printf("</html>\n"); 102 103 return 0; 104 }

33. 실습 웹 페이지 및 CGI 프로그램 작성 • 작성한 프로그램을 ARM용으로 컴파일 • fnd.htm 문서와 fnd 파일을 타겟 시스템으로 전송 • 11장에서 빌드한 FND 디바이스 드라이버 fnd.ko를 타겟 시스템으로 전송

34. ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 실습 웹 페이지 및 CGI 프로그램 작성 • 다운로드받은 파일의 재배치, 디바이스 드라이버의 재적재, 웹 서버 실행 등을 수행

35. 실습 웹 페이지 및 CGI 프로그램 작성 • Firefox를 가동→http://192.168.233.200/cgi.htm으로 접속→FND로 출력할 숫자를 입력 후<SEND> 버튼 클릭 • 타겟 시스템의FND에서 입력한 숫자를 관찰. 호스트 시스템의 웹 브라우저에서FND에 입력한 숫자 확인