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 hidden (Show)

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components 1811c2a
  • UPDATE version with fixes 4decd43
  • Update README.md 4fdde49
  • Update README.md f93aa68

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.1...v2.1.3

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • version update 8ce151b
  • ADD throttle to value (default 1s) and chart (default 200ms) updates to improve performance on pages with many charts.

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.1.0...v2.1.1

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • UPDATE script 0fbb43f
  • UPDATE minor version, removed plotly 71f1418
  • UPDATE plotly test and plotly init check
  • REMOVE plotly direct dependency
  • UPDATE clean package.json
  • UPDATE minor bugs
  • UPDATE eslint and npm version
  • ADD chartjs-stacked

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.43...v2.1.0

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • FIX attribute comparison
  • FIX call oneshot simulation
  • FIX window.fmiinst is undefined
  • ADD chartjs-fixed-xy
  • ADD chartjs-fixed-xy
  • UPDATE version 2e71b9f

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.42...v2.0.43

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • UPDATE license and map file b0ba71b
  • ADD fmi oneshot mode
  • ADD chartjs with fixed curve from values

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.41...v2.0.42

Bodylight.js-Components -

Published by TomasKulhanek almost 3 years ago

  • UPDATE version fb12703
    • ADD listen to custom event to change tabs from outside

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.40...v2.0.41

Bodylight.js-Components -

Published by TomasKulhanek about 3 years ago

  • FIX #23 add senddata component
  • update version 2.0.39 91b9e4f

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.38...v2.0.39

Bodylight.js-Components -

Published by TomasKulhanek about 3 years ago

  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components a537abc
  • updated version 42b4ff2
  • update version bd0581b
  • Update README.md 93d6b7b
  • FIX #22 fire event if input is changed - might be catched by fmi component
  • FIX test - clear timeout when carousel detached, remove fetch api dependency in tests
  • UPDATE #22 remove http-client, use only fetch api
  • ADD #22 read data via remote http with timeout and fetch api
  • ADD readdata component
  • FIX #20 bdl-bind2a-play

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.37...v2.0.38

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • UPDATE version dc01bf6
  • FIX #21 add carousel, list of images to be shown in slideshow, configurable interval between slides, control buttons to show specific slide, automatic slideshow d85567f
  • UPDATE #20 fmistart starts all animation - bind animation are bind to value - not binded animation will play freely f58dcec
  • ADD #20 animswitch class 7ca9aac
  • UPDATE range - from now not only html custom element 91b0080
  • FIX range reset button to dispatch properly event 62bf350
  • FIX range reset button to dispatch properly event 57ea45b

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.36...v2.0.37

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • UPDATE creative-connections/ Bodylight-Scenarios/#53 fmi listen to 'input' event by default ff7c617
  • UPDATE creative-connections/ Bodylight-Scenarios/#53 add reset button 0fe64bc
  • UPDATE custom-data-url - default custom-data-format to pdb 58ae7bd
  • UPDATE custom-data-url - default custom-data-format to pdb d3a6d40
  • ADD custom-data-url attribute 3d25261
  • update version 2.0.36

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.35...v2.0.36

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • FIX tests a6b544e
  • ADD markdown-it-abbr extension e0556ed
  • UPDATE pdbe molstar docs lib 5326cf5
  • UPDATE tests and ADD custom fix of pdbe-molstar 7163477
  • UPDATE v 2.0.35 5651bc1

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.34...v2.0.35

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

UPDATE canvas version to test on sl 7 8f39f71
UPDATE creative-connections/Bodylight-Scenarios#55 click on navigation item opens child list if available 5a45ee8
ADD visual-style attribute for pdb component 50c9049
yolo in publish 7273e88
minor changes aa00d0d
UPDATE version adc29a3
UPDATE range and fmi component design 1bfa6ec
UPDATE range as inline block element (span), fmi to be put after butonparams or other inputs f892009
FIX creative-connections/Bodylight-Scenarios#54 parse addconst properly, if ommited set to 0. Textobj resolve from exportRoot first. 308bc46

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.33...v2.0.34

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

Bodylight.js-Components

Project stage: Development
Version
Zenodo

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

[^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, further info at aurelia-bodylight-plugin at GITHUB

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)

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

Published by TomasKulhanek over 3 years ago

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • v2.0.29 437734f
    minor 098d6b6
    update ignore list 193630f
    UPDATE test 5d0631b
    FIX footer padding with break line 4cd388e
    FIX footer bottom 60de1d3
    ADD collapsible navigation 580765f
    UPDATE adobe animate object location update a2b4391

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.28...v2.0.29

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • Merge branch 'master' of github.com:creative-connections/Bodylight.js-Components d65964e
  • UPDATE version 22c6fdd
  • Update README.md 1a685f8
  • bodylight update f9e65bd

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.27...v2.0.28

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • FIX #16 added tabs component and basic documentation
  • UPDATE bodylight v 7e91fc3

https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.26...v2.0.27

Bodylight.js-Components -

Published by TomasKulhanek over 3 years ago

  • UPDATE docs sample 84b4057
  • UPDATE compact quiz 0b86054
  • UPDATE quiz doc a50f419
  • UPDATE compact quiz f4c36ce
  • UPDATE #15 chartjs xy line color 64f4acb
  • UPDATE #15 chartjs xy point delta footer c6ead2e
  • UPDATE #15 chartjs improved tooltip, tooltip on update disappears - probably need to migrate to chartjs 3.x d5a93c3
  • UPDATE #15 show differences in tooltip chartjs-xy-points.js cff2abf
  • UPDATE #15 data from fmi contains both x1,y1,x2,y2,... for xy-points component c4f077f
  • ADD #15 component to show scattered point/points - label difference between points d2bc748
  • ADD #15 component to show scattered point/points - no remember d066129
  • min max in chartjs 2.9.4 6ce32fd
  • minor update 0e4ab53
  • FIX creative-connections/Bodylight-Editor#13 reset fmi and do big step if fixed changed during step() 1f6c356
  • ADD creative-connections/Bodylight-Editor#13 fixed param signature in attribute and reset fmi if fixed changed during step() b413388
  • UPDATE #11 allow time to be selected as variable for animation 633fac8
  • FIX #10 barplot optional normallimits 4427dff
  • UPDATE barplot should not show ticks too close to limit, change align close to limit, precision to 3 numbers fb4589e
  • UPDATE replace createjs by latest-createjs - fix module load error 61ec41a
  • FIX resolve text objects 87b6d3c
  • FIX filter objects to include _anim _text _play 7d2b32d
  • FIX clear animatebindings on updateContent ed7b68c
  • UPDATE bodylight v2.0.26 7d38949

https://github.com/creative-connections/aurelia-bodylight-plugin/compare/v2.0.25...v2.0.26
https://github.com/creative-connections/Bodylight.js-Components/compare/v2.0.25...v2.0.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