Interface & App

Table of contents

Interface & App

Group Assignment for Output Devices

compare as many tool options as possible.

shown in Week 11 of EECS Group Assignments.

Web Interface with ESP32-CAM

As shown in Week 10 | Networking & Comm, I made a demo of a web interface with ESP32-CAM showing the input device ToF sensor that I made in Week 8 | Input Devices and the built-in Hall magnetic sensor.

More implementation details can be found in Week 10 | Networking & Comm along with code snippets.

PySerial Interface with D21E18A

Inspired by Nadieh’s HTML5 Canvas visualization, I decided to make a similar visualization using PySerial to read the ToF sensor (VL53L0X) and visualize its value from a web interface. The whole hardware is built on the output device ( \(128\times 64\) OLED display) of Week 9 | Output Devices and the input device (ToF sensor VL53L0X) of Week 8 | Input Devices.

Fixing the Morse Code Decoder Issue in ToF-based Range Meter

I was facing the Morse Code Decoder not working issue after merging it with the ToF-based Range Meter. After talking with Anthony, he recommended me to output a bunch of intermediate values for Morse Code Decoder and compare them with the expected values (from the stand-alone counterpart of the Morse code decoder). Two issues were found:

Time accumulation issue: the display occupied ~50 ms instead of 1 ms.
Line buffer issue: the line buffer was not created and thus not displayed consistently on the OLED display.

The following code snippets have addressed these two issues in L#26-27 and L#50-53, respectively.

Code Snippets

pyserial_tof_range_meter_morsecode.ino

#include <SPI.h>
#include <Wire.h>
#include <VL53L0X.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

#define OLED_RESET     -1   // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C // 0x3C for 128x64 OLED https://www.amazon.com/PEMENOL-Display-0-96inch-Raspberry-Microcontroller/dp/B07F3KY8NF
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire1, OLED_RESET); // Wire1 for second I2C channel in D21E18A

VL53L0X sensorX; // ToF sensor
const int pin_shutdown = 15; // Pin of ToF sensor SHUTDOWN

const int pin_led = 18; // Pin of the LED
const int pin_btn = 14; // Pin of the button

int ledState = HIGH;         
int buttonState = HIGH;             
int lastButtonState = HIGH;  

// const long debounceDelay =  50; // debounce delay time in ms [originally 50 ms; increased to improve robustness to noise]
// const long pauseInterval = 200;  // pause interval [ms]
const long debounceDelay = 1; // debounce delay time in ms [originally 50 ms; increased to improve robustness to noise]
const long pauseInterval = 4;  // pause interval in ms [ms]
long signalLength =   0;  // length of the signal
long pauseTime    =   0;  // pause time

const String dot  = "·";
const String dash = "—";
String morse = "";
String codeBuffer = "";

bool newChar = true;
bool newLine = true;

void setup() {
  Serial.begin(9600);

  init_button_led();   // button and LED for Morse Code Decoder initialization
  init_tof_sensor();   // ToF sensor initialization
  init_oled_display(); // OLED display initialization  
}

void loop() {
  int range = read_tof_sensor();
  String code = read_morse_code();
  if (newLine)
    codeBuffer = "";
  else 
    codeBuffer = codeBuffer + code;

  display_range_morse_code(range, codeBuffer);
}

void init_button_led() { // button and LED for Morse Code Decoder initialization
  pinMode(pin_btn, INPUT_PULLUP); // use internal pull-up resistor [Neil & Anthony]
  pinMode(pin_led, OUTPUT);

  // while(digitalRead(pin_btn));
  Serial.println("Range Meter and Morse Code Decoder:");
}

void init_tof_sensor() { // ToF sensor initialization
  Wire.begin();

  pinMode(pin_shutdown, OUTPUT);
  digitalWrite(pin_shutdown, HIGH);

  sensorX.setTimeout(500);
  if (!sensorX.init())
  {
    Serial.println("Failed to detect and initialize sensorX!");
    while (1) {}
  }
}

