Bodylight.js 2.0 - Web components for FMU simulation, visualisation and animation in standard web browser.

Simulators used in teaching and education comprise a mathematical model and a user interface that allows the user to control model inputs and intuitively visualize the model states and results. This paper presents web components - that can be used to build an in-browser web simulator. The models used for the web simulators must be written in standard Modelica language and compiled as standard FMU (Functional mockup unit). The toolchain version Bodylight.js 2.0 contains tools to collect FMU into WebAssembly language, able to be executed directly by a web browser. Bodylight.js 2.0 web components can combine models, interactive animations, and charts into a rich web documents in HTML or Markdown syntax without any other programming or scripting. Samples show its usage in education, 2D and 3D graphics, virtual reality, and connected to the hardware.


Introduction
Web-based simulators can be distinguished by where the simulation computation is performed.The server-side simulators provide a user with an interface that controls simulation performed on a remote server, and the creation of such a simulator needs to employ client-server technologies.On the other hand, the client-side simulator's user interface and simulation computation are performed on a client's computer.This, however, comprises several issues that need to be addressed.First, a user may have different types of platforms; in the past, the central platform was Microsoft Windows-based system and therefore, many simulators were distributed as an installable applications on this platform.The locally installed application may need to be manually or semi-automatically updated or upgraded.Nevertheless, MS Windows-based systems are no longer significant platforms for computer or mobile devices.
One can address many different platforms, e.g. by virtualization using technologies such as VirtualBox, VMWare, or containerization such as Docker, etc. How-ever, web standards developed into mature versions, and the vendors of contemporary web browsers cover many platforms, including mobile phones and tablets, giving standard HTML and JavaScript capabilities.
Mathematical models in biomedical engineering can be expressed in different languages or technologies.One is the Modelica language, which covers broad industry domains; therefore, commercial and open-source tools are available.Modelica is very well suited for usage in the physiology domain and biomedical teaching, as discussed elsewhere (Kofránek, Ježek, and Mateják 2019), though, it is not yet widely used in physiology modeling community.
Direct solving of Modelica models in a web browser were demonstrated, e.g., by Franke (Franke 2014).However, accurate web-based client simulation or in-browser simulation was prototyped by Short (Short 2014) and realized in the "Modelica By Example" and "Modelica University" by Tiller and Winkler (M. M. Tiller 2014;Winkler and M. Tiller 2017).
The present paper describes the next evolutionary stage of this set of open-source tools, titled Bodylight.js-Componentsversion 2.0.
These are distributed as framework-agnostic web components (WebComponents 2021) -i.e., custom elements enhancing the syntax of HTML or Markdown.Further sections describe a brief methodology for creating a web simulator from a model source.A demo is presented with a pulsatile heart web simulator combining buttons, sliders, interactive graphics, and charts.The main aim of the methodology is to enable creative cooperation among domain experts such as computer graphics designers, model developers, educators, and programmers (Figure 1).Their expert work results can be integrated with the Bodylight toolchain.

Methods
Modelica model must be exported as FMU.We have prepared scripts to compile such output into WebAssembly using the EMScripten SDK tools.Then the resulting JS with embedded WebAssembly can be controlled using FMI API calls.We have prepared the web-component BDL-FMI that simplifies controlling and integrating it with other simulation related tasks like drawing charts, changing model parameters, reseting the simulation and visualising in 2D and 3D graphics.Next subsections describes the details of each particular step.

Model to WebAssembly
Modelica model must be exported as FMU v2.0 in cosimulation mode, including C source codes.This can be done either with an advanced CVODE solver in (Dymola 2023) (Dassault Systemes) or only with a more straightforward Euler solver in OpenModelica (Fritzson and et.al. 2019).Then the FMU with included source codes of solver can be compiled to JavaScript with embedded We-bAssembly using Bodylight.js-FMU-Compiler1 .It contains scripts and configuration to utilize the emscripten (EMScripten 2021) library.
In further text, the sample simulator uses exported model from Physiolibrary as seen in Figure 3.A simple web form facilitates compilation as seen in Figure 4.Such an artifact is encapsulated as a web component.A model created in the Modelica language is exported into FMU with source codes, following FMI 2.0 standards.Our technology then can compile the FMU with C source codes into JavaScript with embedded WebAssembly.This artifact can then be encapsulated into another web component.Bodylight.jsComponents make it easier to link the graphics web component to the model's web component and create animated graphics like a model-controlled puppet.

