IOTCAI 多媒体教学系统 - 功能说明与迭代开发

系统概述
IOTCAI 是一个基于 Qt C++ 开发的多媒体计算机辅助教学系统，专门用于物
联网技术的教学和练习。系统集成了图像热区交互、多媒体播放、数据库管理
和习题测试等功能，为教师和学生提供全面的教学体验。

主要功能模块

1. 核心框架模块
    主界面系统 (mainwindow.cpp) - 系统入口和导航中心
    数据库管理 (database.cpp) - SQLite 数据持久化存储
    音频管理 (audiomanager.cpp) - 全局音频控制和独占播放
    样式管理 (styles.cpp) - DPI 自适应和统一样式
2. 教学功能模块
    热区编辑器 (hotspoteditor.cpp, hotspot.cpp) - 可视化热区创建和管理
    实战练习模式 (practicemode.cpp) - 交互式热区教学
    视频学习区 (extendedvideowindow.cpp) - 增强视频播放功能
    习题测试系统 (exercisewindow.cpp) - 多种题型练习
3. 辅助功能模块
    基础篇/概述篇 (basicwindow.cpp, overviewwindow.cpp) - 理论知识学习
    图像显示组件 (imagedisplay.cpp) - 自适应图像显示
    场景管理 (scene2.cpp) - 特殊场景处理

迭代开发历程
第一阶段：基础框架搭建 (v0.1)
目标：建立基本的应用程序框架和数据库结构
cpp
// mainwindow.cpp - 初始版本
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
// 基础UI设置
setWindowTitle(“物联网教学系统”);
setMinimumSize(800, 600);

// 简单按钮布局 
QVBoxLayout *layout = new QVBoxLayout(); 
QPushButton *practiceBtn = new QPushButton("实战练习"); 
layout->addWidget(practiceBtn); 
 
// 连接信号 
connect(practiceBtn, &QPushButton::clicked, this, &MainWindow::onPractic

eClicked);
}

// database.cpp - 初始数据库结构
bool Database::initializeTables()
{
QSqlQuery query;
return query.exec(“CREATE TABLE IF NOT EXISTS practice1 (”
"id INTEGER PRIMARY KEY, "
“BMPfile TEXT, Sound TEXT)”);
}
第二阶段：热区编辑功能 (v0.5)
目标：实现可视化热区编辑和数据采集
cpp
// hotspoteditor.cpp - 热区编辑功能
void HotspotEditor::setupHotspots()
{
// 从数据库加载热区数据
QSqlQuery query;
query.exec(“SELECT * FROM practice1”);

while (query.next()) { 
    Hotspot *hotspot = new Hotspot(m_scene); 
    hotspot->setRect(query.value("ClickX").toInt(),  
                    query.value("ClickY").toInt(), 
                    query.value("ClickWidth").toInt(), 
                    query.value("ClickHeight").toInt()); 
    m_scene->addItem(hotspot); 
} 

}

// hotspot.cpp - 热区交互
void Hotspot::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
// 热区选择和拖动功能
if (event->button() == Qt::LeftButton) {
m_isDragging = true;
m_dragStart = event->pos();
}
}
第三阶段：多媒体集成 (v0.8)
目标：集成音频视频播放和资源管理
cpp
// audiomanager.cpp - 音频控制
void AudioManager::playExclusive(QMediaPlayer *player, const QString &fileP
ath)
{
// 停止所有其他声音
stopAll();
// 播放新声音
player->setMedia(QUrl::fromLocalFile(filePath));
player->play();
}
// extendedvideowindow.cpp - 视频播放
void ExtendedVideoWindow::setupMediaPlayer()
{
m_mediaPlayer = new QMediaPlayer(this);
m_mediaPlayer->setVideoOutput(m_videoWidget);
// 连接控制信号
connect(m_playButton, &QPushButton::clicked, this, &ExtendedVideoWindo
w::playVideo);
connect(m_volumeSlider, &QSlider::valueChanged, this, &ExtendedVideoWind
ow::setVolume);
}
第四阶段：自适应界面 (v1.0)
目标：实现DPI自适应和响应式布局
cpp
// styles.cpp - 自适应样式
qreal StyleManager::dpiScaleFactor()
{
QScreen *screen = QApplication::primaryScreen();
if (!screen) return 1.0;
qreal dpi = screen->logicalDotsPerInch();
return dpi / 96.0; // 基于96DPI的标准缩放
}
int StyleManager::scaledSize(int baseSize)
{
return static_cast(baseSize * dpiScaleFactor());
}

// mainwindow.cpp - 响应式布局
void MainWindow::resizeEvent(QResizeEvent *event)
{
QMainWindow::resizeEvent(event);

// 根据窗口大小调整布局参数 
int margin = qMax(30, width() / 50); 
if (centralWidget() && centralWidget()->layout()) { 
    centralWidget()->layout()->setContentsMargins(margin, margin, margi

n, margin);
}
}
第五阶段：完整功能集成 (v1.2)
目标：整合所有模块，优化用户体验
cpp
// practicemode.cpp - 完整实战练习
void PracticeMode::loadCurrentData()
{
// 加载图像
QString imagePath = Database::getResourcePath(“images”) + “/” +
m_currentData.value(“BMPfile”).toString();
QPixmap pixmap(imagePath);
m_imageLabel->setPixmap(pixmap);

// 播放音频 
QString audioPath = Database::getResourcePath("sounds") + "/" +  
                   m_currentData.value("Sound").toString(); 
AudioManager::instance()->playExclusive(m_mediaPlayer, audioPath); 
 
// 显示说明 
m_textBrowser->setHtml(m_currentData.value("Description").toString()); 
 
// 设置热区 
setupHotspots(); 

}

// main.cpp - 完善的启动流程
int main(int argc, char *argv[])
{
QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication a(argc, argv);
// 确保资源目录存在
Database::ensureResourceDirectories();
MainWindow w;
w.showMaximized();
return a.exec();
}

界面设计演进
初始界面 (v0.1)
cpp
// 简单按钮布局
QPushButton *btn1 = new QPushButton(“功能 1”);
QPushButton *btn2 = new QPushButton(“功能 2”);
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(btn1);
layout->addWidget(btn2);
现代化界面 (v1.0+)
cpp
// 使用样式管理和动态布局
QString buttonStyle = StyleManager::getButtonStyle("#4285f4", “#3367d6”, “#
2a56c6”);
QPushButton *btn = new QPushButton(“📚 基础篇”);
btn->setStyleSheet(buttonStyle);
btn->setMinimumSize(StyleManager::scaledSize(120), StyleManager::scaledSize
(45));

