[교통정리로봇] 프로젝트 문서 3. 설계(두번째)

 

   라. 소프트웨어 구성

(1) UI(User Interface) 설계

■ QT Designer

먼저 QT Designer를 실행시킵니다. 실행시키면 [그림1]과 같은 메뉴가 띄워져 있습니다. QT Designer를 사용하고 있었다면 File에서 New를 클릭하면 [그림1]과 같은 메뉴가 나올 것입니다. [그림1]에서처럼 C++ Project를 선택합니다.

                                                  [그림1]

C++ Project를 선택하고 나면 [그림2]와 같은 화면이 나올 것입니다. 그러면 Project File에 원하는 파일이름으로 원하는 경로에 저장을 합니다.

                                                [그림2]

그리고 난 후 File을 클릭해서 New를 선택합니다. 그러면 처음에 봤던 메뉴가 다시 나오는데 이번에는
[그림3]과 같이 Widget을 선택합니다.

                                               [그림3]

그러면 [그림4]와 같은 Form이 나타나게 됩니다. 이제 이 Form에서 원하는 작업을 하게 됩니다.

                                              [그림4]

이 작업을 반복하면서 [그림5]와 같이 6개의 Form을 만듭니다. 또한 Form을 원하는 크기로 축소합니다.

                                              [그림5]

다음으로 Properties의 내용에서 name과 caption([그림6]에 표시된 부분)에 Project가 생성되면서 기본적으로 Form1이라고 적혀있는데, 이것을 원하는 이름과 실행창의 타이틀 바에 출력시키고자 하는 내용을 적습니다. 모든 Form에 이 작업을 합니다.

                                               [그림6]

추가한 Form 하나하나를 [그림7]과 같이 저장시킵니다.

                                              [그림 7]

그런 다음 Form 바탕에 그림을 넣는 작업입니다. Properties에 paletteBackgroundPixmap을 클릭 합니다. 그러면 [그림8]과 같이 나오는데, 원하는 이미지가 없을 경우 Add를 클릭 하여 원하는 이미지를 추가시키고, 원하는 이미지를 클릭한 후 OK버튼을 클릭 합니다.

                                                [그림 8]

                                               [그림 9]

다음은 PushButton을 만드는 작업입니다. PushButton은 오른쪽 Toolbox에서 Buttons를 클릭하면 PushButton을 클릭하면 생성할 수 있습니다. 원하는 위치에 원하는 크기로 드래그해서 놓으면 PushButton이 생성됩니다. 크기를 세밀하게 수정하기를 원할 때는 수정하고자 하는 버튼을 클릭하고 Properties에서 geometry([그림10_1])에서 값을 수정하면 됩니다. (x, y : 위치, width, height : 크기 )

                                              [그림 10]

                                              [그림 10_1]

PushButton의 내용 역시 Properties의 text에서 수정 가능합니다.

                                              [그림 11]

                                             [그림 11_1]

PushButton의 색도 수정 가능합니다. 색의 수정은 Properties의

paletteBackgroundColor를 클릭해서 원하는 색을 클릭하면 됩니다.

                                                 [그림 12]

PushButton의 글꼴도 수정 가능합니다. 글꼴의 수정은 Properties의 font에서

수정가능하며, 크기와 효과(Bold, Italic 등)도 줄 수 있습니다.

                                               [그림 13]

이렇게 해서 PushButton의 내용과 색깔과 글꼴을 수정된 모습입니다.

                                              [그림 14]

나머지 Form에도 위의 작업을 반복해서 원하는 위치에 원하는 크기와 글꼴로 PushButton을 삽입하였습니다.

                                            [그림 15]

다음으로 TextLabel을 사용했습니다. 오른쪽 Toolbox의 Display에서 TextLabel을 클릭 하여 PushButton과 마찬가지고 Form에서 드래그 하여 사용합니다.

                                             [그림 16]

TextLabel도 PushButton과 마찬가지로 수정이 가능합니다. 글꼴, 색깔 모두 PushButton과 마찬가지로
Properties에서 font, paletteBackgroundColor, text에서 수정 가능합니다. [그림17]은 수정한 모습입니다.

                                              [그림 17]

