2017 21st International Conference on Process Control (PC)

June 6–9, 2017, Štrbské Pleso, Slovakia

A Web-based Tool for Design of Simulink Models

L’uboš Čirka, Martin Kalúz
Institute of Information Engineering, Automation and Mathematics
Slovak University of Technology in Bratislava
E-mail: [email protected], [email protected]

Abstract—This paper deals with the development of an educa- 2) inability to continuous gathering of simulation data or
tional web-based application that allows users to create simple their visualization during the run of task - only batch
block schemes in the Internet browser. The structure of created mechanism;
schemes is based on XML, and it is entirely compatible with the
Simulink environment. The application allows the user to perform 3) the absence of feature to create user defined models
an evaluation of created schemes by executing them in the remote (even the change of parameters of existing ones is
instance of MATLAB/Simulink via an HTTP MATLAB Web available). The schemes must be created in advance and
Server. The result of the simulation is returned either in the form then uploaded to Web server. This procedure requires a
of a graph or a data file for further processing. The application Simulink to be available for end used.
can be used in education for a teaching of systems’ modeling and
control, and also as a support tool for development of virtual and The solution to first two disadvantages has been already
remote laboratories. provided in [9].
Many various software projects deal with the creation and
I. I NTRODUCTION editing of block schemes. These are e.q. JointJS1 , Mxgraph2 ,
GoJS3 , Draw2D4 , etc. The main disadvantage of these tools is
Many universities, research centers, and companies use the that they do not account for all the specifications compatible
MATLAB for various computing-related tasks, such as data with the Simulink (for example, they allow to define multiple
processing, statistics, modeling, simulations, control design, connections between block or does not allow to define their
and many others. In the past, the MathWorks company has parameters). The tool that allows the creation and editing
developed a toolbox called MATLAB Web Server [1] that of a Simulink scheme have been developed at FEI STU in
allows performing the computational tasks via the Internet. Bratislava [10]–[12].
However, this toolbox has been discontinued since the version The main goal of this paper is to describe a new tool that
2006b, and new distributions no longer support it. This toolbox allows not only a definition of block models in visual form, but
has been replaced by independent open-source project Web also their remote execution, data acquisition, and visualization
Server by a community member Dirk-Jan Kroon [2]. of results.
The principle of the server is based on execution of native The paper is organized as follows. Section 2 describes the
MATLAB code over the Web. The server side service is main structure of current Simulink model format, defined
emulated in by Java package classes java.net.* which are in the form of an XML file, along with the main elements
designed for I/O network communication handling. The ser- required for definition and visualization of particular blocks.
vice in set up to process common HTTP requests for GET Section 3 deals with the structure and operation principles of
and POST methods sent from client side Web pages. The created Web-based application. This section also describes the
source code of server consists of M-file executable scripts technologies and languages used in the application, procedure
and functions containing base methods for handling HTTP of block library extension. Additionally, the third section
request/response model and methods for local execution of describes the process of scheme creation, including block
server-side processing scripts. insertion, the configuration of parameters, the interconnection
Both mentioned toolboxes are also used in the education of blocks, and deletion of scheme objects. An illustrative
process [3], [4]. Based on them, several other educational tools example of model definition/editing is shown in section 4.
have been developed in different universities such as virtual II. S IMULINK M ODELS
and remote labs for monitoring and control of dynamical
The current versions of Simulink stores the model informa-
systems (CyberVirtLab [5], Recolab [6], WebPIDDESIGN [7],
tion in MDL files or compressed SLX format (by default). The
[8]).
developed application works with the more recent version of
Both toolboxes exhibit several disadvantages compared to models (SLX) that is XML compatible. The main internal file
pure MATLAB/Simulink execution of models/scripts. These structure of SLX is:
are:
1 http://www.jointjs.com/
1) the absence of mechanism for online change of pa- 2 https://www.jgraph.com/
rameters during the execution of simulation - limited 3 http://gojs.net/latest/index.html

interactivity; 4 http://www.draw2d.org/

c
978-1-5386-4011-1/17/$31.00 2017 IEEE 92
 _rels The operation of the application uses the following princi-
