一个基于HTML5的虚拟实验室
2025-01-29
第十一届国际计算机科学教育会议 2016.8.23-25 日本名古屋大学
一个基于HTML5的虚拟实验室
余笙,黄娟,张飞,安应,钟平
中南大学信息科学与工程学院
中国长沙
shengyu@csu.edu.cn
摘要–数字电路实验对于这门课来说是很重要的,传统的实验不能满足学生任何时间任何地方去做实验的需求。HTML5使Web应用越来越灵活了。在这片文章中,我们设计实现了一个虚拟实验室。在这个系统中,所有的电子元件都虚拟化成了JavaScript元件,这让使用者可以选择虚拟的电子元件去组建他们需要的电路。因此使用者通过把值输入到虚拟交换机里可以马上得到实验的结果。我们做了大量的实验来确保学生们可以在这个系统中完成他们所需要的实验。
关键词–虚拟实验室,HTML5,调度组件,离线储存。
1.介绍
数字电子电路对主修工程学科的学生是非常重要的,特别是EE和CS本科生。毫无疑问,实验在这门课中扮演着重要的角色【1】。在传统的实验模式下,所有的测试实验都要在实验室里面做。除了时间和设备的限制,电路元件的丢失造成了大大的不利,严重影响了实验的结果。为了解决这个问题,在中国很多学校开设利用一个包含许多固定元件很节点的综合实验箱。在这种模式下,可以做的实验被限制在这个盒子里,这种工厂模式严重限制了学生的创造力。
对人类来说互联网是是最有代表性的科技发明之一。在我们这个世纪,年轻人对新技术和互联网更感兴趣,因此,他们更容易受到影响比其他年龄人群【2】。信息科技的发展使我们在互联网上完成实验成为了可能,它改变了实验的方式。虚拟实验室为远程教育和传统的教育提供了一个平台,这让学生和老师可以在宿舍或者教室就可以做实验。在最近几十年里,为数字电路设计这门课各种各样的虚拟实验室已经出现了,这极大的提高了学生的积极性和效果。
HTML5是万维网联盟打开Web平台的核心,用一个涵盖术语就是它随着时间在改变,它包含了标记语言和各种各样的技术。这个术语平时被广泛的使用,HTML5包括特定的应用程序接口,一些基于新型浏览器的图形,地理位置,本地存储,视频功能【3-5】。
2.相关研究
在模电领域已经开发出了大量优秀的EDA软件,其中最有名的是NI开发的MULTISIM(虚拟实验室)【6】。因为有着强大的学习能力和完备的计算机集成实验室,虚拟实验室通过工程和科学等课程来让使用者掌握模拟、数字、电力电子技术这些方面的基础内容。NI开发的另一个强大的软件是LABVIEW【7】,他强大在其图形化编程语法能够使设计、架构、编码工程系统变得简单易行。TAMS,是汉堡大学开发的一款交互式模拟实验室,它能够提供一个软硬件协同仿真平台【8】。另外也有其他的为计算机教学开发的虚拟实验室,比如Principle of Computer Organization,Operation System, Digital Signal Process, Digital Image Process, 等等,这些软件都是基于Java的应用程序开发的,他们都可以在Java运行环境中的主流浏览器上运行。
但是EDA软件对于学生来说是很复杂的,基于虚拟实验室的JRE也同样不方便,因为他们都需要在特定电脑上运行,这就意味着需要投入很高的维护成本,随着移动服务器的广泛应用,开发一个可以用在多种终端的开放式虚拟实验室就显得格外重要,因为用移动终端来开发电脑软件是很方便的。
这篇文章中我们设计开发了一款基于HTML5的可用于任何移动终端浏览器的虚拟实验室。
3.系统设计
A. 系统架构
根据上面的需求分析,系统采用浏览器/服务器模式,Tomcat用作web服务器。如系统架构图-1所示。
当用户访问系统时,浏览器将开始下载源文件,包括HTML、CSS、javascript、XML文件、图像文件和其他需要的资源。然后,应用程序在浏览器中将被解析并执行,在它完成之后,将不会再有其他更多的请求到服务器。加载所有需要的源文件之后,浏览器会渲染出系统接口,包括工具栏,实验组件树生成的XML文件的列表还有为用户提供的实验面板。把实验组件放入面板按需连接每一个组件之后,通过简单的设置输入信号点击开始按钮,实验结果将会马上输出。如果实验者想保存实验,它将被序列化成JSON,然后被存储到服务器中。另外,这种传送JSON数据的方式叫做AJAX。
这个系统被分成了下面三个模块:系统接口模块,系统调度模块,系统组件模块。系统接口提供用户交互和信息展示,主要实现整个页面布局、工具栏、状态栏和实验面板。系统调度模块是系统的代码模块。通过把组件拖动到实验面板上然后连接起来来创建电路,该模块根据数据流来安排实验组件,然后在输出组件上展示结果。这个系统的组件模块提供了很多虚拟的和和实际类似功能的组件。每个组件的信息包含的功能被展示在实验面板的右边。
基于这些功能模块的分析,这个系统的运行过程是:从实验面板左边的组件树上拖拽实验组件,然后把他们放在实验面板右侧的合适位置,之后,实验者用虚拟的线连接他们,在左边用固定的开关输入需要的值或者用脉冲组件,用上面的信号灯链接输入信号然后用数码管打印输出信号。在整个实验过程中,可以添加,编辑,删除,连接组件。当电路建立之后,通过点击开始按钮,调度模块指派每个组件去执行直到结果输出。
B. 用户界面设计
如图2所示,用户界面包含了四部分:工具栏,组件列表,实验面板,组件信息。工具栏放着按钮包括,新建,保存,打开,开始,停止等。用户可以选择不同颜色的线。系统中一些典型的实验可以在工具栏菜单里面看到。没有完成的实验会自动保存,下次可以重新打开。组件列表提供了常用的电子元件,这些元件存放在一个叫做设备列表的XML文件中。当虚拟组件库需要扩展时,你需要做的就是简单的引入新建组件的JS文件。重新加载系统之后,组件树将会被新的XML文件刷新。当用户在元件数数上选择某个元件时,元件的引脚和信息就会显示在元件信息的区域。
实验面板是用户建立他们电路的地方。在真实的实验室,电路试验板被广泛的使用由于它的灵活性和重用性。在这个系统中,电路试验板被虚拟化成了实验面板。元件通过连接槽用线相连接,在中间区域,槽之间内部相互连接。相反,槽的上面是水平相接的,而下面是垂直相连的。逻辑开关和脉冲开关被固定在面板的左边,用户通过双击可以改变逻辑电平。上面设计的信号灯是用来显示输出结果的,而操作信息和错误信息显示在下面的状态栏。另外,这个面板有适应调整能力的。
C. 电路建模
为了虚拟化电路和电子元件,实现这个系统,电路的模型化是至关重要的。模型应该能正确的呈现出组件的属性,功能和他们之间的连接关系。此外,时序电路的延时和信号值也是非常重要的。
1)信号值建模
在逻辑电路中,0和1代表低电平和高电平。仅仅有0和1两个值的模型叫做二值模型,这个模型合适用于布尔操作。此外,在二值模型的基础上添加另外一个值X,将创建一个三值模型,X代表一个不确定的状态如果这个系统不能区分是0还是1.在阶跃响应里面它代表一个过渡态,或者说是那个不重要的信号。
2)延迟建模
所有元件在运行的时候都有一个延迟,如果电路是虚拟化在理想情况下,延迟可以忽略,在通常的数字电路可以很好的工作而时序电路不行。元件的操作会有所不同,在时序电路中如果脉冲信号到达不同的时间戳。如果所有的元件都给相同的延迟时间,这个模型是一个单位延时模型,它可以用来模拟异步时序电路。然而,在实际的电路中,在简单的门电路和复杂的存储器件之间的延迟时间差异很大。在这种情况下,如果延迟时间被看成是一样的,这将导致错误的结果。因此,在这个系统中,延迟时间是基于每个实际指定电子元件,在大多数情况下是足够精确的。
3)组件建模
给定一个虚拟的电子元件,用户更关心的是它的功能,这意味着基于给输出是基于一个给定的输入的。具体地说,如果用户没有布线或者连接,它将会给用户一个提示,OC芯片也会明确的标注相关的信息。
4)电路结构建模
电路结构模型被用于描述元件之间的连接,也就是说,输入引脚和输出引脚之间的连接。在我们的系统中,输入引脚和输出引脚没有直接的连接。在相同的栏中他们通过槽相连。因此,在模拟系统中,组件的耦合性降低,这也就以为着连接相连是非常的容易。在执行电路的时候有几个操作是不允许的,包括改变线路和元件,因为整个电路都已经确定了。
D.调度机制
这里要说的是系统是如何工作的:每个组件按一定的顺序模拟其逻辑功能,为确保这一点,一个调度算法是必要的。此外,确保这个算法的稳定性和可靠性,因为这个算法的性能对整个系统来说是至关重要的。采用基于事件驱动的算法来保证这个系统的效率和可靠性。每一个输出信号的变化被称为一个事件,包括改变逻辑开关,脉冲,组件的引脚。接受到一个输入信号后,虚拟组件将会被触发去执行它的逻辑功能,来模拟输出信号的逻辑值。改变输出值将会触发另一个事件。通过点击逻辑开关或者脉冲将会生成第一个事件,当没有更多的事件产生的时候,这个系统将停止运行。
在实际的电路中,输入输出之间有一个延迟时间,由于组件之间不同的延迟时间,在一个新的输出之后下一个组件不会被立即的触发。
如图3所示,时间队列是用来记录需要按时间顺序处理的事件。事件完成之后,这个记录将会被删除。随后,下一个非空的时间戳将变成现在的时间戳。
当系统开始模拟的时候,所有的组件添加进来,一个新的时间队列被创建。输入组件被点击的时候,它们将会被添加到新的时间戳。当新的模拟开始的时候,第一,来自于当前时间进程表中的输出值将转移到下一个组件中,第二,如果新的输出值等于之前的值,它们将不会被处理,相反,如果它们和之间的值不相同,它们将会被转移到下一个组件,下一个组件将会处于活跃状态并同时处理传过来的值。在这个事件进程表中当所有的组件被执行时,这些激活状态的组件将会被处理,新的事件将会插入到当前的事件进程表中。在这个时间戳中所有的模拟被做之后,系统将移动到下一个时间戳直到时间队列变空。
4.运行实例
系统的界面如图2所示,用户选择组件然后把它们放到设计的面板上,通过点击连接按钮来来连接它们。
虚拟化时序电路是一个非常艰难的工作,因为调整组件的顺序需要更加的精确。例如在本文中将讨论十进制计数器。三个虚拟组件,74LS161, 74LS00, 74LS248, 被用在实验中,74 ls161在异步复位工作模式下并产生二进制编码的数据,然后转换为数码管可用的数据通过74 ls248,74 ls248是一个七段译码器。LED5011共阴极的七段,也使用。电路被建立之后,使开关设置为高电平,在实验板上双击脉冲开关,使其产生一个上升沿脉冲。通过每次的双击,计数器加1直到达到10.通过了一段时间,计数器将会重置,并开始计数。
这个系统中嵌入了一些典型的实验。编码器,译码器,加法,减法,移位寄存器等实验。
5.结论
在本文中,设计和实现了一个基于HTML5的虚拟实验室。在系统中电子元件被虚拟化成了JavaScript元件,用户可以建立他们自己的电路,输入数据然后得到所需的结果。
感谢
这项工作由中国国家自然科学基金支持( 61202494, 61402541,61402542)。