Merge pull request #138 from LCOGT/update/rgb-stacking-ui

UI refresh of the RGB stack component

src/components/Global/FilterBadge.vue

@@ -1,29 +1,18 @@
 <script setup>
-import { computed } from 'vue'
+import { filterToColor } from '@/utils/common'
+
 const props = defineProps({
   filter: {
     type: String,
     required: true
   }
 })
 
-const badgeColor = computed(() => {
-  switch (props.filter) {
-  case 'R': case 'rp':
-    return 'red'
-  case 'V': case 'gp':
-    return 'green'
-  case 'B':
-    return 'blue'
-  default:
-    return 'var(--metal)'
-  }
-})
 </script>
 <template>
   <p
     class="filter-badge"
-    :style="{ backgroundColor: badgeColor}"
+    :style="{ backgroundColor: filterToColor(props.filter) }"
   >
     {{ props.filter }}
   </p>

src/components/Global/Scaling/CompositeImage.vue

@@ -20,9 +20,7 @@ const props = defineProps({
 })
 
 const store = useScalingStore()
-// This isn't currently used by can be used to trigger showing a spinning circular
-// loading icon over the image if we add a debounce to the redraw in the future
-const isLoading = ref(false)
+const isLoading = ref(false) // not being used yet
 const imageCanvas = ref(null)
 var context = null
 
@@ -32,7 +30,12 @@ const ableToDraw = computed(() => {
 
 function redrawImage() {
   if (ableToDraw.value) {
-    context.putImageData(store.scaledImageArrays[props.imageName].combined, 0, 0)
+    const compositeImage = store.scaledImageArrays[props.imageName].combined
+    // convert to ImageBitMap to use drawImage
+    createImageBitmap(compositeImage).then((compositeImageBitMap) => {
+      // scale image to fit canvas
+      context.drawImage(compositeImageBitMap, 0, 0, compositeImageBitMap.width, compositeImageBitMap.height, 0, 0, props.width, props.height)
+    })
   }
 }
 
@@ -51,18 +54,22 @@ watch(
 
 </script>
 <template>
-  <div class="image-container mt-4" :id="'image-container-' + imageName" :style="'max-width: ' + props.width">
-    <canvas ref="imageCanvas" :width="props.width" :height="props.height">
-    </canvas>
-    <v-progress-circular v-show="isLoading" color="primary" size="200" indeterminate></v-progress-circular>
-  </div>
+  <canvas
+    ref="imageCanvas"
+    :width="props.width"
+    :height="props.height"
+  />
+  <v-progress-circular
+    v-show="isLoading"
+    color="primary"
+    size="200"
+    indeterminate
+  />
 </template>
 <style scoped>
-
 .v-progress-circular {
   position:fixed;
   bottom: 40%;
   left: 60%;
 }
-
 </style>

src/components/Global/Scaling/HistogramSlider.vue

@@ -32,22 +32,26 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 65500
-  }
+  },
+  selectedColor: {
+    type: String,
+    required: false,
+    default: 'var(--light-blue)'
+  },
 })
 
 const emit = defineEmits(['updateScaling'])
 
 const scaleRange = ref([props.bins[0], props.bins[props.bins.length-1]])
 const sliderRange = ref([0, props.bins.length-1])
