andfanilo / Streamlit Drawable Canvas
Licence: mit
Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.
Stars: ✭ 79
Programming Languages
python
139335 projects - #7 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Streamlit Drawable Canvas
React Annotation Tool
A React based image & video annotation tool
Stars: ✭ 51 (-35.44%)
Mutual labels: image-annotation
Awesome Data Labeling
A curated list of awesome data labeling tools
Stars: ✭ 1,120 (+1317.72%)
Mutual labels: image-annotation
Maker.js
📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
Stars: ✭ 1,185 (+1400%)
Mutual labels: drawing
Leaflet Geoman
🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers
Stars: ✭ 1,088 (+1277.22%)
Mutual labels: drawing
Maliang
iOS painting and drawing library based on Metal. 神笔马良有一支神笔(基于 Metal 的涂鸦绘图库)
Stars: ✭ 1,117 (+1313.92%)
Mutual labels: drawing
Coco Annotator
✏️ Web-based image segmentation tool for object detection, localization, and keypoints
Stars: ✭ 1,138 (+1340.51%)
Mutual labels: image-annotation
Livechart
Android library to draw beautiful and rich line charts.
Stars: ✭ 78 (-1.27%)
Mutual labels: drawing
Notation
✏️ A simple web app to make drawings that are easy to embed, particularly for Notion.so.
Stars: ✭ 63 (-20.25%)
Mutual labels: drawing
Pencil
The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
Stars: ✭ 8,225 (+10311.39%)
Mutual labels: drawing
Dijkstra Cartography
Using Dijkstra's algorithm ("finding the shortest paths between nodes in a graph") to draw maps 🌍.
Stars: ✭ 1,112 (+1307.59%)
Mutual labels: drawing
Generic django project
starting point for a new Django site (with FeinCMS, deployable on Nginx using Fabric)
Stars: ✭ 76 (-3.8%)
Mutual labels: fabric
Mopaint
🎨💪 Modern, modular paint and more! (pre-alpha, not much done yet)
Stars: ✭ 50 (-36.71%)
Mutual labels: drawing
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 with a button
- Undo, Redo or Drop canvas
- Save canvas data as JSON to reuse for another session
Installation
pip install streamlit-drawable-canvas
Example Usage
Copy this code snippet:
import pandas as pd
from PIL import Image
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.color_picker("Stroke color hex: ")
bg_color = st.sidebar.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)
# 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,
height=150,
drawing_mode=drawing_mode,
key="canvas",
)
# Do something interesting with the image data and paths
if canvas_result.image_data is not None:
st.image(canvas_result.image_data)
if canvas_result.json_data is not None:
st.dataframe(pd.json_normalize(canvas_result.json_data["objects"]))
Consult the st_canvas
API docs for more information on each argument.
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
- react-sketch
- React hooks - fabric
- Simulate Retina display
- High DPI Canvas
- Drawing with FabricJS and TypeScript Part 2: Straight Lines
- Drawing with FabricJS and TypeScript Part 7: Undo/Redo
- Types for classes as values in TypeScript
- Working with iframes in Cypress
- How to use useReducer in React Hooks for performance optimization
- Understanding React Default Props
- How to avoid passing callbacks down?
-
Examples of the useReducer Hook The
useRef
hook allows you to create a persistent ref to a DOM node, or really to any value. React will persist this value between re-renders (between calls to your component function). - CSS filter generator to convert from black to target hex color
- When does React re-render components?
- Immutable Update Patterns
- Icons by Freepik, Google, Mavadee.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].