From 0a4f6640811819bb1a3989857cb0d01e1c4cf93f Mon Sep 17 00:00:00 2001 From: admin <51248046+danton267@users.noreply.github.com> Date: Mon, 10 Jul 2023 10:01:21 +0200 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20figure=20brightness=20clientsid?= =?UTF-8?q?e=20control?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/functions.js | 7 +++++++ callbacks/control_bar.py | 16 +++++++++++++++- components/control_bar.py | 12 ++++++++++++ 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 assets/functions.js diff --git a/assets/functions.js b/assets/functions.js new file mode 100644 index 00000000..616f1cf4 --- /dev/null +++ b/assets/functions.js @@ -0,0 +1,7 @@ +function changeBrightness(js_path, brightness) { + const element = document.querySelector(js_path); + if (element) { + // Apply the new brightness value to the element + element.style.filter = `brightness(${brightness}%)`; + } +} \ No newline at end of file diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index 7fc913b7..8bbbeb17 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -1,4 +1,4 @@ -from dash import Input, Output, State, callback, Patch, MATCH, ALL, ctx +from dash import Input, Output, State, callback, Patch, ALL, ctx, clientside_callback import dash_mantine_components as dmc import json from utils.data_utils import convert_hex_to_rgba @@ -100,3 +100,17 @@ def annotation_visibility(checked, store, figure, image_idx): patched_figure["layout"]["shapes"] = [] return store, patched_figure + + +clientside_callback( + """ + function dash_brigthness_clientside(brightness) { + console.log(brightness) + js_path = "#image-viewer > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g" + changeBrightness(js_path, brightness) + return "" + } + """, + Output("dummy-output", "children"), + Input("figure-brightness", "value"), +) diff --git a/components/control_bar.py b/components/control_bar.py index 427100d1..1ea2bb91 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -74,6 +74,17 @@ def layout(): size="sm", ), dmc.Space(h=5), + dmc.Text("Brightness", size="sm"), + dmc.Slider( + id=f"figure-brightness", + value=[0, 255], + min=0, + max=255, + step=1, + color="gray", + size="sm", + ), + dmc.Space(h=5), ] ), ), @@ -169,5 +180,6 @@ def layout(): ), dcc.Store(id="annotation-store", data={}), dcc.Store(id="project-data"), + html.Div(id="dummy-output"), ], ) From 29d1165cc840bddc20e8e9a840cde98bfe7cca6c Mon Sep 17 00:00:00 2001 From: admin <51248046+danton267@users.noreply.github.com> Date: Mon, 10 Jul 2023 10:06:47 +0200 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20figure=20contrast=20clientside?= =?UTF-8?q?=20control?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/functions.js | 7 +++++++ callbacks/control_bar.py | 17 +++++++++++++++-- components/control_bar.py | 10 ++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/assets/functions.js b/assets/functions.js index 616f1cf4..497f45f4 100644 --- a/assets/functions.js +++ b/assets/functions.js @@ -4,4 +4,11 @@ function changeBrightness(js_path, brightness) { // Apply the new brightness value to the element element.style.filter = `brightness(${brightness}%)`; } +} +function changeContrast(js_path, contrast) { + const element = document.querySelector(js_path); + if (element) { + // Apply the new contrast value to the element + element.style.filter = `contrast(${contrast}%)`; + } } \ No newline at end of file diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index 8bbbeb17..8c0e2291 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -105,12 +105,25 @@ def annotation_visibility(checked, store, figure, image_idx): clientside_callback( """ function dash_brigthness_clientside(brightness) { - console.log(brightness) js_path = "#image-viewer > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g" changeBrightness(js_path, brightness) return "" } """, - Output("dummy-output", "children"), + Output("dummy-output", "children", allow_duplicate=True), Input("figure-brightness", "value"), + prevent_initial_call=True, +) + +clientside_callback( + """ + function dash_contrast_clientside(contrast) { + js_path = "#image-viewer > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g" + changeContrast(js_path, contrast) + return "" + } + """, + Output("dummy-output", "children", allow_duplicate=True), + Input("figure-contrast", "value"), + prevent_initial_call=True, ) diff --git a/components/control_bar.py b/components/control_bar.py index 1ea2bb91..951fd252 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -85,6 +85,16 @@ def layout(): size="sm", ), dmc.Space(h=5), + dmc.Text("Contrast", size="sm"), + dmc.Slider( + id=f"figure-contrast", + value=[0, 255], + min=0, + max=255, + step=1, + color="gray", + size="sm", + ), ] ), ), From 2e143b54c62a75d5eda295f23349341cc0f229fe Mon Sep 17 00:00:00 2001 From: admin <51248046+danton267@users.noreply.github.com> Date: Mon, 10 Jul 2023 12:52:03 +0200 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20reset=20filters=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- callbacks/control_bar.py | 16 ++++++++++++++++ components/control_bar.py | 23 ++++++++++++++++++++--- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index 8c0e2291..1ddd2556 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -127,3 +127,19 @@ def annotation_visibility(checked, store, figure, image_idx): Input("figure-contrast", "value"), prevent_initial_call=True, ) + + +@callback( + Output("figure-brightness", "value", allow_duplicate=True), + Output("figure-contrast", "value", allow_duplicate=True), + Output("colormap-scale", "value", allow_duplicate=True), + Input("filters-reset", "n_clicks"), + State("colormap-scale", "min"), + State("colormap-scale", "max"), + prevent_initial_call=True, +) +def reset_filters(n_clicks, min_color, max_color): + default_brightness = 100 + default_contrast = 100 + default_colormap_scale = [min_color, max_color] + return default_brightness, default_contrast, default_colormap_scale diff --git a/components/control_bar.py b/components/control_bar.py index 951fd252..6bf505e9 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -62,9 +62,26 @@ def layout(): "image-transformations", children=html.Div( [ + dmc.ActionIcon( + dmc.Tooltip( + label="Reset filters", + children=[ + DashIconify( + icon="fluent:arrow-reset-32-regular", + width=20, + ), + ], + ), + size="lg", + variant="filled", + id="filters-reset", + n_clicks=0, + mb=10, + ml="auto", + ), dmc.Text("Colormap scalar range", size="sm"), dmc.RangeSlider( - id=f"colormap-scale", + id="colormap-scale", value=[0, 255], min=0, max=255, @@ -77,7 +94,7 @@ def layout(): dmc.Text("Brightness", size="sm"), dmc.Slider( id=f"figure-brightness", - value=[0, 255], + value=100, min=0, max=255, step=1, @@ -88,7 +105,7 @@ def layout(): dmc.Text("Contrast", size="sm"), dmc.Slider( id=f"figure-contrast", - value=[0, 255], + value=100, min=0, max=255, step=1, From 5e6eed87bee65f9fec875f4c780c4125f5425941 Mon Sep 17 00:00:00 2001 From: admin <51248046+danton267@users.noreply.github.com> Date: Mon, 10 Jul 2023 13:08:48 +0200 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20fix=20multiple=20fileters=20?= =?UTF-8?q?so=20they=20don't=20overwritte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/functions.js | 11 ++--------- callbacks/control_bar.py | 19 ++++--------------- 2 files changed, 6 insertions(+), 24 deletions(-) diff --git a/assets/functions.js b/assets/functions.js index 497f45f4..0309f5e6 100644 --- a/assets/functions.js +++ b/assets/functions.js @@ -1,14 +1,7 @@ -function changeBrightness(js_path, brightness) { +function changeFilters(js_path, brightness, contrast) { const element = document.querySelector(js_path); if (element) { // Apply the new brightness value to the element - element.style.filter = `brightness(${brightness}%)`; - } -} -function changeContrast(js_path, contrast) { - const element = document.querySelector(js_path); - if (element) { - // Apply the new contrast value to the element - element.style.filter = `contrast(${contrast}%)`; + element.style.filter = `brightness(${brightness}%) contrast(${contrast}%)`; } } \ No newline at end of file diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index 1ddd2556..06ca62aa 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -104,27 +104,16 @@ def annotation_visibility(checked, store, figure, image_idx): clientside_callback( """ - function dash_brigthness_clientside(brightness) { + function dash_filters_clientside(brightness, contrast) { + console.log(brightness, contrast) js_path = "#image-viewer > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g" - changeBrightness(js_path, brightness) - return "" - } - """, - Output("dummy-output", "children", allow_duplicate=True), - Input("figure-brightness", "value"), - prevent_initial_call=True, -) - -clientside_callback( - """ - function dash_contrast_clientside(contrast) { - js_path = "#image-viewer > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g" - changeContrast(js_path, contrast) + changeFilters(js_path, brightness, contrast) return "" } """, Output("dummy-output", "children", allow_duplicate=True), Input("figure-contrast", "value"), + Input("figure-brightness", "value"), prevent_initial_call=True, ) From a3386f929986cb1c0daed43fe9254cb25478d563 Mon Sep 17 00:00:00 2001 From: hannahker Date: Tue, 11 Jul 2023 13:02:57 -0700 Subject: [PATCH 5/5] Change order of inputs --- callbacks/control_bar.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index a880747c..11e02315 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -109,8 +109,8 @@ def annotation_visibility(checked, store, figure, image_idx): } """, Output("dummy-output", "children", allow_duplicate=True), - Input("figure-contrast", "value"), Input("figure-brightness", "value"), + Input("figure-contrast", "value"), prevent_initial_call=True, )