I am annotation regions of interest (ROI) and displaying them in a dataframe for a text extraction app. I would like to auto generate an incrementing tag for the regions, e.g. region_1, region_2 etc and have this displayed inside the annotation and also in the dataframe, so that people can associate the data. Is this currently possible, or a feature request? Cheers and great work!

Hi! Thanks for the super cool package. As the title says st_canvas displays a cropped background image even though the heightand width of the canvas are set acc. to the image dimensions.

Here's my code:

    canvas_result = st_canvas(
            stroke_color='#fff',
            stroke_width=stroke_width,
            background_color='#000',
            background_image=image.copy(),
            height = image.size[1],
            width = image.size[0],
            update_streamlit=realtime_update,
            drawing_mode = drawing_mode,
            key = "canvas",
            )

Am I doing something wrong?

Hi I was wondering if you can point me to where I can adjust code to only produce straight line segments.

I'm currently going through the repo myself, but I'd appreciate any advice on this!

Best, Theodore.

To further proceed with the canvas result, image_data, I need to know its type to work with opencv. Can you suggest a way that will work for opencv functions as well as displaying the image with st.image()

I found it might be more reasonable to limit the circle and the rectangle to their minimal size by the width of stroke width. Without the limitation, I have been occasionally added some "very tiny" circles or rectangles on the canvas and didn't aware it.

I have intermediate Python experience but nothing about web apps nor typescript (very beginner understanding about JS). Therefore I tried to modify the code by guessing the rules from the original code base, and there are probably some bad programming styles or practices.

Also this is my first PR. I've tried to get rid of the unwanted files (i.e., the folder named test_app/) but got no luck. In short, only circle.ts and rect.ts are relevant in this PR. If there are anything I can study from please also let me know.

I'm working on a front end for a neural search framework to take a user's drawing and match it with the closest looking Pokemon: https://github.com/alexcg1/jina-streamlit-frontend

My goal is to have the user draw on the canvas, then click button to export that drawing into a base64 encoded png, which I then pass to Jina via REST API.

How can I take the np.ndarray generated by the canvas and convert that to a png? I've been trying a few things so far, but all I get is a blank transparent png in the canvas dimensions.

I'm working on the code in the draw branch: https://github.com/alexcg1/jina-streamlit-frontend/tree/draw

Thanks for putting together a cool project. I can't wait to get it working!

I reduce sending data from ImageData to DataURL. It's very compact and faster to transfer information when the canvas is large.

for example, I reduce from 7MB to 74kB with the same canvas size

One more feature request; is it possible to be able to alter the transparency of the brush colour when in freedraw mode? Currently, when I alter the hex value to be semi-transparent, the brush colour is always fully opaque. This feature would be particularly useful when we want to identify two overlapping paths in an image.

This code is trying to add polygon/polyline function as mentioned in issue #10 .

What I have done is to use left clicks to add points and right click to complete the polygon.

The polygon was drawn by creating a string which was formatted as a fabric.Path. (My reference is Introduction to Fabric.js)

Because I have no idea about how to control the fabric.Path, so finally my workaround is to create temporary line segments to show the polygon's strokes, and temporary polygons to "update" during the drawing process. All of the temporary objects will be removed when the polygon is completed.

The path json data shown in the test app is in the form of [['M', 176, 109], ['L', 293, 26], ['L', 356, 75], ['L', 300, 106], ['L', 293, 75], ['z']], for example.

This PR fixes an issue where image URLs are not correctly handled when a streamlit app is not exposed on the root of the domain. I think it fixes https://github.com/andfanilo/streamlit-drawable-canvas/issues/83

Basically, we always pass a relative URL on the Python side, then we reconstruct the full URL on the frontend. This works both in development and in deployment, so it removes the need for these lines

Hi!

Great streamlit component! I want to calculate the path length (ie: total distance in pixels) for the freedraw and line tool. For the line tool, it's pretty straightforward by applying the Pythagorean theorem using the width and height provided. But I'm having a little trouble figuring out the best/most efficient way to do this for the freedraw tool.

Any advice for be greatly appreciated. Thanks!

Jethro

Hi, I am using the streamlit canvas element to build a demo app for a deep learning project and ran into a couple of issues. I've provided the app flow below for additional context.

1. User uploads an image (the image is read, resized and displayed on the canvas)
2. Bounding boxes for three objects are drawn by the user using the "rect" drawing mode. (The bounding box values are displayed as a data frame)
3. Once done, the user clicks on submit to pass the image and bounding box coordinates to the DL model for inference
4. The model returns a torch.Tensor. Which is converted to a numpy array and displayed using an image element.