Web components of Bodylight.js
Compiled FMU can be controlled using FMI API standard calls.However, Bodylight.js-Components2contains a set of components to simplify interactions among lowlevel FMI API, some standard HTML elements, thirdparty charting libraries, and 2D and 3D graphical animations.
The components are distributed as custom elements using standard WebComponent API (WebComponents 2021).It was developed using mainly Aurelia (Aure-liaJS 2023) framework, however, it can be used in any contemporary web application development framework or framework-agnostic way.

Changing user input, range webcomponent
The following sample web component defines HTML slider input and essential interaction (value change is sent as a custom HTML Event).The attributes can determine minimum, maximum, default value, and step by which the slider can change its value when moved right or left (Listing 1, Figure 5).deliver a smooth user experience to match the refresh rate of the window as well as the performance of the viewing window.This call is usually paused in most browsers when running in background tabs.
Listing 2. Declaration of Bodylight FMI Component.Instantiates model of human pulsatile circulation dynamics from Physiolibrary (Mateják et al. 2014).Setup output values to be only pressure of pulmonary veins and arteries.Input is listened from an element with id1 and changed values are set as input to heartRate parameter which is multiplied by 1 and divided by 60 (converting 'per minute' to 'per second' unit expected by the model).

Interactive animation, adobe webcomponents
Adobe Animate is a multimedia authoring and computer animation program developed by Adobe Inc. Advanced visualization can be exported following as "standardized" open-source Javascript API (CreateJS 2023).By convention, an artist who creates interactive animation names all animatable elements with the suffix '_anim' and animation states between some values e.g. between 0 to 99 which visualizes the animation state.See the following listing (Listing 4).v e n t r i c l e s .v e n t r i c l e s T o t a l .V e n t r i c l e L e f t _ a n i m " amin= " 100 " amax= " 0 " f m i n = " 0 .0 0 0 1 5 " fmax= " 0 .0 0 0 2 1 " > </ b d l − b i n d 2 a > < b d l − b i n d 2 a f i n d e x = " 6 " aname= " v e n t r i c l e s .v e n t r i c l e s T o t a l .c h i l d r e n .0 .V e n t r i c l e R i g h t _ a n i m " amin= " 100 " amax= " 0 " f m i n = " 0 .0 0 0 1 2 " fmax= " 0 .The resulting application is rendered in a web browser as seen in Figure 9.
Figure 9. Web Simulator with rendered web components.The simulator can be started/restarted with buttons and the "heart rate" parameter can be changed by user interactivelly while computation of simulation is performed.Chart data is updated accordingly and animation is driven by the model variables.

Bodylight Editor
Optional tool Bodylight-Editor 3 is distributed as a static web page and allows a live preview of Markdown syntax as well as Bodylight.js-Components.Additional dialogs facilitate filling the component attribute values, e.g., selecting input/output variables from the model and binding them into the appropriate component.The file management panel simplifies managing multipage documents sharing models, images, and animation, and generates multipage web simulators with shared navigation (Figure 10).

Bodylight Virtual Machine
Bodylight.jstoolchain comprises several independent tools, some of which need non-trivial configuration.Therefore, we have created an exemplar virtual machine configuration for the Vagrant tool and virtualBox, to provision a standard minimal image of CENTOS Stream 9; scripts are published as Bodylight-VirtualMachine4 .