️ 数据库结构演进
初始结构
sql
CREATE TABLE practice1 (
id INTEGER PRIMARY KEY,
BMPfile TEXT,
Sound TEXT
);
完整结构
sql
CREATE TABLE practice1 (
id INTEGER PRIMARY KEY AUTOINCREMENT,
BMPfile TEXT,
Sound TEXT,
Html TEXT,
ClickX INTEGER,
ClickY INTEGER,
ClickWidth INTEGER,
ClickHeight INTEGER,
Description TEXT
);
CREATE TABLE questions (
id INTEGER PRIMARY KEY AUTOINCREMENT,
type TEXT NOT NULL,
question TEXT NOT NULL,
options TEXT,
answer TEXT NOT NULL,
analysis TEXT,
difficulty INTEGER DEFAULT 1,
category TEXT,
practice_mode INTEGER,
created_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

技术特色

1. 跨平台兼容 - 支持 Windows、Linux、macOS
2. 高DPI适配 - 自动适应不同屏幕分辨率
3. 模块化设计 - 各功能模块独立且可扩展
4. 资源管理 - 统一的资源路径管理和验证
5. 音频控制 - 全局音频管理和独占播放
6. 数据库持久化 - SQLite 数据存储和事务支持

使用场景

1. 课堂教学 - 教师使用热区编辑创建交互内容
2. 自主学习 - 学生通过实战练习巩固知识
3. 技能测试 - 通过习题系统检验学习成果
4. 资源管理 - 统一管理教学所需的图片、音频、视频资源
   这个系统通过多个版本的迭代开发，从最初的基础框架逐步完善为功能丰富的
   多媒体教学平台，每个阶段都增加了新的功能和优化，最终形成了现在这个完
   整的物联网教学解决方案。
   说明对普通教室 西沃白板的分辨率的适配过程及合适的字体字号
   IOTCAI 系统对希沃白板及普通教室的适配方案

希沃白板典型分辨率分析
通过对主流希沃白板型号的分析，常见的分辨率规格包括：
白板型号
典型分辨率 屏幕尺寸 DPI范围 使用场景
希沃H系列 1920×1080 75-86英寸 96-110 标准教室
希沃S系列 2560×1440 86-98英寸 110-130 大型教室
希沃Q系列 3840×2160 98-110英寸 160-200 高端教室

适配策略与实现

1. DPI 自适应系统
   cpp
   // styles.cpp - DPI检测和缩放
   qreal StyleManager::dpiScaleFactor()
   {
   QScreen *screen = QApplication::primaryScreen();
   if (!screen) return 1.0;
   qreal dpi = screen->logicalDotsPerInch();
   qreal scale = dpi / 96.0;
   // 针对希沃白板的特殊调整
   if (dpi > 150) {
   // 4K屏幕适当降低缩放比例
   scale = qMin(scale, 1.8);
   }
   return scale;
   }
   int StyleManager::scaledSize(int baseSize)
   {
   return qRound(baseSize * dpiScaleFactor());
   }

2. 字体分级系统
   cpp
   // mainwindow.cpp - 字体分级设置
   void MainWindow::setupFontScaling()
   {
   QScreen *screen = QApplication::primaryScreen();
   if (!screen) return;

   qreal dpi = screen->logicalDotsPerInch();

   // 三级字体系统
   m_smallFont = font();
   m_mediumFont = font();
   m_largeFont = font();

   if (dpi <= 110) {
   // 1080P分辨率
   m_smallFont.setPixelSize(16); // 小字体
   m_mediumFont.setPixelSize(20); // 中字体
   m_largeFont.setPixelSize(28); // 大字体
   } else if (dpi <= 140) {
   // 2K分辨率
   m_smallFont.setPixelSize(18); // 小字体
   m_mediumFont.setPixelSize(24); // 中字体
   m_largeFont.setPixelSize(32); // 大字体
   } else {
   // 4K分辨率
   m_smallFont.setPixelSize(20); // 小字体
   m_mediumFont.setPixelSize(28); // 中字体
   m_largeFont.setPixelSize(36); // 大字体
   }

   setFont(m_mediumFont); // 默认使用中字体
   }

推荐字体字号方案
对于1920×1080分辨率（96-110 DPI）
元素类
型
字体大
小 字体重量 示例代码
主标题 28-32px Bold font-size: 32px; font-weight:
bold;
次级标
题 24px Semi
Bold font-size: 24px; font-weight: 600;
正文内
容 20px Normal font-size: 20px; font-weight:
normal;
按钮文
字 18px Medium font-size: 18px; font-weight: 500;
说明文
字 16px Normal font-size: 16px; font-weight:
normal;
对于2560×1440分辨率（110-130 DPI）
cpp
// 针对2K屏幕的字体调整
void MainWindow::adjustFor2KDisplay()
{
// 标题字体增大20%
m_largeFont.setPixelSize(32 * 1.2);
m_mediumFont.setPixelSize(24 * 1.2);

// 调整布局间距 
setStyleSheet(QString( 
    "QPushButton { padding: %1px %2px; }" 
    "QLabel { margin: %3px; }") 
    .arg(StyleManager::scaledSize(10)) 
    .arg(StyleManager::scaledSize(20)) 
    .arg(StyleManager::scaledSize(8))); 

}
对于3840×2160分辨率（160+ DPI）
cpp
// 4K屏幕特殊适配
void MainWindow::adjustFor4KDisplay()
{
// 字体进一步增大
m_largeFont.setPixelSize(40);
m_mediumFont.setPixelSize(30);
m_smallFont.setPixelSize(22);

// 增加控件最小尺寸 
setMinimumSize(1600, 900); 
 
// 调整图标大小 
QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps); 

}

