Framist's Little House

◇ 自顶而下 - 面向未来 ◇

0%

SSVEP-Next

SSVEP Next:现代化的 SSVEP 可视化 Web 快速实现

i18n 支持、拖拽界面和实时刺激渲染

在线使用 | Github

image

SSVEP-Next 是一个基于 React、TypeScript 和 Vite 构建的单页面应用 (SPA),旨在提供一个直观、高效的图形化界面,用于设计和运行稳态视觉诱发电位 (SSVEP) 实验中的视觉刺激。用户可以通过拖拽、配置属性的方式,在画布上轻松创建和管理 SSVEP 刺激界面。

主要特性包括:

  • 可视化设计器: 通过拖拽方式在画布上布局刺激方块、文本和 iframe 控件。
  • 属性配置: 实时调整控件的频率、文本、颜色、位置和大小等属性。
  • 刺激渲染: 精确渲染配置好的 SSVEP 刺激,支持全屏运行模式。
  • 画布自定义: 自由设置画布大小,适应不同屏幕和实验需求。
  • 矩阵一键生成: 快速创建行列均匀分布的刺激矩阵。
  • 全局默认配置: 统一设置新刺激块的初始属性,简化重复操作。
  • 多种控件支持: 除了刺激方块外,还支持文本控件和 iframe 嵌入控件。
  • 布局优化: 采用稳定的三栏式布局,交互体验更流畅。
  • 国际化支持: 支持中英文界面切换,自动检测浏览器语言偏好。
  • 模块化组件: 清晰的项目结构,便于功能扩展和维护。

image

本项目深受 quick-ssvep 的启发,并旨在将其核心科学功能与现代 Web 开发范式相结合,提供更强大、更灵活的实验设计工具。

特性 quick-ssvep SSVEP-Next (本项目)
核心范式 参数化配置,代码驱动 可视化、拖拽式设计
技术架构 原生 JavaScript, HTML, CSS React, TypeScript, Vite (现代 Web 架构)
刺激类型 仅支持方波,颜色与样式固定 多种波形类型支持:方波、正弦波;用户可自定义颜色与样式
多种控件支持 仅支持刺激方块 刺激方块、文本控件、iframe 嵌入控件
状态管理 全局变量,DOM 查询 Zustand (集中式、可预测的状态管理)
频率测量 直接测量瞬时/平均频率 继承并优化:实现相同的直接测量法,并增加滑动窗口平滑
帧率监控 启动前预估 实时动态监控,运行时反馈更准确
分享与协作 生成静态 URL 继承并优化 一键分享链接,轻松复现实验设计
国际化 i18n 支持 (中英文切换)
部署 手动上传文件 CI/CD 自动化部署 (GitHub Actions)