SSVEP Next:现代化的 SSVEP 可视化 Web 快速实现
i18n 支持、拖拽界面和实时刺激渲染
SSVEP-Next 是一个基于 React、TypeScript 和 Vite 构建的单页面应用 (SPA),旨在提供一个直观、高效的图形化界面,用于设计和运行稳态视觉诱发电位 (SSVEP) 实验中的视觉刺激。用户可以通过拖拽、配置属性的方式,在画布上轻松创建和管理 SSVEP 刺激界面。
主要特性包括:
- 可视化设计器: 通过拖拽方式在画布上布局刺激方块、文本和 iframe 控件。
- 属性配置: 实时调整控件的频率、文本、颜色、位置和大小等属性。
- 刺激渲染: 精确渲染配置好的 SSVEP 刺激,支持全屏运行模式。
- 画布自定义: 自由设置画布大小,适应不同屏幕和实验需求。
- 矩阵一键生成: 快速创建行列均匀分布的刺激矩阵。
- 全局默认配置: 统一设置新刺激块的初始属性,简化重复操作。
- 多种控件支持: 除了刺激方块外,还支持文本控件和 iframe 嵌入控件。
- 布局优化: 采用稳定的三栏式布局,交互体验更流畅。
- 国际化支持: 支持中英文界面切换,自动检测浏览器语言偏好。
- 模块化组件: 清晰的项目结构,便于功能扩展和维护。
本项目深受 quick-ssvep 的启发,并旨在将其核心科学功能与现代 Web 开发范式相结合,提供更强大、更灵活的实验设计工具。
特性 | quick-ssvep | SSVEP-Next (本项目) |
---|---|---|
核心范式 | 参数化配置,代码驱动 | ✅ 可视化、拖拽式设计 |
技术架构 | 原生 JavaScript, HTML, CSS | ✅ React, TypeScript, Vite (现代 Web 架构) |
刺激类型 | 仅支持方波,颜色与样式固定 | 多种波形类型支持:方波、正弦波;用户可自定义颜色与样式 |
多种控件支持 | 仅支持刺激方块 | ✅ 刺激方块、文本控件、iframe 嵌入控件 |
状态管理 | 全局变量,DOM 查询 | ✅ Zustand (集中式、可预测的状态管理) |
频率测量 | 直接测量瞬时/平均频率 | ✅ 继承并优化:实现相同的直接测量法,并增加滑动窗口平滑 |
帧率监控 | 启动前预估 | ✅ 实时动态监控,运行时反馈更准确 |
分享与协作 | 生成静态 URL | ✅ 继承并优化 一键分享链接,轻松复现实验设计 |
国际化 | 无 | ✅ i18n 支持 (中英文切换) |
部署 | 手动上传文件 | ✅ CI/CD 自动化部署 (GitHub Actions) |