Merge pull request #129 from sankhesh/pet_ct_overlay

PET-CT fusion/overlay

Author: floryst

usage/src/App.jsx

@@ -32,6 +32,7 @@ const demos = new Map([
     'Volume/ImageSeriesRendering',
     lazy(() => import('./Volume/ImageSeriesRendering')),
   ],
+  ['Volume/PET_CT_Overlay', lazy(() => import('./Volume/PET_CT_Overlay'))],
   ['Tests/PropertyUpdate', lazy(() => import('./Tests/PropertyUpdate'))],
   ['Tests/CameraTest', lazy(() => import('./Tests/CameraTest'))],
   ['Tests/ShareGeometry', lazy(() => import('./Tests/ShareGeometry'))],

usage/src/Volume/PET_CT_Overlay.css

@@ -0,0 +1,73 @@
+label {
+  color: lightGray;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 300px;
+  height: 3px;
+  background: #ddd;
+  border: none;
+  border-radius: 5px;
+}
+
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: none;
+  height: 25px;
+  width: 8px;
+  border-radius: 50%;
+  background: goldenrod;
+  margin-top: -10px;
+}
+
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #ccc;
+}
+
+
+input[type=range][orient='vertical'] {
+  position: absolute;
+  zIndex: 1000;
+  margin: 0;
+  padding: 5;
+  width: 2500%;
+  height: 0.5em;
+  transform: translate(-50%, -50%) rotate(-90deg);
+  background: transparent;
+  font: 1em/1 arial, sans-serif;
+}
+
+.loader {
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid blue;
+  border-right: 16px solid green;
+  border-bottom: 16px solid red;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}