앞서의 Mypaint 코딩에 ButtonBig 과 ButtonSmall 2가지 버튼을 추가 업데이트하고 Screen1의 Text 박스에 MypaintV2를 입력하고 아울러 파일 이름으로 저장하자.

Mypaint 코딩에서 DrawCircle의 반경(radius)을 5로 지정하였는데 이번에는 그 크기를 ButtonSmall 에는 반경을 2로 ButtonBig에는 반경을 8로 바꾸도록 한다.

Designer 수정 업데이트 작업

디자이너에서 수평박스(HorizontalArrangement)를 하나 끌어다 Wipe 버튼 밑에 둔 후 Wipe 버튼을 수평박스에 집어 넣어 버리자. 아울러 팔레트의 User Inteface에서 버튼을 2개 더 끌어다 수평박스에 집어 넣는다.
수평박스의 Height 와 Width는 둘 다 Automatic 으로 설정한다. 이 수평박스에 3개의 버튼이 위치하게 되는데 Height는 Automatic으로 Width는 33 percent 로 설정하자. 대락 99%이므로 수평박스가 3등분해서 채워지게 된다. 각 버튼의 BackgroundColor는 Cyan, Yellow, Gray 로 설정하자.

Blocks 업데이트 편집

일단 변수(Variables)에서 initialize 퍼즐 조각을 꺼내어 변수명 “name”을 각각 “big”, “small”, “dotsize” 로 다시 입력하자. 아울러 Math에서 숫자 입력 상자를 가져다 끼우고 각각 8, 2, 2로 입력한다. dotsize를 2로 두면 처음에 앱 인벤터 실행 시에 small 에 해당하는 2로 시작하게 되는 셈이다.

ButtonBig을 클릭하면 당연히 들어 있는 When ButtonBig.Click을 드래그 해 와서 Variables 로부터 set ⦁⦁⦁퍼즐조각을 가져와 “global dotsize”를 선택한다. 이 내용은 앞 단계에서 initialize global dotsize 퍼즐 조각이 준비될 때 모든 경우의 수를 고려하여 Variable 에 함게 준비가 되는 것이므로 신기해할 필요는 없다. 다시 Variables에서 get ⦁⦁⦁퍼즐 조각을 가져와 “global big”을 선택한다.

유사한 과정을 ButtonSmall 에 대해서도 되풀이 하도록 한다.
이미 앞서 코딩했던 Mypaint에 업데이트한 내용을 보태어 코딩이 완료되었으면 Blocks 편집기를 빠져나와 디자이너에서 파일을 저장 후 코드를 한번 시험해 보기로 한다.
메뉴에서 Connect 를 눌러 AI Companion을 클릭하여 QR 코드가 나타나면 QR코드 스캔을 실행한다. 이 단계에서 새로 업데이트한 부분 성능을 사용하여 Kitty 화장을 시켜 보자. 흠 흠 그림판 성능이 좀 세밀해진 것 같군요.

맨날 고양이 쌍판 화장만 시킬 수는 없으므로 시시각각 카메라를 촬칵하여 Canvas 밑판을 갈아버리도록 하자. 실제 사진을 찍었다면 귀퉁이에 메모를 남겨도 될 것이다.

User Interface에서 버튼을 하나 더 가져다 ButtonCamera 로 Rename 하고 속성 창에서 Width를 28% 로 둔다. Big 이나 Small 버튼은 23% 로 줄이도록 하자.
디자이너 준비가 되었으면 Blocks 편집기로 넘어간다.

카메라로 이미지를 찍어서 Canvas 용 밑판 그림으로 가져 오도록 하자.
당근 ButtonCamera에서 가져온 when ButtonCamera.Click 퍼즐에 Camera1에서 call Camera1.TakePicture 조각 퍼즐을 가져다 끼우자.

그 다음 스텝은 앱 인벤터 시스템의 call back 기능을 사용한다. Camera1 로부터 when Camera1.AfterPicture 퍼즐을 가져다 Canvas로부터 set DrawingCanvas.BackgroundImage 처즐 조각을 가져다 끼우고 image 버튼을 눌러서 나타나는 get image를 꽁지에 가져다 끼우자.

when Camera1.AfterPicture 퍼즐이 실행되면 앱 인벤터 시스템이 당신이 작성한 코드를 대신 실행하게 된다. 즉 Kitty 사진을 Canvas의 BackgroundImage 에 올렸던 코드 실행 과정을 앱 인벤터가 실행하게 된다는 의미이다.

Blocks 편집을 끝내고 디자이너로 넘어가서 파일을 한번 저장 한 후 Connect 작업을 하고 QR 코드를 스캔하여 얻은 앱을 실행시켜 보자.
카메라 버튼을 눌러 카메라 화면이 나타나면 사진을 찍고 저장 여부를 물어보면 저장버튼을 눌러 주면 앱에 찍은 화면이 나타난다. 뉘어서 landscape 로 찍어야 바로 나오므로 주의하기 바란다. 커버 그림을 참고하기 바란다. 그밖에 추가로 업데이트 되어야 할 내용으로서 그림판 편집된 사진을 저장하는 기능일 것이다.

앱 인벤터를 사용하려면 무선공유기 또는 와이파이가 미리 자신의 PC시스템에 설치되어 있어야 한다. 그 내용은 다음의 url을 참고하도록 한다.

아두이노 코딩-119: 아두이노 앱 인벤터의 시작
https://steemit.com/kr/@codingart/118