A

IEEJ Transactions on Fundamentals and Materials

Vol.135 No.11 pp.666671
DOI: 10.1541/ieejfms.135.666

Paper

Development of an HTML5 based Educational Support System

on Electrical Machinery
Makoto Ishibashi Student Member, Hisao Fukumoto
Tatsuya Furukawa Member,
Hideaki Itoh
Masashi Ohchi Senior Member

Member
Non-member

(Manuscript received Nov. 30, 2014, revised May 7, 2015)

Learning using information and communication technologies, such as remote experiments and e-learning systems, is
eective in engineering education. However, most of the existing systems providing these learning materials cannot be
used with smartphones. In order to overcome the problem, the authors have developed an educational support system
that can be used with smartphones by using HTML5 for building client-side applications of the system. Using the
system, students can use interactive 3DCG based learning materials to learn about a DC motor and an alternator and
conduct remote experiments on the motor and the alternator. In addition, the authors conducted a survey to evaluate
the system, and it turned out that the system was accepted by the students as a useful tool.
Keywords: remote experiment, 3DCG, educational support, HTML5, smartphone, electrical machinery

1.

support system that enables mobile access. HTML5 enables

Web browsers to have rich user interfaces (e.g., with 3DCGs
and animations) and make real-time communications, for
which the plugins had been required so far. Developed with
HTML5, our system can provide learning materials which
handle 3DCGs and animations, make real-time communications and be used with smartphones as well as personal computers.
In this paper, we describe the HTML5 based educational
support system, which provides environments of remote experiments and 3DCG based learning materials about a DC
motor and an alternator. The 3DCG based learning materials
are intended to help students to learn principles of electrical
machinery by visualizing dynamic and invisible phenomena
such as electromagnetic phenomena. The remote experiment
system is intended to help students to deepen the understanding of the electrical machinery by allowing the students to
see the behavior of real-world equipment under various experimental conditions. Thus, our system oers an integrated
set of learning contents; that is, students can first learn the
principles of electrical machinery by the 3DCG based learning materials, and then they can deepen their understanding
of the electrical machinery by the present remote experiment
system.
The users can use the system with their smartphones.
Therefore, students can learn about the electrical machinery
anytime and anywhere. For example, the learning system can
be used in an electric machinery course as a homework material before a class. Using the proposed system, they can learn
the principles of electrical machinery and can experience the
experiments by themselves before a class. Then, the lecture
given in the class can be of a much higher level than it can
be without such homework. For another example, it would
be assumed that a teacher can give a basic lecture in a class

Introduction

Technology enhanced learning, e.g., e-learning, remote experiment and 3DCG based learning, has been implemented
owing to the progress of information and communication
technologies (ICT). The technology enhanced learning gives
students an increased opportunity to study and enables them
to understand learning contents more eectively (1) (2) . In particular, remote experiments have many advantages; students
can conduct experiments without the need to stand in line at a
lab or the need to take care of times (3) and use expensive and
complex instruments at various places, and team members at
dierent places can conduct experiments at the same time (4) .
However, the client-side applications of traditional remote
experiment systems were developed in the use of C++ or Java
and cannot be used with mobile devices. Although there have
been developed some Web-based remote experiment systems
such as MIT iLab (5) and BTH VISIR (6) , these systems use
plugins and cannot be used with mobile devices. Therefore,
nowadays, there are a few attempts to enable remote experiment systems to be used with smartphones (7)(9) . The adaption of remote experiments to mobile devices allows students
to conduct experiments anytime and anywhere (9) . However,
the client-side applications of these remote experiment systems available for smartphones are developed in plain HTML
without plugins, and therefore they have only poor user interfaces and cannot make real-time communications like video
live streaming of remote experiments.
We have aimed to overcome these problems by the use
of HTML5 and developed an HTML5 based educational

Saga University
1, Honjo-machi, Saga 840-8502, Japan

Chiba Institute of Technology