RESULTS
We compared the performance of model simulation translated to FMU executed natively with the implementation of the same model translated to FMU and WebAssembly and performed in a web browser on the same machine.We used Chrome browser version 97.0.4692.71with simulation times of native code on the same platform (win-64) and performed a simulation that took 6000 steps.Natively it took an average of 9.3 s, while the simulation in the web browser took 34.5 s (1, column 'WASM 1 step').Table 1.Sample model simulation performance comparison between binary execution of FMU in win-64 and FMU translated to WASM and performed 1 or 3 FMU step() during web browser frame.
This difference might be explained by overhead due to the browser screen refresh framerate.Therefore we modified the WASM code to perform 2, 3, and 4 FMU step() calls during a frame given by the browser via requestAni-mationFrame().The browser allows max 60 frames per second when used and usually maintains a maximum-of thirty frames to support the smooth running of other apps and the operating system itself.Making more than three steps within one frame gave no better value (result not shown).Therefore in the following table, we offer times in column 'WASM 3 steps'.Thus, it can be concluded that the simulator's performance in WebAssembly (when doing multiple simulation steps during one frame) is comparable with native code (i.e., 1.12x or 12% slower than native code).This result also agrees with the more comprehensive benchmarks of WebAssembly vs. native code given by (Jangda et al. 2019).
We also measured the performance of the simulation with visualisation of charts and animation.It may significantly affect performance as the visualisation can update on each simulation step.Therefore we included configurable "throttle" property in order to do visual update only by default every 100 ms.
As all computation and rendering is done in the web browser, no interaction with a server is needed.The web simulator can be distributed as a static or server-less web page, e.g., using popular GitHub pages(GithubPages 2021).It can be utilized to distribute, e.g., digital appendices of scientific papers.It was already used by (Mazumder et al. 2023) using web simulator deployed at https://filip-jezek.github.io/Ascites/ This way we published also first version of e-book "The Physiology of Iron metabolism" as seen in 11.A sample in Figure 13 shows a web simulator of blood gas exchange connected to the robotized virtual patient mannequin and controls his breathing.The following placed mockup of a medical device controls the extracorporeal membrane oxygenation (ECMO) process parameters.Such parameters are inputs to the model simulator connected via REST API, and the simulation shows direct feedback on user input and healthcare staff intervention to the patient state in graphs.
A sample in Figure 14 shows interactive 3D visualization of simplified human anatomy with charts of simulated hemodynamics.It leverages WebGL standard to visualize 3D objects and view the 3D scene.If this simulator is executed in a browser of a virtual reality device, then WebXR API is detected, and the simulator can be switched to an immersive view.This was tested on Oculus Quest 2 and MS Hololens 2.

Discussion
Client-side simulation is appropriate for use cases where one or a few simulations must be performed.This is appropriate for interactive documents like educational materials, technical reports and digital appendices.
Client-side web-based simulation might not be appropriate for system analysis tasks like Monte-Carlo simulation.
The simulation is matched per Window.requestAnimationFrame() to the browser performance and is paused when the browser tab is in the background.The optimal inner FMU steps to refresh the framerate ratio have been established for a sample model; the optimal balance would vary though, depending on system performance bottlenecks and model complexity.Automatic adjustment based on the client's performance might be possible, but is currently not included in the development roadmap.The Web Workers (WebWorkers 2021) method might be more appropriate for another type of simulation (esp.for long-term models with higher memory demand etc.).
In the past, web-based simulators depended on nonstandard, proprietary, but widely used plugins such as Adobe Flash player or Microsoft Silverlight.However, as technologies become obsolete (or even blocked), many older yet still scientifically relevant simulators cannot be executed on most modern computers or devices without excessive effort on virtualizing or emulating old operating systems and environments.We hope that using standard languages like Modelica, traditional execution models like FMI, and standard web API to build components may survive over a decade.Web simulators built from now on can be run in the future seamlessly.
Additionally, thanks to the widely accepted standards, the simulators can now be executed on various devices such as mobile phones, tablets, and virtual and augmented reality devices with no or very low code intervention.Bodylight.jslibrary brings the missing piece and tools to integrate already existing standards and technologies between web publishing and mathematical modeling in Modelica.

