/draw-concept-tool

A concept drawing program written in JavaScript

Primary LanguageJavaScriptMIT LicenseMIT

Draw Concept Tool

The Draw Concept Tool is a minimalist web-based application for creating, editing, and exploring graphical concepts on a canvas. Powered by p5.js and Quicksettings libraries.

Features

  • Canvas Interaction: Draw, resize, rotate, and move various graphical elements (e.g., rectangle, ellipse, images, symbols, etc.) on the canvas.
  • User Interface: Easy-to-use interface with essential buttons, panels, and toolbars that provide quick access to necessary functionalities and tools.
  • Copy-Paste: Copy and paste elements using keyboard shortcuts (Ctrl + C, Ctrl + V).
  • Undo & Redo: Maintain control over your edits with the undo and redo functionality to revert or reapply changes.
  • Keyboard Shortcuts: Accelerate your workflow with customizable keyboard shortcuts for various actions, more details in 'Help' button.
  • Multiple Selection: Select multiple elements by holding Ctrl and clicking, or by using the 'Select' tool to draw a rectangle around items.
  • Save & Load: Save and load your creations, using JSON format + '✔️' save button to restore work even after refreshing the page using browser storage.
  • Layers: Organize graphical elements into layers with convenient options for reordering.
  • Ruler and Grid: Achieve precise positioning and alignment of graphical elements with built-in rulers and grid support.
  • Exporting: Share your concept drawings by exporting them as image file or JSON data for use in various contexts.
  • Interactive Settings: Adjust parameters and properties of graphical elements in real-time using the interactive Quicksettings library.

Demo

Check out the live demo here.

Floor Plan Creation: Floor Plan Demo GIF Download JSON.

Image Annotation: Image Annotation Demo GIF Download JSON.

Concept Mapping: Concept Map Demo GIF Download JSON.

Getting Started

  1. Clone the repository.

  2. install Nodejs & NPM

  3. Run the development server :

npm start
  1. Open http://localhost:3000 with your browser to see the result.

Contributions

Contributions to the Draw Concept Tool project are highly encouraged. If you encounter any issues or have ideas for enhancements, please feel free to open an issue or submit a pull request.

License

The Draw Concept Tool is an open-source software released under the MIT License.

Acknowledgments

We extend our gratitude to :

  • p5.js : JavaScript library for interactive graphics and animations.
  • quicksettings : JavaScript library for making a quick settings panel to control code.
  • Undo Manager : Simple JavaScript library for undo and redo.

Embrace the simplicity and creative freedom of the Draw Concept Tool to bring your graphical concepts to life!