2-17-1, Tsudanuma, Narashino 275-0016, Japan
c 2015 The Institute of Electrical Engineers of Japan.


666

HTML5 based Educational Support System on Electrical MachineryMakoto Ishibashi et al.

Asynchronous I/O
Single threaded
Available for WebSocket
These features mean that Node.js is suitable for the Web
server which is accessed by many people and needs real-time
communications.
The experiment servers are established on a microcomputer board and have two roles: (1) Controlling and measuring experiment equipment and (2) making communications
with the Web server. The experiment server and the Web
server are in the same LAN and the communications between
them are done with TCP. One experiment server handles a set
of experiment equipment. We have developed an experiment
server that handles remote experiments on a DC motor and an
alternator, which is going to be described in the next section.
2.2 Remote Experiment
By accessing the Web page
for remote experiments, users can conduct remote experiments. The remote experiments enable the users to learn
about Pulse Width Modulation (PWM) control of a DC motor
and the relationship between a rotation speed and a generated
voltage of the alternator, with the real world equipment.
The experiment server is established by an H8/3069F microcomputer board, which has various functions for remote
experiments: eight channels 10-bit A/D converter, Ethernet
controller, PWM signal output and so on. The H8/3069F
controls and measures the experiment equipment shown in
Fig. 2. The experiment equipment consists of a DC motor
and an alternator, and the rotations of the motor and the alternator are in synchronization with each other. When the motor
rotates, the rotor of the alternator also rotates and generates
electricity depending on the rotation speed. The motor speed
is controlled with PWM control.
Figure 3 shows data flows of the system when a remote
experiment is conducted. In order to control the experiment

and let the students use the learning system for an advanced
learning after the class.
In addition, we developed the system without expensive
software such as MATLAB and LabVIEW and adopted an
inexpensive microcomputer board to control and measure the
electrical machinery, so that we can establish the system inexpensively. The targets of this system are undergraduate and
high school students who learn about electrical machinery,
and we conducted a survey to evaluate the system.
2.

System

This section explains our system. Using the system, the

users can learn the principles of a DC motor and an alternator. They can conduct remote experiments on them.
2.1 Configuration
The educational support system
consists of a Web server and experiment servers, as shown in
Fig. 1. The Web server is established on a Linux machine and
has three roles: (1) Providing Web pages for remote experiments and 3DCG based learning materials, (2) making WebSocket communications with Web browsers for remote experiments and (3) intermediating between Web browsers and
the experiment servers. WebSocket is a TCP based communication protocol and makes it possible to facilitate real-time
communications between Web servers and Web browsers. In
order to realize the three functions, we adopted Node.js as
HTTP, WebSocket and TCP servers. Node.js is a serverside JavaScript based platform and has the following features:
Able to establish various servers with JavaScript

Fig. 1. The overview of the system

Fig. 2. Experiment equipment

Fig. 3. Data flows of the system

667

IEEJ Trans. FM, Vol.135, No.11, 2015

HTML5 based Educational Support System on Electrical MachineryMakoto Ishibashi et al.

Fig. 4. User Interface

Using the Web oscilloscope, the users can measure the

voltage generated by the alternator like an actual oscilloscope. The Web oscilloscope has five buttons: a run/stop
button, volt scale buttons and time scale buttons. By pushing these buttons, the user can start or stop the update of
the waveform and change the scales of the waveform to the
appropriate scales to observe the waveform. In the case of
Fig. 4, it turns out that the generated voltage is the AC whose
amplitude is approximately 1.5 V and whose period is approximately 125 ms.
The Web camera viewer shows the video of the motion of
the experiment equipment to the users in real-time. Seeing
the video, the users can know that they work on not simulations but real world equipment. In addition, when changing
the duty cycle, the users can see that the motor speed changes,
which gives real experience to the users.
In the information area, the users can confirm their operation information, for example, you can control for 60 seconds. The information area is explained in detail in the next
section.
2.2.2 Dealing with multiple access
As mentioned
above, one experiment server handles a set of experiment
equipment. Therefore, more than one user cannot conduct
the same remote experiment at the same time. Thus, who can
conduct the remote experiment simultaneously must be limited to one. However, if only one user can access the Web
page for the remote experiment, other users cannot learn experimental contents while the first user is accessing the Web
page. At actual experiments, those who are not conducting experiments also can learn the experimental contents by
seeing the operation of the user who is conducting the experiments. Thus, we tackled the problem by enabling users
who are not conducting the experiments to access the Web
page for remote experiments and see the activity of the user

