Bodylight.js 2.0 - Web components for FMU simulation, visualisation and animation in standard web browser. Tomáš Kulhánek 1,2 Arnošt Mládek 1,2 Filip Ježek 2,3 Jiˇrí Kofránek 1,2 1 Creative Connections s.r.o., Prague, Czechia 2 Institute of Pathological Physiology, Charles University, Prague, Czechia {tomas.kulhanek, arnost.mladek, jiri.kofranek}@lf1.cuni.cz 3 University of Michigan, Ann Arbor, USA fjezek@umich.edu Abstract 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 compo- nents - that can be used to build an in-browser web sim- ulator. 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 com- bine models, interactive animations, and charts into a rich web documents in HTML or Markdown syntax without any other programming or scripting. Samples show its us- age in education, 2D and 3D graphics, virtual reality, and connected to the hardware. Keywords: Modelica, JavaScript, WebAssembly, in- browser simulator, client-side simulator, e-learning, web components 1 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 tech- nologies. 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 plat- form was Microsoft Windows-based system and therefore, many simulators were distributed as an installable appli- cations 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 do- mains; 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). How- ever, accurate web-based client simulation or in-browser simulation was prototyped by Short (Short 2014) and re- alized in the "Modelica By Example" and "Modelica Uni- versity" by Tiller and Winkler (M. M. Tiller 2014; Winkler and M. Tiller 2017). This inspired our team to create an in-browser simula- tor. We already published a technology called Bodylight.js (Šilar, Ježek, et al. 2019) and sample web simulators, e.g., kidney functioning model (Šilar, Polák, et al. 2019). The present paper describes the next evolutionary stage of this set of open-source tools, titled Bodylight.js- Components version 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 graph- ics, and charts. The main aim of the methodology is to enable creative cooperation among domain experts such as computer graphics designers, model developers, edu- cators, and programmers (Figure 1). Their expert work results can be integrated with the Bodylight toolchain. 2 Methods Modelica model must be exported as FMU. We have pre- pared scripts to compile such output into WebAssembly using the EMScripten SDK tools. Then the resulting JS with embedded WebAssembly can be controlled using DOI 10.3384/ecp204443 Proceedings of the Modelica Conference 2023 October 9-11, 2023, Aachen, Germany 443