Getting Started >> A first app (Kivy tutorial) 2 - Widget

https://kivy.org/docs/tutorials/firstwidget.html

위 튜토리얼에선 Widget을 집중적으로 설명하고 있다.

Kivy에서 어플리케이션의 사용자 인터페이스는 모두 위젯으로 이루어져 있다.
위젯을 설계할 때 다음 세가지를 꼭 기억해야 한다.
1. What data does my application process?
2. How do I visually represent that data?
3. How does the user interact with that data?

위젯은 data를 가지고 있고, 그 데이터에 대한 사용자와의 상호 작용 방법을 정의한다. 그리고 그것을 시각적으로 표현한다.

제공되는 위젯으로 간단한 것 부터 복잡한 것 까지 다양한 위젯을 만들 수 있다. 위젯은 그 쓰임에 맞게 최소한의 기능으로 그리고 재사용성이 높게 만드는 것이 좋다. (Single Responsibility Principle) 어떤 기능이 더 필요할 때 위젯을 더 만들거나 작은 위젯들을 합쳐서 사용할 수 있다.

Paint Widget¶

[코드 1]

그냥 까만 화면만 나온다.

[코드 2]

6,7 라인의 코드가 추가되었다. Pycharm으로 실행시키고 화면을 마우스로 클릭하면 pycharm의 하단 콘솔창에 그 지점의 좌표가 출력된다.

[코드 3]

3번째 코드에서부터는 화면을 클릭하는 MotionEvent에 의한 반응이 화면에 나타나기 시작한다. 다음은 라인별 설명이다.

• Line 9: 위젯의 Canvas object를 사용할 때 with 을 사용한다. Canvas는 그릴 수 있는 영역이 되는 것이다. 들여쓰기가 올바르게 된 그리기 명령들은 canvas에 영향을 준다. 또 with 문을 사용했기 때문에 그리기 이후에 internal state가 적절히 깨끗해질 수 있다. (internal state가 뭐지?)
• Line 10: 다들 눈치 챘겠지만 RGB 값이다. 
• Line 11: 원의 지름을 선언한다. Line 12에서 지름값을 여러번 사용하기 때문에 변수로 선언한다.
• Line 12: 원을 그리기 위해서 width와 height가 같은 Ellipse를 간단하게 그린다. 사용자가 터치한 곳에 원을 그리고 싶으므로, 터치한 position을 ellipse에 전달한다. Ellipse의 pos의 x,y에 반지름
  
  만큼 빼는 이유는 Ellipse가 클릭한 지점을 원이 중심으로 여기지 않기 때문이다. 오른쪽 그림처럼 하얀색으로 표시한 곳이 마우스 클릭 위치면 그 지점을 왼쪽 아래 모서리로 지정해서 노란색 원이 그림처럼 그려진다. 따라서 마우스 클릭 지점을 원의 중심으로 만들고 싶으면 위 코드처럼 반지름 값을 빼줘야 한다.

[코드 4]

다음은 이전 코드와의 변경사항에 대한 라인별 설명이다.

• Line 3: Line 그리기 도구도 import한다. Line 문서를 보니까 2d Line을 그릴 때 Line(points=[100, 100, 200, 100, 100, 200], width=10) 와 같이 라인이 그려지는 포인트와 선의 두께를 지정할 수 있는 매개변수를 받는다.
• Line 13: touch.ud는 python dictionary다. dictionary에 (x, y) 값들을 저장하는 것이다. on_touch_down 메소드 안에서 행해지는 것이기 때문에 화면 클릭 또는 터치 될 때마다 새로운 라인이 생긴다. with block 안에 line 생성문이 있기 때문에 canvas는 자동적으로 그 라인을 인지하고 그린다. 나중에 그 선을 수정하기 위해 touch.ud dictionary에 임의로 그 라인에 대한 참조를 저장해 놓는다. key값을 'line'으로 설정해 놓았다. 초기 터치 지점이 선이 시작되는 지점이 된다.
• Line 15: MyPaintWidget에 on_touch_move 라는 메소드를 추가했다.  이 메소드는 이미 존재하는 touch가 움직일 때 호출된다. 

[코드 5]

코드5는 코드4에서 매번 터치할 때마다 랜덤 값의 색상이 적용되는 코드가 추가되었다. 일부만 캡쳐해서 가져왔다. random()을 사용하기 위해서 random import statement가 추가되었다.

랜덤 값 3개를 사용해서 임의의 RGB값을 만들어 사용한다. 캔버스에 선을 그릴 때 마다 다른 색이 적용된다.

Bonus Points¶

보너스 포인트에서는 캔버스를 Clear하는 방법을 설명하고 있다.
2가지 옵션이 있다.
첫번째는 위젯에 child로 버튼을 넣는 것이다. 이것은 우리가 만약 위젯을 두 개 이상 만들면 각각의 위젯이 버튼을 가지게 된다는 것을 의미한다. 조심하지 않으면 버튼 위에다가도 그림을 그릴 수 있게 될 것이다.
두번째는 App class에 버튼을 넣고 그것을 누를 때만 위젯을 Clear 하는 것이다.

두번째 옵션을 따라서 작성된 코드이다.

parent 라는 위젯에 paintWidget과 clearBtn 위젯을 추가하여 사용하고 있다.

Kivy 위젯은 아주 간단하지만, 어떻게 Customization 하느냐에 따라 정교하게 사용할 수 있다. 위젯을 잘 사용하려면 API document랑 어떤 subclass가 제공되는지 꼭 읽어보아야 한다!