equipment, the users decide either to start or to stop the motor rotation and specify the duty cycle of the PWM output,
and then the data are sent to the Web server with WebSocket.
Receiving the data, the Web server creates control data in the
form of query strings and sends the data to the H8/3069F
with TCP. After receiving the data, the H8/3069F outputs
PWM signals on the basis of the data and controls the rotation of the motor. When the motor rotates, the alternator
generates electricity, and the H8/3069F measures the voltage
with A/D conversion. Then the H8/3069F sends the measurement data to the Web server with TCP. Receiving the data, the
Web server draws a voltage waveform image like an oscilloscope and sends the image to the Web browser with WebSocket. The users can change scales of the waveform with
the Web browser, and observe the waveform with an appropriate scale. While conducting the remote experiment, a Web
camera connected to the Web server takes a video of the experiment equipment and the Web server sends the video to
the Web browser in real-time, which presents the users real
world experience.
2.2.1 User interface
Figure 4 is the user interface for
the remote experiment, which is written in HTML5 without
the plugins. There are four components: the motor controller,
the Web oscilloscope, the Web camera viewer and the information area.
The motor controller allows the users to control the DC
motor with PWM. In the motor controller, there are a
start/stop button, a slider to change the duty cycle and a PWM
waveform image. By pushing the start/stop button, the users
can start or stop the PWM output. In addition, when the slider
is dragged, the duty cycle of the PWM output is changed,
and then the PWM waveform image is also changed, which
makes it easy for the users to understand how the motor is
controlled.
668

IEEJ Trans. FM, Vol.135, No.11, 2015

HTML5 based Educational Support System on Electrical MachineryMakoto Ishibashi et al.

(a) Relationship between the duty cycle and the

rotation speed

Fig. 5. Synchronization of displays of each user

(a) Normal

(b) Controlling

(b) Relationship between the rotation speed and

the generated voltage

Fig. 7. Relationship among the duty cycle, the rotation

speed and the generated voltage

(c) Reserving

Fig. 6. Information area

( 1 ) Change the duty cycle from 0% to 100% with the

motor controller
( 2 ) Measure the rotation speed and the generated voltage with the Web oscilloscope
The result of the experiment is shown in Fig. 7. Figure 7 (a)
shows the relationship between the duty cycle and the rotation speed, and Fig. 7 (b) shows the relationship between the
rotation speed and the generated voltage.
From Fig. 7 (a), it is shown that the rotation speed is proportional to the duty cycle, but in the area of low duty cycles
under 20%, the motor does not rotate. From this result, it is
considered that a low duty cycle cannot get torque enough
to rotate the motor. In addition, from Fig. 7 (b), it turns out
that the amplitude of generated voltage is proportional to the
rotation speed.
2.3 3DCG based Learning Material
Many students
have trouble learning electrical machinery because of the dynamic motion of the machinery and the invisibility of electromagnetism. In traditional education, the students have to
learn it with textbooks, which are written with static contents,
and therefore it is dicult for them to learn about the dynamic motion of electrical machinery. In addition to that, the
textbooks describe dynamic and electromagnetic phenomena,
which is in the 3D world, with 2D pictures, and this also
causes the diculties. We have tackled this problem by developing 3DCG based learning materials. The 3DCG can describe the dynamic and electromagnetic phenomena and the
motion of electrical machinery with 3D animations, which
makes it easy for students to learn the principles of electrical
machinery.
The system provides text based learning materials and
3DCG based learning materials as shown Fig. 8. There are
the Web pages about the following items:

