1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
Javascript API
==============
.. highlight:: javascript
As opposed to the :doc:`Python API <../python/index>`, the Javascript API covers fewer parts of the :doc:`C++ API <../cpp/index>` and differs more often. Due to the focus of Javascript to web applications, the wrappers cover basic manipulation of data sets and the DICOM web services.
Adding Odil.js to an HTML document
----------------------------------
The following example show how to integrate Odil.js in an HTML web page:
.. code-block:: html
<!doctype html>
<html>
<head>
<title>Odil web app</title>
</head>
<body>
<script>
function main() {
window.odil = Module;
}
var Module = {
onRuntimeInitialized: main
};
</script>
<script src="odil.js"></script>
</body>
</html>
Tags
----
The ``Tag`` object exposes the ``group`` and ``element`` member variables, and the ``is_private`` and ``get_name`` member functions. Additional C++ operators are exposed as Javascript member functions:
.. table:: C++ operators on Tag objects and their Javascript equivalents
+------------------------+------------------------------+
| C++ | Javascript |
+========================+==============================+
| ``tag1 == tag2;`` | ``tag1.equal(tag2);`` |
+------------------------+------------------------------+
| ``tag1 != tag2;`` | ``tag1.notEqual(tag2);`` |
+------------------------+------------------------------+
| ``tag1 < tag1;`` | ``tag1.less(tag2);`` |
+------------------------+------------------------------+
| ``tag1 > tag2;`` | ``tag1.greater(tag2);`` |
+------------------------+------------------------------+
| ``tag1 <= tag2;`` | ``tag1.lessEqual(tag2);`` |
+------------------------+------------------------------+
| ``tag1 >= tag2;`` | ``tag1.greaterEqual(tag2);`` |
+------------------------+------------------------------+
| ``std::string(tag1);`` | ``tag1.toString;`` |
+------------------------+------------------------------+
The registry of elements is looked up using the ``getTag`` function:
::
var tag = odil.getTag("PatientName");
console.log(tag.get_name());
Value representations (VR)
--------------------------
The members of the `VR`_ enum are exposed as individual variables, with an additional ``VRtoString`` function to convert them to their name.
::
var vr = odil.PN;
console.log(odil.VRtoString(vr));
Data sets
---------
Data sets can be read from an `ArrayBuffer`_ object using the ``readBuffer`` function, which return an array comprised of the meta-information and the data set in a file. This can be used in conjunction with a `FileReader`_ to read a user-selected file as shown in the following example:
.. code-block:: html
<!doctype html>
<html>
<head>
<title>Odil web app</title>
</head>
<body>
<label for="file">Select a DICOM file: </label>
<input type="file" id="file" name="file"/><br>
<script>
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
}
function onFileSelect(event) {
var reader = new FileReader();
reader.addEventListener('loadend', onFileRead);
reader.readAsArrayBuffer(event.target.files[0]);
}
function main() {
window.odil = Module;
document.querySelector('#file').addEventListener(
'change', onFileSelect);
}
var Module = { onRuntimeInitialized: main };
</script>
</body>
</html>
Accessing the element of the data set is done as in Python or C++:
::
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
var dataSet = headerAndDataSet.get(1);
console.log(dataSet.as_string(odil.getTag("PatientName")).get(0));
}
In addition to the ``as_XXX`` member functions, the following member functions are also exposed:
- ``is_XXX``
- ``remove``
- ``has``
- ``get_vr``
- ``get_transfer_syntax`` and ``set_transfer_syntax``
The equality and difference operators are exposed as ``equal`` and ``notEqual``, as for ``Tag`` objects. Some member functions in C++ and Python which may apply to either the whole data set or just an element (``empty``, ``size``, ``clear``) are exposed as to Javascript functions: ``empty`` will apply to the whole data set, while ``empty_tag`` will apply to a single element specified by its tag.
It is also possible to iterate the data sets, by iterating the tags of its elements:
::
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
var dataSet = headerAndDataSet.get(1);
var tags = dataSet.get_tags();
for(var i=0; i<tags.length; ++i) {
console.log(tags[i].toString());
}
}
.. _ArrayBuffer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
.. _FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
.. _VR: ../../_static/doxygen/VR_8h.html
|
