# A Client-Server and Web-Based Graphical User Interface Design for the Mathematical Model of Cardiovascular-Respiratory System

Authors: Theogene Bizimungu; Domonique Harelimana; Jean Marie Ntaganda
Journal: Applied Computational Intelligence and Soft Computing
 (2021)

---

## Abstract

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.


---

## Body

## 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 [8–10]. 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. Section2 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.Table 1
Description of variables and parameters of the mathematical model.
Variable of modelDescriptionPBlood pressurePaArterial partial pressureSubscriptasSystemic arterialvsSystemic venousO2OxygenCO2Carbon dioxidevCO2Bound and dissolved carbon dioxide in the mixedVenous blood entering in the lungsvO2Bound and dissolved oxygen in the mixedVenous blood entering in the lungsVariableVTissue storage volumeHHeart rateV˙AAlveolar ventilationMRMetabolic rateCConcentrationConstant of modelQConstant to be estimatedγParameterαParameterβParameterFigure 1
Diagram of exchange of pressures for 4 compartments of mathematical model of human cardiovascular-respiratory system during physical activity.f1 and f2 denote logistic functions. The parameters MRO2 and MRCO2 represent the metabolic oxygen consumption rate and the metabolic carbon dioxide production rate, respectively, during physical activity. Fs denotes blood flowing into the tissue compartment.(1)dPastdt=−γasPast+Pvstf1V˙A,dPvstdt=−γvsPvst+Pasαt,dPaO2tdt=−γO2PaO2t+PaCO2tf2H,dPaCO2tdt=−γCO2PaCO2t+PaO2βt,VTO2dCvO2tdt=−MRO2t+Past−PvstRsCaO2t−CvO2t,VTCO2dCvCO2tdt=MRCO2t+Past−PvstRsCaCO2t−CvCO2t.The constantsγas, γvs, γO2, γCO2, α, and β and the logistic functions f1 and f2 of the mathematical model equations (1) should be identified. The logistic functions f1 and f2 are defined as follows:(2)f1V˙A=C1f1,0f1,0+C1−f1,0e−k1V˙Aandf2H=C2f2,0f2,0+C2−f2,0e−k2H,where k1 denotes the maximum growth of alveolar ventilation and k2 is the maximum growth of heart rate, whereas C1 and C2 stand for the maximum sustainable (carrying capacity) of alveolar ventilation and heart rate, respectively. The values of f1V˙A and f2H at the beginning of evolutionary process are f1,0 and f2,0.In the following equation,(3)MRO2t=MRO2r+MRO2ex−MRO2r1−e−τ/τa,where MRO2r is the metabolic oxygen consumption rate at rest and MRO2ex 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 τa=0.5 and it is set such that 4τa minutes the momentary oxygen supply which reaches 98% 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:(4)MRO2ex=MRO2r+ρW,where ρ is the parameter that characterizes the physical condition of the exercising person and W is the imposed workload. The metabolic rate of carbon dioxide production is taken to be proportional to metabolic rate of oxygen consummation as follows:(5)MRCO2t=RQMRO2t,where constant respiratory quotient is represented by RQ. We use the formula from literature in order to enter the pressures. The systemic arterial blood pressure (Pas) is estimated from measurements of systolic blood pressure (Psys) and diastolic blood pressure (Pdias ) as follows (see [15]):(6)Pas=Pdias+13Psys−Pdias.In addition, the systemic venous blood pressure is formulated as(7)Pvs=Pas−Fs×Rs,where Rs is that systemic vascular resistance is set as constant. Let VT denote tidal volume, VD be physiologic dead space volume, and f represent the number of breaths/minutes (in BPM:breaths per minute), and the alveolar ventilation is defined as(8)V˙A=fVT−VD.In numeral simulation, we consider thatf and VD are constants. Furthermore, the respiratory physiology allows to find tidal volume from the vital capacity (VC) which is given by [16](9)VC=VT+IRV+ERV,where IRV is the inspiratory reserve volume and ERV 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:(10)VCfemale=21.78−0.101ah,VCmale=27.63−0.112ah,where vital capacity is represented by VC, age by a, and height by h. VC is measured in cm3, a in years, and h in cm. 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].Table 2
Value of parameters collected from the literature (see [18]).
ParameterValueUnitDescriptionVTO26LiterEffective tissue storage volume forO2VTCO215LiterEffective tissue storage volume forCO2ρ−0.002—Constant relating imposed workload and metabolic rateRQ0.88—Respiratory quotient of the chemical reactions in the tissuesMRO2r0.350LiterSTPD/MinRest oxygen consumption rateW75WattThe imposed workloadRs14.6mmHg.min/literPeripheral resistance in the systemic circuitQ=Fs6Liter/minCardiac outputf15BPMThe number of breaths/minutesVD150mlPhysiologic dead space volumeCaO20.197LiterSTPD/literConcentration of bound and dissolved oxygen in arterial bloodTable 3
Estimated model parameters.
Estimated parameterMaleFemaleα0.05120.0621β0.25110.2341k11.00071.2147k20.10810.2018γas0.42170.4342γvs0.19030.1873γO20.29020.2687γCO20.30450.2825


## 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 Figure2).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.Figure 2
Context diagram of ICRSMM.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 Figure3.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.Figure 3
Interaction between medical users and guide user interface of cardiovascular-respiratory system.


### 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 Figure4.Figure 4
Screen layout to login ICRSMM.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 Figure5.Figure 5
Entity relationship diagram of ICRSMM


## 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 Figure2).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.Figure 2
Context diagram of ICRSMM.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 Figure3.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.Figure 3
Interaction between medical users and guide user interface of cardiovascular-respiratory system.


## 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 Figure4.Figure 4
Screen layout to login ICRSMM.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 Figure5.Figure 5
Entity relationship diagram of ICRSMM


## 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 Figure6.Figure 6
Login page in ICRSMM.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 Figure7.Figure 7
Receptionist page.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 (PaO2), arterial pressure of carbon dioxide (PaCO2), concentration of oxygen decreases in mixed venous blood (Cvo2), and concentration of carbon dioxide increases in mixed venous blood (CvCO2). Figure 8 shows the form that is used by a nurse to add these measured parameters in ICRSMM.Figure 8
Nurse page.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 Figure9.Figure 9
Admin page.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, Pas, Pvs, PaO2, PaCO2, CvO2, and CvCO2. This task is performed by clicking on the calculate button. The example for a list of three customers is shown in Figure 10.Figure 10
View of the list of patients and calculation of results by a medical doctor.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 Table4.Table 4
Measured constants to use to run ICRSMM.
ParameterValueUnitHealthy subjectAbnormal subjectHeart rate100140Beats/minSystolic pressure120190mmHgDiastolic pressure90120mmHgPaO278110mmHgPaCO23040mmHgCvO20.17950.7854LiterSTPD/literCvCO20.49301.235LiterSTPD/literThe graphs of a normal patient are shown in Figure11 while Figure 12 shows graphs for an abnormal patient.Figure 11
ICRSMM numerical test for a normal patient.
(a)(b)(c)(d)(e)(f)Figure 12
ICRSMM numerical test for an abnormal patient.
(a)(b)(c)(d)(e)(f)


## 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 Figure11(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 Figure11(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 Figures12(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.



---

*Source: 5581937-2021-05-05.xml*