conducting the remote experiment.

Figure 5 shows a situation where two users are accessing the Web page for the remote experiment. There are two
users, but who can conduct the remote experiment is only
one. Only the user permitted to conduct it (permitted user)
can control the motor and change the scales of the Web oscilloscope, while the user who is not permitted to conduct it
(non-permitted user) cannot do these things. However, the
states of the operation and the waveform are synchronized
among all the users, which enables non-permitted users to
see the operation of the permitted user and learn the experimental contents.
In order to obtain a permit of operation, the users must
click (or tap) the information area. At first, the information
area is in the state of Fig. 6 (a), and the user cannot control the
motor nor change the scales of the waveform in the Web oscilloscope. By clicking the information area, if anyone else is
not conducting the remote experiment, the user is permitted
to conduct it for one minute, and the message of the information area changes to Fig. 6 (b), which shows the remaining
time. When the user clicks the information area, if another
user is conducting the remote experiment, the user makes a
reservation instead of the conduct, and the message of the information area changes to Fig. 6 (c). When the permitted user
ends the operation, the user reserving the conduct in the next
obtains the permission.
Thus, the system copes with the multiple access problem
by providing an environment where all the users can learn
experimental contents.
2.2.3 Example of experiment using the system
We
conducted an experiment using the Web page for the remote
experiment. The method is as follows:
669

IEEJ Trans. FM, Vol.135, No.11, 2015

HTML5 based Educational Support System on Electrical MachineryMakoto Ishibashi et al.

Table 1. Survey of the system
(a) Prevalence of devices
Score
(%)
83%
39%
22%

Question
Q1.
Q2.
Q3.

I have a smartphone.
I have a PC.
I have a tablet.
(b) Educational environment
Question

Q4.
Q5.
Q6.
Q7.
(a) Text based learning material

Experiments are conducted suciently in my school.

Remote experiments and 3DCGs are useful for learning.
Remote experiments and 3DCGs motivate me to learn.
3DCGs make it easier for me to learn about the working principle
than textbooks.

Score
(out of 5)
2.8
4.1
4.3
4.6

(c) Performance of the system

Question
Q8.
Q9.
Q10.
Q11.

4.2

had the system used by the students, and then a survey was
conducted among them in terms of prevalence of devices, educational environment and performance of the system.
The survey results are shown in Table 1. As seen in the
table, it turns out that this system is very eective for engineering education. In the questions from Q4 to Q11 in
the table, higher scores mean better opinions from the students. The prevalence of devices (Table 1(a)) shows that the
prevalence of smartphones is the highest, while that of PCs is
low. In addition, as seen in the educational environment (Table 1(b)), experiments for education are not conducted very
often and the students think that learning using remote experiments and 3DCGs is more eective than traditional learning. This means that learning using remote experiments and
3DCGs which can be used with smartphones is very eective. Furthermore, according to the results regarding the performance of the system (Table 1(c)), the system can be summarized as a useful tool for the students to understand the
principles.

(b) 3DCG based learning material

Fig. 8. Learning materials

Principle of a DC motor
Principle of a 3-pole DC motor
PWM control of a DC motor
Principle of an alternator
All the items above are explained with the text based learning materials and the 3DCG based learning materials. Figure 8 (a) shows the text based learning material about the
principle of a DC motor. The Web pages are composed of
texts, 2D pictures and links to 3DCGs.
Figure 8 (b) shows the Web page having a 3DCG about the
principles of a DC motor. The Web page has a 3DCG, three
toggle buttons and two sliders. In the 3DCG, there are a 3D
model of a DC motor and cone vectors which indicate electromagnetic phenomena (current I, magnetic flux density B
and force F) with their sizes and directions. When the toggle
buttons are clicked, the visibility of the cone vectors in the
3DCG is switched. In addition to that, by moving the sliders,
the users can change the intensity of the current and magnetic flux density in the 3DCG. The sizes of the corresponding cone vectors are changed on the basis of the positions
of the sliders, and then, the sizes of the cone vectors showing
the force and rotation speed of the 3D model of the DC motor
are also changed. Thus, the users can learn about electrical
machinery with the visibility of electromagnetic phenomena
and the interactivity of 3D animations.
3.

