From 4ed865dd1a59f4e881be1e997f5611f544f02e61 Mon Sep 17 00:00:00 2001 From: Tammy Do <61042740+tamidodo@users.noreply.github.com> Date: Wed, 12 Jul 2023 10:07:36 -0700 Subject: [PATCH 1/2] add annotation buttons --- callbacks/control_bar.py | 26 +++++++++++++++ components/control_bar.py | 67 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 92 insertions(+), 1 deletion(-) diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index a06e319e..ad6537d8 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -4,6 +4,32 @@ from utils.data_utils import convert_hex_to_rgba, data +@callback( + Output("image-viewer", "figure", allow_duplicate=True), + Input("open-freeform", "n_clicks"), + Input("closed-freeform", "n_clicks"), + Input("circle", "n_clicks"), + Input("rectangle", "n_clicks"), + Input("drawing-off", "n_clicks"), + prevent_initial_call=True, +) +def annotation_mode(open, closed, circle, rect, off_mode): + """This callback determines which drawing mode the graph is in""" + patched_figure = Patch() + triggered = ctx.triggered_id + if triggered == "open-freeform" and open > 0: + patched_figure["layout"]["dragmode"] = "drawopenpath" + if triggered == "closed-freeform" and closed > 0: + patched_figure["layout"]["dragmode"] = "drawclosedpath" + if triggered == "circle" and circle > 0: + patched_figure["layout"]["dragmode"] = "drawcircle" + if triggered == "rectangle" and rect > 0: + patched_figure["layout"]["dragmode"] = "drawrect" + if triggered == "drawing-off" and off_mode > 0: + patched_figure["layout"]["dragmode"] = "pan" + return patched_figure + + @callback( Output("image-viewer", "figure", allow_duplicate=True), Input("paintbrush-width", "value"), diff --git a/components/control_bar.py b/components/control_bar.py index 03511219..dcf502e2 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -4,7 +4,7 @@ from utils import data_utils COMPONENT_STYLE = { - "width": "22.5vw", + "width": "25vw", "height": "calc(100vh - 40px)", "padding": "10px", "borderRadius": "5px", @@ -122,6 +122,71 @@ def layout(): ) ), dmc.Space(h=20), + dmc.Text("Annotation mode", size="sm"), + dmc.Grid( + children=[ + dmc.Col( + span=7, + children=[ + dmc.Button( + "Open Freeform", + id="open-freeform", + variant="outline", + color="gray", + leftIcon=DashIconify(icon="mdi:draw"), + style={"width": "100%"}, + ), + dmc.Space(h=5), + dmc.Button( + "Closed Freeform", + id="closed-freeform", + variant="outline", + color="gray", + leftIcon=DashIconify( + icon="fluent:draw-shape-20-regular" + ), + style={"width": "100%"}, + ), + ], + ), + dmc.Col( + span=5, + children=[ + dmc.Button( + "Circle", + id="circle", + variant="outline", + color="gray", + leftIcon=DashIconify( + icon="gg:shape-circle" + ), + style={"width": "100%"}, + ), + dmc.Space(h=5), + dmc.Button( + "Rectangle", + id="rectangle", + variant="outline", + color="gray", + leftIcon=DashIconify( + icon="gg:shape-square" + ), + style={"width": "100%"}, + ), + ], + ), + ] + ), + dmc.Space(h=5), + dmc.Button( + "Stop Drawing", + id="drawing-off", + variant="outline", + color="gray", + leftIcon=DashIconify(icon="el:off"), + style={"width": "100%"}, + ), + dmc.Space(h=20), dmc.Text("Paintbrush size", size="sm"), dmc.Slider( id="paintbrush-width", From a5926056acfefb942dc85b0c438b7cec6b667b55 Mon Sep 17 00:00:00 2001 From: Tammy Do <61042740+tamidodo@users.noreply.github.com> Date: Wed, 12 Jul 2023 12:45:47 -0700 Subject: [PATCH 2/2] made ui styling changes --- callbacks/control_bar.py | 29 ++++++++++- callbacks/image_viewer.py | 2 +- components/control_bar.py | 107 ++++++++++++++++++-------------------- 3 files changed, 79 insertions(+), 59 deletions(-) diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index ad6537d8..5e0b1c83 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -1,4 +1,14 @@ -from dash import Input, Output, State, callback, Patch, ALL, ctx, clientside_callback +from dash import ( + Input, + Output, + State, + callback, + Patch, + ALL, + ctx, + clientside_callback, + no_update, +) import dash_mantine_components as dmc import json from utils.data_utils import convert_hex_to_rgba, data @@ -6,6 +16,11 @@ @callback( Output("image-viewer", "figure", allow_duplicate=True), + Output("open-freeform", "style"), + Output("closed-freeform", "style"), + Output("circle", "style"), + Output("rectangle", "style"), + Output("drawing-off", "style"), Input("open-freeform", "n_clicks"), Input("closed-freeform", "n_clicks"), Input("circle", "n_clicks"), @@ -17,17 +32,27 @@ def annotation_mode(open, closed, circle, rect, off_mode): """This callback determines which drawing mode the graph is in""" patched_figure = Patch() triggered = ctx.triggered_id + open_style = {"border": "1px solid"} + close_style = {"border": "1px solid"} + circle_style = {"border": "1px solid"} + rect_style = {"border": "1px solid"} + pan_style = {"border": "1px solid"} if triggered == "open-freeform" and open > 0: patched_figure["layout"]["dragmode"] = "drawopenpath" + open_style = {"border": "3px solid black"} if triggered == "closed-freeform" and closed > 0: patched_figure["layout"]["dragmode"] = "drawclosedpath" + close_style = {"border": "3px solid black"} if triggered == "circle" and circle > 0: patched_figure["layout"]["dragmode"] = "drawcircle" + circle_style = {"border": "3px solid black"} if triggered == "rectangle" and rect > 0: patched_figure["layout"]["dragmode"] = "drawrect" + rect_style = {"border": "3px solid black"} if triggered == "drawing-off" and off_mode > 0: patched_figure["layout"]["dragmode"] = "pan" - return patched_figure + pan_style = {"border": "3px solid black"} + return patched_figure, open_style, close_style, circle_style, rect_style, pan_style @callback( diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index 779cb089..a10504e8 100644 --- a/callbacks/image_viewer.py +++ b/callbacks/image_viewer.py @@ -30,7 +30,7 @@ def render_image( margin=dict(l=0, r=0, t=0, b=0), xaxis=dict(visible=False), yaxis=dict(visible=False), - dragmode="pan", + dragmode="drawopenpath", height=620, width=620, paper_bgcolor="rgba(0,0,0,0)", diff --git a/components/control_bar.py b/components/control_bar.py index dcf502e2..f6f2a172 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -123,68 +123,63 @@ def layout(): ), dmc.Space(h=20), dmc.Text("Annotation mode", size="sm"), - dmc.Grid( + dmc.Group( + spacing="xs", + grow=True, children=[ - dmc.Col( - span=7, - children=[ - dmc.Button( - "Open Freeform", - id="open-freeform", - variant="outline", - color="gray", - leftIcon=DashIconify(icon="mdi:draw"), - style={"width": "100%"}, - ), - dmc.Space(h=5), - dmc.Button( - "Closed Freeform", - id="closed-freeform", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="fluent:draw-shape-20-regular" - ), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="open-freeform", + variant="outline", + color="gray", + children=DashIconify(icon="mdi:draw"), + style={"border": "3px solid black"}, + ), + label="Open Freeform", + ), + dmc.Tooltip( + dmc.ActionIcon( + id="closed-freeform", + variant="outline", + color="gray", + children=DashIconify( + icon="fluent:draw-shape-20-regular" ), - ], + ), + label="Closed Freeform", ), - dmc.Col( - span=5, - children=[ - dmc.Button( - "Circle", - id="circle", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="gg:shape-circle" - ), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="circle", + variant="outline", + color="gray", + children=DashIconify( + icon="gg:shape-circle" ), - dmc.Space(h=5), - dmc.Button( - "Rectangle", - id="rectangle", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="gg:shape-square" - ), - style={"width": "100%"}, + ), + label="Circle", + ), + dmc.Tooltip( + dmc.ActionIcon( + id="rectangle", + variant="outline", + color="gray", + children=DashIconify( + icon="gg:shape-square" ), - ], + ), + label="Rectangle", ), - ] - ), - dmc.Space(h=5), - dmc.Button( - "Stop Drawing", - id="drawing-off", - variant="outline", - color="gray", - leftIcon=DashIconify(icon="el:off"), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="drawing-off", + variant="outline", + color="gray", + children=DashIconify(icon="el:off"), + ), + label="Stop Drawing", + ), + ], ), dmc.Space(h=20), dmc.Text("Paintbrush size", size="sm"),