The prediction of cardiac conditions can be done through comparison and analysis of parameters transformed into mathematical model equations. This paper aims to present the design of a web-based graphical user interface of mathematical model of cardiovascular-respiratory system (ICRSMM) as an appropriate displaying tool. The designed system offers an easy way of recording and storing parameters in a database. Those parameters are computerized to generate automatic results in a graphic representation, which is an effective way used in medicine to allow physicians, nurses, and other experienced health personnel to analyze and discuss results. The designed solution provides an adequate and friendly environment that eases the task of recording the results in a graphic representation. This gives a clear picture of analysis to determine a healthy or unhealthy cardiovascular-respiratory system of a person exercising. However, such a complex design solution comes in to put an accent of consideration to an area of research that still needs more discoveries and exploration.

1. Introduction

The role of any computer depends on how the users exploit, manipulate, and interact with it through its graphic user interface (GUI) [1]. Designing an efficient and reliable graphic user interface is a complex task of software application programming in the area of human-computer interaction (HCI). Any computer does not implement any user interface (UI). There are specific languages and metaphors to each target system [2]. Therefore, GUI is part of HCI and the users of GUI can touch, see, hear, talk or control, and direct throughout GUI. Its main objective is to ease the usability and adaptability since the GUI is implemented in other different types of devices such as smartphones, printers, TVs, cars, airplanes, and tablets. The task becomes more multifaceted when it comes to designing GUI for health systems and medical-oriented solutions which must convey complex data and functions through lists, tables, charts, and diagrams to visualize on user’s benefits and at a global range. The GUI environment allows the user to not spend more time calculating and analysing the results. For example, it is used to study nonlinear dynamics by applying methods to better understand computational simulations in different environments. Furthermore, using MATLAB runtime, Silva et al. elaborated GUI as a teaching aid for dynamic systems, focusing on chaotic systems [3]. The GUI is a useful tool to mitigate challenges human being can face such us crowd disasters, crime, terrorism, wars, and diseases. An overview on mathematical modelling for suitable system design is presented by Helbing et al. [4].

Pérez-Medina et al. argued that there are different driven approaches to design GUI [5] but several of them are web-based [6]. This needs the advanced GUI programming, and the task is not sometimes easy [7]. Therefore, the design of GUIs is not performed by everyone, and their development is expensive. This high development cost is required if it is GUI that implements the visualization of human body system, particularly one designed using the mathematical model of cardiovascular-respiratory system. We notice that the mathematical model of this system has been developed [810]. However, the evaluation that uses GUI is an object of relatively few studies and findings in the literature. In fact, the world is facing different diseases of this system every day, and there is an increased attention to GUI for a good management.

The objective of this paper is to design a web interface for cardiovascular-respiratory system mathematical model (ICRSMM). The mathematical model of this system is developed in the Rwandan context [11]. Users of this designed ICRSMM include physicians, nurses, and administrative personnel who need to review the trends of some parameters of cardiovascular-respiratory system to make appropriate, accurate, precise, and timely decisions based on the displayed results. It presents some guidelines for ICRSMM design and reviews the design of prototypes for cardiovascular-respiratory system, with an emphasis on numerical test and appearance results during physical activity or exercise. For detailed guidelines on designing GUI, refer to [12, 13].

This paper consists of six sections. Section 2 presents the overview of the mathematical model of cardiovascular-respiratory system. Section 3 focuses on ICRSMM layout. This section deals with context and data-flow diagrams, front-end side and back-end side, and database design. System implementation of ICRSMM is presented in Section 4. Section 5 discusses the results of the test evaluation. Finally, we conclude with Section 6.

2. Mathematical Model Equations

The mathematical model developed in [11] has been described in this Section 2. This model consists in determining the parameters of cardiovascular-respiratory system. Some parameters are estimated and others are measured. Variables and parameters are shown in Table 1. The estimation of parameters is done using the data collected in Rwanda. The model equations are formulated by taking into account the exchanges of hemodynamic quantities illustrated in Figure 1. In this figure, the exchanges are represented by arrows.

