앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편

앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편

반드시 앱인벤터 멀티스크린 도화지앱(multi screen)-1 편 설계편을 꼭 읽어오기를 추천한다.

설계를 이해해야 이번 글을 이해하고 실습을 할 수 있으니 꼭 설계편을 읽어오기를 바란다.

 

>>>> 멀티스크린 도화지앱-설계편

 

코딩블럭

블록 코딩은 정말 간단한다.

우리가 무엇을 할 것인지 생각해보라.

* Screen1 스크린에서는 그림을 그린다.

  . 캔버스 컴포넌트를 배치하고, 

  . 스마트폰 화면 위에 손을 드래그한다.

    -> 캔버스에서 드래그 이벤트에서 원하는 작업을 하면 된다.('드래그' 블록)

    -> 우리는 여기에 선을 그릴 것이다.('선그리기' 블록)

 

* ColorPicker 스크린에서는 색상을 선택한다.

  . 빨강, 초록, 파랑 슬라이더를 통해 색상을 만든다.

  . 선택한 색상값을 반환한다.

 

 

Screen1 블록 코딩

. 전역변수

currentColor 리스트 변수

. 1번항목 : 빨강값(0~255)

. 2번항목 : 초록값(0~255)

. 3번항목 : 파랑값(0~255)

으로 구성하여 RGB값을 관리한다.

기본값은(0, 0, 0)이다ㅣ.

 

. Screen1이 초기화되었을때

멀티스크린 도화지앱이 최초 실행이 될  때, currentColor값을 초기화하며, 캔버스의 페인트색상과, 레이블의 배경색을 currentColor로 설정한다.

앱인벤터 멀티스크린 도화지 앱 초기화되었을때 블록

 

. 드래그 (드래그 이벤트 때 선 그리기)

캔버스 컴포넌트 위에 드래그 이벤트가 발생하면 호출되는 이벤트 블록이다.

이 때, 캔버스 위에 이전의 위치(x,y)에서 현재의 위치(x,y)로 선을 그리면 된다.

앱인벤터 멀티스크린 도화지앱 드래그 선그리기 블록

 

. Reset 버튼을 클릭했을 때

Reset 버튼을 클릭하면 캔버스 위에 그린 그림들을 모두 지운다.

앱인벤터 멀티스크린 도화지앱 Reset버튼 클릭했을때 블록

 

. ColorPicker 버튼을 클릭했을 때

ColorPicker 버튼을 클릭하면 ColorPicker 스크린으로 전환한다.

스크린 전환하기 위해서 '시작 값을 전달하며 다른 스크린 열기' 블록을 활용하여 전환한다.

인자값으로 '스크린 이름'에는 'ColorPicker' 스크린 이름을 입력하고,

시작 값에는 'currentColor' 리스트 변수 값을 전달한다. 굳이 전달하지 않아도 되는데, 현재 설정한 color를 사용자에게 표기하기 위해 전달한다. (빨강, 초록, 파랑 슬라이더의 썸네일 위치값들도 조절하기 위해 전달한다.)

앱인벤터 멀티스크린 도화지 앱 시작값을 전달하며 다른 스크린 열기 블록

 

. 다른스크린을 닫았을때

ColorPicker 스크린이 닫게되면, '다른스크린을닫았을때' 이벤트가 호출이 된다.

Screen1 스크린에서 '다른스크린을닫았을때' 이벤트를 수신하게 되면 색상을 선택한 값을 '결과', 변수에 전달해준다.

전달한 결과 리스트값을 'currentColor' 리스트 변수에 지정한다.

앱인벤터 멀티스크린 도화지앱 다른스크린을닫았을때 블록

 

이것으로 Screen1 스크린의 블록코딩을 완성하였다.

 

이제 ColorPicker 스크린 블록 코딩을 해보자

 

 

ColorPicker 블록 코딩

 

전역변수

. RGB 리스트 변수 

  . 슬라이더에서 설정한 값의 빨강, 초록, 파랑 값을 리스트로 관리한다.

    - 리스트의 1, 2, 3번째 항목 위치에 빨강, 초록, 파랑 값을 삽입하고 관리하다.

  . 초기값은 빈리스트로 만들어진다.

  . 이후 Screen1에서 전환될 때 전달되는 값으로 변경된다.

앱인벤터 멀티스크린 도화지앱 RGB 전역변수

 

. ColorPicker 스크린 초기화되었을 때

Screen1 스크린에서 ColorPicker 스크린으로 전환되어 스크린이 초기화될 때의 코딩이다. 

Screen1 스크린에서 전달한 currentColor값은 '시작 값 가져오기' 블록으로 전역변수 RGB를 초기화한다.

빨강, 초록, 파랑 슬라이더의 섬네일위치값을 RGB값으로 설정한다.

레이블의 배경색은 변수 RGB값을 활용하여 색상만들기 블록을 통해 배경색에 지정한다.

앱인벤터 멀티스크린도화지앱 ColorPicker 스크린 초기화되었을때 블록

 

. 위치가 변경되었을때(슬라이더 섬네일 위치가 변경되면 색을 변경한다.)

빨강, 초록, 파랑 스프너의 바의 위치가 변경되면 선의 색을 변경한다.

여기서는 레이블의 배경색을 변경하여 사용자에게 현재 변경된 색을 알려준다.

또한 캔버스의 페인트색상을 변경하여 선을 그릴 때 색상을 변경한다.

앱인벤터 멀티스크린 도화지앱 빨강 슬라이더 컴포넌트 위치가변경되었을 때 블록

 

앱인벤터 멀티스크린 도화지앱 초록 슬라이더 컴포넌트 위치가변경되었을 때 블록

 

앱인벤터 멀티스크린 도화지앱 파랑 슬라이더 컴포넌트 위치가변경되었을 때 블록

 

실행결과 화면

 

앱인벤터의 도화지 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

 

앱인벤터 멀티스크린 도화지앱 첫실행 화면

 

캔버스에 '안녕'이란 글자를 사용한 화면이다. 초기 캔버스 페인트 색상은 검정색이다.

 

앱인벤터 멀티스크린 도화지앱 실행화면

 

'ColorPicker' 스크린으로 이동하기 위해 "ColorPicker" 버튼을 클릭한다.

 

앱인벤터 멀티스크린 도화지앱 ColorPicker 스크린 실행화면

 

빨강, 초록, 파랑 슬라이더를 이동하여 원하는 색을 선택한다.

 

앱인벤터 멀티스크린 도화지앱 ColorPicker 스크린 색상선택

 

색상선택이 완료되면 'GoToPainting' 버튼을 눌러 Screen1 스크린으로 이동한다.

이동해서 '멀티스크린' 핑크와 유사한 색으로 글씨를 썼다.

 

앱인벤터 멀티스크린 도화지앱 캔버스 실행화면

 

아래는 앱인벤터 도화지앱의 실행 동영상이다.

 

앱인벤터 멀티스크린 도화지앱 동영상실행

 

지금까지 '멀티스크린 도화지' 앱을 작성하였다. 캔버스와 슬라이더를 활용하여 색상을 선택하고 그림을 그리는 앱을 작성해보았다. 여기서 핵심 기술은 스크린간의 전환과 스크린간의 데이터를 송수신하는 기술을 배웠다. 

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.