Figure 1 .
Figure 1.The main aim of the methodology is to enable creative cooperation among different domain experts such as computer graphics designers, model developers, educators, and programmers.

Figure 4 .
Figure 4. Bodylight FMU Compiler -web form showing process of compiling FMU to JS packed as ZIP archive

Figure 2 .
Figure 2. Presented web simulator creation technology is based on open web standards and available modeling standards.We create interactive animated graphics in Adobe Animate published with CreateJS library as JavaScript controlling an HTML canvas.Such an artifact is encapsulated as a web component.A model created in the Modelica language is exported into FMU with source codes, following FMI 2.0 standards.Our technology then can compile the FMU with C source codes into JavaScript with embedded WebAssembly.This artifact can then be encapsulated into another web component.Bodylight.jsComponents make it easier to link the graphics web component to the model's web component and create animated graphics like a model-controlled puppet.

Listing 1 .
Figure 5. Range component rendered in a web browser Charts can make basic visualization of the data obtained from simulation.Bodylight.jslibrary embeds open-source ChartJS (ChartJS 2021) library to support basic line charts using the component <bdl-chartjs-time>, see sample component listing in Listing 3. The component <bdl-chartjs> supports doughnuts, pie charts, and bar charts.Listing 3. Bodylight Chart Component taking first one (indexed from 0) value of output values and converts it using expression x 133.322 − 760 thus converting from Pa to mmHg and deducting ambient normal atmospheric pressure 760 mmHg <bdl-chartjs-time

Figure 7 .
Figure 7. Chart component rendered in a web browser.This chart contains data obtained from FMI component during simulation from time 0 -1.27s.

Listing 4 .
Bodylight Animate component and components to bind animation element with model variable < b d l − a n i m a t e − a d o b e s r c = " C a r d i a c c y c l e S t a g e .j s " name= " F a z e _ s r d c e " f r o m i d = " i d f m i " > </ b d l − a n i m a t e − a d o b e > < b d l − b i n d 2 a f i n d e x = " 1 " aname= " ValveMV_anim " amin= " 99 " amax= " 0 " f m i n = " 0 " fmax= " 1 " > </ b d l − b i n d 2 a > < b d l − b i n d 2 a f i n d e x = " 2 " aname= " ValveAOV_anim " amin= " 0 " amax= " 99 " f m i n = " 0 " fmax= " 1 " > </ b d l − b i n d 2 a > < b d l − b i n d 2 a f i n d e x = " 3 " aname= " ValveTV_anim " amin= " 99 " amax= " 0 " f m i n = " 0 " fmax= " 1 " > </ b d l − b i n d 2 a > < b d l − b i n d 2 a f i n d e x = " 4 " aname= " ValvePV_anim " amin= " 0 " amax= " 99 " f m i n = " 0 " fmax= " 1 " > </ b d l − b i n d 2 a > < b d l − b i n d 2 a f i n d e x = " 5 " aname= "

Figure 8 .
Figure 8. Animated component rendered in a web browser

Figure 10 .
Figure 10.Bodylight Editor with the sample components above and rendered preview.

Figure 11 .
Figure 11.Sample educational simulator of iron metabolism simulating gene knockout of hepcidin hormone resulting in iron overload in internal organs.It allows to enable/disable gene knockout, set a diet to affect illness and its treatment.

Figure 14 .
Figure14.Sample educational simulator in 3D using WebGL and in immersive view for virtual reality using WebXR Virtual patient with simplified anatomy and physiology of cardiac hemodynamics and charts and controls are allowed to show the effect of drug treatment interactively.

Figure 13 .
Figure 13.Web simulator connected to hardware mannequin of virtual patient and mockup of the medical device.It communicates via REST API to show breathing and mockup of medical device (extracorporeal membrane oxygenator -ECMO) controls several model parameters.User input on this hardware-in-the-loop gives direct feedback in the connected simulator and visualization of breathing.