Skip to content

Eye Diagram#285

Open
chule wants to merge 18 commits intodev_v5.xfrom
eyeDiagram
Open

Eye Diagram#285
chule wants to merge 18 commits intodev_v5.xfrom
eyeDiagram

Conversation

@chule
Copy link
Copy Markdown
Contributor

@chule chule commented May 6, 2026

This example demonstrates a real-time Eye Diagram (persistence display) built with SciChart.js. It simulates an MLT-3 (Multi-Level Transmit 3) serial data signal — the line code used in 100BASE-TX Ethernet — and renders two panels: a live waveform line chart on top and an accumulating 2D density heatmap on the bottom, producing the oscilloscope persistence glow that signal-integrity engineers use to evaluate jitter, noise, and eye opening. MLT-3's three voltage levels (+1 V, 0 V, −1 V) create two stacked eye openings visible once enough traces have accumulated.

chule added 18 commits April 23, 2026 00:56
…ration

Implements signal generation helpers (gaussianRandom, generateTrace, binTrace)
and the SciChart heatmap accumulation loop for the eye diagram visualization.
Create the React wrapper component for Eye Diagram Chart that:
- Uses SciChartReact to mount the drawExample initialization
- Calls startAnimation() on init to ensure animation starts after surface is ready
- Calls cleanup() on delete to stop animation and teardown resources
Adds the metadata configuration file for the Eye Diagram example, defining
framework descriptions, documentation links, and sandbox settings for the
real-time persistence display demonstration.
…chart

Create entry point files for the Eye Diagram Chart example:
- vanilla.ts: Standalone initialization with animation controls
- angular.ts: Angular component wrapper with lifecycle hooks

Both integrate with drawExample to render heatmap eye diagram with
streaming NRZ signal traces and real-time statistics overlay.
Register the EyeDiagramChart example in the AppRouter paths and Scientific Charts menu for routing discovery and navigation.
Switch all documentation from NRZ to MLT-3 (README, subtitles,
markdownContent for JS/React/Angular, metaKeywords). Add per-trace
amplitude scaling, DC offset, and independent per-edge rise time
variation to generateTrace() for a more realistic oscilloscope look.
Refactor eye diagram from a single heatmap to a two-panel layout using
SciChartSubSurface. The top 28% shows the most recent trace as a cyan
FastLineRenderableSeries; the bottom 72% retains the accumulating
UniformHeatmapRenderableSeries. Uses createSingle + createSubSurface to
share a single wasmContext, avoiding multi-surface init complexity.

Also adds per-trace amplitude scaling, DC offset, and independent
per-edge rise time variation for more realistic oscilloscope fuzz.
Update docs, markdown content, and preview screenshot accordingly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants