基于Web的通信工程专业开源交互式可视化教学实验平台研究

基于Web的通信工程专业开源交互式可视化教学实验平台研究
作者：***
来源：《教育教学论坛》2021年第44期
[摘要] 研究通信工程专业基于web的开源交互式可视化教学实验平台，可为后期将此单一研究成果扩展为模板化、标准化的用户接口提供技术支撑。

此平台广泛适用于高等学校理工
类专业学生的交互式、可视化教学实验及案例分析。

通过研究分析，教学实验平台可灵活提供大量仿真参数改变操作以及对应结果变化的可视化演示。

此研究成果为开源平台，web前端不需要其他软件的支撑和用户注册，任何支持web浏览的设备都可进入教学实验平台并进行感兴趣的操作和结果演示。

此成果将有助于提高学生学习的主观能动性，不再是“填鸭式”、记忆式的教学，注重理论与实践相结合。

[关键词] 通信工程;Web;开源;可视化
[基金项目] 2019年度宜春学院“六卓越一拔尖2.0”人才培养计划项目“面向‘OBE’的通信工程课程体系构建与持续改进机制”;2019年度宜春学院一流课程（“金课”）项目“通信原理”;2019年度宜春学院教学改革研究课题“基于Web新工科的通信电子专业开源交互式可视化教学研究”（YCUJG-2019-15）;2020年度江西省教育厅科技重点项目“面向5G+车联网阵列天线自适应波束成形定位技术研究”（GJJ201601）;2020年度教育部产学合作协同育人项目“赋能新工科，校企融合共建现代通信工程课程体系”（202002118054）
[作者简介] 虞贵财（1977—），男，江西撫州人，博士，宜春学院物理科学与工程技术学院副教授，主要从事车辆通信、MIMO通信技术、无线传感器网络。

[中图分类号] G642.4;TN91-4 [文献标识码] A [文章编号] 1674-9324（2021）44-0154-04 [收稿日期] 2020-03-13
一、引言
工程、数学、科技类专业中的很多概念通过单一的课堂讲授方式晦涩难懂，如电子通信类，无线电是看不见、摸不着但现实又存在的，信号是如何传输接收的，等等。

如果通过图形和图像可视化的方式进行讲授，有些概念将更容易理解。

可视化使得难以准确掌握和传达的信息能够采用启发式的方式进行传授，这些在高等教育中显得非常重要，特别是理工科技类专业。

这些课程的内容如果采用交互式的方法展现将显得非常有启发性。

学生学习理论知识的同时，可通过改变仿真参数而得到相应的仿真结果变化，明确某些参数的实际物理意义[1]。

结合Web技术的仿真可视化教学平台组成的架构和仿真程序可成为开源可接入界面。

前期Masson等专门针对电子工程专业设计建设了相关的Web仿真平台[2]，虽然此成果的有些技术仍然可用，但是随着科学技术和教学发展，一些技术已经过时，应该从用户体验、界面友好性和操作灵活性方面进行更新、提高。

文献[3]给出了一种单一功能的Web仿真平台，文献[4]介绍了电子仿真设备的Web前端设计。

后期也有电子设备和电路特性仿真的研究，虽然可以对任意模型进行仿真，但属性比较单一，而且用户操作界面依赖上传的文本文件，在学生掌握仿真核心技术层面的普适性和通用性上受到质疑。

文献[5]给出了一种高通用性的基于Web nanoHUB的平台，此平台支持不同程序语言和仿真工具，但是需要在客户端安装Java和用户注册，因此平台并非完全开源。

本课题介绍了一种交互式、基于Web的可视化仿真教学演示
平台框架。

此平台计划用于电子工程类通信专业本科生和研究生的教学科研演示平台。

任何学生和个人不需要注册就可以访问。

平台采用开源软件设计并完成，用户只需具备JavaScript就可以浏览，不需要安装额外的插件。

同时，在此平台上创建新的Webdemo很简单，不需要掌握Web编程知识。

因此，教师和学生很容易使用并掌握此教学演示平台。

二、Webdemo教学演示平台框架
Web教学演示平台允许访问用户通过Web浏览器创建交互式可视化的仿真工具，Web演示平台包括许多交互式和可描述页面，页面间虽然按一定顺序互相关联，但它们仍然可以通过自动形成的内容列表被随机地访问、接入。

平台框架可用于不同访问接入人员，包括教职工、学生和其他机构的第三人。

访问不需要Web编程技术，然而Webdemo操作者需要掌握基本的科学程序语言知识，如Matlab、GNU Octave、Python’s Scipy等软件的数据库编程，这些软件可用于数值仿真。

Webdemo框架可以分为四个组成部分，如图1所示。

（一）动态模板系统
Webdemo框架的重要组成部分是用PHP编写的模板系统。

此系统创建web页面，传递客户端（Webdemo用户）信息。

系统对所有Webdemo用户来说都具有相同的体验。

如图1所示，动态模板系统包括三部分，即模型（model： M）、查看（view： V）和控制器（Controller）。

（二）仿真核心组件
在客户端上执行计算，允许用户输入提示响应，一旦Web界面的模拟仿真已加载，不需要与服务器进行进一步通信沟通，因此没有发生传输时间的延迟。

然而，用于执行所需计算的软件是由用户计算机配置决定的，大多数互联网用户的浏览器支持JS使用特殊程序库绘制数据图。

然而，这些程序库并不提供科学软件所具备的数学运算和图形输出专用功能特性。

此外，现有的仿真模型重复使用局限于JS，用户不会面临需要安装其他软件的烦琐工作。

用户可能由于软件的许可证限制、用户硬件或操作系统的不兼容而无法使用该软件。

Webdemo框架的主要目的是，通过提供实际案例，让学生熟悉使用科学软件和仿真模型，他们可以即时学习Webdemo，也可以通过检查底层的仿真脚本源代码有更详细的理解。

为了使每个人都能使用源代码，应提供免费的编码器或解码器。

此外，它应该有大量的计算机平台和操作系统。

因此，GNU Octave因为开源和强大的内置可视化程序以及向量代数运算、滤波器、变换功能被选定作为仿真软件。

使用Octave编写的仿真脚本与外部程序库独立，程序源码长度方面应保持紧凑特点，方便用户编辑部署和易于理解。

每一个Webdemo具备各自的Octave功能，可供下载和运行。

此外，Octave很大程度上与商业软件Matlab兼容。

因此，使用Octave开发的Webdemo仿真脚本基本上可以在Matlab操作运行。

（三）文件配置
Webdemo内容是使用可扩展标记语言（XML）定义的配置文件。

它包含Webdemo的基元数据，如作者、标题、创建日期和相关的讲座或课件。

清单列表1中给出了一个配置文件的摘录，用于说明该文件的自我注释体系。

清单列表1：XML定义的Webdemo基元数据配置文件
<meta>
<author>Guicai YU</author>
<author_mail>*******************</author_mail>
<teaching_module>¨NCU_Internet_Lecture</teaching_module>
<title>Modulation_Demodulation</title>
<subtitle>4QAM</subtitle>
<version>1.1</version>
</meta>
此外，可以定义任意数量的幻灯片，每个幻灯片可以是一个描述性或演示性的。

描述性幻灯片可以包含文本、图像和数学公式，其中可以用Latex编辑公式，使用MathJax撰写。

一个演示幻灯片包含各种输入字段（控制操作命令）、触发服务器端的仿真模拟按钮、仿真模拟结果的图像区域。

每个幻灯片必须包括一个脚本接口定义，实现仿真模拟和函数参数列表的Octave函数方程。

滑动按钮控件的值通过<id>标识确定。

为防止多用户会话之间的冲突，通过模板系统随机选择的文件名会被传递给函数方程。

三、Webdemo用户操作界面及案例分析
图2给出了一个Webdemo描述页面截图，展示了QAM调制理论的数学基础。

屏幕采用分辨率1024像素×768像素进行优化。

此分辨率兼容大多数投影仪，因此可以在课件和讲座中使用。

Webdemo用户界面幻灯片包括导航页脚和内容区域，导航页尾包含上一页和下一页的链接，以及当前页即内容页的链接。

在导航页脚下面，可以添加关于Webdemo元信息和链接版权与隐私信息。

同时，Webdemo用户界面的一个特殊功能是可以通过脚注访问使用的统计数据。

图3中的屏幕截图显示了QAM调制解调前端可视化操作界面，可以通过界面右边输入并调整参数，如信噪比（SNR）、调制类型（QAM）及显示的图形类型，得到相应的星座图。

星座图的横坐标为实部，纵坐标为虚部。

图3中的页脚和页眉功能与图2类似，这里不做介绍。

右下角的Source code可以下载仿真程序的源代码（本文涉及的源代码都为Matlab编写），方便学生学习、编辑使用。

鉴于文章篇幅限制，本文不附上Matlab的源代码（WEBDEMO constellation_from_snr.m-file），仿真程序源代码通过界面的Source code查看和下载。

操作界面中心为展示仿真图像保留区域，在图像区域的下方，是一个允许用户输入信息的控制面板。

当一个演示幻灯片界面被加载时，系统将使用默认的参数值进行仿真模拟。

JS 脚本显示一个进度条，提供关于已用和剩余的计算时间反馈信息。

为了估计仿真计算的时间，模板系统计算每次执行Octave函数所花时间和计算所有测量结果的平均值，然而实际仿真模拟时间通常与计算的平均值不同。

现有的Webdemos仿真时间从2秒到20秒不等，通常大于互联网页面响应时间。

动画的进度条指示用户正在进行的计算过程，当仿真结果图像完成时，JS脚本从服务器请求图像并在进度条空间显示，然后用戶可以通过“更新（Update）”按钮控制改变仿真参数并重新仿真计算，“更新（Update）”按钮提供载链接访问底层Octave源代码。

图4为将调制类型调整为16QAM而其他参数保持不变的仿真星座图操作界面。

图5为将调制类型调整为64QAM而其他参数保持不变的仿真星座图操作界面。

通过WEBDEMO用户操作界面及案例分析发现，只要改变对应的参数，就可以得出不同的结果。

任何支持web浏览的设备都可进入教学平台并进行感兴趣的操作和结果演示。

此平台将提高学生学习的主观能动性，不再是“填鸭式”、记忆式的教学，而是理论与实践相结合。

四、结论及意义
本文研究了基于Web的通信工程专业开源交互式可视化教学演示平台，主要通过图形和图像可视化结合理论基础的方式讲授，采用启发式的方法使得学生准确掌握所学课程的知识点以及基础理论知识在实际案例中的应用。

这在高等教育中显得非常重要，特别是理工科技类专业。

尤其是通信电子类专业本科生和研究生，需要具备扎实的数学和物理基础知识，通过平台与理论结合，解决学习基础理论知识枯燥乏味、晦涩难懂的窘境。

学生学习理论知识的同时，通过改变交互式、可视化教学演示平台中的仿真参数而得到相应的仿真结果变化，明确某些参数在工程实践案例中的实际物理意义。

这些结果不需要冗长复杂的数学公式推导计算，学生通过交互式仿真结果就可以得到答案。

参考文献
[1]Lu Hsin-Ke， Lin Peng-chun. Effects of Interactivity on Students’ Intention to Use Simulation-based Learning Tool in Computer Networking Education， 14th International Conference on Advanced Communication Technology， 2012， pp.573-576.
（三）文件配置
Webdemo内容是使用可扩展标记语言（XML）定义的配置文件。

它包含Webdemo的基元数据，如作者、标题、创建日期和相关的讲座或课件。

清单列表1中给出了一个配置文件的摘录，用于说明该文件的自我注释体系。

清单列表1：XML定义的Webdemo基元数据配置文件
<meta>
<author>Guicai YU</author>
<author_mail>*******************</author_mail>
<teaching_module>¨NCU_Internet_Lecture</teaching_module>
<title>Modulation_Demodulation</title>
<subtitle>4QAM</subtitle>
<version>1.1</version>
</meta>
此外，可以定义任意数量的幻灯片，每个幻灯片可以是一个描述性或演示性的。

描述性幻灯片可以包含文本、圖像和数学公式，其中可以用Latex编辑公式，使用MathJax撰写。