The constants , , , , , and and the logistic functions and of the mathematical model equations (1) should be identified. The logistic functions and are defined as follows:where denotes the maximum growth of alveolar ventilation and is the maximum growth of heart rate, whereas and stand for the maximum sustainable (carrying capacity) of alveolar ventilation and heart rate, respectively. The values of and at the beginning of evolutionary process are and .

In the following equation,where is the metabolic oxygen consumption rate at rest and is the metabolic oxygen consumption rate during exercise. The above equation shows the needed energy supplied anaerobically for short time and metabolic oxygen consumption. The constant and it is set such that minutes the momentary oxygen supply which reaches of the total oxygen demand. The increase in metabolic rate of oxygen consummation during exercise has been described by Kappel and Peer [14] as proportional to the workload by the following relation:where is the parameter that characterizes the physical condition of the exercising person and is the imposed workload. The metabolic rate of carbon dioxide production is taken to be proportional to metabolic rate of oxygen consummation as follows:where constant respiratory quotient is represented by . We use the formula from literature in order to enter the pressures. The systemic arterial blood pressure () is estimated from measurements of systolic blood pressure () and diastolic blood pressure ( ) as follows (see [15]):

In addition, the systemic venous blood pressure is formulated aswhere is that systemic vascular resistance is set as constant. Let denote tidal volume, be physiologic dead space volume, and represent the number of breaths/minutes (in BPM:breaths per minute), and the alveolar ventilation is defined as

In numeral simulation, we consider that and are constants. Furthermore, the respiratory physiology allows to find tidal volume from the vital capacity () which is given by [16]where is the inspiratory reserve volume and denotes the expiratory reserve volume. These last parameters are taken from the literature. It is known that vital capacity depends on age, height, and sex [17]. Therefore, the following formulas present this relationship:where vital capacity is represented by , age by a, and height by . is measured in , a in years, and in . Table 2 shows the value of parameters collected from the literature (see [18] for details) while Table 3 presents the parameter values as estimated in [11].

3. Design and Layout

We focus on the possibilities of arranging layout elements on the screen where the data are cut up and displayed in one-page stage. To manage the layout of the display area, two main and complementary strategies are used [19]: high-density layout and limited information layout. The first deals with tabular arrangement, hierarchical organization, and graph while the second focuses on step-by-step interaction, details on demand, and disabling/minimizing irrelevant information. According to the case, one of these two strategies can be dominant, but we should mix them so that they are accurate.

3.1. Context and Data-Flow Diagrams

The ICRSMM design has two main contents: the front-end side and the back-end side illustrated by the interaction between the users and the system. This is shown by the context diagram which is sometimes called level 0 data-flow diagram (see Figure 2).The system design context diagram is drawn in a way which defines and determines clear boundaries of the graphic user interface of mathematical model system. It is an identifier of interaction between the designed system and external entities. The whole system design is presented as a single process. Its main concern is to demonstrate easy interaction with the users and how the system is sufficiently friendly and responsive to anyone who wishes to have access on it. However, the system cannot accommodate all people who will try to view and access the content because it was designed for a customized purpose. The system will be used by medical doctors and other people interested or skilled in health systems, especially those who are familiar with cardiovascular and respiratory systems related to human exercises in Rwanda. It will help them in information gathering and it has security features to allow control and privacy of data recorded and collected for research purposes. Therefore, it requires the user to register in order to get a username and a password. Once the user has got a password, he will be eligible to get into the system and enter the parameters to view the results. The system is also designed in a way that it can be controlled by an administrator in charge of viewing the content registered by the users and controlling overall functionalities of the whole system to ensure good continuity.

