Cirkit Designer LogoCirkit DesignerYour all-in-one circuit design IDE Launch Cirkit Designer App

ESP8266 NodeMCU RFID Reader with Web Serial Interface

View and Edit Project In Cirkit DesignerImage of ESP8266 NodeMCU RFID Reader with Web Serial Interface

Circuit Documentation

Summary

This circuit integrates an ESP8266 NodeMCU microcontroller with an RFID-RC522 reader module to create an RFID scanning system. The ESP8266 NodeMCU is responsible for controlling the RFID reader, processing the scanned RFID tags, and potentially communicating the results via its serial interface. The RFID-RC522 is powered by the 3.3V supply from the ESP8266 and communicates with the microcontroller using the SPI protocol.

Component List

ESP8266 NodeMCU

RFID-RC522

Comment

Wiring Details

ESP8266 NodeMCU

RFID-RC522

Documented Code

RFID Reader Code (RFID_Reader_RC522.ino)

#include <SPI.h>
#include <MFRC522.h>

#define SS_PIN D2
#define RST_PIN D1
MFRC522 rfid(SS_PIN, RST_PIN); 

void setup() {
  Serial.begin(9600);
  SPI.begin();        
  rfid.PCD_Init();  
  Serial.println("Scan an RFID card");
}

void loop() {
  if ( ! rfid.PICC_IsNewCardPresent()) {
    return;
  }

  if ( ! rfid.PICC_ReadCardSerial()) {
    return;
  }

  Serial.print("Card UID: ");
  for (byte i = 0; i < rfid.uid.size; i++) {
    Serial.print(rfid.uid.uidByte[i] < 0x10 ? " 0" : " ");
    Serial.print(rfid.uid.uidByte[i], HEX);
  }
  Serial.println();
  
  rfid.PICC_HaltA(); 
}

Serial Communication Web Interface (SerialCommunication.txt)

This code snippet is an HTML document with embedded JavaScript designed to facilitate serial port communication through a web interface. It allows the user to connect to a serial device, read data, and display it on the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Serial Port Communication</title>
    <!-- Styles and script omitted for brevity -->
</head>
<body>
    <!-- HTML content omitted for brevity -->
    <script>
        // JavaScript code omitted for brevity
    </script>
</body>
</html>

Note: The full HTML and JavaScript code is not included in this document due to its length and complexity. The provided snippet is a placeholder to indicate where the actual code would be placed in the documentation.