-const selectedColor = 'rgb(20,182,246)'
-const backgroundColor = 'rgb(204,208,211)'
+const backgroundColor = 'var(--light-gray)'
 
 const gradient = computed(() => {
   // This function computes a "gradient" for the histogram sparkline, showing the selected region as highlighted
   let gradientArray = []
   for (let i = 0; i < props.bins.length; i++) {
     if (i > (sliderRange.value[0]+1) && i < (sliderRange.value[1]-1)) {
-      gradientArray.push(selectedColor)
+      gradientArray.push(props.selectedColor)
     }
     else {
       gradientArray.push(backgroundColor)
@@ -141,7 +145,7 @@ watch(
 
 </script>
 <template>
-  <v-row class="ml-4">
+  <v-row class="histogram-range-controls">
     <v-col cols="4">
       <v-text-field
         v-model="scaleRange[0]"
@@ -171,60 +175,52 @@ watch(
     <v-col cols="4">
       <v-btn
         class="ml-2"
-        variant="outlined"
+        color="var(--light-blue)"
         @click="zScaleImage"
       >
         Z-Scale
       </v-btn>
     </v-col>
   </v-row>
-  <v-row class="ma-0">
-    <v-sheet class="stackSheet">
-      <v-sparkline
-        :smooth="true"
-        :fill="true"
-        line-width="0.1"
-        height="50"
-        :gradient="gradient"
-        gradient-direction="left"
-        :model-value="props.histogram"
-        auto-draw
-      />
-      <v-range-slider
-        v-model="sliderRange"
-        class="stackControls"
-        step="1"
-        track-size="0"
-        :track-color="backgroundColor"
-        :track-fill-color="selectedColor"
-        :thumb-color="selectedColor"
-        thumb-size="16"
-        :max="props.bins.length-1"
-        thumb-label="always"
-        strict
-        hide-details
-        @update:model-value="updateScaleRange"
-      >
-        <template #thumb-label="{ modelValue }">
-          {{ labelSliderToScaleValue(modelValue) }}
-        </template>
-      </v-range-slider>
-    </v-sheet>
-  </v-row>
+  <div class="histogram-range-slider">
+    <v-sparkline
+      :smooth="true"
+      :fill="true"
+      line-width="0.1"
+      height="50"
+      :gradient="gradient"
+      gradient-direction="left"
+      :model-value="props.histogram"
+      auto-draw
+    />
+    <v-range-slider
+      v-model="sliderRange"
+      step="1"
+      track-size="0"
+      :track-color="backgroundColor"
+      :track-fill-color="selectedColor"
+      thumb-color="var(--dark-green)"
+      thumb-size="16"
+      :max="props.bins.length-1"
+      strict
+      hide-details
+      @update:model-value="updateScaleRange"
+    >
+      <template #thumb-label="{ modelValue }">
+        {{ labelSliderToScaleValue(modelValue) }}
+      </template>
+    </v-range-slider>
+  </div>
 </template>
 <style scoped>
-
-.stackSheet {
+.histogram-range-slider {
   position: relative;
-  width: 500px;
-  margin-left: 10px;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.stackControls {
-  position: absolute;
-  bottom: -6px;
-  left: 5px;
-  width: 473px;
+.v-range-slider {
+  position: relative;
+  bottom: 30px;
 }
-
 </style>

src/components/Global/Scaling/ImageScaler.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, defineEmits, defineProps } from 'vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import { fetchApiCall } from '@/utils/api'
+import { filterToColor } from '@/utils/common'
 import RawScaledImage from './RawScaledImage.vue'
 import HistogramSlider from './HistogramSlider.vue'
 
@@ -96,38 +97,42 @@ onMounted(async () => {
 
 </script>
 <template>
-  <div :style="'max-width: ' + props.maxSize">
-    <v-row class="mt-4">
-      <h3 class="image-scale-title">Adjust Scaling for <span class="text-capitalize">{{ titleText }}</span></h3>
-    </v-row>
-    <v-row class="mt-1">
-      <raw-scaled-image
-        :image-data="rawData"
-        :scale-points="sliderRange"
-        :filter="props.image.filter"
-        :image-name="props.imageName"
-        :composite-name="props.compositeName"
-      >
-      </raw-scaled-image>
-    </v-row>
-    <v-row>
-      <v-col>
-        <histogram-slider
-          :histogram="histogram"
-          :bins="bins"
-          :max-value="maxPixelValue"
-          :z-min="zScaleValues[0]"
-          :z-max="zScaleValues[1]"
-          @update-scaling="updateScaleRange"
-        >
-        </histogram-slider>
-      </v-col>
-    </v-row>
-  </div>
+  <v-sheet
+    class="image-scaler"
+    rounded
+  >
+    <raw-scaled-image
+      :max-size="props.maxSize"
+      :image-data="rawData"
+      :scale-points="sliderRange"
+      :filter="props.image.filter"
+      :image-name="props.imageName"
+      :composite-name="props.compositeName"
+    />
+    <v-col>
+      <h3 class="image-scale-title text-capitalize">
+        {{ titleText }}
+      </h3>
+      <histogram-slider
+        :selected-color="filterToColor(props.image.filter)"
+        :histogram="histogram"
+        :bins="bins"
+        :max-value="maxPixelValue"
+        :z-min="zScaleValues[0]"
+        :z-max="zScaleValues[1]"
+        @update-scaling="updateScaleRange"
+      />
+    </v-col>
+  </v-sheet>
 </template>
 <style scoped>
+.image-scaler{
+  display: flex;
+  padding: 1rem;
+  background-color: var(--metal);
+}
 .image-scale-title {
-  width: 100%;
+  margin-bottom: 0.5rem;
   text-align: center;
   color: var(--tan);
   font-weight: bold;