Hello guys! Quick update, the main enclosure is now being 3D-printed, so I’m waiting on that..

Thanks for the support!

Case Design - 3D printing

BreatheEasy Devlog #11

Hey ya’ll! Hope you’re doing well…

It’s the final stretch for my project BreatheEasy

I finished modelling the case I want to use which features a small sliding door and a hole for the MQ-135.

A small reminder of what I want to achieve with this project:

I want to provide a cost effective way for people to protect themselves from invisible hazards like CO2, CO, Ammonia, Nitrous oxides, alcohol, sulfides etc.

As a kid, the term “silent death” (which is the term used to refer to carbon monoxide) absolutley TERRIFIED me.

The thought of something killing me, without ever me knowing it just made me dread it even more.

A list of features:

Temperature monitoring
Perssure monitoring
Humidity monitoring
Hazardous gasses monitoring
Intuative web UI
Sound alert system
Low power consumption (~600 mAh)

I know this project is overshadowed by much greater projects but once I ship it, I would very much appreciate if you could rate my work highly it is my dream to be able to afford the Bambulab A1…

Anyway, I will probably finish printing tomorrow and will ship it either tomorrow or the day after tomorow!

Any feedback would be nice.

Finishing the prototype board

Helloooo everyone :) Hope you’re doing well!

I have finally finished the PCB part of my device (See attached photos)

My solder job is a mess, trust me I know, but this is probably the…4th time I’ve seriously attempted to solder anything to a proto-board.

Testing everything for the 1st time aaaaaand

Nothing works.

Turns out I hadn’t soldered the ESP32’s GND wire properly.

After fixing that, everything worked perfectly, the BME280, the DHT11 and the MQ-135.

I’m expecting a spool of transparent filament which I will use to 3D print a cool case for it, so the final ship should be done on Sunday.

Dark mode and visual enhancements!

BreatheEasy - DEVLOG#9

Hello everyone! Hope you’re doing wonderful :)

Today’s devlog is going to be a little short since I haven’t added much…
……………………………………………………………………………………………………………

New features:

• Added the option to toggle “Dark mode”. This is easier on the eyes .

-Plethera of visual enhancments and little tweaks (i.e. smoother animations and emojis)

-Added all features to a Demo site you can access by going to:
https://1440pqhd.github.io/BreatheEasy-Demo/

I firmly believe that I have encorporated all the features I wanted to, so the next few devlogs will be about assembling the final device

I have attached pictures of light and dark mode.

I would love to hear feedback!

Adding pressure and changing temp data

BreatheEasy - DEVLOG #8

Hello everyone! I hope you’re doing well…

Today, I have some exciting changes to talk about .

What has changed?

First of all, I made the decision to start taking temperature data from the BMP280 since it is generally more accurate than the DHT11.

Talking about the BMP280….

There is a new measurement on the frontend of BreatheEasy!

Atmospheric pressure!

This metric is usefull for predicting upcoming weather coditions.

Something I realized I have never explained is how the data gets from the ESP32 to the actual website…

It is quite simple:

We send a json string using:

String json = "{";  
json += "\"temperature\":";  
json += isnan(temperature) ? "null" : String(temperature, 1);
json += "}";

And on the webpage side we have a function that decodes the data sent and displays it on HTML card elements:

