There is a newer version of the record available.

Published February 2, 2023 | Version v2.2.0
Software Open

creative-connections/Bodylight.js-Components: v2.2.0

Creators

  • 1. Charles University, First Faculty of Medicine

Description

Bodylight.js web components

Web components of the Bodylight library is a suite of custom elements enhancing HTML. It is distributed either as

  • 1. Aurelia web components - follow this instruction further, framework dependent distribution. Follow instructions further
  • 2. Standard web components - framework agnostic distibution with 1 independent JS file. Follow Bodylight.js-Components to create web simulator using HTML or Markdown or mor complex application using different framework.

Web components contains:

  • FMU component able to be execute in browser. Modelica model is exported to FMU using FMI standard and Bodylight FMU Compiler can convert FMU with source codes and solver into WebAssembly script.
  • Adobe-Animate and Gif-Animate component able to control animation exported from Adobe-Animate or animated GIF and bind them to variables of model simulation.
  • ChartJS, DygraphJS, PlotlyJS components to visualise model variables in different chart types and libraries.
  • Following Web components standard to be broadly compatible with any web application.

Usage

This plugin is part of broader tools to enable in-browser simulation using modern web technologies: Web Assembly, HTML, Javascript (ECMAScript6). In order to build web simulator: 1) You need to export Modelica model into FMU with source codes including source codes for solver (Dymola exports CVODE, OpenModelica 1.14.x exports Euler and 1.16.x is declared to support CVODE export too). 2) Then you need to convert the FMU into WebAssembly - using Bodylight FMU Compiler 3) the exported ZIP contains JS file - to be reffered from bdl-fmi component, and modelDescription.xml - standard FMU description with variable references. 4) optional - export Adobe Animate animation into CreateJS library usable by bdl-adobe component. 5) use the Bodylight components, This plugin is distributed in 2 different way: 1) as standard web components or 2) as aurelia components.

  • 1. Aurelia web components - we recommend this distribution in order to build more complex interactive application with Aurelia framework.
  • 2. Standard web components - we recommend this distribution in order to build web simulator with text, graphics and visualisation in enhanced HTML or Markdown, without need to touch Javscript or other APIs. Follow Bodylight.js-Components
    ## 1. Standard web components

1) Use bodylight.bundle.js from :

* from jsdelivr CDN:
```html
  <script src="https://cdn.jsdelivr.net/npm/bodylight-components/dist/bodylight.bundle.js"></script>
```
* OR install bundle by npm: `npm i bodylight-components`
* OR download `bodylight.bundle.js` locally and refer it from your `<script>`:
```html
    <script src="bodylight.bundle.js"></script>
```

2) Add attribute aurelia-app="webcomponents" to div or body where web components will be located (note web-components are custom elements with prefix bdl-:

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>

3) (optional) you may use any of bdl-markdown-* components to refer MD documents where you may use Bodylight webcomponents as well. E.g. 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)

2. Aurelia web components

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>

Files

creative-connections/Bodylight.js-Components-v2.2.0.zip

Files (13.5 MB)

Additional details

Related works

Is supplement to
https://github.com/creative-connections/Bodylight.js-Components/tree/v2.2.0 (URL)

This site uses cookies. Find out more on how we use cookies