스파크라인 예제

예제: 스파크라인 사용하기

스파크라인 구성

1. 총 3개의 태그를 생성합니다. 태그 편집기에서 데이터 타입을 Left Button은 BOOL 태그로, Right Button은 BOOL 태그로, SparkLine은 INT16 태그로 설정합니다.

2. 스크립트 편집기에서 Left Button과 Right Button이라는 새로운 스크립트를 생성합니다. 실행 타입은 정주기로 설정합니다.

3. Right Button 스크립트에 다음 코드를 붙여 넣습니다.

while (1) {
	if (tag.read("Right Button")){
		tag.write("SparkLine", tag.read("SparkLine") + 1);
	}
	thread.msleep(50)
}

4. Left Button 스크립트에 다음 코드를 붙여 넣습니다.

while (1) {
	if (tag.read("Left Button")){
		tag.write("SparkLine", tag.read("SparkLine") - 1);
	}
	thread.msleep(50)
}

• 이 코드는 다음 섹션의 객체에 사용됩니다. 왼쪽 또는 오른쪽 버튼이 눌려져 있으면, 어떤 화살표가 눌렸는지에 따라 스파크라인이 위로 또는 아래로 이동하게 됩니다.

5. 화면에 4개의 객체를 그립니다: 스파크라인, 왼쪽과 오른쪽을 가리키는 두 개의 벡터 화살표, 그리고 숫자 입력 필드.

• 벡터 화살표의 경우 리소스 라이브러리 옵션에서 Arrows 검색 후 생성합니다.

6. “SparkLine” 태그를 생성된 스파크라인 테이블에 Smart bind (drag-and-drop) 합니다. 또한 “SparkLine” 태그를 숫자 필드에 연결하여 숫자가 조정되는 것을 확인합니다.

7. 왼쪽과 오른쪽 벡터 이미지의 동작 탭으로 이동하여 누를 때:와 놓을 때: -> 동작을 선택한 후 새 명령 만들기를 선택합니다.

8. 새 명령을 추가하고 명령 종류를 “태그값 설정”으로 선택합니다.
   • 왼쪽 벡터 이미지에는 “Left Button” 태그를 명령에 연결합니다.
   • 오른쪽 벡터 이미지에는 “Right Button” 태그를 명령에 연결합니다.

스파크라인 실행

9. Canvas Simulator 실행하고 프로젝트를 테스트합니다.

10. 왼쪽 또는 오른쪽 화살표 버튼을 누릅니다.

11. 아래와 유사한 결과를 확인합니다.