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 -i https://test.pypi.org/simple/ streamlit-drawable-canvas
Example Usage
import streamlit as st
from streamlit_drawable_canvas import st_canvas
# Specify brush parameters and drawing mode
b_width = st.sidebar.slider("Brush width: ", 1, 100, 10)
b_color = st.sidebar.beta_color_picker("Enter brush color hex: ")
bg_color = st.sidebar.beta_color_picker("Enter background color hex: ", "#eee")
drawing_mode = st.sidebar.checkbox("Drawing mode ?", True)
# Create a canvas component
image_data = st_canvas(
b_width, b_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 streamlit-0.61.0-py2.py3-none-any.whl
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.1.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 98421318951f9174ec9e981f75b8321a726101d590b1c7746abe3b9cd40324e9 |
|
MD5 | 9e87608f4c6bdf55e4528787b8363fbb |
|
BLAKE2b-256 | 2a5645cd13ff46e04533b54bd0f8c5104f4b946a9b583525ee0565cd39432ef8 |
Close
Hashes for streamlit_drawable_canvas-0.1.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 336456b31335b9bb79ec1acabce01dacff03c4026de1ac63c287c405d6fee3d2 |
|
MD5 | cae40dc92630f9fc28c653ef498008bf |
|
BLAKE2b-256 | 9e34cc0504494d64f3b7160e2fb70853c4e6bdf8daa29d51389613408c3ad703 |