creative-connections / bodylight-scenarios

Live in-browser Modelica models executed as FMU in WebAssembly. Scenarios (hemodynamics, ironmetabolism, ...) of patophysiology using bodylight web components - allowing rich documents (HTML, markdown) with model simulation, visualisation (chartjs, plotly, dygraph) and animation (Adobe Animate components).

Bodylight-Scenarios

Live in-browser Modelica models executed as FMU in WebAssembly. Scenarios (hemodynamics, ironmetabolism, ...) of patophysiology using bodylight web components - allowing rich documents (HTML, markdown) with model simulation, visualisation (chartjs, plotly, dygraph) and animation (Adobe Animate components).

https://bodylight.physiome.cz/Bodylight-Scenarios/

bodylight-scenarios's Issues

Upgrade atlasu - Respirace 01 a 02

• Respirace http://www.physiome.cz/atlas/respirace/01/ a http://www.physiome.cz/atlas/respirace/02/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:/KofrlabData/UpgradeAtlasu/Respirace/01 a 02

Upgrade atlasu - cirkulace 02

• http://www.physiome.cz/atlas/cirkulace/02/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek do p:\KofrlabData\UpgradeAtlasu\02 Elektrické vlastnosti myokardální buňky\ vcetne audia

Jatra - 3D objekty

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• jatra
• nafitovat na existujici kostru

vysledek do p:\KofrlabData\3DModely

Dialogy - ux

• opravit nastaveni CZ EN v dialozich
• moznost zvolit hlas
• hover nad plochami zmeni pruhlednost na 0
• posunout ap1 a ap2 plochy ke kraji
• optimalizace pro pomer rozliseni 16:9
• min, norm, max ikony pro okno informaci
• rotace mini oken

Kapitola srdce a hemodynamiky

Vytvorit kapitolu o srdci a hemodynamice vyuzivajici model a simulator

• do github wiki Hemodynamics jako vzorový text scénáře fyziologie
• prototypy animací užívající komponenty Bodylight v2.0
• upravit renderování, podpora v aplikaci virtualbody
• komponenta pro nahrani FMIJS

Konverze vybrane prezentace z altasu jako video

• jako embedded videa (mp4,gif) a hostovat na youtube nebo stream serveru lf1. U gifu mozno kontrolovat spusteni animaci pomoci https://github.com/krasimir/gifffer a synchronizovat se zvukem
• pro ozvuceni mozno vyuzit syntetizovany hlas, API https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance mozno odchytavat udalosti pri precteni vety/slova
• nebo vyuzit existujici ozvuceni mp3/wav

Consider support for MS IE11

Using MS Powerpoint with ispringConverter Pro. Adding WebObject - fails to display any bodylight scenario page as it internally use MS IE 11. Converting to HML5 and viewing in Firefox,MS Edge or Chrome, however, works.

Pristroj ECMO - vytvorit 3D objekt

Plice - 3D objekty

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• plice
• nafitovat na existujici kostru

vysledek do p:\KofrlabData\3DModely

Upgrade atlasu - Bunka

• - [ ] Bunka http://www.physiome.cz/atlas/bunka/01/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:/KofrlabData/UpgradeAtlasu/Bunka/01

Help, markdown and welcome instruction.

• Support markdown text in app
• help section
• welcome instruction

Enable BM moodle to be included in iframe

Enable BM moodle to be included in iframe.

Currently the bodylight-physiome.creativeconnections.cz (BM) returns
HTTP header X-Frame-Options: sameorigin - this cause that virtualbody embeding BM in iframe is not rendered.

Set BM it to return HTTP Header X-Frame-Options: allow-from *
See more info at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Vytvořit 2D animaci segmentů arteriálního stromu

Vytvořit 2D animaci segmentů arteriálního stromu, podle implementace modelu Avolio1980

Názvy segmentů jsou v tabulce

V tabulce a schématu jsou tyto chyby:

• segment mezi 3 a 17 není označen, má být 8
• segment 22 je dvakrát, segment po 17 má být správně 27
• segment 23 je dvakrát, segment po 30 má být správně 29
• segment po 23 má být 43 (ne 45)
• segment 35 je dvakrát, po 31 má být 43
• segment 57 dvakrát, po 37 má být správně 54

Animace by měla vizualizovat změnu objemů v segmentech
Click na jednotlivý segment by měl vrátit číslo segmentu na který se kliklo

Upgrade atlasu - cirkulace 04 - sireni vzruchu myokardem

• http://www.physiome.cz/atlas/cirkulace/04/
• vyhledat flash zdrojaky
• prevest flash podkapitol na html/js
• vysledek vcetne audia do p:\KofrlabData\UpgradeAtlasu\04

Upgrade atlasu - cirkulace 03 - zaklady EKG

• http://www.physiome.cz/atlas/cirkulace/03/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:\KofrlabData\UpgradeAtlasu\03

Create initial app for virtual patient table

• initial screen
• navigation board
• visual module - patient
• acoustic module - nurse

Grafické podklady online

• Třídění souborů

• Mazání nepoužitelných grafik