实际应用示例
按钮样式适配
cpp
QString MainWindow::getButtonStyle(const QString &color)
{
int basePadding = StyleManager::scaledSize(12);
int baseFontSize = StyleManager::scaledSize(18);

return QString( 
    "QPushButton {" 
    "   font-size: %1px;" 
    "   padding: %2px %3px;" 
    "   min-height: %4px;" 
    "   background-color: %5;" 
    "   border-radius: 8px;" 
    "}" 
    "QPushButton:hover {" 
    "   background-color: %6;" 
    "}").arg(baseFontSize) 
     .arg(basePadding) 
     .arg(basePadding * 2) 
     .arg(StyleManager::scaledSize(40)) 
     .arg(color) 
     .arg(QColor(color).lighter(120).name()); 

}
标题样式适配
cpp
QLabel *titleLabel = new QLabel(“物联网教学系统”);
titleLabel->setStyleSheet(QString(
“QLabel {”
" font-size: %1px;"
" font-weight: bold;"
" color: #2c3e50;"
" padding: %2px;"
" background-color: rgba(255, 255, 255, 0.8);"
" border-radius: 10px;"
“}”).arg(StyleManager::scaledSize(32))
.arg(StyleManager::scaledSize(20)));

教室环境优化建议

1. 观看距离考虑
   cpp
   // 根据典型观看距离调整字体
   int MainWindow::getOptimalFontSize(int baseSize)
   {
   QScreen *screen = QApplication::primaryScreen();
   qreal physicalDpi = screen->physicalDotsPerInch();

   // 根据物理DPI调整（考虑观看距离）
   if (physicalDpi < 80) {
   // 大屏幕，观看距离远
   return baseSize * 1.3;
   } else if (physicalDpi > 120) {
   // 小屏幕，观看距离近
   return baseSize * 0.9;
   }
   return baseSize;
   }

2. 对比度优化
   cpp
   // 确保在教室光照条件下的可读性
   void MainWindow::optimizeForClassroom()
   {
   // 使用高对比度颜色
   QString highContrastStyle =
   “QWidget { color: #000000; background-color: #ffffff; }”
   “QPushButton { color: #ffffff; background-color: #0066cc; }”
   “QLabel { color: #000000; }”;

   // 增加边框和阴影提升可读性
   QString enhancedStyle =
   “QFrame { border: 2px solid #cccccc; }”
   “QTextEdit { background-color: #ffffe0; }”;
   }

字体配置总结表
屏幕类型 分辨率 推荐标题字体 推荐正文字体 按钮字体
标准希沃 1920×1080 28-32px 18-20px 16-18px
大型希沃 2560×1440 32-36px 20-22px 18-20px
高端希沃 3840×2160 36-40px 22-24px 20-22px
投影仪 1366×768 24-28px 16-18px 14-16px

实施建议

1. 测试多种设备：在实际的希沃白板上测试显示效果
2. 提供缩放选项：允许用户手动调整界面缩放比例
3. 保存用户偏好：记住用户的字体和布局设置
4. 定期更新适配：随着硬件更新不断优化适配方案
   通过这样的系统化适配方案，IOTCAI系统能够在各种教室环境和希沃白板上提
   供一致的良好用户体验。