.rels ples. The Web application is provided to a user on demand
metadata via entering its URL into a browser. The application loads the
thumbnail.png newest set of predefined blocks from the server as a JSON.
mwcoreProperties.xml This set is located in the block library, and it is continually
coreProperties.xml updated over time. The whole work-flow of scheme design is
simulink performed in a browser, and actual visual and logic part of the
blockdiagram.xml scheme is kept in a JavaScript object. Any change of block
[Content_Types].xml scheme in editing window is immediately projected into the
object representation. Finally, the created model can be saved
All the information about a particular scheme is stored
on a server and downloaded back to a user. By executing this
in blockdiagram.xml file located in the sub-directory
task, an object representation of a model is sent to PHP layer
simulink. The root element of the model is called
that loads the template SLX file, writes the whole model into
ModelInformation. This element contains additional sub-
it and provide a user with reference to file. A user also has the
root element Model that carries all the information about
option to run the file directly on a server in Simulink. In such
schema and its operation. Most important parameters to men-
a case, the simulation is executed with the parameters defined
tion are settings of the editor, configuration of simulation
in the scheme and numerical and graphical results of output
(solver, time base, sampling, etc.), default and user-defined
blocks are returned to a user.
parameters of simulation and blocks, and visual representation.
All the communication, except the acquisition of simulation
Each block contains a set of predefined parameters that are
results, is performed in an asynchronous mode using AJAX.
used as default parameters when a block is firstly created. A
The architecture of the application is shown in Fig. 1.
user can later redefine these parameters.
Mechanism of block generation is as follows. The
action of new block insertion triggers the copying PC client
of predefined parameters (<Block> elements) into
<BlockParameterDefaults> in the model. If the Main WebPage Results
user changes a parameter of a block, this change is reflected
by copying the <Block> element into <System> element, Fabric.js
Library
while actual parameters are stored in <P> elements. Each 6
? Graph
<P> contains an attribute with the name of the parameter, (Blocks) -
scheme (js object)
while the value is enclosed in the element’s tag.
6 6
III. W EB A PPLICATION ? 6
The application is developed on the top of several tech- AJAX
nologies and languages, and it split into three operational 6
layers. The first layer is a user interface (served by a Web
browser), written in HTML5 and driven by JavaScript. For
the simplification of development and addition of interactive ?
Library (JSON) PHP (XML)
features, libraries jQuery and jQuery UI were used. The
mechanism of block manipulation in schemes is provided by
another JavaScript library Fabric.js5 . Apache Web Server
The second layer of the application is written in PHP, and it
is located on a server side. This processing part contains a set ? ?
of scripts that are used as a program interface to the bottom Scheme m-File
layer, where MATLAB HTTP Web Server is located. The
MATLAB Web Server
PHP layer performs the translation of user-defined schemes
(initially handled as JavaScript objects and send in JSON) Fig. 1: Operational Architecture
into an XML representation, used by Simulink. Additionally,
the PHP part is used for reading and writing SLX files, and
for constructing and sending the requests to MATLAB to run A. Modularity of Application
simulations and acquire results.
The application is designed in such a way that it allows
The third layer contains an instance of MATLAB with
simple extensions of block library without changes in program
listening HTTP Web server. This server allows invoking the
core.
execution of predefined M-files to run the Simulink model via
The definitions of all available blocks are located in the
standard commands.
directory called library. Each definition is located in a
5 http://fabricjs.com/ separate sub-directory, and it contains four separate files:

