Bodylight.js-Components

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

Downloads
469
Stars
7
Committers
3

Bot releases are visible (Hide)

Bodylight.js-Components - Latest Release

Published by TomasKulhanek 7 months ago

  • UPDATE version fb465b7
  • UPDATE version d74ed09
  • FIX bind2a do not unbind, moved to global markdown component when new document is loaded f2fb2cd
  • FIX possible bug when changing pages, not completely detached, not removed bindings 8fbff78
  • ADD uuid generation when crypto is not supported on older browser, UPDATE quiz control back forward switch tabs e783827

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.3.3...v2.3.4

Bodylight.js-Components -

Published by TomasKulhanek 7 months ago

  • UPDATE version ddccb73
  • UPDATE quiz to show results from firebase 'answers' fce067d
  • UPDATE quiz present and summary and aggregate counting dc89cb0
  • ADD png2svg script 234fd12

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.3.2...v2.3.3

Bodylight.js-Components -

Published by TomasKulhanek 8 months ago

  • UPDATE version a6bf445
  • UPDATE version 9465fb2
  • UPDATE dygraph sa nomogram, quizcontrol to show numbers, 66eadaf
  • ADD calculator, update markdown book to read hash when attached, fix quiz-summary 7e75f16
  • UPDATE quiz, ADD chartjs option to disable xticks 0f81780
  • UPDATE control and summary forward, back buttons 7e26fa7
  • UPDATE and fix get-state 07ffe4b
  • ADD firebase config and get/set state impl b6bf4c4
  • ADD firebase config and get set messaage communication via multiple webapp instances 6e07157

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.9...v2.3.2

Bodylight.js-Components -

Published by TomasKulhanek 11 months ago

  • UPDATE chartjs time to show reference point on xdata event 5095197
  • UPDATE remote-value to do 5 attemps of GET before fail, put error message in DOM to show it e5d4b26
  • UPDATE without nav only a button is shown 891de9e
  • UPDATE version 45fbcde
  • UPDATE version e07322f
  • ADD smultiple script support for co-simulation 62cff26

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.8...v2.2.9

Bodylight.js-Components -

Published by TomasKulhanek about 1 year ago

  • UPDATE version ae067d2
  • ADD co-simulation support, multiple fmu control e16f345

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.7...v2.2.8

Bodylight.js-Components -

Published by TomasKulhanek about 1 year ago

  • UPDATE bundle depencency 7827363
  • UPDATE quiz type match with question 4c7881c

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.6...v2.2.7

Bodylight.js-Components -

Published by TomasKulhanek about 1 year ago

  • UPDATE version 3817d99
  • UPDATE dialog to inline span as popup 0388e70
  • UPDATE abbr ext with dialog click open/close 84ee72b
  • ADD abbr extension to include content and url 9002a27
  • UDPATE chart - sync via shared remote value d44a174
  • UPDATE carousel and animate 33393b1

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.5...v2.2.6

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

Bodylight.js-Components

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

  • 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.

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

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

Live demo and tutorial

https://bodylight.physiome.cz/Bodylight-docs/tutorial/#basic.md

1. Standard web components

  1. Use bodylight.bundle.js from :

    • from jsdelivr CDN:
      <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>:
        <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>
  1. (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)

Bodylight webcomponents in Moodle

  1. edit moodle page in HTML - use HTML source, click and then siwtch code - click
  2. add the bodylight script
    <script type="module" src="https://bodylight.physiome.cz/Bodylight.js-Components/bodylight.bundle.js"></script>
    <div aurelia-app="webcomponents"><br>
    
  3. add bodylight component, note that markdown component needs base to be specified
    so relative links are rendered correctly inside Moodle.
    For resources in github repo use 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 webcomponents in Adobe Captivate

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

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>

Developer's Guide

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

  • components sources at
  • cd aurelia-bodylight-plugin
  • npm i
  • au build - builds the plugin
  • build-all.sh - builds plugin and ../Bodylight.js-Components at once

To test

  • Either manually copy bodylight.bundle.js to /test directory
  • OR npm run build - this will copy bundle into /test dir
  • THEN serve http from /test folder

To publish

  • npm login - logs into npmjs
  • sudo npm i np -g - installs np tool globally
  • np - UI to publish bodylight-components into npm as package

release notes

  • Update adboe timeout to 1s and pdb component and quiz 041f916
  • UPDATE sticky position 9ca7466
  • UPDATE animation time delay initialization to 3s f175b34
  • UPDATE quiz control title next to arrow 0310050
  • UPDATE bundle 61c1df6
  • ADD quiz-control and quiz update 9a1d4af
  • UPDATE quiz design, build target for babel 326f942
  • ADD quiz type match b44118c
  • UPDATE repo d218945

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.3...v2.2.4

  • ADD range to manipulate single animate obj 2500c9c
  • UPDATE manually publish new version with npm dbdc637

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.4...v2.2.5

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

Bodylight.js-Components

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

  • 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.

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

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

Live demo and tutorial

https://bodylight.physiome.cz/Bodylight-docs/tutorial/#basic.md

1. Standard web components

  1. Use bodylight.bundle.js from :

    • from jsdelivr CDN:
      <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>:
        <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>
  1. (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)

Bodylight webcomponents in Moodle

  1. edit moodle page in HTML - use HTML source, click and then siwtch code - click
  2. add the bodylight script
    <script type="module" src="https://bodylight.physiome.cz/Bodylight.js-Components/bodylight.bundle.js"></script>
    <div aurelia-app="webcomponents"><br>
    
  3. add bodylight component, note that markdown component needs base to be specified
    so relative links are rendered correctly inside Moodle.
    For resources in github repo use 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 webcomponents in Adobe Captivate

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

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>