When I upload a new image for testing, the bounding boxes draw for the pervious image are superimposed on the new image. Also, the data frame displayed for the previous image, is also displayed below the new image. I also tried to delete all the entries in the st.sesstion_state, but still does't work.

I have provide the code below (please ignore the model_run function call) I am not sure what I am doing wrong, any help on this would be much appreciated.

def main():
    about()
    main_app()


def clear_session():
    for key in st.session_state.keys():
        del st.session_state[key]

def main_app():
    drawing_mode = "rect"
    fill_color = "#00000000"
    stroke_width = st.sidebar.slider("Strok width", min_value=1, max_value=3, value=2)
    stroke_color = st.sidebar.color_picker("Stroke color hex code: ", "#FFFB00")
    uploaded_file = st.sidebar.file_uploader("Background image", type=["jpg", "jpeg"])
    realtime_update = st.sidebar.checkbox("Update in real time", True)
    if uploaded_file is not None:
        image = Image.open(uploaded_file)
        image = image.resize((512, 512))
    else:
        image = None
    #create a canvas element
    st.text("Uploaded image")
    canvas_result = st_canvas(
        fill_color= fill_color,
        stroke_width = stroke_width,
        height=512,
        width=512,
        stroke_color = stroke_color,
        drawing_mode=drawing_mode,
        background_image= image,
        update_streamlit= realtime_update,
        key="main_app",
    )
    btn_placeholder = st.empty()    
    btn_placeholder.button('Submit', disabled=True, key="dummy_btn")
    if canvas_result.json_data is not None:
        df = pd.json_normalize(canvas_result.json_data["objects"])
        if len(df) == 0:
            return
        anno_df = df[["top", "left", "width", "height"]]
        st.dataframe(anno_df)
        if len(anno_df) == 3:
            bbox1, bbox2, bbox3 = anno_df.iloc[0].to_list(), anno_df.iloc[1].to_list(), anno_df.iloc[2].to_list()
            btn_placeholder.button('Submit', disabled=False, key="submit-btn")

               
    st.text("Predicted image")
    pred_map_placeholder = st.empty()
    if "submit-btn" in st.session_state and st.session_state["submit-btn"]:
        with st.spinner('Running model inference.'):
            bbox_list = [bbox1, bbox2, bbox3]
            pred_map = model_run(image, bbox_list)
            count = round(pred_map.sum().item())
            pred_map_placeholder.image(pred_map)
            st.write(f"Count: {count}")
        st.success('Done!')
        st.button("Clear", on_click=clear_session, key="clear-btn")
        
          
if __name__ == "__main__":
    st.set_page_config(page_title="Sample")
    st.title("Sample")
    st.sidebar.subheader("Configuration")
    main()```

I would like to have a large canvas, but it may not fit on the screen. Can I zoom in on a specific part of the canvas? Or I would like to be able to scroll horizontally.

Hello, I'm new to Streamlit. I want to create a static ROI in streamlit, for this, I created a Json file like (saved_state.json) with a rectangle type. I used initial_drawing to display my rectangle in the application.

The problem is that this rectangle is dynamic, is there any way to make this rectangle static (user can't change its size, he can just change its position). Thanks in advance for the answer.    

I feel like the repo lacks some troubleshooting documentation on how to use the JSON data from the canvas.

In my case, I lost some time wondering why transforming a rectangle did not change its width and heigth before stumbling upon the issue #36.

I think a troubleshooting documentation, or even a documentation on the fields from the JSON data, could be very useful for this repo!

I noticed a bug, which seem to have been discussed at #79 and on the forum.

Context: I'm on a multipage streamlit, and I try to display a canvas with a background image (and sized to this image) in order to draw boxes to create new annotations. Just after displaying the canvas, I try to access the JSON data to display drawn boxes and let the user choose the annotation. I noticed that the canvas often disappears <1 second after loading. I don't observe this issue at each loading, but maybe close to 50% of the loadings.

I tried 2 methods (I did not see that some people retrograded to 0.7.0 at that time):

• I waited for 1 second just after the canvas loading with time.sleep(1). It's obviously not a good fix, but it resolved the issue in most cases
• I changed the update_streamlit parameter to False. ~~The problem completely disappeared!~~

~~Therefore, it seems that it is linked to some issue during the loading of the canvas' state.~~

Here's my configuration: python==3.7.12 streamlit==1.12.2 streamlit-drawable-canvas==0.9.0

Hope this helps!

EDIT: Seems like changing the update_streamlit parameter to False was not sufficient, even though it appears the problem is less frequent.