• Věci, co jsou třeba předělat nebo doplnit můžeme zadat studentům na praxích (příprava zadání)

• Testování pluginů pro Wordpress obrazky.creativeconnections.cz

• Postupně zpřístupnění grafických souborů vč. zdrojů, co jsou na kofrlab serveru, online na obrazky.creativeconnections.cz

Upgrade atlasu - koagulace hemostaza - 01

• http://www.physiome.cz/atlas/hemostaza/01/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:/KofrlabData/UpgradeAtlasu/hemostaza/01

Animace porodu pro Jirku & prof. Doležala

Animace porodu, výstup swf pro Captivate. Později kurz v Captivate?

P:\Shared\KofrlabData\Porodnictví

Kostra, kuze, zily, tepny - 3D objekty

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• kostra - p:\KofrlabData\3DModely\lymphatic_system\ nebo https://skfb.ly/6GVDu
• nafitovat kuzi na kostru
• zily, tepny
• prusvitny plan

vysledek do p:\KofrlabData\3DModely

Lebka a kostra 3D vylepsit objekty

Vylepsit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• Lebka
• Kostra

vysledek do p:\KofrlabData\3DModely

Web a video Python e-learning

Výroba video upoutávky a webu http://python.creativeconnections.cz/

Výukový materiál Fyzikální chemie v bm.physiome.cz

http://bodylight-moodle.creativeconnections.cz/enrol/index.php?id=2

Vytvořit animaci nahrávání webové aplikace.

Nahrávání webového simulátoru může trvat až několik sekund (stahuje se 9-40 MB).
Úkolem je vytvořit jednoduchou animaci - animovaný GIF, co nejmenší velikosti, který se zobrazí první na stránce a pak se čeká na nahrání zbytku.
První prototyp je animovaná laboratorní baňka:

Trávicí trakt - vytvořit 3D objekty

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• travici trakt, rozdelit na segmenty, ktere by se dali rozsvitit/zhasnout tj. usta, jicen, zaludek, tenke strevo, tluste strevo
• nafitovat na existujici kostru
• export do OBJ nebo GLTF

vysledek do p:\KofrlabData\3DModely

Rozsirit physiomemodel pro vybrane scenare a pro ext. pristroj

• reserse a vyber scenare - reserse moznych scenaru acidobaze, stavu pri krvaceni
• physiomodel upraveny pro simulace vybraneho scenare
• reserse a implementace modelu pristroje - ECMO a integrace do physiomodelu
• koncept, prototyp simulatoru v Bodylightu implementujiciho vybrany scenar a majici physiomodel

Srdce - vytvorit 3D objekt

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• srdce, mozno segmenty schematicky komory a sine zevnitr tak aby se dal vypnout zapnout
• nafitovat na existujici kostru
• export do OBJ nebo GLTF

vysledek do p:\KofrlabData\3DModely

Simulátor cirkulace bez hemodynamiky a s hemodynamikou v bodylight 2.0

Anglická verze z Bodylight Composeru se může nechat: http://www.physiome.cz/en/simple-circulation/
Vytvořit českou verzi (v Bodylight Editoru)

Editor for educational text - scenarios

• sample text and simulator
• editor workflow
• static,default in WIKI of Bodylight-Scenarios
• dynamic/local changes in local copy of wiki git -can be commited to github repo
• add settings item for url to scenarios documents WIKI/MD with scenarios,, default url for scenarios pointing to github WIKI pages
• render correct baseurl for md/wiki links
• parse target from #/scenario/[targetwikimd]

Ledviny a vylucovaci soustava - vytvorit 3D objekty

Vytvorit 3D objekty pro virtualniho pacienta, ktere by se mohli zapinat,vypinat, zpruhlednit, rozsvitit.

• Ledviny a vylucovaci soustava (mocovy mechyr, mocovody)
• nafitovat na existujici kostru

vysledek do p:\KofrlabData\3DModely

deploy gh-pages serverless Bodylight-Scenario

Kapitola prenosu krevnich plynu

• model, v nove Physiolibrary
• text,scénář v Bodylight-Editoru
• animace - Adobe Animate 2.0.21
• repozitář
• bod+křivka o2 pro arterialni a venozni krev

Vzorová aplikace propojujici HW senzor se simulátorem nebo s řídícím SW

• HW senzor, potenciometr @MartinFeber
• spojení do ControlWebu, převod signálu z HW na události, může posílat nebo vytvoří jednoduché REST api s hodnotou senzoru
• spojení z Controlwebu do simulátoru (webový Bodylight.js) - aktivní sledování nebo pasivní push při změně hodnoty senyoru se projeví v slideru

UX virtualbody app

• navigation arrows
• git https://github.com/creative-connections/Bodylight-Scenarios/
• branch
• adresar virtualbody/src/pages
• scrollbar to apps
• rotate button absolute position
• apps square on default resolution
• update english welcome/help text
• 5% up the screen
• pixel ratio settings to improve resolution on Android

Upgrade atlasu - vnitrni prostredi - zelezo

