Introduction: Fully Document an Electronics Project
Objective1
Make sure that many months after making a circuit that I can easily and quickly hook it back up and get it working.
Objective 2
Control a strip of LEDs from my wireless devices.
Supplies
Tools
Soldering Iron
Wireless device (e.g. mobile phone)
Pen
Materials
Adhesive Label
Solder
1 x PCB board
https://www.ebay.com/sch/i.html?_nkw=5PCS+2-3-5+Joint+Universal+PCB+Boards
1 x ESP8266 NodeMCU 12-e
https://www.ebay.com/sch/i.html?_nkw=ESP8266+NodeMCU+12-e%20Development%20board
16 x LEDs
https://www.ebay.com/sch/i.html?_nkw=5mm+red+LED
16 x 220ohm Resistors
https://www.ebay.com/sch/i.html?_nkw=220ohm+Resistors
2 x 74HC595 Shift Register chips
https://www.ebay.com/sch/i.html?_nkw=74HC595N
Wires (about 1m total)
5 x Female to Female hookup wires
https://www.ebay.com/sch/i.html?_nkw=Female+to+Female+dupont
5 x Male Pin Headers
Step 1: Design the Circuit
There's a load of tools and I haven't made a huge effort of reviewing them. I wanted something that was free and I can share the results. The main output I need is an image of the circuit.
I settled on https://www.circuit-diagram.org/
You can add any chip by using the Circuit 1, 2 or 3 component and then setting your own labels for the pins.
There is nothing to download.
It is free to save and share the results.
Here is my circuit diagram for this project:
https://www.circuit-diagram.org/circuits/cd41c5fdd8da42a3977c45bf1ee7d58d
Step 2: Write the Code
Again I need an online service that allowed sharing the results.
Arduino cloud is the obvious choice for ESP8266
Here is my code for this project:
This may or may not work - Sharing seems a bit flakey
https://app.arduino.cc/sketches/50f2f89b-441b-438d-9bcc-af715c5cbf00?view-mode=preview
I made a library just to sort the code out better. (attached)
Here is the .ino code:
// https://www.circuit-diagram.org/circuits/cd41c5fdd8da42a3977c45bf1ee7d58d
#include "HC595x2.h"
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Connect to network with this name and password
const char* ssid = "NodeMCU";
const char* password = "12345678";
// In browser go to http://192.168.1.1/
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
ESP8266WebServer server(80);
const int clockPin = D6;
const int latchPin = D7;
const int dataPin = D8;
HC595x2 myHC595x2(latchPin, clockPin, dataPin);
enum operation {
off = 0,
on = 1,
blink = 2,
left = 3,
right = 4,
knightRider = 5
};
operation currentOperation = off;
String getOperation(operation op) {
String result;
switch(op) {
case off:
result = "Off";
break;
case on:
result = "On";
break;
case blink:
result = "Blink";
break;
case right:
result = "Right";
break;
case left:
result = "Left";
break;
case knightRider:
result = "Knight Rider";
break;
}
return result;
}
void setup() {
Serial.begin(9600);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
myHC595x2.setDelay(30);
}
void loop() {
server.handleClient();
switch(currentOperation) {
case off:
myHC595x2.off();
break;
case on:
myHC595x2.on();
break;
case blink:
myHC595x2.blink();
break;
case right:
myHC595x2.right();
break;
case left:
myHC595x2.left();
break;
case knightRider:
myHC595x2.knightRider();
break;
}
}
void handle_OnConnect() {
Serial.println("OnConnect");
if (server.hasArg("op")) {
String op = server.arg("op");
int opAsInt = op.toInt();
if (opAsInt <= 5 && opAsInt >= 0) {
currentOperation = static_cast<operation>(opAsInt);
}
}
server.send(200, "text/html", SendHTML());
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>HC595x2 Control</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="select { height: 30px; border-color: #ccc;}\n";
ptr +="p {font-size: 16px;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Russell's 16 LEDs with 2xHC595 chips</h3>\n";
ptr += "<form>";
ptr += "<p>Operation: <select name=\"op\" onchange=\"this.form.submit()\">";
for (int i = 0; i <= 5; i++) {
ptr += "<option value=\"" + String(i) + "\"" + (static_cast<operation>(i) == currentOperation ? " selected" : "") + ">" + String(getOperation(static_cast<operation>(i))) + "</option>";
}
ptr += "</p>";
ptr += "</form>";
ptr += "<p>Operation: " + String(getOperation(currentOperation)) + "</p>";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
Attachments
Step 3: Soldering
I don't claim to be an expert at soldering. Don't make short circuits. Put things where it seems logical.
With luck on your side you might end up with something similar to what I made or something that looks a bit different but operates similarly.
Step 4: RUN
If everything is hooked up you should see a new wireless access point called NodeMCU on your wireless device.
Connect using the password 12345678
In a browser go to http://192.168.1.1
Enjoy...
Step 5: LABEL and Organise
In Arduino cloud editor the sketch is called "HC595x2WebServer"
- The code includes a link to the diagram
In Circuit Diagram.org the diagram is called "HC595x2WebServer"
- The diagram includes a link to the code
On the circuit itself is a Label "HC595x2WebServer"
It may seem obvious but calling things the same name means it is much easier to associate them together.