Merge pull request #21 from mlexchange/change-color-sliders

clientside image transformation filters
mlexchange · Jul 11, 2023 · b72e7a9 · b72e7a9
2 parents 739f3f2 + a3386f9
commit b72e7a9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 2 deletions.
diff --git a/assets/functions.js b/assets/functions.js
@@ -0,0 +1,7 @@
+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}%) contrast(${contrast}%)`;
+    }
+}
diff --git 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, data
@@ -97,3 +97,35 @@ def annotation_visibility(checked, store, figure, image_idx):
         patched_figure["layout"]["shapes"] = []
 
     return store, patched_figure
+
+
+clientside_callback(
+    """
+    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"
+        changeFilters(js_path, brightness, contrast)
+        return ""
+    }
+    """,
+    Output("dummy-output", "children", allow_duplicate=True),
+    Input("figure-brightness", "value"),
+    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
@@ -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,
@@ -74,6 +91,27 @@ def layout():
                                     size="sm",
                                 ),
                                 dmc.Space(h=5),
+                                dmc.Text("Brightness", size="sm"),
+                                dmc.Slider(
+                                    id=f"figure-brightness",
+                                    value=100,
+                                    min=0,
+                                    max=255,
+                                    step=1,
+                                    color="gray",
+                                    size="sm",
+                                ),
+                                dmc.Space(h=5),
+                                dmc.Text("Contrast", size="sm"),
+                                dmc.Slider(
+                                    id=f"figure-contrast",
+                                    value=100,
+                                    min=0,
+                                    max=255,
+                                    step=1,
+                                    color="gray",
+                                    size="sm",
+                                ),
                             ]
                         ),
                     ),
@@ -168,5 +206,7 @@ def layout():
                 ],
             ),
             dcc.Store(id="annotation-store", data={}),
+            dcc.Store(id="project-data"),
+            html.Div(id="dummy-output"),
         ],
     )