OrgPad logo

Modelica 2023 - Bodylight.js presentation

Created by Tomas Kulhanek

Modelica 2023 - Bodylight.js presentation

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

image

acknowledgment:

Rene Just Nielsen, Matthis Thorade

Ministry of Industry and Trade Czech Republic

image

team current and past

image

What language/technology do you use for modeling in computational biology and medicine?

image

equations

20230913 142115crop

Elena Zappon Efficient Reduced Order Modeling for Coupled Problems in Cardiac Electrophysiology, CompBioMed2023, 13th September 2023

Model

block schema

image

A C Guyton, T G Coleman, H J Granger, Circulation: overall regulation, Annu Rev Physiol.1972;34:13-46.doi: 10.1146/annurev.ph.34.030172.000305.

model code - Fortran

Correction after reimplementation in 2010

image

J.Kofránek, et al., Restoration of Guyton‘s Diagram for Regulation of the Circulation ...Physiol Res. 2010;59(6):897-908.doi: 10.33549/physiolres.931838.

model reimplementation code Matlab Simulink

component diagram

20230913 132057crop

Magdalena Otta et al. A 0D model of lower limb haemodynamics: sensitivity analysis, CompBioMed2023, 13th September 2023

explanatory model

to explain:

who is the audience?

model of glucose insulin regulation - equations

image

image

image

model of glucose insulin regulation - block schema

image

model of glucose insulin regulation - acausal and component modeling (compartment modeling)

image

components

image

image

image

image

Tomas Kulhanek, Jiri Kofranek. Experience with Teaching Different Modeling Techniques on the example of Glucose Insulin Regulation Model, 

Annu Int Conf IEEE Eng Med Biol Soc. 2020 Jul;2020:6024-6027. doi: 10.1109/EMBC44109.2020.9176535

model of circulation and its regulation

Guyton's original scheme

image

implementation in component and acausal modeling language

image

Frank-Starling law

Frank-Starling law is  much more visible in component model - "force of the heart muscle depends on pressure of incoming blood". 

Physiolibrary

https://physiolibrary.org

Marek Mateják, Tomáš Kulhánek, Jan Šilar, Pavol Privitzer, Filip Ježek, Jiří Kofránek: Physiolibrary - Modelica library for Physiology, In Conference Proceeding, 10th International Modelica Conference, March 12, 2014, Lund, Sweden, (DOI:10.3384/ECP14096499)

Physiomodel

firefox SHzAoizS4q

https://physiomodel.org

>60 000 equations

Mateják, M., Kofránek, J. (2015), Physiomodel – An Integrative Physiology in Modelica, Proceedings of 37th AnnualInternational Conference of the IEEE Engineering in Medicine and Biology Society, IEEE, Milano (It), pp. 1464-1467, ISSN: 1557- 170X.

who is the audience?

missing pieces for reusable components

image

1. export model to FMU with C source code

image

2.compile to WebAssembly

image

Configuration and scripts to facilitate compilation with emscripten

emcc … -O3 –closure 0 …

https://github.com/creative-connections/Bodylight.js-FMU-Compiler

explanatory simulator

Simulator

bodylight.js

  1.  scripts to translate model from FMU (co-simulation mode with C source code) to WebAssembly
  2. webcomponents - javascript library  with reusable and configurable custom elements
    1. for model simulation 
    2.  for animation
    3. for other visualisation/communication etc.
  3. optional tools (composer, editor) to simplify creating and deploying web simulators

3. download JS with WebAssembly and use it in <bdl-fmi> web component

image

webcomponents - HTML elements

POWERPNT e4sDsmlrVX

webcomponents - custom elements

image

range

image

firefox I8uGRV2pqg

webcomponents - custom elements animation

image

firefox jMeSh19NxA

HTML + webcompontens = in-browser simulator

M.Tiller - Modelica by Example

TOTALCMD64 i8iV2xkSkg

J.Šilar et al. - Kidney Simulator

firefox 414QS3QJAA

webcomponents - implementation and registration

image

image

in-browser simulator - INDEX.HTML

1. download or refer bodylight.bundle.js

2.include web components in HTML source:

<body aurelia-app="webcomponents">

...

image

simulator1

we can put HTML/CSS styling

image

simulator2

supported FMI export

performance - WASM 12% slower than native code

image

image

 
WASM1 ~ requestAnimationFrame( () -> {
...
fmiDoStep();
...
})
WASM3 ~ requestAnimationFrame( () -> {
...
fmiDoStep();
fmiDoStep();
fmiDoStep();
...
})

hemodynamics

simulator of circulation

simulator of glucose/insulin

firefox C1zReN0kIX

co-simulation of multiple models

image

blood-gas exchange

Dymola qmDZxxtrfj

respiration

Dymola sdXGmJf24o

hemodynamics of cardiovascular system

Dymola 9CIA5zGnUy

static HTML pages - GITHUB pages

digital appendix of scientific paper

firefox fjKgpq2PYp

simulators in digital textbook - https://egolem.online

desktop

native mobile apps

imagePOWERPNT Mjc6Qcjhym

firefox icx2MQ5dWd

firefox Z6IuwQAnlM

image

give life to VR/AR

vr

image

image

image

control HW mannequin

hwmanequin

simulator of cardiorespiratory treated with ECMO

POWERPNT 4kJE4xB8Wg

REST API

Supporting tools

Bodylight.js-FMU-Compiler

image

Configuration and scripts to facilitate compilation with emscripten

emcc … -O3 –closure 0 …

https://github.com/creative-connections/Bodylight.js-FMU-Compiler

Bodylight Editor

firefox DCYRyuhlNq

Bodylight VirtualMachine

image

summary

Bodylight.js - free open-source library to enable in-browser simulation

with reusable and configurable webcomponents

no plugin, no server, no addons

image

bodylight.physiome.cz

source codes at GITHUB

image 

image

image

+

or

+

+

image

Physiolibrary

https://physiolibrary.org