async function updateDashboard(){      
try {        
const response = await fetch('/data');        
const data = await response.json();        console.log("Updating dashboard...", data);            
if (data.temperature !== null && data.temperature !== undefined) {         
 if(data.temperature > maxTemp){            
maxTemp = data.temperature;            
if (tempMaxElem) tempMaxElem.innerHTML = maxTemp + " °C";          
}          
 if(data.temperature < minTemp){            
minTemp = data.temperature;           
 if (tempMinElem) tempMinElem.innerHTML = minTemp + " °C";         
 }

Which also handles the Min/Max parts of the UI.

I want to ask a favour from anyone who reads this…

Please recommend a color for the 3D-Printed case!

(I’m thinking transparent…)

Anyway, that’s it for today I wish you all a nice day!

Minor website and connectivity changes

BreatheEasy - DEVLOG #7

Hello everyone! Hope you’re doing well!

This will be a shorter devlog as I haven’t done as much.

What’s new?

Each sensor reading now features a “bar” that indicates how close the reading is to its maximum safe limit.

I have also added the ability to access the ESP32’s webpage using a custom DNS (thank god for mDNS.h) So now the website is accessible by just typing:

hhtp://breatheeasy.local

I have also attached a foto of a rough prototype I have made for the enclosure in Tinkercad.

This is a very early rough model, many things I want to implement are missing (like a way to pop the lid on and off) so refining it will be my priority for the next couple of days.

Finally, a small announcement…

I am working on a live demo-website where you will be able to test out the various features of the website using interactive sliders…That’s going to be finished in a couple of days.

I would love to hear any feedback!

The Website design is done! - Finishing website

BreatheEasy - DEVLOG #6

Hello everyone! Hope you’re doing well!

I have exciting news about the progress of my little environmental sensor!

I have finally finished the front-end aka my website for the project!

I have added a couple of features since the first iteration including:

1. Sub-pages for every measurement
2. Min/Max values for every sensor
3. System statistics including signal strength and available RAM
4. General UI enhancements like a live gradient background and animations when hovering over buttons

What does this mean going forward?

Unless a geniusly good idea strikes me, this will be the final version of the website.

What else is new?

I decided to structure the website using LittleFS!

Basically, it allows me to upload entire files to the memory of the ESP32 that in turn allows for cleaner structure management of the website instead of cluttering everything into a single .ino file.

I would love to hear any ideas or feedback!

Alcohol Levels down and Website Lookin’ Nice!

BreatheEasy - DEVLOG#5 Advanced protype and website completion

Hello everyone! Hope you’re doing well!

On my last Devpost I showed you my early prototype of the BreatheEasy, however I have now made an even more advanced prototype (still breadboard based) that includes an MQ-3 and the DHT11 (the MQ-3 is temporary, for the final build I will replace it with the MQ-135 and the sensor is being powered by a battery that will be changed the the USB port of the PCB), because I wanted to test the functionality of the voltage divider and also measure power draw.

Happy to report the power draw is withing standard limits - 135mA

Now let’s get into the highlight of the show:

THE UPDATED WEBSITE!!! =D

The website now includes a modern, sleek looking dashboard that list a couple of things:

1. Current temperature
2. Current humidity
3. The Alcohol sensor status and reading
4. The latest system event
5. Uptime and Update time

The system event can range from High temperature, Low temperature, High humidity, High alcohol etc.

But how does it all work?

The ESP32 measures the data, and sends them to the browser visiting the URL via a JSON string.

The info then gets displayed on the actual website.

If the ES32 detects any abnormalities in the readings, the browser will play an alarm sound notifying the user of the potential danger.

The neat part is the actual rendering isn’t done by the ESP32, so that saves a TON of computing power.

For the colors of the website I used a site called “ColorHunt”. It features amazing color combinations for any type of website.

Finally, what’s next??

Waiting. For the parts to arrive. Packages in Greece take notoriously long to arrive but I’m hoping I can assemble a final prototype by the end of the week.

I would love to hear any ideas or concerns!

BreatheEasy - PCB completion (Finally 😭 )

DEVLOG #4 Reworking the entire PCB

Hello Everyone!

As you may have noticed, a couple of hours ago I posted a devlog where I bragged about my first prototype (literally nothing to brag about).

Now, the PCB I had designed for after I make a complete prototype (once all of my parts arrive)

Turns out, that PCB was a complete non-working mess! 😐

So I spent an hour redesigning the whole thing and now it seems to be atleast half functional! Yippie!

The list of parts also changes a bit, because I decided using the analog output of the MQ-135 instead of the digital output because who doesn’t want more precise data which in turn resulted in me switching from a logic converter to a..

Voltage divider!

The rest of the parts stay the same.

Now the board is:

1. More organized
2. More compact
3. Even more cost effective (Resistor>Logic converter)

If you have any feedback or suggestions I’d love to hear them, and as always I wish you a good day!

(Btw I never mentioned this, but English isn’t my first language so…sorry for any grammatical mistakes )

BreatheEasy - One PCB Air quality monitor

BreatheEasy DEVLOG 3 - First Prototype

Hello Everyone!
I hope everyone is doing well, today I have some exciting updates on my Air quality monitor =D

I assembled my first prototype! Right now, the board only consist of an ESP32 and a DHT11, but the reason I created this was because I wanted to lay the baseline of my project, this time in practice not only in theory.

The microcontroller reads data from the digital output of the DHT11 and the ESP32 is running a webserver that you can connect to.

The website itself is…pretty basic….

But remember this is just a prototype ;)

For the next few steps, once the parts arrive, I will attempt to assemble a prototype with all of the sensors, but I think this is a good first step.

Aditionaly I will also redesign the website so it looks nicer.

I would love to hear some feedback!

BreatheEasy - One PCB air quality monitor

BreatheEasy DEVLOG 2 - Cleaing up my mess

Hello everyone! Welcome to the 2nd Devlog of my accesible Air quality monitor. Let’s get right into it.

What was my goal during this session?

Basically, my PCB in the first iteration, was kind of a biiiiiiiiiiig mess. I now have changed that ( ͡° ͜ʖ ͡°)

In the first iteration, many things were missing, including a place to actually mount the sensors…

Proud to report that is not an issue anymore

I also realised that because of the nature of my sensors, I would also need a logic converter, which has been added. And the reason they are placed further away is that they don’t want to be influenced by the heat that is generated from the other components of the PCB.

I also decided to go into a different direction regarding how I will display the actual data

The ESP32 will now host a website on the local network of the user, where the data will be located.

I find that much more convinient and cost effective ◕‿↼

Also: Name change!

One board Air quality sensor - try saying that 10 times fast…

That’s why it will now be known:

BreatheEasy

Anywho, the next step is going to be finishing the PCB design, designing an enclosure for the thing

(no ones wants a bare PCB)

And then assembeling the first prototype..

I wish you all a very happy Day/Evening/Night😊😊

DEVLOG #1 - One Board Air quality sensor

Hello everyone! Today I started working on the first stage of my Air quality monitor.
First of all:
What do I want to achieve with this project?
A cost effective solution for people to protect themselves against invisible dangers.

For my first devlog I started by brainstorming a list of features I want to have and what parts & sensors are required to achieve those feature.

The brains of the project are the ESP32 C3-Wroom-02
It’s cheap, powerful, and includes Wifi + Bluetooth.
The first sensor I’m using is the BME280. It’s a very precise Temperature, humidity & pressure sensor and is the baseline of my project.

The next sensor I’m using is the MQ-135. This nifty sensor monitors all sorts of things like Ammonia (NH₃), Sulfide, Benzene, Alcohol, Smoke, and CO₂.

Although this sensor does draw a significant amount of energy, and has to warm up before being able to measure data it’s much cheaper, and keeping in mind one of the goals is to keep cost down, this sensor does its job.

But….how will I be able to see the data?

Simple, the PCB will include a 1.8” LCD which will display all of the important metrics.

Powering it will be as simple as plugging in any old USB-C cable.

Right now, I have created a rough sketch of the PCB, though some key things are still missing.

I would love to hear feedback if you have any!

The next part is completing the PCB and building some prototypes.