Developer's Guide

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

  • components sources at
  • cd aurelia-bodylight-plugin
  • npm i
  • au build - builds the plugin
  • build-all.sh - builds plugin and ../Bodylight.js-Components at once

To test

  • Either manually copy bodylight.bundle.js to /test directory
  • OR npm run build - this will copy bundle into /test dir
  • THEN serve http from /test folder

To publish

  • npm login - logs into npmjs
  • sudo npm i np -g - installs np tool globally
  • np - UI to publish bodylight-components into npm as package

release notes

  • Update adboe timeout to 1s and pdb component and quiz 041f916
  • UPDATE sticky position 9ca7466
  • UPDATE animation time delay initialization to 3s f175b34
  • UPDATE quiz control title next to arrow 0310050
  • UPDATE bundle 61c1df6
  • ADD quiz-control and quiz update 9a1d4af
  • UPDATE quiz design, build target for babel 326f942
  • ADD quiz type match b44118c
  • UPDATE repo d218945

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.3...v2.2.4

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

  • UPDATE no tests ef5646b
  • UPDATE publish / no tests e7e7683
  • UPDATE index 8708477
  • UPDATE repo - merged to Bodylight.js-Components 9a59ca3
  • Merge pull request #29 from creative-connections/dependabot/npm_and_yarn/src_aurelia-bodylight-plugin/decode-uri-component-0.2.2 c2ee133
  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components 737cfad
  • UPDATE dependencies 34f2994
  • Bump decode-uri-component in /src_aurelia-bodylight-plugin 9735547
  • Merge pull request #30 from creative-connections/dependabot/npm_and_yarn/src_aurelia-bodylight-plugin/json5-2.2.3 b8d9957
  • Bump json5 from 2.2.1 to 2.2.3 in /src_aurelia-bodylight-plugin 189e8c5
  • Merge pull request #31 from creative-connections/dependabot/npm_and_yarn/src_aurelia-bodylight-plugin/jsdom-and-aurelia-pal-nodejs-19.0.0 c2c73d5
  • Merge pull request #32 from creative-connections/dependabot/npm_and_yarn/dns-packet-5.4.0 682689d
  • MERGE package-lock 0c3675d
  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components ffb3057
  • UPDATE npm packages audit fix c631f42
  • Merge pull request #25 from creative-connections/dependabot/npm_and_yarn/json5-1.0.2 c2b5394
  • Merge pull request #24 from creative-connections/dependabot/npm_and_yarn/decode-uri-component-0.2.2 3f7470a
  • Merge pull request #23 from creative-connections/dependabot/npm_and_yarn/loader-utils-1.4.2 2288559
  • Merge pull request #20 from creative-connections/dependabot/npm_and_yarn/ejs-and-webpack-bundle-analyzer--removed 5643007
  • Bump dns-packet from 5.3.1 to 5.4.0 f213db3
  • Bump jsdom and aurelia-pal-nodejs in /src_aurelia-bodylight-plugin 8ceee09
  • Bump ejs and webpack-bundle-analyzer 370c692
  • Bump json5 from 1.0.1 to 1.0.2 eb88077
  • Bump decode-uri-component from 0.2.0 to 0.2.2 d9ac851
  • Bump loader-utils from 1.4.0 to 1.4.2 d73d78b

https://github.com/creative-connections/Bodylight.js-Component/compare/v2.2.1...v2.2.2

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

  • UPDATE au plugin version 22beffd
  • ADD np cong 5957bdc
  • ADD i18n support in MD, remove TOC 8bc0c73
  • UPDATE sa chart da8d6bf
  • UPDATE build and charts, remove value d6a2b30
  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components 65d2dc8
  • REMOVE bad build commit 879fae7
  • Update README.md f9bf711
  • Update README.md 8ddda66
  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components 2a1614a
  • ADD source code of aurelia-bodylight-plugin 6150a0b
  • ADD codacy and codeclimate badges aa57126

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.2.0...v2.2.1

Bodylight.js-Components -

Published by TomasKulhanek over 1 year ago

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:
      <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>:
        <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>
  1. (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>
Bodylight.js-Components -

Published by TomasKulhanek almost 2 years ago

Bodylight.js-Components -

Published by TomasKulhanek almost 2 years ago

Bodylight.js-Components -

Published by TomasKulhanek almost 2 years ago

Bodylight.js-Components -

Published by TomasKulhanek almost 2 years ago

  • backup markdown test
  • UPDATE panels in webcomponents
  • UPDATE remove w3css dependency - already in other components
  • ADD panels, update animate controls quiz and range
  • UPDATE colors in w3css
  • UPDATE tests
  • UPDATE test and packages
  • UPDATE link to travis-ci builds
  • UPDATE version 2.1.29 bf54695

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.28...v2.1.29

Bodylight.js-Components -

Published by TomasKulhanek about 2 years ago

  • FIX bug - forget input after it is set in continuous mode b4be401

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.27...v2.1.28

Bodylight.js-Components -

Published by TomasKulhanek about 2 years ago

  • UPDATE error handling when post/get fails no other request until valid get goes through 81f8f67

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.26...v2.1.27

Bodylight.js-Components -

Published by TomasKulhanek about 2 years ago

  • UPDATE Bodylight-Editor/issues#39 segments to dro in oneshot mode: acbfb78

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.25...v2.1.26

Package Rankings
Top 9.03% on Npmjs.org
Badges
Extracted from project README
stability-beta Version Zenodo Published on webcomponents.org Maintainability Codacy Badge
Related Projects