Python 이미지 세로로 합치기 - 7 (GUI 디자인하기)

Part 2. GUI 디자인하기 - Qtdesigner 사용하기

Qtdesigner를 사용해서 gui를 디자인해 보자.

 

아직 이미지 합치기 코드를 완료하지 않았다면 아래 링크 참고

Python 이미지 세로로 합치기 - 6 (이미지 합치기)

 

1. Qtdesigner 실행

a. Pycharm(파이참)의 터미널에서 designer를 입력하면 실행된다.

실행되기까지 시간이 좀 걸리니 기다리자.

 

b. Main Window 선택 후 생성

Main Window를 선택하고 생성을 누르자.

 

아래 창이 나왔다면 성공

 

2. 위젯(Widget) 배치하기

완성된 모습을 머릿속에 그려 놓고 있어야 한다.

결과물

위 이미지와 똑같이 만들어 보자.

 

a. 가로 사이즈 배치

좌측 Containers에 있는 Group Box를 마우스로 드래그해서 해당 위치에 놓고 크기를 조절하자.

좌측 Input Widgets에 있는 Line Edit를 GroupBox 안에 집어넣자.

 

GroupBox 텍스트를 더블클릭해서 가로 사이즈 (px)로 바꾸자.

 

각 위젯을 클릭하면 오른쪽에 objectName이 나오는데 나중에 코드를 작성할 때 사용할 것이니 잘 확인해 두자.

값에 클릭해서 변경도 가능하다.

 

b. 파일명 입력칸 배치

a에서 했던 것과 똑같이 파일명을 입력할 수 있는 칸을 만들자.

Group Box를 배치하고 Line Edit를 넣기

그리고 placeholder (참고할 수 있는 글)을 넣어보자.

파일명의 Line Edit를 클릭하고 => 속성 편집기에 place로 검색하면 => placeholderText가 나온다.

 

placeholderText의 값에 원하는 참고글을 적어주자.

(확장자를 제외한 파일명을 입력해 주세요)

 

c. 이미지 업로드 배치

이미지를 업로드하고 이동 및 제거하는 버튼까지 추가해 보자.

c-1. 이미지 그룹박스 위치하기

c-2. List Widget 위치

Item Widgets에 있는 List Widget을 이미지 그룹박스 안에 넣자.

 

c-3. Push Button 위치

Buttons에 있는 Push Button을 이미지 그룹 안에 각각 위치시키고 이름도 변경하자.

하나씩 끌어서 위치 시키고 이름을 변경하자

d. 합치기, 초기화 버튼 위치

Push Button을 각각 위치시키고 이름 병경하자.

크기도 조절해 보자

 

여기까지 하면 디자인은 완성된다.

 

이제 디자인한 것을 파이참으로 코드를 옮겨보자.

Python 이미지 세로로 합치기 - 8 (파이썬에 불러오기)