본문으로 건너뛰기
버전: v5.x.y

예제

예제: 파형 그래프를 이용한 다중 신호 데이터 시각화

파형 그래프 기능을 이해하기 위해 아래 예제를 따라 해 주십시오. 실시간으로 다중 데이터 스트림과 수학적 신호 처리를 파형 그래프가 어떻게 시각화하는지 이해하기 위해 아래 예제를 수행해 주십시오.

구성​

이 예제를 설정하는 데 다음 구성이 사용됩니다.

태그 구성​

  1. Wave라는 이름의 태그 그룹을 생성하고 다음 태그들을 추가합니다.

    1. Wave_Base
      • 데이터 타입: REAL (FLOAT32)
      • 초기값: 0
    2. Wave_Harmonic
      • 데이터 타입: REAL (FLOAT32)
      • 초기값: 0
    3. Wave_Combined
      • 데이터 타입: REAL (FLOAT32)
      • 초기값: 0

  2. 별도로 두 개의 태그를 추가로 생성합니다 (그룹 외부).

    1. Step
      • 데이터 타입: INT (INT16)
      • 초기값: 0
    2. Trigger
      • 데이터 타입: BOOL
      • 초기값: 0

스크립트 구성​

  1. 신호 간의 수학적 관계를 계산하기 위해 다음 스크립트를 생성합니다.
    1. GenerateComplexWave
      • 실행 타입: 수동

// 1. 현재 위치 가져오기
var x = tag.read("Step");

// 2. 기본 파형 계산 (느리고 안정적으로)
var base = 40 * Math.sin(0.1 * x) + 50;
tag.write("Wave/Wave_Base", base);

// 3. 고조파 계산 (빠른 물결)
var harmonic = 10 * Math.sin(0.5 * x);
tag.write("Wave/Wave_Harmonic", harmonic + 50); // 중심을 맞추기 위해 50 오프셋

// 4. 결합 신호 계산 (기본 + 고조파 + "노이즈")
// Math.random()은 실제 센서처럼 보이도록 약간의 지터를 추가합니다.
var noise = Math.random() * 5;
var combined = base + harmonic + noise;
tag.write("Wave/Wave_Combined", combined);

// 5. 단계를 진행하고 100에서 루프
if (x >= 100) {
tag.write("Step", 0);
} else {
tag.write("Step", x + 1);
}

프로젝트 구성​

  1. 페이지에 토글 버튼을 생성합니다.
    • 이름을 **"Update Waveform"**으로 설정합니다.
    • Trigger 태그를 토글 버튼 위로 드래그 앤 드롭합니다.
    • 동작 속성에서 누를 때 항목에 새 명령 추가를 선택합니다.
    • 스크립트 > 스크립트 호출 명령을 선택하고 GenerateComplexWave 스크립트를 호출합니다.

  1. 삽입 > 파형 그래프로 이동하거나 툴바의 아이콘을 클릭하여 파형 그래프를 생성합니다.

파형 그래프 구성​

  1. 펜 연결: Wave 태그 그룹을 그래프로 드래그하여 세 가지 신호를 모두 포함시킵니다. 시각적 속성을 다음과 같이 설정합니다.
    • 점 크기: 10
    • 점 크기: 빨강
    • 선 굵기: 5
    • 선 색상: 파랑

프로젝트 배포​

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

  2. Update Waveform 버튼을 반복해서 클릭합니다.

  3. 변경되는 태그 값에 따라 파형 그래프가 동적으로 업데이트되는 모습을 관찰합니다.