The Idea: Underwater User Interface Design
Demo Video: It's under the water
Hardware Build: Device Operation
MagSlide Momentary Magnetic Slide Switch with Hall Sensor
MagRotate Magnetic Selector Switch with 3D Magnetic Sensor
Programming with Arduino
Designing GUI User Interface
Conclusion
References

Published November 14, 2023 © CC0

Underwater/Weatherproof Equipment UI with Magnetic Sensors

A Demonstration of (UI) user Input Interface for Fully Enclosed Waterproof/Underwater equipment with Infineon 3D Magnetic and Hall Sensor

BeginnerFull instructions provided4 hours216

Underwater/Weatherproof Equipment UI with Magnetic Sensors

Things used in this project

Hardware components

Infineon Boot Kit XMC1100 (Arduino shield compatible)

Infineon 3D Magnetic Sensor 2Go

Infineon S2GO 2 HALL TLE4966K

Seeed Studio Grove - OLED Display 1.12'' V2

Reed Switch, SPST-NO

AA Batteries

Amazon Web Services Air Tight Plastic Enclosure ( transparent food container with seal)

SparkFun Magnets

Rotary potentiometer (generic)

Software apps and online services

Arduino IDE

Hand tools and fabrication machines

Soldering iron (generic)

Solder Wire, Lead Free

Breadboard, 170 Pin

Story

The Idea: Underwater User Interface Design

Designing 'Underwater Instruments/Electronic Equipment' poses it's own unique challenge. They have to be waterproof and airtight to keep the electronics safe from water damage.

Since underwater devices are fully submersed into water, implementing regular mechanical switch/buttons or touch based input interfaces for user input is very challenging.To solve This Problem I think Magnetic Field Based Input Control is the best strategy.

3D Magnetic Sensors, Hall Sensors and Reed Switches can be used to design underwater equipment. As magnetic field can pass through plastic enclosure, this project demonstrates how 3D magnetic sensors from Infineon can be used to give user input to a fully enclosed, waterproof or airtight equipment without no direct electrical contact.

Demo Video: It's under the water !

Following video demonstrates how 3D Magnetic Sensor and Hall Switch are used to sense switching input from user through a plastic enclosure:-

Device Demo Underwater

Device is submersed under water !!!

Details are explained below, please continue reading....

Hardware Build: Device Operation

This is the list of hardware (BOM) are used to build this demo prototype:

XMC1302 Microcontroller(XMC 1300 Boot kit) : XMC 1302 microcontroller is a wide operating voltage range ( 1.8 V - 5.5 V ) microcontroller from Infineon, it is great for sensors, motor drive, electronic equipment control applications. This mcu can be programmed by Arduino IDE or DAVE IDE or Modustoolbox IDE.
TLI493D-W2BW A0 3D Magnetic Sensor(Shied2Go) : TLI493D-W2BW is a 3D Hall sensor for sensing magnetic field in X, Y, Z direction, enabling measurement of magnetic field strength, position and angle measurements. This sensor can be used for electrical contact free user inputs through magnetic field. I have used this sensor in this project to sense rotary selector switch positions.
TLE4964-3M MagenticHall Sensor (Shield2Go) : TLE4964 is a low power hall effect magnetic sensor, that can be used as a switch. As the south pole a magnet approaches this sensor, at certain magnetic field strength it will detect the magnet and the output of this sensor will go from high to low. I have used two magnets and this sensor to make a momentary slide switch.
Generic Magnetic Reed Switch:A glass enclosed reed switch to turn on/off power to the whole device from outside with a big magnet. This reed switch is in series with the batteries and positive power rail.
1306 I2C OLED Display Module: An I2C OLED display with 1306 driver chip to display the GUI interface to the user
Neodymium magnets: Small but strong Neodymium magnets are used for designing alternative to mechanical spring and mechanical friction in slide switch and rotary selector switch. Also, another 2 magnets are used to input position sensing to 3D magnetic sensor and hall sensor.
2AA Batteries: 2 AA batteries are use to power the demo project and provide 3 volts supply.
Airtight Enclosure: To secure the battery and keep the electronics safe under water
Custom Magnetic Rotary Switch: Made with plastic bottle cap, some magnets, cable ties, superglue, an old pot for rotational support. 3D magnetic sensor is placed under the rotary switch to sense switch positions
Custom Momentary Magnetic Slide Switch: Made with 2 magnets, inner magnet will hold the outer magnet, as the magnetic field will pass thought the plastic enclosure. The outer magnet will slide on a plastic track when user pushes it and it's south pole will go over hall sensor switch for position sensing

