Design Simple Circuits Online

by mischka in Circuits > Software

46231 Views, 18 Favorites, 0 Comments

Design Simple Circuits Online

webtronics1.png

Sometimes you need a simple schematic of your circuit to illustrate your instructable or something else. If you simply want to connect some basic parts a professional tool like EagleCad might be a huge overkill.

I suggest to use Webtronics instead. The software is still under developemet but already useful. You dont have to setup the program on your computer, it runs directly in your webbrowser. So you may try it right now by clicking the link.

Features:
  • very simple and intuitive
  • import svg vector graphics
  • exports svg vector graphics
  • runs in a webbrowser - no need to install software
Cons:
  • only a few parts in the parts list
  • very basic

Menu

webtronics2.png

So lets have a closer look at the menu. From left to right there are ten buttons:
  1. Import file - lets you import any svg graphic
  2. Clear the drawing area - remove everything from your sheet
  3. make chips - design ICs
  4. get parts - Parts list, choose your part
  5. click this to zoom out, select an area to zoom in
  6. select shapes
  7. click to start wire - wire your circuit
  8. add text
  9. delete selected shape
  10. save the file - as svg graphic
After getting this short overview, we can start drawing in the next step.

Add Parts

webtronics3.png
webtronics4.png
webtronics5.png
webtronics8.png
Choose the "get parts" button to add some parts to the drawing area. You get a list of the available parts. Choose your part and click the green check mark. Place the part where you want and klick the left mouse button. You can rotate it by clicking "rotate" :-). Simple, isnt it?

Add all the parts you need and proceed to the next step for adding integrated circuits (chips).

Adding Integrated Circuits (chips)

webtronics6.png
webtronics7.png
You may use ICs in your circuit. Instead of providing templates for every known chip, the software gives you the option to draw custom ICs. Click on the "make chips" button and choose the number of contacts the IC has. You can choose horizontal and vertical contacts to make custom symbols for ICs.

Wire the Circuit

webtronics9.png
webtronics10.png
webtronics11.png

Click on the "click to start wire" button. You may also choose "show connections" to show the connection marks. Now you can draw the wire like you draw lines with your paint software.

Add Text

webtronics12.png
webtronics13.png
webtronics14.png
If you want to label your parts or add some descriptive text to your graphic, push the "add text" button and enter some words. You can place the text similar to placing the parts.

Save and Convert the File

webtronics15.png
schematic.jpg
If you're done, push the "save the file" button to export it as a svg-graphic. You may convert it to a png or jpg using GIMP or a similar software.

I hope this short overview helps you to get fast and good results. I am not the author of webtronics, I just found it useful and smart for simple circuits. You may do the same or not. Tell your opinion in the comments!

Downloads