| Literature DB >> 30245782 |
Qiusha Min1, Zhifeng Wang1, Neng Liu1.
Abstract
Despite the fact that a large number of web applications are used in the medical community, there are still certain technological challenges that need to be addressed, for example, browser plug-ins and efficient 3D visualization. These problems make it necessary for a specific browser plug-in to be preinstalled on the client side when launching applications. Otherwise, the applications fail to run due to the lack of the required software. This paper presents the latest techniques in hypertext markup language 5 (HTML5) and web graphics library (WebGL) for solving these problems and an evaluation of the suitability of the combination of HTML5 and WebGL for the development of web-based medical imaging applications. In this study, a comprehensive medical imaging application was developed using HTML5 and WebGL. This application connects to the medical image server, runs on a standard personal computer (PC), and is easily accessible via a standard web browser. The several functions required for radiological interpretation were implemented, for example, navigation, magnification, windowing, and fly-through. The HTML5-based medical imaging application was tested on major browsers and different operating systems over a local area network (LAN) and a wide area network (WAN). The experimental results revealed that this application successfully performed two-dimensional (2D) and three-dimensional (3D) functions on different PCs over the LAN and WAN. Moreover, it demonstrated an excellent performance for remote access users, especially over a short time period for 3D visualization and a real-time fly-through navigation. The results of the study demonstrate that HTML5 and WebGL combination is suitable for the development of medical imaging applications. Moreover, the advantages and limitations of these technologies are discussed in this paper.Entities:
Mesh:
Year: 2018 PMID: 30245782 PMCID: PMC6136584 DOI: 10.1155/2018/1592821
Source DB: PubMed Journal: J Healthc Eng ISSN: 2040-2295 Impact factor: 2.682
An overview of several previously published medical imaging applications.
| Group | Year | Client technology | Functions | Required plug-in |
|---|---|---|---|---|
| Slomka et al. [ | 2000 | Java | Access to remote patient database, the compressed image is transmitted to the local computer, and several applets are available for different study types | JVMa |
| Knoll et al. [ | 2000 | Java | Patient administration, 2D reconstruction and image processing, interpretation and collaborative diagnosis | JVM |
| Choi et al. [ | 2002 | Java | Medical imaging conference | JVM |
| Zeng et al. [ | 2003 | ActiveX | Access to remote medical image databases, image presentation, and image processing | ActiveX plug-in |
| Kaldoudi and Karaiskakis [ | 2006 | XML | Access to remote medical image databases and image presentation | None |
| Mongeau et al. [ | 2008 | VRMLb | 3D visualization | VRML browser plug-in |
| Kamauu et al. [ | 2008 | Java | Image display and processing | JVM |
| Costa et al. [ | 2009 | ActiveX | Access to remote medical image databases and image presentation | ActiveX plug-in |
| Mahmoudi et al. [ | 2010 | AJAXc + VRML | Image processing; and 3D visualization | VRML browser plug-in |
| Shen et al. [ | 2014 | AJAX | Access to remote medical image databases and image presentation | None |
| Qiao et al. [ | 2015 | AJAX | Image presentation and image processing | None |
| Looney et al. [ | 2016 | Java | Access to remote medical image databases and image processing | JVM |
| Xiberta and Boada [ | 2016 | AJAX | Image presentation and image processing | None |
| Doel et al. [ | 2017 | Java | Medical imaging data sharing | JVM |
| Jiang et al. [ | 2017 | Android | Transmission performance improvement with respect to batch transmission processing and image presentation | None |
| Huang et al. [ | 2018 | AJAX | Access to remote medical image databases and image presentation | None |
| Gøeg et al. [ | 2018 | TypeScript [ | Access to remote medical image databases and image presentation | None |
aJVM is the acronym for Java virtual machine; bVRML is the acronym for virtual reality modeling language; cAJAX is the acronym for asynchronous JavaScript and XML.
Figure 1Screenshot of the initial start page for the demo application.
Figure 2Screenshot of an image display.
Figure 3Screenshots of the user interface of the implementation of typical image processing functions: (a) a slice with adjusted window (parameters: center = 20 HU, width = 200 HU); (b) edge detection using the Sobel operator.
Figure 4Screenshot of a 3D model of the whole colon in the browser.
Figure 5Screenshot of the implementation of the fly-through in the browser.
Description of the datasets used in the experiments.
| Dataset | Type | Size | 3D visualization | ||
|---|---|---|---|---|---|
| Vertex file | Normal file | The number of faces | |||
| #1 | CT | 512 × 512 × 610 (312,320 kB) | 59,545 kB | 59,545 kB | 1,693,700 |
| #2 | CT | 512 × 512 × 628 (321,536 kB) | 57,747 kB | 57,747 kB | 1,642,580 |
| #3 | CT | 512 × 512 × 500 (256,000 kB) | 60,236 kB | 60,236 kB | 1,713,372 |
The details of computers using in the experiments.
| Computer | Type | Operation system | CPU | Memory | GPU |
|---|---|---|---|---|---|
| I | Laptop | Windows 10 64-bit | Intel(R) Core(TM) i5-6300HQ CPU @ 2.30 GHz | 8.00 GB | NVIDIA GeForce GTX 950M |
| II | Laptop | Ubuntu 16.04 | Intel(R) Core(TM) i5-6300HQ CPU @ 2.30 GHz | 8.00 GB | NVIDIA GeForce GTX 950M |
| III | Laptop (MacBook Pro) | Mac OS Sierra 10.12.5 | Intel Core Intel i5 @ 2.30 GHz | 8.00 GB | Intel Iris Plus Graphics 640 |
The details of testing metrics in this study.
| Function | Label | Description | Measurement |
|---|---|---|---|
| Data access | M1 | Execution time for downloading a medical image dataset | Manual measurement |
| 2D image processing | M2 | Execution time for viewing a slice in a medical image dataset | Measured by JavaScript code |
| M3 | Execution time for implementing windowing per slice | Measured by JavaScript code | |
| M4 | Execution time for implementing magnification per slice | Measured by JavaScript code | |
| M5 | Execution time for implementing median filtering (3 × 3) per slice | Measured by JavaScript code | |
| M6 | Execution time for implementing thresholding per slice | Measured by JavaScript code | |
| M7 | Execution time for implementing Sobel edge detection per slice | Measured by JavaScript code | |
|
| |||
| 3D visualization | M8 | Execution time for downloading the vertex and normal files of a medical image dataset | Manual measurement |
| M9 | Execution time for rendering a 3D model based on the downloaded vertex and normal files | Measured by JavaScript code | |
| M10 | Frame rate of fly-through | Measured by JavaScript code | |
Figure 6Application performances on different platforms. The computational time required for (a) downloading the selected dataset; (b–g) implementing 2D image processing per slice; (h–j) implementing 3D visualization.
Comparison of the proposed application performances over the WAN and LAN.
| Dataset | Browser | Data access | 2D image processing | 3D visualization | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| M1 (s) | M2 (s) | M3 (s) | M4 (s) | M5 (s) | M6 (s) | M7 (s) | M8 (s) | M9 (s) | M10 (fps) | ||
| #1 | Firefox (WAN) | 18.6 | 0.0008 | 0.066 | 0.002 | 0.456 | 0.070 | 0.040 | 4.7 | 3.61 | 49.54 |
| Chrome (WAN) | 27.1 | 0.0014 | 0.024 | 0.002 | 0.150 | 0.021 | 0.089 | 10.5 | 3.52 | 39.8 | |
| Microsoft Edge (WAN) | 19.5 | 0.0005 | 0.102 | 0.001 | 0.359 | 0.102 | 0.268 | 3.2 | 4.12 | 60.0 | |
|
| |||||||||||
| #2 | Chrome (LAN) | 28.9 | 0.0013 | 0.025 | 0.001 | 0.167 | 0.024 | 0.103 | 10.4 | 3.30 | 40.41 |
| Chrome (WAN) | 135.5 | 0.0015 | 0.029 | 0.001 | 0.169 | 0.028 | 0.165 | 46.0 | 3.78 | 40.05 | |
|
| |||||||||||
| #3 | Firefox (LAN) | 17.9 | 0.0003 | 0.039 | 0.001 | 0.468 | 0.039 | 0.039 | 4.8 | 3.80 | 47.28 |
| Firefox (WAN) | 102.3 | 0.0005 | 0.042 | 0.002 | 0.495 | 0.046 | 0.068 | 40.2 | 3.85 | 46.95 | |