Since the designed GUI is a useful tool for medical doctors and other people interested in cardiovascular-respiratory system, it should gather the required security feature to allow control and privacy of data recorded and collected so that it can be used for research purposes. Therefore, it requires the user to register for getting a username and a password. Once the user has got a password, she/he will be eligible to get into the designed GUI for entering the cardiovascular-respiratory system form pages. The interaction of system and medical users is shown in Figure 3.A use case diagram is a graphic depiction of the interactions among the elements of a system. A use case is a methodology used in system analysis to identify, clarify, and organize system requirements. In this context, the term “system” refers to something being developed or operated, such as a mail-order product sales and service website. An administrator should manage staff information (nurse, receptionist, or doctor) by adding, viewing staff list, or/and editing staff names, or he/she can delete a staff account from the system. When a patient goes to the hospital, a receptionist can register him/her, and she/he should/can view the existing patients’ list. A nurse should add measured physical health parameters such as systolic blood pressure, diastolic blood pressure, heart rate, expiratory reserve volume (ERV), and inspiratory reserve volume (IRV). The system uses these parameters to solve the mathematical model, and it generates graphs/figures which will be used by a doctor in order to interpret the results.

3.2. Front-End Side and Back-End Side

The front-end side is the visible part of ICRSMM allowing the user to manipulate and visualize the results. It is a home page since the system is a web-based application. This part contains the general information of the system and represents a point of entry for users who will be requested to authenticate to get into the system and use it. For example, an admin should login to enter data, to record, or to visualize users’ information. The first layout to login ICRSMM design of the cardiovascular-respiratory system based on desktop metaphor is depicted in Figure 4.

The ICRSMM page contains forms where the user must enter related parameters for calculations which will be executed by the back-end programs once the user clicks on the calculate button. It is in this same side that the doctor should view the results once the calculation process is made. This content also contains the programs (mathematical functions and programs) used for calculating the parameters recorded by the nurse. Once calculations are done, the results are sent back to the front-end side to be visualized and seen by the user as needed results of cardiovascular-respiratory system or glucose-insulin system. The back-end side is invisible and it is not directly accessed by all users. It is only controlled by the system administrator and contains the database which keeps all information related to the usernames, passwords, parameters, and constants as well as all kind of settings which make the cardiovascular-respiratory system run correctly.

3.3. Database Design

The database is one of the core elements of any management information system. The database contains the information of the users (receptionist, nurse, doctor, and administrator). It also contains the names of patients and measured parameters. The entity relationship diagram (ERD) which is a graphical representation of the relationship between entities is shown in Figure 5.

4. System Implementation

The login page facilitates a registered user to enter username and password in order to be authenticated. The screenshot is shown in Figure 6.

The receptionist should welcome any customer by asking him/her to add his/her first name and surname to a database. The receptionist is also able to view the list of existing customers. The designed form of ICRSMM is shown in Figure 7.

To run ICRSMM, the measured parameters need to be entered in the database. This task is performed by a nurse who can view a list of customers, and then he/she can choose a customer for whom he/she wants to insert the values. In ICRSMM, the nurse takes the measure of heart rate, height, age, systolic pressure, diastolic pressure, arterial pressure of oxygen (), arterial pressure of carbon dioxide (), concentration of oxygen decreases in mixed venous blood (), and concentration of carbon dioxide increases in mixed venous blood (). Figure 8 shows the form that is used by a nurse to add these measured parameters in ICRSMM.

The designed ICRSMM also has option to enter the new user to update/change the data of existing users such as usernames and passwords and to remove any user from the existing list. Using ICRSMM, this task is performed by an admin, and the designed form is shown in Figure 9.

A medical doctor is the only user of ICRSMM who can send the recorded data of a customer into MATLAB to generate the results which are graphs of cardiovascular-respiratory system parameters, that is, , , , , , and . This task is performed by clicking on the calculate button. The example for a list of three customers is shown in Figure 10.

To test ICRSMM, we have used the data for a 45-year-old woman having a height of 165 cm. The used data are presented in Table 4.

