A virtual laboratory based on HTML5 - IEEE Xplore

The 11th International Conference on Computer Science & Education (ICCSE 2016) August 23-25, 2016. Nagoya University, Japan

WdB4.2

A Virtual Laboratory Based on HTML5 Yu Sheng, Juan Huang, Fei Zhang, Ying An, Ping Zhong School of Information Science and Engineering, Central South University Changsha, China [email protected] used even more broadly to include specific application programming interfaces (APIs), such as those that enable new browser-based graphics, geolocation, local storage, and video capabilities.[3-5].

Abstract—Experiments of digital circuit are essential to this course. Traditional experiments can not meet the actual need of students,which is doing experiments anytime and anywhere. HTML5 makes the Web applications more and more flexible. In this paper, we designed and implemented a virtual laboratory base on HTML5. In this system, all the electronic components are virtualized into Javascript components which enabling users select virtual electronic components to build circuit on demand. Thus users can get results immediately by inputting data into the virtual switches. We have conducted a large number of experiments,consequently,it is convinced that students can perform experiments as required by using the system.

Index Terms—Virtual Laboratory, Components, Offline Storage

HTML5,

II. RELATED WORKS In the field of circuit simulation, there are plenty of excellent EDA(Electronic Design Automation) softwares,and the most famous one is Multisim,developed by NI [6]. With powerful learning features and laboratory hardware integration, Multisim teaches users foundational concepts in analog, digital, and power electronics throughout engineering and science curriculum. Another powerful software developed by NI is LabView [7],which is powered by a graphical programming syntax that makes it simple to visualize, create, and code engineering systems. TAMS, an interactive simulation software, is developed by Universität Hamburg which provides an platform for software-hardware co-simulation [8]. There are some other virtual laboratories designed for computer science courses like Principle of Computer Organization, Operation System, Digital Signal Process, Digital Image Process, etc. These softwares are developed by Applet of Java, which can run in mainstream browsers with Java Runtime Environment. However, EDA software is too complicated for students, and JRE based virtual laboratories are also far from convenient, since they need to be deployed on each computer,which means high maintenance costs. Furthermore, as mobile devices become increasingly popular, it is necessary to develop an open virtual laboratory that can be used on multiple terminals, since softwares designed for computers are obviously not compatible with mobile devices. In this paper, we design and develop a virtual laboratory based on HTML5, which is available for any mobile terminals with browsers.

Scheduling

I. INTRODUCTION Digital Electrocircuit is extremely important to students who majoring in engineering,especially those EE and CS undergraduates. Undoubtedly, experiments play a crucial role in this course [1]. In traditional experimental mode, all the tests are done in the laboratory. Regardless of the limitation of time and devices, loss of circuit components poses an unfavorable and profound consequence on restriction of experiments. In order to solve this problem, a lot of schools in China start using an integrated experiment box which comprises fixed circuit components and nodes. In this mode, doable experiments are limited in the box constrained by the manufactory which severely restricts the students’ creativity. Internet is one of the most remarkable technological inventions for humanity. In our century, young people are more interested in new technologies and internet so they are effected from these innovations more than other age groups [2]. The development of information technology makes it possible to perform experiments on the Internet which completely changed the way of experimenting. The virtual laboratory provides a platform for both the distance education and traditional education,make it possible for both students and teachers to do experiments in dormitory or in class. In the recent decades, different kinds of virtual laboratory designed for digital circuit course have emerged,which significantly improved the interest and effectiveness of the students. HTML5 is at the heart of the World Wide Web Consortium's (W3C's) Open Web Platform, an umbrella term that changes over time and that refers to the markup language and various technologies that pertain to it. The term is often

978-1-5090-2218-2/16/$31.00 ©2016 IEEE

III. SYSTEM DESIGN A. System architecture According to the requirements analyzed above, the system adopts Browser/Server model, and Tomcat is used as the web server. The system architecture is shown in Fig .1. When users access the system, the browser will start downloading source files including HTML, CSS, JS, XML files, image files and other resources in need. Then, the application will be parsed and executed in the browser, after it’s done, there will be no more request to the server. After loading all the needed source files, the browser will draw the

299

WdB4.2

B. User Interface Design

