Seeking Advice on Building a Web-Based Interface for OWC Wave Generator Project

Projects General Guidance
1

Hey everyone!

If you have the patience to read this long message (lol), I’d really appreciate your advice.

I’m working on a multidisciplinary project with two Mechanical Engineering students, two Electrical Engineering students, and me (a Computer and Communication Engineering student). Our goal is to build a wave generator for an OWC (Oscillating Water Column) project.

My Role is to develop a web-based interface that allows users to:

Start a simulation remotely by setting the wave frequency and amplitude.
View real-time data on a chart.
Generate reports from previous simulations.
Start a simulation directly from the generator (without live visualization) while still logging data for later reports.

Planned Architecture:
Frontend: Vue.js
Backend: Laravel + database (for logging and managing data)
MQTT Broker: Handles communication between the web app, the generator, and the sensors
ESP (IoT device): Connected to the generator and a wave height sensor
Power Consumption Monitoring: Tracks the generator’s energy usage

Web App Features
The system will have two main sections:
Start Simulation: Sends frequency & amplitude to the generator and receives wave height data.
View Reports: Fetches historical data from the backend and displays it in charts.

MQTT Communication Flow:
The frontend publishes the wave frequency & amplitude.
The ESP listens to these values and controls the generator.
The ESP publishes wave height data, which the backend stores in the database.
If the simulation is started directly from the generator, it logs data without requiring the web interface.

Where I Need Advice:
Does my architecture make sense? Any improvements?

Which MQTT broker would be best? Since the university wants this project to run long-term, reliability is key. Which broker would you recommend?

Which components should I use?
ESP: I’m considering the Wemos D1 Mini (WiFi-enabled). Would this be a good choice?
Wave height sensor: It needs to be very accurate. Any recommendations?

Physical Interface for Local Control This is where I’m most lost—I need help figuring out:
How to structure what components I need to use here. The user should be able to enter the frequency and amplitude of the wave and start the generator locally.
Should I add a touchscreen, or would buttons to increase the frequency work better? Or perhaps something else?
Is one Wemos enough to manage the connection and communication with the generator, or should I add another, larger Arduino to communicate with the Wemos via TX and RX?
Do I need any additional components for the local control system?

Handling Local vs. Remote Control
If the system is running locally, should I disable remote control?
How can I properly separate local and remote operation to avoid conflicts?
I would love to hear your thoughts and suggestions! Thanks in advance! :rocket:

2

Is your code running on an ESP32 or a desktop computer?
I'm only aware of one MQTT broker implementation that runs on the ESP32. Have you found others?

Draw a picture showing what's connected to what, and what applications are running on each.

3

ESP32 good choice - you may run out of pins on the D1 Mini suggest ESP32 module with 38 pins
what are the minimum and maximum wave heights? I have used JSN-SR04T waterproof ultrasonic sensor to measure river levels and TOF sensors in small tanks
what is the wave frequency? what do you use to generate the waves?

EDIT: initially control wave parameters via Serial monitor - add touchscreens, web interfaces, etc later - just make sure your initial choice of microcontroller has plenty of spare pins, memory, etc
avoid multiple microcontrollers if possible - having to program two microcontrollers and the resultant communications can make the overall task complexity an order of magnitude greater

4

Wemos D1 mini is ESP 8266. I would certainly rather go with some ESP32 board that runs RTOS. It also has more A/D and D/A pins than ESP8266.

ESP32 can also run a web server itself; perhaps you may want to reconsider skipping MQTT.

1 Like
5

Screenshot 2025-02-25 125940
Screenshot 2025-02-25 1259401247×657 68 KB

  • Client-server communication (HTTP request/response) is only used when generating reports.
  • MQTT communication handles the real-time data exchange needed for the simulation.
6

There are lots of youtube videos that feature an OWC.
Even an expensive commercial looking model such as this one doesn't look too complicated. It appears to be not much more than a big motor driving a float. There are probably safety issue to consider so you'll need to think about inputs for interlocks, safety switches and e-stops.

1 Like
7

Thank you for your help.
Yes, you are right. I completed the architecture for the remote simulation. If you’d like to share your thoughts, I posted the image in post #5.

However, as you mentioned, my main problem is choosing the right microcontroller that fits within our budget. My team and I probably won’t spend more than $40 on a microcontroller, as the university will not fund our project. So, we need to be selective in our choice.

I would also love to learn more about the sensor for measuring wave height in the tank. W
hat would be best suited for my case and how to use it, especially if you have experience with it. Regarding the wave-related aspects, the mechanical engineering student created a simulation in MATLAB, which you can see in the current image.

Screenshot 2025-02-25 223736
Screenshot 2025-02-25 223736840×540 104 KB

For additional information, this will be our tank. I'm pretty sure the measurements they are using are in centimeters.

Screenshot 2025-02-25 224155
Screenshot 2025-02-25 224155279×169 13.9 KB

8

you probably need to experiment but probably start with a JSN-SR04T waterproof ultrasonic sensor cost about £5 on ebay in UK
easy to program directly or use a JSN-SR04T library
its response time should be OK for a wave period of 4seconds
I was using it on a tidal river where the tide changes height over hours although passing boats could give waves
the ESP32 microcontroller costs about £7 on EBAY in UK

edit: the VL53L0X TOF sensor is about £6 on EBAY in UK

photo of river level monitoring system (system usually in a waterproof box without laptop)

image
image518×389 64 KB

sample data

image
image512×276 73.3 KB

1 Like
9

ESP32 experiment with a AJ-SR04 ultrasonic sensor plotting a graph of distance against time

// ESP32 AJ-SR04M ultrasonic sensor plot graph against time

// --- Hardware Mapping ---
#define trig 12  //Pin 33 trigger Tx
#define echo 13  //Pin 32 echo Rx

void trigPuls();

float pulse;    //echo time duration
float dist_cm;  //distance in cm

void setup() {
  pinMode(trig, OUTPUT);
  pinMode(echo, INPUT);
  digitalWrite(trig, LOW);
  Serial.begin(115200);
}

void loop() {
  static unsigned long timer1 = millis();
  if (millis() - timer1 > 100) {
    trigPulse();
    pulse = pulseIn(echo, HIGH, 200000);
    dist_cm = pulse / 58.82;
    Serial.println(dist_cm);
    timer1 = millis();
  }
}

void trigPulse() {
  digitalWrite(trig, HIGH);  //Trigger Pulse HIGH
  delayMicroseconds(10);     //for 10 micro seconds
  digitalWrite(trig, LOW);   //Trigger Pulse LOW
}

reading distance every 100mSec

graph over 20 seconds reading distance from AJ-SR04M to desktop

image
image492×310 21.6 KB

note that minimum distance is 20cm

sampling time changed to 25mSec

image
image492×310 19.5 KB

replace 100 in following statement with 25

  if (millis() - timer1 > 100) {
10

you're probably better off purchasing a VPS off some reputable web hosting company so all your MQTT, DB and backend stuffs would run on it, and not have a separate MQTT broker and another server if data latency is kind of your concern here and all your across-air data comms get bound onto one protocol , preferably MQTT