The remote experiment gives me real world experiments.

I want to use the system if the system is available at any time.
The system makes it easy for me to learn about the working principle of a DC motor.
The system is easy to use.

Score
(out of 5)
3.9
4.4
4.5

4.

Conclusion

This paper has described an HTML5 based educational

support system on electrical machinery. The system provides
an environment of remote experiments and 3DCG based
learning materials on electrical machinery in the form of
Web pages. Owing to HTML5 based client-side applications,
users can use the system with Web browsers of their smartphones as well as their personal computers, which is an advantage over traditional educational support systems.
On the Web page for remote experiments, the users can
conduct remote experiments on a DC motor and an alternator.
The users can control the motor with PWM control and measure the voltage generated by the alternator. Although the remote experiment cannot be conducted by more than one user
simultaneously, this problem is overcome by synchronizing
the displays of all the users with that of the user conducting
the remote experiment.

Assessment

In this section, the assessment of this system is described.

We demonstrated the system to 35 high school students and
670

IEEJ Trans. FM, Vol.135, No.11, 2015

HTML5 based Educational Support System on Electrical MachineryMakoto Ishibashi et al.

The Web pages for learning principles provide 3DCG

based learning materials on electrical machinery. The use
of 3DCG based learning materials helps students understand
the principles of the electrical machinery.
Furthermore, we have conducted a survey for high school
students. According to the results of the survey, the system
was accepted by students as a useful tool for learning about
the principles of a DC motor and an alternator.
In future works, we are going to add more contents to this
system, such as a stepper motor and an induction motor.
Acknowledgment
This work was supported by JSPS KAKENHI Grant Number 25350338.

Hisao Fukumoto (Member) He received the B.E and M.E degrees in

1997 and 1999, respectively from Saga University,
Saga, Japan. He received the D.E degree from Saga
University, Japan in 2002. He is a research assistant
of the Department of Advanced Systems Control Engineering at Saga University since 2002. His research
fields are the image processing, the signal processing
and the education on engineering based on the advanced computational engineering. He is member of
the Institute of Electronics, Information and Communication Engineers Japan, the Society of Instrument and Control Engineering
Japan, the Japanese Society for Medical and Biological Engineering.

Tatsuya Furukawa (Member) He received the B.E, M.E and D.E

degrees in 1979, 1981 and 1987, respectively from
Kyushu University, Fukuoka, Japan. He joined Nagasaki University, Nagasaki, Japan as a research associate in 1984. He moved to Saga University, Saga,
Japan as a lecturer in 1986. He is a professor of the
Department of Electrical and Electronic Engineering
at Saga University since 2001. His research fields
are the power engineering, the electric machinery, the
computer science, the simulation technology, the instrumentation technology and the higher education on engineering based on
the advanced computational engineering. He is a member of the Society
of Instrument and Control Engineering Japan, the Institute of Electronics
Information and Communication Engineers Japan.

References
(1)

(2)

(3)

(4)

(5)

(6)

(7)

(8)

(9)

E. Sancristobal, M. Castro, S. Martin, M. Tawkif, A. Pesquera, R. Gil, G.

