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

University of Rwanda, College of Science and Technology, School of Information and Communications Technology, Department of Computer Science, Kigali, Rwanda University of Rwanda, College of Science and Technology, School of Science, Department of Mathematics, Kigali, Rwanda University of Rwanda, College of Science and Technology, School of Information and Communications Technology, Department of Information Technology, Kigali, Rwanda


Introduction
e 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). ere are specific languages and metaphors to each target system [2]. erefore, 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. e 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. e 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]. e 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]. is needs the advanced GUI programming, and the task is not sometimes easy [7]. erefore, the design of GUIs is not performed by everyone, and their development is expensive. is 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][9][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. e objective of this paper is to design a web interface for cardiovascular-respiratory system mathematical model (ICRSMM). e 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].
is paper consists of six sections. Section 2 presents the overview of the mathematical model of cardiovascularrespiratory system. Section 3 focuses on ICRSMM layout.
is 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.

Mathematical Model Equations
e mathematical model developed in [11] has been described in this Section 2. is 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.
e estimation of parameters is done using the data collected in Rwanda. e 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.
e constants c as , c vs , c O 2 , c CO 2 , α, and β and the logistic functions f 1 and f 2 of the mathematical model equations (1) should be identified. e logistic functions f 1 and f 2 are defined as follows: where k 1 denotes the maximum growth of alveolar ventilation and k 2 is the maximum growth of heart rate, whereas C 1 and C 2 stand for the maximum sustainable (carrying capacity) of alveolar ventilation and heart rate, respectively.
e values of f 1 ( _ V A ) and f 2 (H) at the beginning of evolutionary process are f 1,0 and f 2,0 .
In the following equation, where MR r O 2 is the metabolic oxygen consumption rate at rest and MR ex O 2 is the metabolic oxygen consumption rate during exercise. e above equation shows the needed energy supplied anaerobically for short time and metabolic oxygen consumption. e 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. e 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 W is the imposed workload. e 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 RQ.
We use the formula from literature in order to enter the pressures. e systemic arterial blood pressure (P as ) is estimated from measurements of systolic blood pressure (P sys ) and diastolic blood pressure (P dias ) as follows (see [15]): In addition, the systemic venous blood pressure is formulated as where R s 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 In numeral simulation, we consider that f and VD are constants. Furthermore, the respiratory physiology allows to find tidal volume from the vital capacity (VC) which is given by [16] VC � VT + IRV + ERV, (9) where IRV is the inspiratory reserve volume and ERV denotes the expiratory reserve volume. ese last parameters are taken from the literature. It is known that vital capacity depends on age, height, and sex [17]. erefore, the following formulas present this relationship: where vital capacity is represented by VC, age by a, and height by h. VC is measured in cm 3 , 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].

Design and Layout
We focus on the possibilities of arranging layout elements on the screen where the data are cut up and displayed in onepage stage. To manage the layout of the display area, two main and complementary strategies are used [19]: highdensity layout and limited information layout. e 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.

Context and Data-Flow Diagrams.
e 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. is is shown by the context diagram which is sometimes called level 0 data-flow diagram (see Figure 2). e 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. e 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. e 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. erefore, 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. e 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 cardiovascularrespiratory 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. erefore, 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. e 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). e 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.

Front-End Side and Back-End Side.
e 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. is 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. e first layout to login ICRSMM design of the cardiovascular-respiratory system based on desktop metaphor is depicted in Figure 4. e 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. is 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. e 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.

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

System Implementation
e login page facilitates a registered user to enter username and password in order to be authenticated. e screenshot is shown in Figure 6. Applied Computational Intelligence and Soft Computing e receptionist should welcome any customer by asking him/her to add his/her first name and surname to a database. e receptionist is also able to view the list of existing customers. e designed form of ICRSMM is shown in Figure 7.
To run ICRSMM, the measured parameters need to be entered in the database. is 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 (P aO 2 ), arterial pressure of carbon dioxide (P aCO 2 ), concentration of oxygen decreases in mixed venous blood (C vo 2 ), and concentration of carbon dioxide increases in mixed venous blood (C vCO 2 ). Figure 8 shows the form that is used by a nurse to add these measured parameters in ICRSMM.
e 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 cardiovascularrespiratory system parameters, that is, P as , P vs , P aO 2 , P aCO 2 ,   Applied Computational Intelligence and Soft Computing  Applied Computational Intelligence and Soft Computing 7 C vO 2 , and C vCO 2 . is task is performed by clicking on the calculate button. e 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. e used data are presented in Table 4. e graphs of a normal patient are shown in Figure 11 while Figure 12 shows graphs for an abnormal patient.

Discussion of Results
e results of numerical tests are in accordance with empirical reports from medical literature. e 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. e 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]. is 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     Figure 12: ICRSMM numerical test for an abnormal patient.
Applied Computational Intelligence and Soft Computing pump [22]. erefore, 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). is 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. erefore, 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].
e 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)). e 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.

Concluding Remarks
In this paper, the authors focus on web-based graphical user interface design for the mathematical model of cardiovascular-respiratory system. e 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. e 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. erefore, 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
e data used in this study are given in the manuscript.

Conflicts of Interest
e authors declare that there are no conflicts of interest.