A Streamlit custom component for a free drawing canvas using Fabric.js.
Project description
Streamlit - Drawable Canvas
A Streamlit custom component for a free drawing canvas with 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("Enter background color hex: ", "#eee")
drawing_mode = st.sidebar.selectbox("Drawing mode", ("freedraw", "line", "transform"))
# Create a canvas component
image_data = st_canvas(
stroke_width,
stroke_color,
bg_color,
height=150,
drawing_mode=drawing_mode,
key="canvas",
)
# Do something interesting with the image data
if image_data is not None:
st.image(image_data)
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.2.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 85b6e55efc6aabc37f4a76d7835747a7a64d725153c7876e1930e28f7228635e |
|
MD5 | b6886ff1cf3c98632535afaf5eafebb9 |
|
BLAKE2b-256 | 435fba2a6ded875a7c5da3448d595ac22cd705579cdcecc537b33934739c13ca |
Close
Hashes for streamlit_drawable_canvas-0.2.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 892775c78bb63f705af81db379e3a7b554a85e600ace182c7ba6bea6ed942b5a |
|
MD5 | 9264fd5d72e10c64832f1811873360e2 |
|
BLAKE2b-256 | f141da271beb4bef469ed2c31769a0553a1fae2219fc635634633dcc48525f5a |