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.

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

https://www.ebay.com/sch/i.html?_nkw=PCB+male+pin+headers

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

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;
}

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.

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...

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.