Initial_drawing from csv

Custom Components
1

Hello everybody,

I don’t clearly understand how initial_drawing is working and I don’t found an explicit example of uses.
I store some data from drawable canvas in a csv (originX, originY, height,width …)
And i would like to know how it is possible to pre draw something from a line of this csv using initial_drawing (or other).
If someone could give me an example of initial_drawing expression without using a json. For example if i want to use :
initial_drawing = (x,y,height,width)
In fact my apply will recognize the pictures and pre draw the component that was stored for this image.

2

Hey @Dorian_Grousset,

@andfanilo would be the expert here, but I am under the impression that initial_drawing only takes JSON data.

Here is some info I was able to find on initial_drawing:

initial_drawing : Initialize canvas with drawings from here. Should be the json_data output from other canvas. Beware: if you try to import a drawing from a bigger/smaller canvas, no rescaling is done in the canvas and the import could fail.

import streamlit as st
from streamlit_drawable_canvas import st_canvas

canvas_result = st_canvas()
st_canvas(initial_drawing=canvas_result.json_data)

import json
from pathlib import Path

import streamlit as st
from PIL import Image
from streamlit_drawable_canvas import st_canvas

with open("star_state.json", "r") as f:
    star_state = json.load(f)

canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",
    background_image=Image.open("img/tennis-balls.jpg"),
    update_streamlit=False,
    height=150,
    initial_drawing=star_state,
    key="full_app",
3

Yes, the initial_drawing argument is usually used by people who export the JSON from a previous drawing and want to reload it later.
You can process your CSV into a Python dict though. If you need an example of structure, check out streamlit-drawable-canvas-demo/saved_state.json at master · andfanilo/streamlit-drawable-canvas-demo · GitHub or try to draw a rectangle, export the JSON and structure your CSV to JSON in a similar way
But yeah since different shapes have different JSON structures I can’t automatically map every CSV to its desired shape, so I let that transformation to the user

Have a nice day,
Fanilo

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.