컨텐츠로 건너뛰기
CIMON-Canvas v5.0.4

슬라이더 예제

예제

예제: 슬라이더와 스크립트를 사용하여 원의 크기 조정 및 이동하기

슬라이더를 이해하기 위해 아래 예제를 따라하세요.

설정

이 예제를 위해 다음과 같은 설정이 필요합니다.

태그 설정

  1. 다음 태그들을 생성합니다:
  2. Width - 데이터 종류: INT (INT16) - 초기값: 0
  3. Height - 데이터 종류: INT (INT16) - 초기값: 0
  4. X - 데이터 종류: INT (INT16) - 초기값: 0
  5. Y - 데이터 종류: INT (INT16) - 초기값: 0
  6. Go - 데이터 종류: BOOL - 초기값: false

프로젝트 설정 1

  1. Canvas에 6개의 문자 디스플레이 객체를 생성합니다. 삽입 > 문자 디스플레이을 클릭하거나 문자 디스플레이 삽입 아이콘을 클릭하여 문자 디스플레이 객체를 배치합니다.
  • 슬라이더가 위치할 곳 근처에 4개의 문자 디스플레이를 배치합니다. 기본 텍스트인 "새 문자"로 두거나 나중에 태그를 연결할 수 있습니다.
  • 문자 디스플레이 두개를 배치합니다. 크기 조절 컨트롤 아래에는 “Grow”, 위치 조절 컨트롤 아래에는 “Move” 로 변경하세요.

  1. 타원을 삽입하고 크기와 위치에 태그를 연결합니다.
  • 삽입 > 타원을 클릭하고 드래그 하여 원을 배치합니다.
  • 타원을 선택한 상태에서 속성을 엽니다. 태그 목록에서 필드로 태그를 드래그하거나 직접 태그를 선택하여 다음과 같이 태그를 연결하세요.
    • 너비 → Width
    • 높이 → Height
    • X → X
    • Y → Y

  1. 슬라이더 4개를 삽입하고, 각각의 범위를 태그에 할당하세요
  • 삽입 > 슬라이더를 통해 수직 슬라이더 2개와 수평 슬라이더 2개를 삽입하고 드래그하여 배치합니다.
  • 각 슬라이더의 값 속성에 태그 목록에서 태그를 드래그하거나 직접 태그를 선택해 연결하세요.
  • 최솟값, 최댓값, 단계를 아래와 같이 설정하세요:
    • 수직 슬라이더 → Width — 최솟값 0, 최댓값 200, 단계 1
    • 수평 슬라이더 → Height — 최솟값 0, 최댓값 200, 단계 1
    • 수직 슬라이더 → X — 최솟값 0, 최댓값 600, 단계 1
    • 수평 슬라이더 → Y — 최솟값 0, 최댓값 160, 단계 1

  1. Go 버튼을 위해 사각형을 생성하세요.
  • 삽입 > 사각형을 클릭하고 드래그하여 배치합니다.
    • 사각형이 선택된 상태에서 속성의 동작을 탭에서 누를 때의 동작에 새 명령 추가를 클릭하고 태그값 토글을 선택합니다. 1 단계에서 생성한 Go 태그를 선택하세요.

스크립트 구성

  1. 다음 스크립트를 생성합니다.:
  2. Move - 실행 종류: 정주기
// ----- Config ----- //
var CONFIG = {
  intervalMs: 10, // 업데이트 속도 (밀리초)
  tags: {
    "Width":  [0, 200, 1],
    "Height": [0, 200, 1],
    "X":      [0, 600, 1],
    "Y":      [0, 160, 1]
  }
};

// 각 태그의 방향을 추적합니다.
var direction = {};
for (var name in CONFIG.tags) {
  direction[name] = 1; // 증가하는 것으로 시작합니다.
  tag.write(name, CONFIG.tags[name][0]); // 최소값(0)에서 시작합니다.
}

// ----- Helpers ----- //
function clamp(v, min, max) { return v < min ? min : (v > max ? max : v); }

// ----- Main loop ----- //
while (1) {
  if (tag.read("Go")) {
    for (var t in CONFIG.tags) {
      var s = CONFIG.tags[t];
      var min = s[0], max = s[1], step = s[2];

      var current = tag.read(t);
      if (current === undefined || current === null || isNaN(current)) {
        current = min; // 안전을 위해 초기화합니다.
      }

      var next = current + (step * direction[t]);

      // 경계에 도달하면 방향을 바꿉니다.
      if (next >= max) {
        next = max;
        direction[t] = -1;
      } else if (next <= min) {
        next = min;
        direction[t] = 1;
      }

      tag.write(t, clamp(next, min, max));
    }
  }
  thread.msleep(CONFIG.intervalMs);
}

프로젝트 설정 2

  1. 5 단계에서 생성한 사각형에 Move 스크립트를 연결합니다.
  • 사각형을 클릭하고 객체 속성의 동작 > 누를 때에서 새 명령을 추가하세요. 스크립트 아래에서 스크립트 호출을 선택하고 Move 스크립트를 선택하세요.

프로젝트 실행

  1. 도구 > 시뮬레이터 실행을 클릭하여 시뮬레이터를 실행합니다.

  2. 수동 제어: 슬라이더를 드래그합니다.

  • Width 와 Height 를 늘리면 원이 커집니다. (Grow 영역).
  • X 와 Y 를 변경하면 원의 위치가 변경됩니다. (Move 영역).

  1. 자동 애니메이션: 사각형 버튼을 클릭하여 Go = True 상태로 전환합니다.
  • Go 태그가 true일 때, Move 스크립트가 계속 실행됩니다.
    • 각 태그는 50ms 마다 1 단계식 최솟값과 최댓값 사이를 "핑퐁" 합니다.
  • 사각형을 다시 클릭하여 Go를 False로 전환하면 애니메이션이 멈춥니다.