system interface, including toolbar, the experiment components tree generated from a list of XML files and the experiment panel for users. By simply setting the input signal and press ‘start’ button after putting experiment components into the panel and connecting each component as required, results of the experiment will be outputted soon. If the user wants to save the experiment, it will be serialized to JSON, which will later be stored on the server. In addition, the way to transmit JSON data is AJAX.

Fig. 2. User Interface

Fig. 1. System architecture

The system can be divided into the following three modules: system interface module, system scheduling module and system components module by function. The system interface provides user interaction and information presentation, which mainly achieves the whole page layout, toolbars, status bars, and experimental panel. System scheduling module is the core module of the system. After the circuit be built by dragging components into experiment panel and adding connections between them, this module will schedule the experiment components according to the data-flow, then presents the results in output components. The system component module provides abundant virtual experimental components with similar functions to the actual ones. Information of each component which contains the functionality and pin of it is displayed in the right side of experiment panel. Based on the analysis of functional modules, the running process of the system is: dragging experiment components from the components tree on the left side of experiment panel then putting them in the suitable place on the right side of the panel. After that, the user connects components by virtual lines, then joints needed input with fixed switches in the left side or pulse components, subsequently, link the input with signal lights above or digital tubes to print an output signal. Adding, editing, deleting components or connections are allowed during the whole experiment. When the circuit is built, by clicking the ‘start’ button, the scheduling module dispatches each components to operate until the results is generated.

As shown in Fig. 2, the user interface contains four areas: toolbar, components list, experiment panel and component information. The toolbar displays buttons for experimental functions, including new, save, open, start, stop etc. Users are able to select wires in different colors. Several classic experiments stored in the system can also be seen in the toolbar menu. Unfinished experiments will be saved automatically and can be reopened next time. The components list provides common virtual electronic components which are stored in a XML file named deviceList.xml. When the virtual components library requires to be expanded, all you need to do is simply importing JS files of new components. After reloading the system, the components tree will be refreshed with new XML files. During the experiment, pins and information of components are displayed on the component information area when users select a certain unit from the tree. Experiment panel is where users build their circuit. In actual laboratory, breadboard is widely used due to its flexibility and reusability, which in this system, is virtualized into the experiment panel. Components are linked by jointing slots in the board with wires. There are internal connections between the slots in the middle area. In contrary, slots in the upper area are interlinked horizontally while vertically in the bottom area. Logical switches and pulse switches are fixed in the left of the panel where users can change the logic level of by double clicking. Signal lights in the upper area are designed to present outputs while operation information or error messages are displayed in the status bar on the bottom. In addition, the panel is adjustable. C. Circuit Modeling In order to virtualize the circuit and electronic components, modeling the circuit is essential for implementing the system. The model should exhibit the the property and functions of each components correctly, as well as connections between

300

WdB4.2

triggered to execute its logic function to simulate the logic value of the output signal, and changes in output value will produce another event. The first event is generated by clicking the logic switch or pulse. When there is no more new event, the system will stop running . There is a delay time between input to output in the actual circuit, on account of different delay times among components, next component will not be triggered immediately after a new output. As shown in Fig 3, a time queue is used to record events that need to be processed in time order. A record will be deleted after the event is done, subsequently, the timestamp of next non-null record will become the current timestamp. A new time queue will be created with all components added when the system starts to simulate. The input components clicked by users will be added into the time queue based on when they are clicked. When a new simulation starts, firstly, output values generated from current event processing table will be transmitted to the next component; secondly, if new output values are equivalent to the old ones, they will not be processed, in contrast, if they are different from the old ones, they will be transmitted to the next component, which will be added into the active components set at the meantime. When all components in the event processing table are executed, those in the active components set will be processed intensely, and new event will be inserted into the corresponding event processing table. After all the simulation in this timestamp are done, the system will move to the next timestamp until the time queue is empty.

