paraview-glance/src/components/controls/SliceControl/template.html

Web application for Visualizing Scientific and Medical datasets

<div
  v-if="domains.windowWidth && domains.windowLevel"
>
  <v-card flat :class="$style.block">
    <v-card-title :class="$style.blockTitle">
      <span class="body-2">Window/Level</span>
    </v-card-title>
    <v-card-text :class="$style.blockContent">
      <v-container fluid grid-list-sm class="pa-0">
        <v-layout row wrap align-center>
          <v-flex xs3>
            <label :class="$style.smallLabel">Window</label>
          </v-flex>
          <v-flex xs6>
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="windowWidth"
              :min="domains.windowWidth.min"
              :max="domains.windowWidth.max"
              :step="domains.windowWidth.step"
            />
          </v-flex>
          <v-flex xs3>
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="windowWidth"
              :min="domains.windowWidth.min"
              :max="domains.windowWidth.max"
              :step="domains.windowWidth.step"
            />
          </v-flex>
          <v-flex xs3>
            <label :class="$style.smallLabel">Level</label>
          </v-flex>
          <v-flex xs6>
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="windowLevel"
              :min="domains.windowLevel.min"
              :max="domains.windowLevel.max"
              :step="domains.windowLevel.step"
            />
          </v-flex>
          <v-flex xs3>
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="windowLevel"
              :min="domains.windowLevel.min"
              :max="domains.windowLevel.max"
              :step="domains.windowLevel.step"
            />
          </v-flex>
        </v-layout>
      </v-container>
    </v-card-text>
  </v-card>

  <v-card flat :class="$style.block">
    <v-card-title flat :class="$style.blockTitle">
      <span class="body-2">Slices</span>
    </v-card-title>
    <v-card-text :class="$style.blockContent">
      <v-container fluid grid-list-sm class="pa-0">
        <v-layout row wrap align-center>
          <v-flex xs2 :class="isSliceAvailable('x') || (isSliceAvailable('default') && xSliceVisibility) ? '' : $style.disable">
            <v-btn
              class="flex-shrink-0"
              :class="$style.button"
              fab
              small
              :outlined="!getToggleSliceX()"
              :dark="getToggleSliceX()"
              v-on:click.stop="setToggleSliceX()"
              color="blue-grey"
            >
              <label :class="$style.smallLabel">X</label>
            </v-btn>
          </v-flex>
          <v-flex xs7 :class="isSliceAvailable('x') || (isSliceAvailable('default') && xSliceVisibility) ? '' : $style.disable">
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="xSlice"
              :min="domains.xSlice.min"
              :max="domains.xSlice.max"
              :step="domains.xSlice.step"
            />
          </v-flex>
          <v-flex xs3 :class="isSliceAvailable('x') || (isSliceAvailable('default') && xSliceVisibility) ? '' : $style.disable">
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="xSlice"
              :min="domains.xSlice.min"
              :max="domains.xSlice.max"
              :step="domains.xSlice.step"
            />
          </v-flex>
          <v-flex xs2 :class="isSliceAvailable('y') || (isSliceAvailable('default') && ySliceVisibility) ? '' : $style.disable">
            <div style="position: relative;">
              <v-btn
                :class="$style.button"
                fab
                small
                :outlined="!getToggleSliceY()"
                :dark="getToggleSliceY()"
                v-on:click.stop="setToggleSliceY()"
                color="blue-grey"
              >
                <label :class="$style.smallLabel">Y</label>
              </v-btn>
            </div>
          </v-flex>
          <v-flex xs7 :class="isSliceAvailable('y') || (isSliceAvailable('default') && ySliceVisibility) ? '' : $style.disable">
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="ySlice"
              :min="domains.ySlice.min"
              :max="domains.ySlice.max"
              :step="domains.ySlice.step"
            />
          </v-flex>
          <v-flex xs3 :class="isSliceAvailable('y') || (isSliceAvailable('default') && ySliceVisibility) ? '' : $style.disable">
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="ySlice"
              :min="domains.ySlice.min"
              :max="domains.ySlice.max"
              :step="domains.ySlice.step"
            />
          </v-flex>
          <v-flex xs2 :class="isSliceAvailable('z') || (isSliceAvailable('default') && zSliceVisibility) ? '' : $style.disable">
            <div style="position: relative;">
              <v-btn
                :class="$style.button"
                fab
                small
                :outlined="!getToggleSliceZ()"
                :dark="getToggleSliceZ()"
                v-on:click.stop="setToggleSliceZ()"
                color="blue-grey"
              >
                <label :class="$style.smallLabel">Z</label>
              </v-btn>
            </div>
          </v-flex>
          <v-flex xs7 :class="isSliceAvailable('z') || (isSliceAvailable('default') && zSliceVisibility) ? '' : $style.disable">
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="zSlice"
              :min="domains.zSlice.min"
              :max="domains.zSlice.max"
              :step="domains.zSlice.step"
            />
          </v-flex>
          <v-flex xs3 :class="isSliceAvailable('z') || (isSliceAvailable('default') && zSliceVisibility) ? '' : $style.disable">
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="zSlice"
              :min="domains.zSlice.min"
              :max="domains.zSlice.max"
              :step="domains.zSlice.step"
            />
          </v-flex>
        </v-layout>
      </v-container>
    </v-card-text>
  </v-card>

  <v-card flat :class="$style.block">
    <v-card-title :class="$style.blockTitle">
      <span class="body-2">Opacity</span>
    </v-card-title>
    <v-card-text :class="$style.blockContent">
      <v-container fluid grid-list-sm class="pa-0">
        <v-layout row wrap align-center>
          <v-flex xs9>
            <v-slider
              :class="$style.slimInput"
              hide-details
              always-dirty
              v-model="opacity"
              min="0"
              max="1"
              step="0.01"
            />
          </v-flex>
          <v-flex xs3>
            <v-text-field
              :class="$style.slimInput"
              hide-details
              type="number"
              v-model="opacity"
              min="0"
              max="1"
              step="0.01"
            />
          </v-flex>
        </v-layout>
      </v-container>
    </v-card-text>
  </v-card>
</div>