Web components for Bodylight technology - to support in-browser simulators capable to execute models via standard FMI api, visualise using common chart libraries (chartjs, plotly, dygraph) and Adobe Animate components (exported as createjs components).
MIT License
Web components of the Bodylight library. For full documentation see https://bodylight.physiome.cz/Bodylight-docs/reference/. Project portal with links to samples at https://bodylight.physiome.cz/
Bodylight.js web components is a suite of custom elements enhancing HTML web documents with
Modelica
model is exported to FMU
using FMI standard and Bodylight FMU Compiler can convert FMU with source codes and solver into WebAssembly script.All bodylight web components are registered with a bdl- prefix. Components are defined in source code without the prefix, which may be used to build application internally in an Aurelia framework https://aurelia.io This repository contains wrapper code for aurelia-bodylight-plugin registering all Aurelia[2] components as standard (framework agnostic) web components [1].
This plugin is part of broader tools to enable in-browser simulation using modern web technologies: Web Assembly, HTML, Javascript (ECMAScript6).
[^1]: Web Components: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[^2]: Aurelia framework: https://aurelia.io
To build web simulator:
bdl-fmi
component, and modelDescription.xml
- standard FMU description with variable references.bdl-adobe
component.https://bodylight.physiome.cz/Bodylight-docs/tutorial/#basic.md
Use bodylight.bundle.js
from :
<script src="https://cdn.jsdelivr.net/npm/bodylight-components/dist/bodylight.bundle.js"></script>
npm i bodylight-components
bodylight.bundle.js
locally and refer it from your <script>
: <script src="bodylight.bundle.js"></script>
Add attribute aurelia-app="webcomponents"
to div
or body
where web components will be located (note that web-components are distinguished by the prefix bdl-
from other HTML elements:
index.html
...
<body aurelia-app="webcomponents">
<bdl-range id="id1" min="40" max="180" default="60" title="Heart rate"></bdl-range>
<bdl-fmi ...></bdl-fmi>
<bdl-chartjs ...></bdl-chartjs>
</body>
bdl-markdown-*
components to refer MD documents where you may use Bodylight webcomponents as well.doc/index.md
contains main content and summary.md
contains sidebar with links to other docs.index.html
...
<body aurelia-app="webcomponents">
<bdl-markdown-book index="doc/index.md" summary="doc/summary.md">
<img src="docs/loading.gif"/>
</bdl-markdown-book>
</body>
doc/index.md
# Introduction
Markdown syntax is interpretted. Syntax highlighting is enabled for source code. KATEX plugin is enabled to allow
basic equation e.g. $$e = m c^2$$
## bodylight web components
Use bodylight web components directly:
<bdl-range id="id1" min="40" max="180" default="60" title="Heart rate"></bdl-range>
<bdl-fmi ...></bdl-fmi>
<bdl-chartjs ...></bdl-chartjs>
summary.md
| EN | [CZ](#doc/index.cs.md&summary=doc/summary.cs.md) |
* [First Page](#doc/index.md)
* [Second Page](#doc/index2.md)
* [Sub page of second page](#doc/index22.md)
<script type="module" src="https://bodylight.physiome.cz/Bodylight.js-Components/bodylight.bundle.js"></script>
<div aurelia-app="webcomponents"><br>
cdn.jsdelivr.net/gh/
which is returning correct MIME Type.
<bdl-markdown
src="https://cdn.jsdelivr.net/gh/creative-connections/Bodylight-Scenarios@master/hemodynamics/index.cs.md"
base="https://cdn.jsdelivr.net/gh/creative-connections/Bodylight-Scenarios@master/">
bdl-markdown not supported
</bdl-markdown>
This allows FMI scripts and MD content to be loaded correctly.Bodylight Web Components cannot be inserted directly into Adobe Captivate, however, content created in HTML or MD and hosted in some domain can be added
using direct URL as Web Object
. You may use the showmenu=false
URL parameter, e.g.: https://bodylight.physiome.cz/Bodylight-Scenarios/#hemodynamics/hemo2.cs.md&showmenu=false
We recommend to use aurelia framework to build web application with Bodylight Web components.
Follow Aurelia doc's how to prepare your project and install aurelia-bodylight-plugin
by npm
command-line:
npm i aurelia-bodylight-plugin
In your main.js
file enable the plugin by aurelia.use.plugin(PLATFORM.moduleName('aurelia-bodylight-plugin'))
, so it may look like:
//main.js
import {PLATFORM} from 'aurelia-pal';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-bodylight-plugin'))
aurelia.start().then(() => {
aurelia.setRoot(PLATFORM.moduleName('app'));
});
}
Bodylight web components are available in any template, use them without bdl-
prefix:
<template>
<range id="id1" min="40" max="180" default="60" title="Heart rate"></range>
<fmi ...></fmi>
<chartjs ...></chartjs>
...
</template>
Download source code
git clone https://github.com/creative-connections/aurelia-bodylight-plugin.git
git clone https://github.com/creative-connections/Bodylight.js-Components.git
To develop
cd aurelia-bodylight-plugin
npm i
au build
- builds the pluginbuild-all.sh
- builds plugin and ../Bodylight.js-Components at onceTo test
bodylight.bundle.js
to /test
directorynpm run build
- this will copy bundle into /test
dir/test
folderTo publish
npm login
- logs into npmjssudo npm i np -g
- installs np
tool globallynp
- UI to publish bodylight-components
into npm as package