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.
Installation
pip install streamlit-drawable-canvas
Example Usage
import streamlit as st
from streamlit_drawable_canvas import st_canvas
# Specify brush parameters and drawing mode
stroke_width = st.sidebar.slider("Stroke width: ", 1, 100, 10)
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", "transform")
)
# 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,
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
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.3.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 64ffa3c31be94d3f3a60b778cbcf3a0a8dbfa8d19eaf6ba813cd6c066e6f2f61 |
|
MD5 | 65d733c906d3a0b8ed0c391bdf403c49 |
|
BLAKE2b-256 | c221c3026290afaca7f6a76f1f560723b5c37f8f6fd5d3b6e265f393e89d6928 |
Close
Hashes for streamlit_drawable_canvas-0.3.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | fb4a716bbc4ef27359b844d397c3d7c8537a9f6ac9aaf449df05605ad10bc592 |
|
MD5 | 4b04d57531158101ab3b7f5bd2bfc924 |
|
BLAKE2b-256 | bc9ce2c3990d9945d9c899012bdfee0613de34549f5f4c432422bd549a30c553 |