Please note that, if you have access to 3D printers, you can design these magnetic rotary switches and momentary slide switches with 3D printer, I am just using scrap plastic bottle caps and some plastic chunks for this demo

Schematic

All the hardware are connected according to the following schematic:-

Schematic

Actual Physical Wirings

Here is the picture of actual wiring of all the hardware components, after connecting, they are placed in a waterproof airtight container.

Hardware Wiring

MagSlide Momentary Magnetic Slide Switch with Hall Sensor

This is a Momentary Slide Switch consists of two Magnets and one Unipolar Hall Sensor. One of the magnet is outside the enclosure, which acts as the user switch. The other magnet is inside the the enclosure which attracts the outer magnet and acts like a 'virtual spring'. When the outer magnet's South Pole is dragged/puhed on the Unipolar Hall sensor by then user, the Hall Sensor is activated and registered as a button press from user. Once user releases the outer magnet, it will go back to it's off position/original position as the inner magnet will pull it back magnetically. It's a mechanical switch but no mechanical parts, as the magnetic field can pass through the solid plastic enclosure without any opening.

Hall Effect based Magnetic Sliding Switch

MagRotate Magnetic Selector Switch with 3D Magnetic Sensor

MagRotate is a Magnetic Rotary Selector Switch, where a bunch of magnets are used to magnetically lock the switch at selected positions. North Poles of the Magnets on the Rotary Knob are attracted to the South Poles of the Magnets on the Rotary Track, thus giving a Tactile Feeling when changing selector position. At the center of the switch there is the main Rotation Sensing Magnet, which rotates as the selector switch position is changed. The whole switch setup is on one side of the plastic enclosure. Infineon 3D magnetic sensor is used to sense the position of the center magnet or Rotation Sensing Magnet and determining the selector switch's angular position.

3D Magnetic Sensor based Magnetic Rotary Switch

Here is a 3D model of this switch :

3D design (concept art/not to scale)

