Add image adjustment settings component

neuroanatomy · Jun 7, 2022 · baf0459 · baf0459
1 parent ca1c101
commit baf0459
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/templates/project.mustache b/templates/project.mustache
@@ -80,8 +80,8 @@
                                         :class="{ pressed: currentTool === 'Measure' }">
                                     <img class="icon" alt="ruler" :src="icons['ruler.svg']" />
                                 </Button>
-                                <Button @click="changeTool('Adjust')"
-                                        :class="{ pressed: currentTool === 'Adjust' }">
+                                <Button @click="toggleImageSettings()"
+                                        :class="{ pressed: displayAdjustSettings }">
                                     <img class="icon" alt="Adjust" :src="icons['adjust.svg']" />
                                 </Button>
                                 <Button @click="changeTool('Eyedrop')"
@@ -150,6 +150,12 @@
                     </template>
                     <template v-slot:content>
                         <div id="stereotaxic" style="width:100%;height:100%"></div>
+                        <AdjustSettings
+                            v-if="displayAdjustSettings"
+                            :alpha="alphaValue" @change-alpha="changeAlpha"
+                            :brightness="brightnessValue" @change-brightness="changeBrightness"
+                            :contrast="contrastValue" @change-contrast="changeContrast"
+                        />
                     </template>
                 </Editor>
             </template>
@@ -167,6 +173,13 @@
         height: 100%;
         width: 30px;
     }
+    .adjust-settings {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 10px;
+        width: 200px;
+    }
     </style>
     <script src="/lib/atlasmaker.js"></script>
     <script src="/lib/brainbox.js"></script>

diff --git a/view/brainbox/src/pages/project-page.js b/view/brainbox/src/pages/project-page.js
@@ -4,6 +4,7 @@
 import 'nwl-components/dist/style.css';
 import * as Vue from 'vue';
 import {
+  AdjustSettings,
   Button,
   ButtonsGroup,
   Chat,
@@ -62,12 +63,16 @@ const PageContents = {
       displayOntology: Vue.ref(false),
       displayChat: Vue.ref(true),
       displayScript: Vue.ref(false),
+      displayAdjustSettings: Vue.ref(false),
       currentLabel: Vue.ref(0),
       receivedMessages: Vue.ref([]),
       notification: Vue.ref(''),
       project: projectInfo,
       icons: requireIconsMap(),
       fullscreen: Vue.ref(false),
+      alphaValue: Vue.ref(50),
+      brightnessValue: Vue.ref(50),
+      contrastValue: Vue.ref(50),
       linkPrefix: `${config.baseURL}/mri?url=`,
       // define a map associating annotations keys to value selectors
       // to extract content within the TextAnnotations component
@@ -322,6 +327,7 @@ const PageContents = {
     changeTool(tool) {
       AtlasMakerWidget.changeTool(tool);
       this.currentTool = tool;
+      this.displayAdjustSettings = false;
     },
 
     changePenSize(size) {
@@ -403,6 +409,28 @@ const PageContents = {
 
     sendChatMessage(message) {
       AtlasMakerWidget.sendChatMessage(message);
+    },
+
+    toggleImageSettings() {
+      this.displayAdjustSettings = !this.displayAdjustSettings;
+      this.currentTool = null;
+    },
+
+    changeAlpha(x) {
+      AtlasMakerWidget.alphaLevel = x / 100;
+      AtlasMakerWidget.drawImages();
+    },
+
+    changeBrightness(x) {
+      const b = (2 * x / 100);
+      const c = 2 * this.contrastValue / 100;
+      document.querySelector('#canvas').style.filter = `brightness(${b}) contrast(${c})`;
+    },
+
+    changeContrast(x) {
+      const b = 2 * this.brightnessValue / 100;
+      const c = (2 * x / 100);
+      document.querySelector('#canvas').style.filter = `brightness(${b}) contrast(${c})`;
     }
   },
 
@@ -422,6 +450,7 @@ app.component('VolumeAnnotations', VolumeAnnotations);
 app.component('Table', Table);
 app.component('Row', Row);
 app.component('Chat', Chat);
+app.component('AdjustSettings', AdjustSettings);
 app.provide('displaySettings', true);
 app.provide('config', config);
 app.provide('user', loggedUser);