1
University of Kelaniya, Sri Lanka
Dr. (Mrs.) Tharaga Sharmilan
Department of Applied Computing
Faculty of Computing and Technology
E-Mail – shtha191@kln.ac.lk
2
ETIA 31423
Introduction to Microprocessors and
Embedded Systems
2023 -Year 3 -Semester I
Getting started with Wokwi
By Tharaga Sharmilan
Department of Applied Computing, Faculty of Computing and Technology, University of Kelaniya, Sri Lanka
Welcome to Wokwi!
• Wokwi is an online Electronics simulator.
• You can use it to simulate Arduino, ESP32, and many
other popular boards, parts, and sensors.
Why Wokwi?
• Start right now
• No waiting for components or downloading large
software.
• In seconds, your browser has everything you need to start
coding your next IoT project.
• Mistakes are okay
• You can't destroy the virtual hardware.
• So don't worry about frying your precious components.
• Unlike real hardware, you can always undo it.
• Easy to get help and feedback
• Sharing a link to your Wokwi project is all you need.
Why Wokwi?
• Gain confidence in your code.
• Separate hardware and software issues.
• Unlimited hardware
• No need to scavenge parts from old projects.
• Use as many parts as you need without worrying about
project price and stock.
• Maker-friendly community
• A place for you to share your projects, ask for help and
get inspiration.
How much does it cost?
• Wokwi is free to use.
• Professional and frequent users can join the Club,
influence our development roadmap, and get
access to advanced features.
Interactive Diagram Editor
The diagram editor provides an interactive way
to edit your diagram:
• Add components to the simulation
• Define the connections between them
• It’s a convenient alternative for editing the
diagram.json file directly
Editing parts
• Adding part
• To add a new part, click on the blue "+" button at the
top of the diagram editor.
• You'll see a menu with a list of parts you can add.
Choose a part to add it. The part will be added at
position (0, 0), and then you can drag it to the desired
position.
• Not all parts are currently available through the menu.
For example, MCU boards and micro-controllers such as
the Arduino Nano or the ATtiny85 are missing. You can
still add these parts by editing diagram.json directly.
• Moving a part
• Move a part by clicking on it and then dragging
it with your mouse.
• Rotating a part
• Rotate a part by clicking on it (to select it) and
then press "R".
• The part will rotate 90 degrees clockwise. If
you need to rotate a part by a different
amount (e.g. 45 degrees), you can achieve that
by editing diagram.json.
• Duplicating a part
• Create a new copy of a part by clicking on it (to select it)
and pressing "D".
• You can press "D" several times to create multiple copies
of the part.
• Deleting a part
• Delete a part by clicking on it (to select it) and then
pressing the Delete button.
• selecting multiple parts
• Select multiple parts by clicking on the parts with the
Shift key pressed. You can then move all the parts
together, duplicate them (using the "D" key), or delete
them using the Delete key.
• Copying and pasting parts
• You can copy the selected part(s) using the standard Copy
keyboard shortcut (Ctrl+C or ⌘+C).
• If you select multiple parts, all the wires connecting the chosen
components are copied.
• The parts you copied are stored in your system clipboard in a
JSON format, similar to the diagram.json format.
• To paste the parts you copied, click on the diagram and press the
standard Paste keyboard (Ctrl+V or ⌘+V).
• Sometimes, the parts will be pasted outside the currently visible
diagram area, so you may have to zoom out to find them. This will
be fixed in the future.
• You can use the copy-paste feature between different project and
quickly copy several parts (including all the internal connections)
at once.
Editing wires
• Creating a wire between two parts
• To create a new wire between two parts, click on one
of the pins that you'd like to connect.
• Then click on the second (target) pin. This will create
the wire.
• If you want the wire to go in a specific way, you can
guide it by clicking where you want it to go after
selecting the first pin.
• To cancel a new wire (delete it without selecting a
target pin) click the right mouse button or press
Escape.
• Changing the color of a wire
Editing wires
• Changing the color of a wire
• The function of the pin automatically determines the
color of new wires:
• Wires starting from ground pins are black, 5 V pins
are red, and other wires are green.
• You can change the color of a wire by clicking on it and
then selecting a new color for the wire.
• You can also use the following keyboard shortcuts to
set wire colors:
[0-Black; 1- Brown; 2-Red; 3-Orange; 4- Gold; 5- Green;
6-Blue; 7- Violet; 8- Gray; 9-White; C-Cyan; L- Lime
green; M-Magenta; P-Purple; Y-Yellow]
Deleting a wire
• Select a wire by clicking on it, then click the trash icon
on it (or press the Delete key).
• You can also delete a wire by double-clicking on it.
Keyboard shortcuts
• The following table summarizes the keyboard shortcuts
Key Function
- Zoom out
+ Zoom in
F Fit diagram to window (auto zoom)
D Duplicate (copy) the selected part
R Rotate the selected part
Delete Delete the selected part / wire
? Open documentation for the selected part
Key Function
Escape Cancel wire (in wiring mode)
G Toggle the grid
Shift Toggle coarse grid snapping while dragging
Alt Toggle fine grid snapping while dragging
Ctrl Toggle fine grid snapping while dragging
Ctrl+Z Undo *
Ctrl+Y Redo *
Activity:
• Write a suitable program to blink an
in-built LED in Arduino UNO
21
Thank you
Department of Applied Computing, Faculty of Computing and Technology, University of Kelaniya, Sri Lanka