prototype made with magnets and garbage parts ( I don't have access to 3D printers )

Programming with Arduino

Infineon's XMC microcontroller can be programmed with Arduino IDE using following steps:

Download Arduino IDE

Download the latest Arduino IDE from here. IDE version 2.1 and latest are recommended for better compatibility. There are starter codes and demo examples for Arduino IDE with XMC microcontrollers to get started.

Install SEGGER J-Link

To flash/program the Infineon XMC microcontrollers with the Arduino IDE, SEGGER J-Link must be installed on your computer. Download SEGGER J-Link and install the J-Link Software

(note: If you already have J-link installed then skip this step)

Install Java Runtime Environment

The XMC-for-Arduino BSP installs the XMC Flasher tool. This tool is used to flash the compiled firmware (.hex) into the XMC device. For this tool to work properly, download Java(TM) SE Runtime Environmentand install it in the computer.

(note: If you already have Java runtime installed then skip this step)

Add XMC Microcontroller Package to IDE

To program the XMC series microcontroller with Arduino IDE, add appropriate mcu packages from :

Tools > Board > Board Manager

then type XMC or Infineon to fine the board package, click on it to download and install it. Install the latest package ( version 2.0 +)

Add 3D Magnetic Sensor Driver Library

Inside Arduino IDE, go to Sketch > Include Library > Manage Library

Adding Library to project

Then type TLI493D to search and install the device library for 3D magnetic sensor

Installing library

Designing GUI User Interface

I first drew following 128x64 pixels images in bmp format.

1 / 5 • Pointing arrow position 1 GUI

http://javl.github.io/image2cpp/ this webpage can take the images and convert them into bitmap array, which can directly be copied to the code to product images on the display.

converting bmp image into code

Simply select an image, set the dimensions, check the preview and then click generate code to convert the bpm into pixel data

Conclusion

This project demonstrates how magnetic sensors can be utilized for under water equipment design. This is not a finished product/solution, rather part of a solution. Feel free to use this design techniques for your waterproof products design.

All the equipment data shown in this demo are not real data from real sensors, those are just demo data shown to demonstrate the selector operation. The purpose of this project is to demonstrate user interface design for underwater equipment with magnetic sensors.

References

XMC 1300 Boot Kit getting started

XMC for Arduino

OLED Display or Arduino

Code

#include <Arduino.h>
#include <U8g2lib.h>
#include <Tle493d.h>
#include "Infineon_logo.h" // includes GUI info for OLED display

#define SLIDE_SWITCH 14  // pin 14 got INT0, connect hall sensor
#define SENSOR_1 0 // ADC to connect pH sensor
#define SENSOR_2 2 // ADC to connect conductivity seosor
#define SENSOR_3 4 // ADC to waterproof temperature sensor
#define SENSOR_4 6 // ADC to connect Turbidity sensor
#define SENSOR_5 8 // ADC to connect Salinity seosor


#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

//U8G2_SH1106_128X32_VISIONOX_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/U8X8_PIN_NONE);
Tle493d Tle493dMagnetic3DSensor = Tle493d();
float switch_position = 0.0;
int rotary_switch_old_position = 0;
volatile byte toggle = 0;



void setup(void) 
{
  // add falling edge interrupt on user button MagSlide Hall switch 
  pinMode(SLIDE_SWITCH,INPUT);
  attachInterrupt(digitalPinToInterrupt(SLIDE_SWITCH), MagSlideBtn, FALLING);
  // init 1306 OLED display
  u8g2.begin();
  // init 3D mag sensor for sensing rotary selector switch
  Tle493dMagnetic3DSensor.begin();
  Tle493dMagnetic3DSensor.enableTemp();
  u8g2.clearBuffer();
  // vibe the Infineon Logo
  draw_logo();
  u8g2.sendBuffer();  // transfer internal memory to the display
  delay(50);
}

void loop(void) 
{
  u8g2.clearBuffer();                  // clear the internal memory
  u8g2.setFont(u8g2_font_ncenB14_tr);  // choose a suitable font

// show GUI changes based on Rotary Selector Switch position 
  switch (get_rotary_knob_position()) 
  {
    case 0:
      draw_logo();
      u8g2.sendBuffer();
      break;
    case 1:
      draw_arrow(arrow_0);
      u8g2.sendBuffer();  // transfer internal memory to the display
      delay(5);
      break;

    case 2:
      u8g2.clearBuffer();
      draw_arrow(arrow_1);
      u8g2.sendBuffer();  // transfer internal memory to the display
      delay(5);
      break;
    case 3:
      u8g2.clearBuffer();
      draw_arrow(arrow_2);
      u8g2.sendBuffer();  // transfer internal memory to the display
      delay(5);
      break;
    case 4:
      u8g2.clearBuffer();
      draw_arrow(arrow_3);
      u8g2.sendBuffer();  // transfer internal memory to the display
      delay(5);
      break;
    case 5:
      u8g2.clearBuffer();
      draw_arrow(arrow_4);
      u8g2.sendBuffer();  // transfer internal memory to the display
      delay(5);
      u8g2.clearBuffer();
      break;
    default:
      // do nothing 
      break;
  }

// if hall switch is activated (MagSlide button)
  if (toggle == 1 )
   {
    // enter inside individual UI menus and show sensor data

        while(get_rotary_knob_position()==1 && toggle == 1)
    {
      u8g2.clearBuffer();
      u8g2.setCursor(20,20);
      u8g2.print("pH  level");
      u8g2.setCursor(30,50);
      u8g2.print("pH 7.4");
     // u8g2.print(analogRead(SENSOR_1));
      u8g2.sendBuffer();
      delay(50);
    }
        while(get_rotary_knob_position()==2 && toggle == 1)
    {
      u8g2.clearBuffer();
      u8g2.setCursor(0,20);
      u8g2.print("Conductivity");
      u8g2.setCursor(20,50);
      u8g2.print(2*analogRead(SENSOR_2)+100);
      u8g2.print(" uS/cm");
      u8g2.sendBuffer();
      delay(50);
    }
        while(get_rotary_knob_position()==3 && toggle == 1)
    {
      u8g2.clearBuffer();
      u8g2.setCursor(0,20);
      u8g2.print("Temperature");
      u8g2.setCursor(40,50);
    //  u8g2.print(analogRead(SENSOR_3));
       u8g2.print("25.3 C");
      u8g2.sendBuffer();
      delay(50);
    }
        while(get_rotary_knob_position()==4 && toggle == 1)
    {
      u8g2.clearBuffer();
      u8g2.setCursor(15,20);
      u8g2.print("Turbidity");
      u8g2.setCursor(25,50);
      u8g2.print(analogRead(SENSOR_4)+30);
      u8g2.print(" NTU");
      u8g2.sendBuffer();
      delay(50);
    }
        while(get_rotary_knob_position()==5 && toggle == 1)
    {
            u8g2.clearBuffer();
      u8g2.setCursor(20,20);
      u8g2.print("Salinity");
      u8g2.setCursor(25,50);
      u8g2.print(analogRead(SENSOR_5)+30);
      u8g2.print(" ppm");
      u8g2.sendBuffer();
      delay(50);
    }

  }
}


// draw bitmap logo of Infineon from Infineon_logo.h file
void draw_logo(void) {
  u8g2.firstPage();
  do {
    u8g2.drawBitmap(0, 0, 16, 64, infineon_logo);
  } while (u8g2.nextPage());
}

// draw GUI of selector Switch from Infineon_logo.h file
void draw_arrow(const uint8_t arrow_array[1024]) {
  u8g2.firstPage();
  do {
    u8g2.drawBitmap(0, 0, 16, 64, arrow_array);
  } while (u8g2.nextPage());
  delay(5);
}


// sense RotaMag rotary selector switch position with TLE493 3D mag sensor
// then for a certain range of the value, return a knob position data
int get_rotary_knob_position(void) {
  Tle493dMagnetic3DSensor.updateData();
  switch_position = Tle493dMagnetic3DSensor.getAzimuth();

  if (switch_position > -1.3 && switch_position < -0.6)
    return 0;


  if (switch_position > -1.8 && switch_position < -1.3)
    return 1;

  if (switch_position > -2.7 && switch_position < -2.1)
    return 2;

  if (switch_position > 2.9 || switch_position < -2.9)  // transition from 359 deg to 360 or 0 deg
    return 3;

  if (switch_position > 2.3 && switch_position < 2.9)
    return 4;

  if (switch_position > 1.6 && switch_position < 2.2)
    return 5;

  else
    return 6;
}

// Interrupt service routine to detect Hall switch activation 
// with the MagSlide sliding toggle switch 
void MagSlideBtn()
{
  toggle =! toggle;
}

Credits

Shahariar

74 projects • 265 followers

"What Kills a 'Great life' is a 'Good Life', which is Living a Life Inside While Loop"

Underwater/Weatherproof Equipment UI with Magnetic Sensors