diff --git a/templates/project.mustache b/templates/project.mustache index a406bd75..cad5862d 100644 --- a/templates/project.mustache +++ b/templates/project.mustache @@ -80,8 +80,8 @@ :class="{ pressed: currentTool === 'Measure' }"> - + + @@ -167,6 +173,13 @@ height: 100%; width: 30px; } + .adjust-settings { + position: absolute; + bottom: 0; + left: 0; + padding: 10px; + width: 200px; + } diff --git a/view/brainbox/src/pages/project-page.js b/view/brainbox/src/pages/project-page.js index a032bb6b..6eb681a8 100644 --- 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);