나머지 Form에도 TextLabel이 필요한 부분에 위와 같은 방법으로 삽입하였습니다.

                                               [그림 18]

다음으로 LineEdit를 사용하였습니다. LineEdit는 오른쪽 Toolbox의 Input을 클릭하고 LineEdit를 클릭 하여 다른 버튼과 마찬가지로 Form에서 드래그 하여 사용할 수 있습니다. LineEdit는 사용자의 입력을 받을 때 사용합니다.

                                              [그림 19]

나머지 Form에도 LineEdit가 필요한 부분을 같은 방법으로 삽입하였습니다.

이렇게 하여 눈으로 보이는 부분의 UI는 완성되었습니다.

                                                [그림 20]

■ QT Designer - connect 작업

connect는 어떤 이벤트(예를 들면 클릭)가 발생하면 그 이벤트에 적절한 함수를 실행시켜주도록 하는 것입니다. 이 프로그램에서 connect를 사용한 부분을 예로 들자면 숫자가 적힌 PushButton을 눌렀을 때 그에 해당하는 값을 LineEdit에 입력되도록 하는 것과 ‘Go Back', 'Enter'등의 버튼을 눌렀을 때 다른 화면으로 이동하게 하는 것입니다.

connect를 하기 전에 이벤트에 맞게 실행시켜줄 적당한 함수가 없다면 먼저 그 함수를 만들어 줍니다. 함수를 만들고자 하는 Form을 선택하고 Object Explorer창에서 Members탭을 선택하고, Slots밑에 public에서 마우스 오른쪽 버튼을 클릭하면 New라는 메뉴가 나오는데 New를 선택하면 됩니다.

                                              [그림 21]

그러면 [그림22]와 같은 화면이 나오는데 Function()에 원하는 함수를 이름을 적고 OK버튼을 누릅니다.

                                              [그림 22]

그러고 나서 다시 Object Explorer창에서 Members탭을 클릭 하여 ShowCheckForm()함수가 만들어진 것을 확인하고, 그 함수를 클릭하면 [그림23]과 같은 창이 나옵니다. 이 창에서 함수가 실행해야 할 일들을 편집합니다.

                                              [그림 23]

함수의 내용까지 편집이 끝나면 connect 작업을 합니다. QT Designer의 메뉴 바에 Connect Signal/Slots이라는 메뉴를 클릭하거나 F3 키를 누르면 connect 작업을 할 수 있습니다. connect 메뉴나 F3 키를 누르고 난후 connect 하고자 하는 버튼을 클릭 합니다.

                                                [그림 24]

그러면 [그림25]와 같은 창이 뜹니다. Sender에는 connect 하고자 하는 버튼을 선택하고, Signal()에는 발생할 이벤트를 선택하고, Receiver에는 이 발생이벤트를 받을 곳, Slot에는 발생 이벤트에 맞는 만든 함수 혹은 만들어진 함수를 선택합니다. [그림25]는 만든 함수를 connect 작업 한 것입니다.

New버튼은 새로운 connect 작업을 하기 위한 것이고,

Delete버튼은 connect 작업 한 것을 지우는 것이고,

Edit Slots버튼은 좀 전에 만들었던 함수(Slots)를 편집했던 화면([그림22])으로 가기 위한 것으로, slot을 편집하거나 새로 만들 수 있습니다.

                                            [그림 25]

[그림26]과 [그림27]은 기본적으로 만들어져있는 close()함수를 connect 작업 한 것입니다.

                                             [그림 26]

                                             [그림 27]

다음으로 PushButton을 클릭 했을 때 TextLabel에 나타나는 글자를 다르게 하는 작업입니다. 즉, ‘START' 버튼을 클릭 했을 때 TextLabel에 "Automatic Control"이라는 문장에서 “Automatic Control START"로 바뀌게 하는 것입니다. 이 작업 역시 좀 전에 했던 connect작업과 동일합니다. 함수를 만드는 것까지는 같고, 함수의 내용만 다르게 하면 됩니다.

                                               [그림 28]

숫자가 적힌 PushButton을 클릭 하여 LineEdit에 값을 입력하게 하는 것 역시 connect작업은 동일하고 그 함수의 내용만 다르게 하면 가능합니다.

                                                                               [그림 29]