circuit-sketcher-app

An application to draw circuits on a canvas. It is based on the code-forge-temple/circuit-sketcher-core.

Table of Contents

• Features
• Development
  • Installation
  • Building
  • Linting
  • Preview
• Demo
• License

Features

• Draw and save circuit diagrams
• Load and save canvas and library data
• Save to Local Storage Library the customized circuit nodes
• Responsive design
• Interactive user interface

Development

Installation

1. Clone the repository:

   git clone https://github.com/code-forge-temple/circuit-sketcher-app.git
   cd circuit-sketcher-app

2. Set the Node.js version:

   • For Unix-based systems:

     nvm use

   • For Windows:

     nvm use $(cat .nvmrc)

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Building

To build the project for production, run:

npm run build

Linting

To lint the project, run:

npm run lint

Preview

To preview the production build, run:

npm run preview

Usage

1. Open the deployed version of the application here.
2. Start drawing your circuit on the canvas:
   • On the canvas, right-click to show the canvas menu, and select Create Node.
   • Right-click on the node to show the node menu, select Change Image, and choose an image relevant to your circuit node.
   • Right-click on the node to show the node menu, select Add Port, and choose the port location and type.
   • You can rename the circuit node label or port label by double-clicking on the label. The port or port label can also be deleted (right-click on the port to show the port menu and proceed from there).
   • You can relocate ports, either to a different node side or rearrange the ports on the same side, by dragging and dropping the port to the desired location within the dotted blue area.
   • After you are satisfied with your changes to the circuit node, and if you wish to save the circuit node to reuse it in the current or a different .circuit-sketcher file, you can right-click on the circuit node and press Save Node to Library (this will update the root Obsidian vault circuit-sketcher.lib file).
   • You can reuse the node by right-clicking on the canvas and selecting Add Node from Library.
   • Connections between circuit nodes can be made by dragging and dropping one port to the destination port (if it is a compatible port). You can delete a connection by selecting it and then pressing the Delete key.
   • You can drag the entire circuit by holding the mouse scroll button and moving the mouse.

A short video tutorial on how to use the application (the video is showcasing the Obsidian plugin version of the Circuit Sketcher but the core functionality is the same):

Demo

You can view the deployed version of the application here.

License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.