Diaz, and J. Peire: Remote labs as learning services in the educational
arena, Global Engineering Education Conference (EDUCON), 2011 IEEE,
pp.11891194, Amman (2011-4)
F. Liarokapis, N. Mourkoussis, M. White, J. Darcy, M. Sifniotis, P. Petridis,
A. Basu, and P. F. Lister: Web3D and augmented reality to support engineering education, World Trans. Engineering & Technology Education, Vol.3,
No.1, pp.14 (2004)
K. Henke, S. Ostendor, and H. Wuttke: A Concept for a Flexible and Scalable Infrastructure for Remote Laboratories - Robustness in Remote Engineering Laboratories, Proc. ImViReLL, pp.1324 (2012)
M.E. Auer and C. Gravier: Guest editorial: The many facets of remote laboratories in online engineering education, IEEE Trans. Learning Technol.,
Vol.2, No.4, pp.260262 (2009)
V.J. Harward, J.A. Del Alamo, S.R. Lerman, P.H. Bailey, J. Carpenter, K. DeLong, C. Felknor, J. Hardison, B. Harrison, I. Jabbour, P.D. Long, T. Mao, L.
Naamani, J. Northridge, M. Schulz, D. Talavera, C. Varadharajan, S. Wang,
K. Yehia, R. Zbib, and D. Zych: The iLab shared architecture: A Web services infrastructure to build communities of Internet accessible laboratories,
Proc. IEEE, Vol.96, No.6, pp.931950 (2008)
M. Tawfik, E. Sancristobal, S. Martin, R. Gil, G. Diaz, J. Peire, M. Castro, K.
Nilsson, J. Zackrisson, L. Hkansson, and I. Gustavsson: Virtual Instrument
Systems in Reality (VISIR) for Remote Wiring and Measurement of Electronic Circuits on Breadboard, IEEE Trans. Learning Technol., Vol.6, Iss.1,
pp.6072 (2013)
W. Rochadel, J.B. da Silva, J.P. Simao, G.R. Alves, R. Marcelino, and V.
Gruber: Extending access to remote labs from mobile devices in educational
contexts, iJOE, Vol.9, pp.913 (2013)
P. Orduna, J. Garcia-Zubia, J. Irurzun, D. Lopez-de-Ipina, and L. RodriguezGil: Enabling mobile access to Remote Laboratories, Global Engineering
Education Conference (EDUCON), 2011 IEEE, pp.312318, Amman (20114)
D. Lopez-de-Ipina, J. Garcia-Zubia, and P. Orduna: Remote Control of
Web 2.0-Enabled Laboratories from Mobile Devices, e-Science and Grid
Computing, 2006. e-Science 06. Second IEEE International Conference on,
p.123, Amsterdam, The Netherlands (2006)

Hideaki Itoh (Non-member) He received the B.E, M.E, and D.E degrees in 1997, 1999, and 2002 respectively from the
University of Tokyo, Tokyo, Japan. After working as
a research associate in Tokyo Institute of Technology,
he has moved as an assistant professor to the Department of Electrical and Electronic Engineering at Saga
University in 2009. His research fields include artificial intelligence and soft computing. He is a member of the Japanese Society for Artificial Intelligence,
the Society of Instrument and Control Engineering
Japan, the Institute of Electronics, Information and Communication Engineers Japan, Japan Society for Fuzzy Theory and Intelligent Informatics,
and the Robotics Society of Japan.

Masashi Ohchi (Senior Member) He received B.E and M.E degrees

in 1987 and 1989 respectively from Nagasaki UniversityNagasakiJapan. He joined Nihon Telephone
Telegraph Co. in 1989. He was adopted as a research
associate at Saga University, Saga, Japan. He received the D.E degree from Kyushu University, Japan
in 2000. He was an associate professor of the Department of Electrical and Electronic Engineering at
Saga University since 2000. He has moved to Chiba
Institute of Technology, Chiba, Japan as a professor
in 2008. He is a professor of the Department of Electrica1, Electronics
and Computer Engineering at Chiba Institute of Technology. His research
fields are the electrostatic field simulation technology, the ultra-precise instrumentation on the small capacitances. He is a member of the Institute of
ElectronicsInformation and Communication Engineers Japan.

Makoto Ishibashi (Student Member) He received the B.E degree

from Saga University in 2014. He is currently a student of Graduate School of Science and Engineering
at Saga University. His research speciality is development of educational support systems.

671

IEEJ Trans. FM, Vol.135, No.11, 2015