一个演示幻灯片包含各种输入字段（控制操作命令）、触发服务器端的仿真模拟按钮、仿真模拟结果的图像区域。

每个幻灯片必须包括一个脚本接口定义，实现仿真模拟和函数参数列表的Octave函数方程。

滑动按钮控件的值通过<id>标识确定。

为防止多用户会话之间的冲突，通过模板系统随机选择的文件名会被传递给函数方程。

三、Webdemo用户操作界面及案例分析
图2给出了一个Webdemo描述页面截图，展示了QAM调制理论的数学基础。

屏幕采用分辨率1024像素×768像素进行优化。

此分辨率兼容大多数投影仪，因此可以在课件和讲座中使用。

Webdemo用户界面幻灯片包括导航页脚和内容区域，导航页尾包含上一页和下一页的链接，以及当前页即内容页的链接。

在导航页脚下面，可以添加关于Webdemo元信息和链接版权与隐私信息。

同时，Webdemo用户界面的一个特殊功能是可以通过脚注访问使用的统计数据。

图3中的屏幕截图显示了QAM调制解调前端可视化操作界面，可以通过界面右边输入并调整参数，如信噪比（SNR）、调制类型（QAM）及显示的图形类型，得到相应的星座图。

星座图的横坐标为实部，纵坐标为虚部。

图3中的页脚和页眉功能与图2类似，这里不做介绍。

右下角的Source code可以下载仿真程序的源代码（本文涉及的源代码都为Matlab编写），方便学生学习、编辑使用。

鉴于文章篇幅限制，本文不附上Matlab的源代码（WEBDEMO constellation_from_snr.m-file），仿真程序源代码通过界面的Source code查看和下载。

操作界面中心为展示仿真图像保留区域，在图像区域的下方，是一个允许用户输入信息的控制面板。

当一个演示幻灯片界面被加载时，系统将使用默认的参数值进行仿真模拟。

JS 脚本显示一个进度条，提供关于已用和剩余的计算时间反馈信息。

为了估计仿真计算的时间，模板系统计算每次执行Octave函数所花时间和计算所有测量结果的平均值，然而实际仿真模拟时间通常与计算的平均值不同。

现有的Webdemos仿真时间从2秒到20秒不等，通常大于互联网页面响应时间。

动画的进度条指示用户正在进行的计算过程，当仿真结果图像完成时，JS脚本从服务器请求图像并在进度条空间显示，然后用户可以通过“更新（Update）”按钮控制改变仿真参数并重新仿真计算，“更新（Update）”按钮提供载链接访问底层Octave源代码。

图4为将调制类型调整为16QAM而其他参数保持不变的仿真星座图操作界面。

图5为将调制类型调整为64QAM而其他参数保持不变的仿真星座图操作界面。

通过WEBDEMO用户操作界面及案例分析发现，只要改变对应的参数，就可以得出不同的结果。

任何支持web浏览的设备都可进入教学平台并进行感兴趣的操作和结果演示。

此平台将提高学生学习的主观能动性，不再是“填鸭式”、记忆式的教学，而是理论与实践相结合。

四、结论及意义
本文研究了基于Web的通信工程专业开源交互式可视化教学演示平台，主要通过图形和图像可视化结合理论基础的方式讲授，采用启发式的方法使得学生准确掌握所学课程的知识点以及基础理论知识在实际案例中的应用。

这在高等教育中显得非常重要，特别是理工科技类专业。

尤其是通信电子类专业本科生和研究生，需要具备扎实的数学和物理基础知识，通过平台与理论结合，解决学习基础理论知识枯燥乏味、晦涩难懂的窘境。

学生学习理论知识的同时，通过改变交互式、可视化教学演示平台中的仿真参数而得到相应的仿真结果变化，明确某些参数在工程实践案例中的实际物理意义。

这些结果不需要冗长复杂的数学公式推导计算，学生通过交互式仿真结果就可以得到答案。

参考文献
[1]Lu Hsin-Ke， Lin Peng-chun. Effects of Interactivity on Students’ Intention to Use Simulation-based Learning Tool in Computer Networking Education， 14th International Conference on Advanced Communication Technology， 2012， pp.573-576.。