93
 •display.json – defines an appearance of block; "data": {
•param.json – stores default parameters of block; "title": "Sample time",
• default.xml – data structure for "Name": "SampleTime",
BlockParameterDefaults element; "size": "10",
• system.xml – data structure for System element. "id": "SampleTime",
The addition of new block into the library is quite sim- "value": "1"
ple, and it is explained on the following Digital Clock }
example. }
In the library directory, a new sub-directory is created ]}
using the name of new block (in this case digitalclock). Information about the appearance of block is stored in
The content of files default.xml and system.xml is display.json. These are split into:
taken from a model that was previously created in Simulink.
• type – shape of block (e.g. rect - rectangle),
It is necessary to create a scheme with the desired block
• Text – text that appears inside the block,
and save it in SLX format. Then, after the internal files
• Name – title located next to the block,
are subtracted, the element <Block> (representing a digital
• additional data such as dimensions, position, line type,
clock) is copied from the <BlockParameterDefaults>
of blockdiagram.xml into default.xml. The defini- etc.
tion of this block is as follows. {
<Block BlockType="DigitalClock"> "DigitalClock": [{
<P Name="SampleTime">1</P> "type": "rect",
</Block> "data": {
"width": 60,
The implementer repeats the procedure for another "height": 30,
<Block> element (digital clock) located in <System>. "fill": "white",
<Block BlockType="DigitalClock" "left": 0,
Name="Digital Clock" SID="1"> "top": 0,
<P Name="Position">[110,68,175,92]</P> "stroke": "black"
<P Name="ZOrder">1</P> }
<P Name="SampleTime">1</P> },{
</Block> "type": "text",
"Text": "12:34",
This structure is inserted into a file system.xml. An
"data": {
information about user-defined block’s parameters are stored
"fontFamily": "Arial",
in param.json file. The first part contains general info about
"left": 14,
block properties and appearance:
"top": 10,
• io – connection type (in - source block, out - sink
"fontSize": 10,
block, both - transient block), "fill": "black"
• NumberOfInputs – number of input ports,
}
• NumberOfOutputs – number of output ports,
},{
• BlockType – type of the block,
"type": "name",
• title – title used in modal window
"Text": "Digital Clock",
The following parameters define the modal input form and "data": {
its contents. "fontFamily": "Arial",
• type – type of a form element (text, checkbox, "left": 1,
selectbox), "top": 32,
• data – attributes of form (name, id, size, value. "fontSize": 8,
"fill": "black"
{
}
"DigitalClock": [{
}
"io": "out",
]}
"NumberOfInputs": 0,
"NumberOfOutputs": 1,
"BlockType" : "DigitalClock", B. Application Usage
"title": "Source ...: Digital Clock" The main application is shown in Fig. 2. The user interface
},{ contains the library of blocks (left-hand side) and canvas area
"type": "text", (right-hand side) where user created and arranges a scheme.

94
 Fig. 2: Main page of the application

The library is loaded dynamically from server. For each type

of defined block a display.json is loaded. Based on this
information, the blocks are rendered and slip into categories.
The copying of block from the library into the canvas
is performed via double-click action. Another double-click (a) (b)
on a newly created block triggers its modal window, where
parameters can be set (Fig. 3). This window contains form
that is generated using the param.json information. This
dynamic action is performed asynchronously via AJAX calls.
(c) (d)
Fig. 4: Definition of interconnection between two points

lines is not available in the current version of the application,

but it is considered for the future extensions.
A block can be deleted by selecting it and pressing either
delete button on a keyboard or by clicking Edit/Delete
Object in the top menu of the application. If the deleted
block has any defined connections, these are deleted as well.
In the current version of the application, each block has only
Fig. 3: Change of block’s parameters one input and one output port. If the user needs to connect
multiple input/output signals, their number can be defined in
The interconnection of two unconnected blocks (Fig. 4a) is the modal window of block’s properties (Fig. 5), and only
created by dragging of line from the output port of first block unoccupied ports are offered to the user.
(silver square - Fig. 4b) on the input port of second block (gray
square - Fig. 4c). The connection is automatically created on
a mouse release action (Fig. 4d). Every connection line is
defined by four points, and they are symmetric relatively to
input and output port. A line contains square marks that allow
a user to interact with it. Silver mark defines a port, where a
new branch of the line can be specified. The black mark can
be used for deleting the line. Fig. 5: Multiple-port connection
Each block can be moved in the canvas using a drag and
drop mechanism. All the lines are automatically adjusted if a Created model can be saved in an SLX file format. In the
block is relocated to another position. A separate movement of menu of application user selects Save Model option. By

95
clicking on the save button, a new modal window appears Step time: 2
with a link to generated model file. If the generated model Initial value: 0
contains at least one block from a set of Sinks (Scope Final value: 1
or To Workspace), user is provided with the possibility to
• Block Transfer Fcn 1:
run the model simulation remotely on a server (by clicking
the Run button). By doing so, the application stores a copy Numerator coefficcients: [1]
of SLX file in work directory of remote MATLAB and Denominator coefficcients: [1 1]
executes it by another M-file generated by the application.
• Block Transfer Fcn 2:
If model contains Scope block, user is provided with the
resulted graph, generated using a JavaScript library Flot6 . The Numerator coefficcients: [2]
application returns the data for graph generation in the form Denominator coefficcients: [1 2 1]
of a JavaScript array.
• Block Scope 1:
v a r d a t a = [ [ t 0 , y0 ] , [ t 1 , y1 ] , . . . , Save data to workspace: checked
. . . , [ t n , yn ] ] ; Save name: out1
The results are returned to a user only if the corre- Format: Stucture with time
sponding output block has selected the option Save data • Block Scope 2:
to workspace. The Save name option must have a
unique name in the model. The structure of save data can Save data to workspace: checked
be either of available formats (Stucture with time, Save name: out2
Stucture, and Array). If the model contains at least one Format: Array
To Workspace block, then returned data are provided in
The application generates the scheme that can be down-
the from of space-separated values.
loaded and opened in Simulink (Fig. 7). The scheme provided
t 0 y0 by the application is principally identical with the scheme in
t 1 y1 Fig. 6. The only difference is in the appearance of signal lines,
... however, the scheme provides the same functionality.
t n yn
These results are provided in the form element textarea.

IV. I LLUSTRATIVE E XAMPLE

The example of application usage is shown on step re-
sponses of two systems defined in the form of transfer func-
tions Fig. 7: Generated scheme opened in Simulink

Since the block Scope is present in the scheme, the user

1 can run the simulation and get the results. The step responses
G1 (s) =
s+1 of systems’ dynamics is shown in a new window of Web
2 browser (Fig. 8).
G2 (s) = 2 .
s + 2s + 1
V. C ONCLUSIONS AND F UTURE W ORK
A user creates a scheme in Fig. 6, based on the procedure
provided in the previous section. The scheme contains two This paper presents a tool for editing of Simulink schemes
Transfer Fcn blocks, two Scope blocks and one Step. in the form of Web-based application that runs in an Internet
browser. It allows users not only to design and create their
own models but also to execute them remotely on a server and
acquire results. The application can be used in the educational
process, specifically in modeling/evaluation of dynamical sys-
tems, control design, and as additional tools for MATLAB-
based virtual and remote laboratories. The application cur-
rently contains a library of 35 blocks.
Fig. 6: Example model for step response generation The future work will be focused on the extension of
block library, graphical enhancement, and addition of various
User defines the following parameters of blocks: interactive features (rotate & flip, zoom, rearrangement of
• Block Step: connection lines, etc.).
The full application (including the server-side execution of
6 http://www.flotcharts.org/ Simulink models) is available only to students of the faculty

96
 [9] L’. Čirka, M. Kalúz, and M. Fikar, “On-line remote control of matlab
simulations based on asynchronous communication model,” in 21th
Annual Conference Proceedings: Technical Computing Prague 2013
(P. Byron, ed.), pp. 1–6, Institute of Chemical Technology, Prague, ICT
Prague Press, 2013.
[10] Z. Janík, “Web-based modification of block schemes in mat-
lab/simulink,” Master’s thesis, FEEIT STU in Bratislava, 2010.
[11] Z. Janík and K. Žáková, “Online design of matlab/simulink block
schemes,” iJET, vol. 6, no. VU 2009, pp. 11–13, 2011.
[12] Z. Janík and K. Žáková, “Online design of matlab/simulink and scilab/x-
cos block schemes,” in Proceedings of the 14th International Conference
on Interactive Collaborative Learning (M. H. Michael E. Auer, ed.),
(Piešt’any, Slovakia), pp. 241–246, International Association of Online
Engineering, Kirchengasse 10/200, A-1070, Wien, Austria, September
21 - 23 2011.

Fig. 8: Graphical result of simulation

for handling their study tasks (according to MATLAB license

agreement). The part of the application that allows to create
and edit Simulink models is publicly available at http://www.
kirp.chtf.stuba.sk/~cirka/websimulink.

ACKNOWLEDGEMENT
The authors gratefully acknowledge the contribution of the
Scientific Grant Agency of the Slovak Republic under the
grants 1/0004/17.

R EFERENCES
[1] The Mathworks, Inc., Natick, Massachusetts, MATLAB Web Server,
2001.
[2] D. J. Kroon, “Web server.” https://www.mathworks.com/matlabcentral/
fileexchange/29027-web-server/, 2011. [Online; accessed 20-February-
2017].
[3] M. Bakošová, M. Fikar, and L’. Čirka, “New approaches to control
engineering education,” AT&P Journal, pp. 17–19, 2003.
[4] M. Kvasnica and L’. Čirka, “Usage of milab in education of automatic
control,” in Proceedings of the 13th International Conference Process
Control ’01, Slovak University of Technology Bratislava, Slovak, 2001.
[5] I. Zolotová, J. Liguš, and A. Jadlovská, “Remote and virtual lab–
cybervirtlab,” in Proceedings of the 17-th EAEEIE Conference on
Innovation in Education Engineering, Craiova, pp. 339–342, 2006.
[6] R. Puerto, L. Jiménez, and O. Reinoso, “Remote control laboratory
via internet using matlab and simulink,” Computer Applications in
Engineering Education, vol. 18, no. 4, pp. 694–702, 2010.
[7] J. Oravec, M. Kalúz, L’. Čirka, M. Bakošová, and M. Fikar, “Webpidde-
sign for robust pid controller design,” in Proceedings of the 20th Interna-
tional Conference on Process Control (M. Fikar and M. Kvasnica, eds.),
(Štrbské Pleso, Slovakia), pp. 393–399, Slovak University of Technology
in Bratislava, June 9-12, 2015 2015.
[8] J. Oravec, M. Kalúz, L’. Čirka, M. Fikar, and M. Bakošová, “Webpid-
design - software for pid controller design management,” in European
Control Conference 2015, (Linz, Austria), pp. 3020–3025, 2015.

97