There is a newer version of the record available.

Published May 28, 2021 | Version v2.0.33
Software Open

creative-connections/Bodylight.js-Components:

Authors/Creators

  • 1. Creative Connections & Charles University

Description

Bodylight.js-Components

This is wrapper for aurelia-bodylight-plugin registering all Aurelia[2] components as standard (framework agnostic) web components [1].

Web components of the Bodylight library is a suite of custom elements enhancing HTML web documents with

  • 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 and DygraphJS components to visualise model variables in different chart types.
  • Following Web components standard at [1].

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 [2]. However, web components way is framework agnostic standard way.

This plugin is part of broader tools to enable in-browser simulation using modern web technologies: Web Assembly, HTML, Javascript (ECMAScript6).

Usage

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. Standard web components - distribution recommended to build web simulator using enhanced HTML or Markdown.
  • 2. Aurelia web components - recommended for more complex web application, further info at aurelia-bodylight-plugin at GITHUB
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)
Release notes
  • updated navigation components markdown-nav, markdown-bottom: current page change is higlighted, navigation is collapsible, expands when sub page is opened
  • update adobe animate: object location based on structure array with convention '_anim', '_text', '_play' suffixes in elements name
  • updated quiz design: customizable button title 'check answers'
  • added tabs component: <bdl-tabs idlist='id1,id2' titlelist="Tab 1,Tab 2"></bdl-tabs><div id="id1">some content</div><div id="id2">othercontent</div>
  • added xy points component to show difference between dataset points: <bdl-chartjs-xy-points>
  • improved tooltip in chartjs component: shows when hover over graph
  • added min max attributes into <bdl-chartjs-time> component to stick graph only in these limits
  • allow time variable to be selected as an animation variable, update conversion attribute to allow math expression
  • add barplot component with optional normallimits
  • add pdb component to easily show structure from PDB database: <bdl-pdb-pdbe-molstar molecule-id="5jkk" rotate="false"></bdl-pdb-pdbe-molstar>
  • add checkbox component bind certain values as inputs to FMU
  • added TOC in markdown-book2 - clickable small table of content in current page rendered from headers in markdown
  • support of FMU compiled by EMSCRIPTEN > 2.19

    Files

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

    Files (7.9 MB)

    Additional details

    Related works

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