The graphs of a normal patient are shown in Figure 11 while Figure 12 shows graphs for an abnormal patient.

5. Discussion of Results

The results of numerical tests are in accordance with empirical reports from medical literature. The trend of systemic arterial pressure is negative from 100 mmHg to 65 mmHg (see Figure 11(a)) while the systemic venous pressure increases from 2.4 mmHg up to 3.1 mmHg. The variation of these cardiovascular parameters is in normal range, and physical activity plays a role to explain their trends. Furthermore, without change of diastolic pressure, systolic systemic arterial blood pressure increases progressively with exercise [20]. In addition, during exercise, pulmonary venous pressure increases, and consequently, systemic blood pressure undergoes a more appropriate increase [21]. This increase of systemic venous pressure is also due to physiological vasodilation that leads to decrease in vascular resistance during exercise. Although there is an increase of blood flow at onset of exercise, the positive trends of central venous pressure result in an increase of cardiac muscle pump [22]. Therefore, systemic venous pressure increases for healthy subjects (see Figure 11(b)).

A quick positive trend of oxygen arterial partial pressure initially followed by a negative trend for the rest of the exercise time is illustrated in Figure 11(c). This figure shows that carbon dioxide arterial partial pressure is decreasing quadratically during the exercise (see Figure 11(d)). Furthermore, the increase of hyperventilation of respiratory organs at the beginning of exercise leads to an increase of pressure of oxygen in arterial blood due to hyperventilation, but when the exercise starts to be of a high rate, it falls [23]. Regardless of the gender, all healthy subjects undergo a decrease in the arterial oxygen partial pressure during physical activities since the muscles are consuming almost all oxygen available in order to produce the energy. Therefore, the negative trends of carbon dioxide arterial partial pressure are due to the physiological phenomenon of compensatory respiration [23]. Planes et al. obtained the same result when they were validating the transcutaneous apparatus as a new way of measuring the arterial blood gas during exercise [20]. The test results show that physical activity leads to a decrease in concentration of oxygen in mixed venous blood (see Figure 11(e)) while the concentration of carbon dioxide increases in mixed venous blood (11(e)). The trends of these cardiovascular-respiratory systems are in accordance with physiology. Indeed, mixed blood is the blood coming from the right ventricle to the lungs via the pulmonary arteries. It is a mixture of blood coming from the superior part of the body drained by the superior vena cava and the blood coming from the inferior part of the body by the inferior vena cava. It is rich in carbon dioxide and poor in oxygen. It is the core of gas exchange activity in the lungs where carbon dioxide has to be exhaled and oxygen inhaled to change from pulmonary artery to pulmonary vein.

Generally, the numerical tests for abnormal subjects show the high values of cardiovascular-respiratory system during exercises (see Figures 12(a)12(f)). In fact, the results depend on measures taken by the user and entered in ICRSMM as initial values which are needed to compute the parameters of cardiovascular-respiratory system when the mathematical model is governed by ordinary differential equations.

6. Concluding Remarks

In this paper, the authors focus on web-based graphical user interface design for the mathematical model of cardiovascular-respiratory system. The designed graphical user interface uses different windows that offer an easy way of recording and restoring parameters in a database. From the designed window, each user is required to enter the measured data that should be needed by a medical doctor to generate the numerical results of cardiovascular-respiratory system. The results of evaluation test generated from MATLAB packages installed on the server are in accordance with empirical reports to verify the validity of the designed guide user interface. Therefore, the physiologists and other experts in medicine can use the designed web-based graphical user interface to test the trends of determinant parameters of cardiovascular-respiratory system.

Data Availability

The data used in this study are given in the manuscript.

Conflicts of Interest

The authors declare that there are no conflicts of interest.


The authors are highly indebted and thoroughly grateful to The World Academy of Science (TWAS) for funding this research under the TWAS Research Grant no. 19-220 RG/MATHS/AF/AC_G–FR3240310125.