void init_oled_display() { // OLED display initialization
  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  // display.drawPixel(10, 10, SSD1306_WHITE);

  // testdrawchar();      // Draw characters of the default font
  // testdrawstyles();    // Draw 'stylized' characters  
}

int read_tof_sensor() {
  int rangeX = sensorX.readRangeSingleMillimeters();
  if (sensorX.timeoutOccurred()) { Serial.print(" SensorX TIMEOUT"); }
  Serial.println(rangeX);
  return rangeX;
}

String read_morse_code() {
  String code = "";
  buttonState = digitalRead(pin_btn);
  
  if (!buttonState && !lastButtonState) { // button pressing status - gathering signal
    ++signalLength; 
  }
  else if(buttonState && !lastButtonState){ // button released - send signal (dot or dash)
    if (signalLength>=debounceDelay && signalLength<2*pauseInterval) {
      morse = morse + dot;
    } 
    else if (signalLength>=2*pauseInterval) {
      morse = morse + dash;
    }
    signalLength = 0; 
    digitalWrite(pin_led, LOW); 
  }
  else if (!buttonState && lastButtonState) { // button just pressed - reset signal
    pauseTime = 0;
    digitalWrite(pin_led, HIGH);  
    newChar = false;
    newLine = false;
  }
  else if (buttonState && lastButtonState) {  
    ++pauseTime;
    if (( pauseTime>=4*pauseInterval ) && (!newChar)) { 
      code = decoder(morse);
      newChar = true;
      morse = "";
    }
    if ((pauseTime>=20*pauseInterval) && (!newLine)) {
      code = "\n";
      newLine = true;
    }
  }
  lastButtonState = buttonState;
  delay(1); 

  return code; 
}

String decoder(String message)   {   
  String code = "";                        
  if (message == "·—")
    code = "A";
  else if (message == "—···")  
    code = "B";
  else if (message == "—·—·")  
    code = "C";
  else if (message == "—··")  
    code = "D";
  else if (message == "·")  
    code = "E";
  else if (message == "··—·")  
    code = "F";
  else if (message == "——·")  
    code = "G";
  else if (message == "····")  
    code = "H";
  else if (message == "··")  
    code = "I";
  else if (message == "·———")  
    code = "J";
  else if (message == "—·—")  
    code = "K";
  else if (message == "·—··")  
    code = "L";
  else if (message == "——")  
    code = "M";
  else if (message == "—·")  
    code = "N";
  else if (message == "———")  
    code = "O";
  else if (message == "·——·")  
    code = "P";
  else if (message == "——·—")  
    code = "Q";
  else if (message == "·—·")  
    code = "R";
  else if (message == "···")  
    code = "S";
  else if (message == "—")  
    code = "T";
  else if (message == "··—")  
    code = "U";
  else if (message == "···—")  
    code = "V";
  else if (message == "·——")  
    code = "W";
  else if (message == "—··—")  
    code = "X";
  else if (message == "—·——")  
    code = "Y";
  else if (message == "——··")  
    code = "Z";
  else if (message == "·————")  
    code = "1";
  else if (message == "··———")  
    code = "2";
  else if (message == "···——")  
    code = "3";
  else if (message == "····—")  
    code = "4";
  else if (message == "·····")  
    code = "5";
  else if (message == "—····")
    code = "6";
  else if (message == "——···")  
    code = "7";
  else if (message == "———··")  
    code = "8";
  else if (message == "————·")  
    code = "9";
  else if (message == "—————")  
    code = "0";
  else 
    code = message;
    
  message = ""; 
  return code;
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void display_range_morse_code(int range, String code) {
  display.clearDisplay();

  display.setTextSize(2);             // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.print(F("d = "));  
  display.print(range);
  display.println(F("mm"));  
  display.println(code);

  display.display();
  // delay(10);  
}