• http://www.physiome.cz/atlas/vnitrniProstredi/04/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:/KofrlabData/UpgradeAtlasu/VnitrniProstredi/04

Update Mouse/Gesture and programmable control

• left click rotate
• right click move
• api to zoom and center to desired object
• settings initialization don't show voices

Zjednodusit komponentu pro three.js v examples

Vytvořit animovanou komponentu SVG pružiny a závaží.

Vytvořit animovanou komponentu SVG pružiny a závaží.
SVG řízená proměnnou z modelu

vzorova aplikace kolem 3D, router prepina postranni panel

Upgrade atlasu - sync zvuk a animace

• odpovidajici a controlka pod/nad canvasem
• pri nahrani enablovat audio control
• play = start animace
• stop = pause animace
  Demo aplikace p:\KofrlabData\UpgradeAtlasu\PrototypSYNCAUDIOCirkulace
  pridan element a playan() pausean() a zmenena handleComplete()

Update loader and gestures for 3d objects

• public url - pcloud
• local cache
• fix i18n bundle - include locales not copy
• load multiple objects into scene

Animace průtoku vody pro Janka

P:\Shared\KofrlabData_JANEK\Trubky_voda

LMS moodle integrace s oauth nebo shibolleth

Autentikace, registrace uzivatele pomoci uctu

• google, github
• eduid (CESNET)

Include app and toggle control in virtual patient table

• add control area to virtual body, able to toggle apps
• mini screens with apps
• simulator of heart - iframe toggled by are control
• support speech report of each app
• support czech language text to speech
• simulator of nefron

3D visualisation of human body - replace current mockup

• webGL sample
• three.js sample
• import some free 3D anatomy model/shapes into three.js
• integrate 3d anatomy model into scenario UI

Konverze vybrane prezentace z atlasu fyziologie a patofyziologie do HTML5 canvasu a javascriptu.

Pro ucely porovnani vice moznosti a rozhodnuti o dalsim postupu

• konverze z adobe flash jako nekolik animovanych slidu, ktere se v prubehu prehravani meni/prepinaji, audio mozno samostatne pres a synchronizovat spusteni a pausu (asi nova tlacitka)

Požadavky pro editor scénářů a kapitol

Požadavky pro editor scénářů a kapitol https://github.com/creative-connections/Bodylight-Scenarios/wiki

• možnost editace a preview v githubu
• renderování markdown (MD) syntaxe do applikace virtuálního pacienta
• renderování externích obrázků (absolute URL)
• simulátory jako webcomponents a custom elements v MD
• renderování obrázků - přidaných do WIKI (relative URL) - added baseImgUrl to marked
• navigace mezi kapitolami
• zvážit jiné formáty (creole wiki)
• zvážit jiné zdroje (wikiskripta, moodle)
• u simulátoru z Bodylight-Composeru mít přepínač, který přepne-vyvolá okno s bodylight composerem
• snadnější přidání obrázku. Nyní se musí pro relativeURL 1. git clone https://github.com/creative-connections/Bodylight-Scenarios.wiki.git 2. add image to images folder 3. git add images/newimage.png 4. git commit -m 'image' 5. git pull nebo dát externě a mít absolute URL

Zvazit registraci creative connections jako oficialniho partnera Moodle

@feberova
Zvazit registraci creative connections jako oficialniho partnera Moodle. Seznam partneru
https://moodle.com/partners/?keywords=&service=%20Moodle

Zatim ne. Mozna po ukonceni projektu

Upgrade atlasu - Ledviny

• Ledviny http://www.physiome.cz/atlas/ledviny/01/
• vyhledat flash zdrojaky
• prevest fla podkapitol na html/js
• vysledek vcetne audia do p:/KofrlabData/UpgradeAtlasu/Ledviny/01

Kapitola Metabolismus železa v Bodylight 2.0

• Duodenum dle Scenar duodenum
• Jatra dle Scenar jatra
• Obrazek anatomicko histologickeho kontextu - viz navrh Scenar duodenum
• Kapitola 1. revize propojení anim a modelu MetabolismusZeleza
• skrývací legenda pro simulátor
• pdbe - width 100%, height 300px by default
• snizit framerate v komponente - 1-60 FPS
• pri opusteni obrazovky zastavit komponentu fmi
• defaultne vypnute mereni fps
• fix github sync js, xml
• relativní hodnoty v animaci
• pri editaci konflikt ruznych animaci v insertScriptById()
• checkbox nastavi chybnou hodnotu real - spravne ma nastavit 0 nebo 1
• tri platne cislice - nezobrazovat exponent
• chybi nektere animacni prvky - pripona anim_1
• aktualizovat legendy v dalsich obrazovkach, kapitola 1. OK kapitola 2, 3, 4 pridat nove ikony schemata
• v editoru v seznamu souboru seskupit soubory s textem (MD), obrazky (PNG,JPG,GIF), animace (JS), model (JS), ted je to velky neporadek
• editor, pridany nejnovejsi soubor (napr text) a po restartu prohlizece ten posledni soubor chybi v seznamu souboru
• propojit nove prvky animace kapitoly 4.2 s hodnotami promennych simulaci modelu