cardiovascular-visualization/index.html at main · wiebe-vandendriessche/cardiovascular-visualization · GitHub

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
151
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VTK.js project</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
</head>

<body>
  <div id="app">

    <!-- Navigation bar for menu -->
    <div class="navbar">
      <span class="navbar-title">Cardiovascular Visualization</span>

      <div class="dropdown">
        <button class="dropbtn">File</button>
        <div class="dropdown-content">
          <a href="#" id="loadVTIImage">Load VTI Image</a>
          <a href="#" id="loadDemoSeg">Load Demo Seg</a>
          <a href="#" id="loadDemoSkel">Load Demo Skel</a>
          <a href="#" id="loadDemoCrossSec">Load Demo Data</a>
          <a href="#" id="loadMIPxAxis">Load MIP X axis</a>
          <a href="#" id="loadMIPyAxis">Load MIP Y axis</a>
          <a href="#" id="loadMIPzAxis">Load MIP Z axis</a>
        </div>
      </div>
      <span id="fileNameDisplay"></span>
      <button href="#" id="id_CreateMeshMenuButton" style="display: none">Create Mesh</button>
      <button href="#" id="id_InverseImageThresholdingButton" style="display: none">Inverse Image Thresholding</button>
      <button href="#" id="id_CreateSkeletonButton" style="display: none">Create Skeleton</button>
      <button href="#" id="id_StartEndoscopy" style="display: none">Start Endoscopy</button>
      <button href="#" id="id_StartCrossSection" style="display: none">Start Cross Section</button>
      <button href="#" id="id_StartMIPSlicing" style="display: none">Start MIP Slicing</button>
    </div>


    <input id="id_inputFileDialog" type="file" style="position: fixed; top: -100em">

    <div id="floating-dock">
      <div class="dock-header">
        <!-- Toggle button with arrow icon -->
        <button id="toggle-dock" class="dock-toggle">
          <i class="fas fa-chevron-down"></i>
        </button>
        <!-- Draggable indicator next to the toggle button -->
        <div class="dock-draggable-indicator">
          <i class="fas fa-grip-lines"></i>
        </div>
      </div>
      <div id="dock-content">
        <!-- Sliders for scrolling through image slices -->
        <div id="id_Sliders" class="slider-container">
          <table>
            <tbody>
              <tr>
                <td>Slice I</td>
                <td colspan="3">
                  <input class="SliceI" id="id_SliceI" type="range" min="0.5" max="2.0" step="1" value="1.0">
                </td>
              </tr>
              <tr>
                <td>Slice J</td>
                <td colspan="3">
                  <input class="SliceJ" id="id_SliceJ" type="range" min="0.5" max="2.0" step="1" value="1.0">
                </td>
              </tr>
              <tr>
                <td>Slice K</td>
                <td colspan="3">
                  <input class="SliceK" id="id_SliceK" type="range" min="0.5" max="2.0" step="1" value="1.0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>


        <!-- Create input number box for entering threshold value for creating mesh from image -->
        <div id="id_MeshingThreshold" class="slider-container">
          <label> Threshold for Meshing: </label>
          <input type="number" id="id_InputTresholdForMeshing" min="0" max="255" step="1" value="1">
        </div>


        <!-- Create input number box for entering threshold value for thresholding the image -->
        <div id="id_ImageThreshold" class="slider-container">
          <label> Threshold for Image: </label>
          <input type="number" id="id_InputTresholdForImage" min="0" max="255" step="1" value="1">
        </div>

        <div id="id_ImagePlanes" class="slider-container">
          <label> IJK Image Planes: </label>
          <input type="checkbox" id="id_InputImagePlanes" min="0" max="255" step="1" value="1">
        </div>

        <!-- Slider for mesh opacity -->
        <div id="id_OpacitySlider" class="slider-container">
          <table>
            <tbody>
              <tr>
                <td>Opacity Slider</td>
                <td colspan="3">
                  <input id="id_InputOpacitySlider" type="range" min="0.0" max="1.0" step="0.01" value="1.0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Slider for FOV -->
        <div id="id_FOVSlider" class="slider-container">
          <table>
            <tbody>
              <tr>
                <td>FOV Slider</td>
                <td colspan="3">
                  <input id="id_InputFOVSlider" type="range" min="30" max="150" step="1" value="125">
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Slider for CrossSectionSize -->
        <div id="id_CrossSectionSlider" class="slider-container">
          <table>
            <tbody>
              <tr>
                <td>Cross Section Size</td>
                <td colspan="3">
                  <input id="id_InputCrossSectionSize" type="range" min="10" max="500" step="1" value="100">
                </td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>

  </div>
  <div id="loader" style="display: none;">
  </div>

  <script type="module" src="/src/main.js"></script>
</body>

</html>