them. Besides, delays and signal value of sequential circuit are also important. 1) Signal Value Modeling In logic circuit, 0 and 1 represent the low or high level respectively. A model only contains two values of 0 and 1 is called a two-value model which is also suitable for the Boolean operation. Besides, add another value X on the basis of twovalue model creates a three-value model where X represents an uncertain status if the system cannot distinguish whether it is 0 or 1. It also represents a transition state in a hopping, or just an unimportant signal. 2) Delay Modeling There will be a delay for all components at run time. If the circuit is virtualized in an ideal situation, the delay can be ignored, which works well in common digital circuits while do not in a sequential circuit. The operation of components would be different if the pulse signal arrives in different timestamps in sequential circuits. If all components are given the same delay time, this model will be unit delay model, which is used to simulate asynchronous sequential circuits. However, in actual circuits, delay time between simple gate circuits and complex storage components varies considerably. In this case, if delay time is considered the same, would lead to incorrect results. Thus, in this system, delay time is specified based on each actual electronic component, which is accurate enough in most cases. 3) Component Modeling Given a virtual electronic component, what users care more is the function of it, which means what the output is based on a given input. Specifically, users will receive a prompt if components which cannot be wired-AND are connected, also, OC chips are unequivocally marked with relevant information. 4) Circuit Structure Modeling The circuit structure model is used to describe the connection of components, namely, the connection between input pins and output pins. In our system, input and output pins are not connected directly, they are jointed by slots in the same column. Thus, coupling between components is reduced during the simulation, which means editing wires and components will be much easier . Several operations are not allowed at run time, including altering wires and components, since the whole circuit is confirmed.

Fig. 3. Time Queue

IV. RUNNING INSTANCE

D. Scheduling Mechanism This is how the system works: each component simulates its logical function in a certain order, and to ensure this, a schedule algorithm is needed. Besides, stability and reliability of the algorithm must be ensured since the performance of the algorithm is crucial to the whole system. An event-driven based algorithm is adopted to guarantee the efficiency and reliability of this system. Every single change in output signal is referred to as an event, including the change of logical switches, pulses, and pins of components. After receiving an input signal, the virtual component will be

The interface of the system is shown in Fig 2. Users select components from the list and put them into the designing panel, then joint them by clicking the connect button. Virtualizing sequential circuit is an extremely tough work since the scheduling order of components needs to be more accurate. Take for example decimal counter experiment to be discussed in this paper, three virtual components, 74LS161, 74LS00, 74LS248, are used in this experiment, where 74LS161 works on asynchronous reset mode and produces binary coded data which is transformed into digital tube suited data by 74LS248, a seven-segment decoder. LED5011, a common

301

WdB4.2

V. CONCLUSION

cathode seven-segment, is used, too. After the circuit is built, set the enable switch to high level, then double-click the pulse switch on the experimental panel to generate a rising edge pulse. By each double-click, the count value adds 1 until it reaches 10, by that time, the counter will reset and start recounting.

In this paper, a virtual laboratory based on HTML5 is designed and implemented. Electronic components are virtualized into a Javacript components in the system where users can build their own circuit and input data to get results as required. ACKNOWLEDGMENTS This work is supported by the National Natural Science Foundation of China ( 61202494, 61402541,61402542). REFERENCES [1]

[2] Fig. 4. Decimal counter experiment [3]

There are some classic experiments embedded in the system, like experiments of encoder, decoder, selector, addition and subtraction, and shift register, etc.

[4] [5] [6] [7] [8]

302

Hassan R, Omar N, Arshad H, et al. A Design of Virtual Lab for Digital Logic[C]//The 7th WSEAS Int. Conf. On EACTIVITIES (E-Learning, E-Communities, E-Commerce, E-Management, E-Marketing, EGovernance, Tele-Working)(E-ACTIVITIES'08). 2008: 29-31. Pinar Kirci. Effects of Computer and Internet Utilization over Young People in world and Turkey: Considered with Education and Health Applications[C]//The 10th Int. Conf. On Computer Science & Education (ICCSE). 2015:389-394. Anthes G. HTML5 leads a web revolution[J]. Communications of the ACM, 2012, 55(7): 16-17. Taivalsaari A. Cloudberry: an HTML5 cloud phone platform for mobile devices[J]. Software, IEEE, 2012, 29(4): 40-45. Singh K, Krishnaswamy V. A case for SIP in Javascript[J]. Communications Magazine, IEEE, 2013, 51(4): 28-33. http://www.ni.com/multisim/ http://www.ni.com/labview/ https://tams.informatik.uni-hamburg.de/