스파크라인 예제

예제

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

스파크라인 기능 이해를 위한 예제입니다.

설정

예제에 다음 설정이 필요합니다.

태그 설정

1. 다음 태그를 생성하세요:
   1. Left Button
      • 데이터 종류: BOOL
      • 초기값: false
   2. Right Button
      • 데이터 종류: BOOL
      • 초기값: false
   3. SparkLine
      • 데이터 종류: INT (INT16)
      • 초기값: 0

스크립트 설정

2. 다음 스크립트를 생성합니다.:

   1. Left Button
      • 실행 종류: 정주기
   2. 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. 새 명령을 추가하고 명령 종류를 Set Tag Value으로 선택합니다.
   • 왼쪽 벡터 이미지에는 Left Button 태그를 명령에 연결합니다.
   • 오른쪽 벡터 이미지에는 Right Button 태그를 명령에 연결합니다.

프로젝트 실행

1. 도구 > 시뮬레이터 실행을 선택해 Canvas 시뮬레이터를 실행합니다.

2. 왼쪽 또는 오른쪽 화살표 버튼을 눌러 스파크라인 값을 변경하세요.