Introduction: How to Use Circuits.io for Arduino Projects (and Embed Projects on Other Sites)

Recently, after my fun with Arduino Starter Kit I have looked for online, cloud-based Arduino editor/simulator.

In the past I heard about codebender.cc, but now it is changing and new registrations are disabled.

Alternatives Which I found are:

https://cloud.arduino.cc/

https://circuits.io

Good feature would be to make it possible to embed project on Instructables.com and other sites.

So, I decided to try circuits.io, what I'll describe below.

All the pics are animated gifs, demonstrating each step - step by step;)

If You don't see the animation, check Your browser settings

Step 1: Sign Up/Sign In

The first step is to Sign In.

It is possible Sign In with Facebook account. I have created new account (Sign up).

After that we'll see the main page and start to work...

Step 2: Create New Project

On the top right side click the big plus sign and select New Electronic Lab.

Now You can see the workbench.

Step 3: Add Components and Wires

In the workbench we can build our circuits by adding components and connecting it.

There are available various components from the basic electronic components like resistors, capacitors, etc to breadboard and programmable components like Arduino.

On the top bar, after switching editor to another view is possible to edit schematic or PCB. The default view is breadboard.

Step 4: Write the Code & Simulate

The next step is writing the program for Arduino.

Code editor is available at the bottom, after click to Code Editor Button;) During writing code, You can simulate the circuit (by clicking Upload & Run).

Standard Arduino tools, like Serial Monitor are available. Debugger is available too.

Step 5: Embed It!

We can share our project by embedding it to our website, blog, etc.

I'll show how to do it on the example of Instructables.com.

Click Show more button on the top and select Share & Embed. Now copy the html code and paste to the website (in source) where you want to show the project.

Live example of how it works You can see in my another Instructable.

Comments

author
UncleEd made it! (author)2017-01-15

+1 on recommending the circuits.io site. Its capabilities are impressive. A time or two, it found hookup errors I hadn't noticed. (My paper and pencil diagram were correct but I hadn't connected it that way.) It's also funny if you leave out the current limiting resistor on an LED.

author
Rian_C made it! (author)Rian_C2017-01-15

LED without resistor - I tried it, fortunately without smoke ;)

Screenshot_20170116_004726.png
author
UncleEd made it! (author)UncleEd2017-01-16

Yes. I just like the flash effect on the LED. We could suppose that with 16V and 2A, this one is going to be dark rather quickly.

About This Instructable

839views

25favorites

License:

Bio: {{ F*** Murphy's Laws!!! ;) }}
More by Rian_C:Mainboard ClockHow to use circuits.io for Arduino projects (and embed projects on other sites)BjTerm. Arduino Thermometer with analog sensor and bargraph
Add instructable to: