A Streamlit custom component for a free drawing canvas using Fabric.js.
Project description
Streamlit - Drawable Canvas
Streamlit component which provides a sketching canvas using Fabric.js.
Features
- Draw freely, lines, circles and boxes on the canvas, with options on stroke & fill
- Rotate, skew, scale, move any object of the canvas on demand
- Select a background color or image to draw on
- Get image data and every drawn object properties back to Streamlit !
- Choose to fetch back data in realtime or on demand
Installation
pip install streamlit-drawable-canvas
Example Usage
import streamlit as st
from streamlit_drawable_canvas import st_canvas
# Specify canvas parameters in application
stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 3)
stroke_color = st.sidebar.beta_color_picker("Stroke color hex: ")
bg_color = st.sidebar.beta_color_picker("Background color hex: ", "#eee")
bg_image = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
drawing_mode = st.sidebar.selectbox(
"Drawing tool:", ("freedraw", "line", "rect", "circle", "transform")
)
realtime_update = st.sidebar.checkbox("Update in realtime?", True)
update_button = False
if not realtime_update:
update_button = st.sidebar.button('Send data to Streamlit')
# Create a canvas component
canvas_result = st_canvas(
fill_color="rgba(255, 165, 0, 0.3)", # Fixed fill color with some opacity
stroke_width=stroke_width,
stroke_color=stroke_color,
background_color="" if bg_image else bg_color,
background_image=Image.open(bg_image) if bg_image else None,
update_streamlit=realtime_update or update_button,
height=150,
drawing_mode=drawing_mode,
key="canvas",
)
# Do something interesting with the image data
if canvas_result.image_data is not None:
st.image(canvas_result.image_data)
st.dataframe(pd.json_normalize(canvas_result.json_data["objects"]))
Development
Install
- JS side
cd frontend
npm install
- Python side
conda create -n streamlit-drawable-canvas python=3.7
conda activate streamlit-drawable-canvas
pip install -e .
Run
Both webpack dev server and Streamlit should run at the same time.
- JS side
cd frontend
npm run start
- Python side
streamlit run app.py
Cypress integration tests
- Install Cypress:
cd e2e; npm i
ornpx install cypress
(with--force
if cache problem) - Start Streamlit frontend server:
cd streamlit_drawable_canvas/frontend; npm run start
- Start Streamlit test script:
streamlit run e2e/app_to_test.py
- Start Cypress app:
cd e2e; npm run cypress:open
References
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Close
Hashes for streamlit-drawable-canvas-0.4.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 384824bc94b9c2f64921c9b9dabfb420f95d0b5508cc60d7697ae1cf2cc375d8 |
|
MD5 | cc003534d4dc1825e109ca5467b5fd98 |
|
BLAKE2b-256 | ca50ca6a152e7f665001e452fef85d487bd0632083f62ea14777fd7989c8fdc1 |
Close
Hashes for streamlit_drawable_canvas-0.4.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9ea2d9fb0e58fb26bacd91bbcb86ff3005d2ef2417dc27a155f6274b2fead089 |
|
MD5 | c74fdaf1a7cad4f7dfa67d9664a5253d |
|
BLAKE2b-256 | f5d9bd021e56fe8e1c7c2b2f9e54a7a6b23c64dcd09312b64d237c941ab7000e |