Episode 3: NFC reader

kl3m3n

I will be using Android builtin NFC reader to read text records of NFC tags. The text records will be displayed in a scroll-able text widget.

I will be using GUI-O Bluetooth SPP connection, but the example can be easily be ported to other connection types.

Software prerequisites:

Arduino IDE (https://www.arduino.cc/en/software)
ESP32 Arduino board support, if using ESP32 based board (see https://docs.espressif.com/projects/arduino-esp32/en/latest/installing.html)
GUI-O design tool (https://www.gui-o.com/design-tool)
GUI-O application (https://play.google.com/store/apps/details?id=com.guio.guioapp)
For additional information about the GUI-O application, download the developer manual from https://www.gui-o.com/

Components needed:

ESP32-WROOM-32 (or any other Arduino supported Bluetooth capable board)

The entire tutorial is split into various steps. All necessary information is given in each step.

0. DESIGN THE GUI (optional)

The best way to create a GUI layout is to use GUI-O live designer tool.

Note that the Arduino source code already includes the necessary commands, so this step is not needed, unless you want to make some visual adjustments. If you make adjustments, please include the generated ASCII code in the Arduino source code (see section 1. UPLOAD THE SOURCE CODE).

First, you need to establish a TCP/IP connection between the designer tool and GUI-O application:

Determine the local IP address of your PC's network interface (WiFi or Ethernet)

Under Windows, open the command prompt, enter ipconfig and press Enter
Under Linux, open the terminal, enter ifconfig and press Enter

Open GUI-O application and open settings menu. Select "Connections -> Ethernet" and create a new device with IP address (determined from 1.) and any port between 49152 - 65535
Open GUI-O designer and select "TCP/IP connection" tab. Set the IP address and port. Both values must match the device settings created within the GUI-O application. Click "Start server" button.
Within the GUI-O application, tap the created device and wait for successful connection.
In the GUI-O designer, select "File -> Load designer file" and load the NfcReader.gdf design file. Make the desired adjustments, if necessary. Copy / replace the GUI-O commands into the Arduino source code (see section 1. UPLOAD THE SOURCE CODE).

1. UPLOAD THE SOURCE CODE

The source code has inline comments, describing the important parts of the code. You can copy the source code from the snippet below, or download it here.

Upload the code to your board (make sure that the correct board and upload port are selected). Reset the board after upload.

/*
 * GUI-O NFC reader Bluetooth example (using ESP32-WROOM-32)
 *
 * Copyright (C) 2022, kl3m3n
 * last updated on 5.11.2022
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */

#include "BluetoothSerial.h"

// if not enabled, the SDK must be recompiled
#if !defined(CONFIG_BT_ENABLED) || !defined(CONFIG_BLUEDROID_ENABLED)
#error Bluetooth is not enabled! Please run `make menuconfig` to and enable it
#endif

// forward declare parser for incoming messages
void parseGuioMsg(const String &msg);

// icoming data buffer
String in;

// global
BluetoothSerial btSerial;

void setup() {
  // debug output
  Serial.begin(115200);
  
  // setup bluetooth serial
  btSerial.begin("NFCReaderBluetooth");
  
  Serial.println("Bluetooth ready to pair!");
}

void loop() {
  while(btSerial.available()) {
    const char c = btSerial.read();
    in += c;
  
    if(c == '\n') {
      // parse message string
      parseGuioMsg(in);
      // clear buffer
      in = "";
    }  
  }
}

void sendMsg(const String &msg) {
  btSerial.write((const uint8_t*) msg.c_str(), msg.length());
}

void parseGuioMsg(const String &msg) {
  if(msg.startsWith("@init")) {
    Serial.println("GUI-O app is requesting INITIALIZATION!");

    // clear screen, hardware and set background
    sendMsg("@cls\r\n");
    sendMsg("@clh\r\n");
    sendMsg("@guis BGC:#FFFFFF\r\n");
    delay(100);

    // initialize GUI
    sendMsg("|LB UID:title X:50 Y:20 FSZ:4 FFA:\"font8\" TXT:\"NFC<br>reader\"\r\n");
    sendMsg("|TA UID:nfcOutput X:50 Y:50 W:70 H:40 FSZ:2 FGC:#FFFFFF\r\n");
    sendMsg("|LB UID:details X:50 Y:90 FSZ:2 TXT:\"GUI-O NFC reader<br>demonstration by kl3m3n\"\r\n");
    // initialize NFC hardware
    sendMsg("|NFC UID:nfc HID:nfc SEN:1\r\n");
  }
  else if(msg.startsWith("@nfc")) {
    const auto idx = msg.indexOf(' ');
    if(idx > 0) {
      String txt = msg.substring(idx + 1); txt.trim();
      // display NFC (text) record
      sendMsg("@nfcOutput TXT:\"" + txt + "\"\r\n");
    }
  }
}

2. ESTABLISH CONNECTION

Make sure that the ESP32 board is ready for pairing (you can check this by observing the serial debug messages using the Arduino serial monitor).

Open GUI-O application and navigate to settings menu. Select "Connections -> Bluetooth and IoT" and search for devices (enable Bluetooth and Location services, if prompted). Tap on the "NFCReaderBluetooth" device and wait for successful connection (confirm device pairing if prompted).

Close the settings menu and press the Initialize button (see image below) from the GUI-O application home screen.

3. THE RESULT

Image below shows the result (screen capture) on my Android device after pressing the "Initialize" button and scanning two different NFC tags (I added some arbitrary text records using a third-party application).

Note that if code "-2" is displayed after pressing the "Initialize" button, the NFC is available, but is not enabled. In this case you should enable NFC through Android system settings. If code "-1" is displayed, your device does not support NFC.

If you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n