NAMIC Wiki - User contributions [en]

2017 Winter Project Week/AMI: A 3D Medical Imaging Javascript Library

2017-01-13T16:10:26Z

Rpienaar: updates

__NOTOC__
<gallery>
Image:PW-Winter2017.png|link=2017_Winter_Project_Week#Projects|[[2017_Winter_Project_Week#Projects|Projects List]]

</gallery>

==Key Investigators==
* Rudolph Pienaar, Boston Children's Hospital
* Jorge Luis Bernal Rusiel, Boston Children's Hospital
* Nicolas Rannou, Eunate Technology S.L.
* Teodora Szasz, University of Chicago

==Project Description==
Many tools and libraries exist to build powerful '''web medical visualizers''' but the learning curve can be steep for new comers.
This project aims to provide simple interfaces for AMI [1].

==== Simple JS interface ====
A simple Javascript XTK-like [2] API. The key to the XTK success was its simple interface that lets people just dive in without worrying about the details.

==== Web components ====
A collection of modular web components [3] (via Polymer [4]) that people can cherry pick to easily build their own web medical visualizer.

''Why Polymer? (and not React [5] or Angular [6])''

Because Polymer is meant to '''disappear'''!

Polymer adds very little 'sugar' on top of the web '''standards'''. It mostly adds support for some features that are not available '''yet''' on some platforms. Once all browser vendors implement the standards, the Polymer library that aims to poly-fill all the gaps will disappear. Accessibility is also very important: one can use web components in its app no matter which framework is used. Using React/Angular-based elements from another framework is not necessarily possible. Low maintenance cost (not tied to a specific version of a specific library). Beautiful ecosystem for development, testing and distribution.

- and it is a Google backed project!

{| class="wikitable"
! style="text-align: left; width:27%" | Objective
! style="text-align: left; width:27%" | Approach and Plan
! style="text-align: left; width:27%" | Progress and Next Steps
|- style="vertical-align:top;"
|

* Design/Implement XTK like API for AMI
* Define/Design/Implement AMI-based web components for medical imaging
* Implement Lesson 10 and 14 from XTK with new JS API
* Build Slicer/Slicedrop/Cornerstone like viewer leveraging web components
|

* Write helpers functions in AMI to hide low-level JS implementation details
* Mockup basic quad-view to define most web components
* Implement web components
|

* [http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/10/#run XTK lesson 10]
* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson10/xtk_lesson10.js Orig AMI lesson 10]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson10/xtk_lesson10.js New AMI lesson 10]
* [http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/13/#run XTK lesson 13]
* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson13/xtk_lesson13.js Orig AMI lesson 13]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson13/xtk_lesson13.js New AMI lesson 13]
|}

