# helloqml

**Repository Path**: weekend/helloqml

## Basic Information

- **Project Name**: helloqml
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-23
- **Last Updated**: 2026-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HelloQml — Waveform Viewer

Qt 6.8 QML 波形查看器，演示四种渲染后端在波形显示场景下的对比。

## 项目结构

```
HelloQml/
├── src/
│   ├── main.cpp                    # 入口：注册 QML 类型，加载数据
│   ├── Main.qml                    # 主界面：工具栏 + ComboBox 切换 + 4 后端叠加
│   ├── WaveformParser.h / .cpp     # 数据解析（GBK CSV → QVector<QPointF>）
│   ├── WaveformPlot.h / .cpp       # ① QPainter 后端
│   ├── WaveformPlotQSG.h / .cpp    # ② QSGNode 后端
│   ├── WaveformPlotGL.h / .cpp     # ③ OpenGL/GLSL 后端
│   └── WaveformPlotCharts.h / .cpp # ④ Qt Charts 数据桥接
├── data/
│   └── wave_data.csv               # 测试数据（280 点，2 通道，1ms 采样）
└── CMakeLists.txt
```

## 四种渲染后端

| | ① QPainter | ② QSGNode | ③ OpenGL | ④ Qt Charts |
|---|---|---|---|---|
| **基类** | `QQuickPaintedItem` | `QQuickItem` | `QQuickFramebufferObject` | `QQuickItem` + ChartView |
| **光栅化** | CPU（QPainter 软件） | GPU（Scene Graph） | GPU（手写 GLSL） | GPU（内部实现） |
| **坐标变换** | CPU 逐点映射 | CPU 预计算 → VBO | GPU Vertex Shader MVP | 自动 |
| **拖拽平移** | 手写鼠标事件 | 手写鼠标事件 | 手写鼠标事件 | 内置手势 |
| **百万点性能** | 不可用 | 可用 | 最优 | 一般 |
| **代码量** | ~200 行 | ~250 行 | ~270 行 | ~140 行 |
| **自定义程度** | 完全自由 | 自由 | 完全自由 | 受限于 Chart API |
| **许可证** | LGPL | LGPL | LGPL | GPLv3 / 商用 |

### 各方案适用场景

- **QPainter** — 快速原型、几百到几千点的小数据集、需要富文本/复杂标注
- **QSGNode** — 几万到几十万点、想用 GPU 但不想手写 shader、需与 QML 原生 item 混合
- **OpenGL** — 百万点级实时波形、需要极致性能、可完全控制渲染管线
- **Qt Charts** — 通用图表（柱状图/饼图等）、不需要实时刷新的静态数据展示

## 模块依赖关系

```
Qt6::Core                         ← 事件循环 / 容器 / IO
  ├─ Qt6::Gui                     ← OpenGL / 字体 / 图像
  │    ├─ Qt6::Quick              ← QML 引擎 + Scene Graph
  │    │    ├─ ① QPainter          QQuickPaintedItem
  │    │    ├─ ② QSGNode           QQuickItem::updatePaintNode
  │    │    └─ ③ OpenGL            QQuickFramebufferObject + GLSL
  │    ├─ Qt6::OpenGL             ← 原始 OpenGL 头文件
  │    └─ Qt6::OpenGLWidgets
  └─ Qt6::Widgets                 ← QApplication / QStyle
       └─ Qt6::Charts             ← QGraphicsView + QML 绑定
            └─ ④ Qt Charts         ChartView + LineSeries
```

| 后端 | 核心 Qt 模块 | 额外运行时要求 |
|---|---|---|
| ① QPainter | `Quick` | — |
| ② QSGNode | `Quick` | `<QtGui/qopengl.h>`（GL 常量） |
| ③ OpenGL | `Quick` + `OpenGL` | GLSL 3.3 core 上下文（Qt Quick 自动提供） |
| ④ Qt Charts | `Quick` + `Charts` + `Widgets` | `QApplication`（需要 QStyle 引擎） |

## Build and run on win

```bat
:: build
cmake -S . -B build -G "Visual Studio 17 2022" -DCMAKE_PREFIX_PATH=C:\Qt\6.8.3\msvc2022_64
cmake --build build --config Release

:: run
SET PATH=C:\Qt\6.8.3\msvc2022_64\bin;%PATH%
build\Release\appHelloQml.exe
```

如 MSBuild 报 FileTracker 路径错误，改用 Ninja：
```bat
:: build
set PATH=C:\Qt\Tools\Ninja;%PATH%
call "C:\Program Files\Microsoft Visual Studio\2022\Professional\VC\Auxiliary\Build\vcvars64.bat"
cmake -S . -B build -G Ninja -DCMAKE_PREFIX_PATH=C:\Qt\6.8.3\msvc2022_64
cmake --build build --config Release

:: run
SET PATH=C:\Qt\6.8.3\msvc2022_64\bin;%PATH%
build\appHelloQml.exe
```

## Build and run on ubuntu

```bash
rm -rf build
cmake -S . -B build -G Ninja -DCMAKE_PREFIX_PATH=/opt/qt-6.8.3/host
cmake --build build --config Release
export LD_LIBRARY_PATH=/opt/qt-6.8.3/host/lib:${LD_LIBRARY_PATH}
build/appHelloQml

# Could not find the Qt platform plugin "xcb"
# Could not load the Qt platform plugin "wayland"
export QT_QPA_PLATFORM=eglfs
./build/appHelloQml
```

## Build and run on rk3588

```bash
rm -rf build
cmake -S . -B build -G Ninja -DCMAKE_PREFIX_PATH=/opt/qt-6.8.3/host
cmake --build build --config Release
export LD_LIBRARY_PATH=/opt/qt-6.8.3/rk3588/lib:${LD_LIBRARY_PATH}
build/appHelloQml
```

## 操作说明

- **Render** 下拉框切换四种渲染后端
- **Grid** 切换网格显示
- **All** 切换单通道 / 全部通道叠加
- **Reset** 重置平移
- 鼠标左键拖拽平移视图（Qt Charts 自带触控手势）