Waveform Graph Exercise

Exercise

Exercise: Visualizing Multi-Signal Data with a Waveform Graph

Please follow the below exercise to understand how the Waveform Graph can visualize multiple data streams and mathematical signal processing in real-time.

Configuration

The following configuration is used to set up this exercise.

Tag Configuration

1. Create a tag group named Wave, and add the following tags:
   1. Wave_Base
      • Data type: REAL (FLOAT32)
      • Initial value: 0
   2. Wave_Harmonic
      • Data type: REAL (FLOAT32)
      • Initial value: 0
   3. Wave_Combined
      • Data type: REAL (FLOAT32)
      • Initial value: 0
2. Create two additional tags separately (not within the group):
   1. Step
      • Data type: INT (INT16)
      • Initial value: 0
   2. Trigger
      • Data type: BOOL
      • Initial value: 0

Script Configuration

3. Create the following script to calculate the mathematical relationship between the signals:
   1. GenerateComplexWave
      • Running type: Manual

// 1. Get the current position
var x = tag.read("Step");

// 2. Calculate the Base Wave (Slow and steady)
var base = 40 * Math.sin(0.1 * x) + 50;
tag.write("Wave/Wave_Base", base);

// 3. Calculate a Harmonic (Fast ripple)
var harmonic = 10 * Math.sin(0.5 * x);
tag.write("Wave/Wave_Harmonic", harmonic + 50); // Offset by 50 to center it

// 4. Calculate the Combined Signal (Base + Harmonic + "Noise")
// Math.random() adds a little jitter to make it look like a real sensor
var noise = Math.random() * 5;
var combined = base + harmonic + noise;
tag.write("Wave/Wave_Combined", combined);

// 5. Advance the step and loop at 100
if (x >= 100) {
tag.write("Step", 0);
} else {
tag.write("Step", x + 1);
}

Project Configuration

4. Create a Toggle Button on the page.
   • Set the Name to "Update Waveform".
   • Drag and drop the Trigger tag onto the toggle button.
   • Under the Actions properties, select Add New Command under On Press.
   • Select the Script > Call Script command and call the GenerateComplexWave script.

5. Create a Waveform Graph by going to Insert > Waveform Graph or clicking the icon on the toolbar.

Waveform Graph Configuration

6. Bind Pens: Drag the Wave tag group onto the graph to include all three signals. Set visual properties:
   • Dot Size: 10
   • Dot Color: Red
   • Stroke Width: 5
   • Stroke Color: Blue

Project Deployment

1. Click Tools > Launch Simulator to launch the Canvas Simulator.

2. Click the Update Waveform button repeatedly.

3. Observe how the Waveform Graph updates dynamically based on the changing tag values.