==Background and References==
[1] [https://github.com/FNNDSC/ami AMI]

[2] [https://github.com/xtk/X XTK]

[3] [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web-Components]

[4] [https://www.polymer-project.org Polymer]

[5] [https://facebook.github.io/react/ React]

[6] [https://angular.io/ Angular]

2017 Winter Project Week/AMI: A 3D Medical Imaging Javascript Library

2017-01-13T16:08:36Z

Rpienaar: add xtk link

__NOTOC__
<gallery>
Image:PW-Winter2017.png|link=2017_Winter_Project_Week#Projects|[[2017_Winter_Project_Week#Projects|Projects List]]

</gallery>

==Key Investigators==
* Rudolph Pienaar, Boston Children's Hospital
* Jorge Luis Bernal Rusiel, Boston Children's Hospital
* Nicolas Rannou, Eunate Technology S.L.
* Teodora Szasz, University of Chicago

==Project Description==
Many tools and libraries exist to build powerful '''web medical visualizers''' but the learning curve can be steep for new comers.
This project aims to provide simple interfaces for AMI [1].

==== Simple JS interface ====
A simple Javascript XTK-like [2] API. The key to the XTK success was its simple interface that lets people just dive in without worrying about the details.

==== Web components ====
A collection of modular web components [3] (via Polymer [4]) that people can cherry pick to easily build their own web medical visualizer.

''Why Polymer? (and not React [5] or Angular [6])''

Because Polymer is meant to '''disappear'''!

Polymer adds very little 'sugar' on top of the web '''standards'''. It mostly adds support for some features that are not available '''yet''' on some platforms. Once all browser vendors implement the standards, the Polymer library that aims to poly-fill all the gaps will disappear. Accessibility is also very important: one can use web components in its app no matter which framework is used. Using React/Angular-based elements from another framework is not necessarily possible. Low maintenance cost (not tied to a specific version of a specific library). Beautiful ecosystem for development, testing and distribution.

- and it is a Google backed project!

{| class="wikitable"
! style="text-align: left; width:27%" | Objective
! style="text-align: left; width:27%" | Approach and Plan
! style="text-align: left; width:27%" | Progress and Next Steps
|- style="vertical-align:top;"
|

* Design/Implement XTK like API for AMI
* Define/Design/Implement AMI-based web components for medical imaging
* Implement Lesson 10 and 14 from XTK with new JS API
* Build Slicer/Slicedrop/Cornerstone like viewer leveraging web components
|

* Write helpers functions in AMI to hide low-level JS implementation details
* Mockup basic quad-view to define most web components
* Implement web components
|

* [http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/10/#run XTK lesson 10]
* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson10/xtk_lesson10.js Orig lesson 10]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson10/xtk_lesson10.js New lesson 10]
* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson13/xtk_lesson13.js Orig lesson 13]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson13/xtk_lesson13.js New lesson 13]
|}

==Background and References==
[1] [https://github.com/FNNDSC/ami AMI]

[2] [https://github.com/xtk/X XTK]

[3] [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web-Components]

[4] [https://www.polymer-project.org Polymer]

[5] [https://facebook.github.io/react/ React]

[6] [https://angular.io/ Angular]

2017 Winter Project Week/AMI: A 3D Medical Imaging Javascript Library

2017-01-13T16:03:54Z

Rpienaar: updates

__NOTOC__
<gallery>
Image:PW-Winter2017.png|link=2017_Winter_Project_Week#Projects|[[2017_Winter_Project_Week#Projects|Projects List]]

</gallery>

==Key Investigators==
* Rudolph Pienaar, Boston Children's Hospital
* Jorge Luis Bernal Rusiel, Boston Children's Hospital
* Nicolas Rannou, Eunate Technology S.L.
* Teodora Szasz, University of Chicago

==Project Description==
Many tools and libraries exist to build powerful '''web medical visualizers''' but the learning curve can be steep for new comers.
This project aims to provide simple interfaces for AMI [1].

==== Simple JS interface ====
A simple Javascript XTK-like [2] API. The key to the XTK success was its simple interface that lets people just dive in without worrying about the details.

==== Web components ====
A collection of modular web components [3] (via Polymer [4]) that people can cherry pick to easily build their own web medical visualizer.

''Why Polymer? (and not React [5] or Angular [6])''

Because Polymer is meant to '''disappear'''!

Polymer adds very little 'sugar' on top of the web '''standards'''. It mostly adds support for some features that are not available '''yet''' on some platforms. Once all browser vendors implement the standards, the Polymer library that aims to poly-fill all the gaps will disappear. Accessibility is also very important: one can use web components in its app no matter which framework is used. Using React/Angular-based elements from another framework is not necessarily possible. Low maintenance cost (not tied to a specific version of a specific library). Beautiful ecosystem for development, testing and distribution.

- and it is a Google backed project!

{| class="wikitable"
! style="text-align: left; width:27%" | Objective
! style="text-align: left; width:27%" | Approach and Plan
! style="text-align: left; width:27%" | Progress and Next Steps
|- style="vertical-align:top;"
|

* Design/Implement XTK like API for AMI
* Define/Design/Implement AMI-based web components for medical imaging
* Implement Lesson 10 and 14 from XTK with new JS API
* Build Slicer/Slicedrop/Cornerstone like viewer leveraging web components
|

* Write helpers functions in AMI to hide low-level JS implementation details
* Mockup basic quad-view to define most web components
* Implement web components
|

* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson10/xtk_lesson10.js Orig lesson 10]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson10/xtk_lesson10.js New lesson 10]
* [https://github.com/FNNDSC/ami/blob/1aab128ee186efb09e9ef0d824b476ffe6959069/examples/xtk_lesson13/xtk_lesson13.js Orig lesson 13]
* [https://github.com/FNNDSC/ami/blob/dev/examples/xtk_lesson13/xtk_lesson13.js New lesson 13]
|}

==Background and References==
[1] [https://github.com/FNNDSC/ami AMI]

[2] [https://github.com/xtk/X XTK]

[3] [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web-Components]

[4] [https://www.polymer-project.org Polymer]

[5] [https://facebook.github.io/react/ React]

[6] [https://angular.io/ Angular]