I have setup a Firebase Web App with an esp32 chip and it works fine for measuring temp, humidity and pressure. I have added a second esp32 chip to measure the same type of data and write it to the same Firebase realtime database that also works. The realtime variables are temperature, humidity, pressure, timestamp, temperature2, humidity2, pressure2 and timestamp2. On the realtime database you can see the data:
-N48XmYqp5ipFqoFM7lg
humidity:”14.50″
pressure:”848.66″
temperature:”94.55″
timestamp:1654796265719
-N48Y5hiudQ2WIz5raps
humidity2:”25.90″
pressure2:”848.51″
temperature2:”25.82″
timestamp2:1654796348271
In the web app the data from the first esp32 is fine and the second esp32 chip is undefined and displayed this way:
2022/06/09 10:37:45 94.55 14.50 848.66
NaN/aN/aN aN:aN:aN undefined undefined undefined
I believe it is because the identifier -N48Y5hiudQ2WIz5raps is not known by the web app.
Is there any way to identify the identity to the web app so I can view temperatures from multiple places on one web app instead of needing a web app for each esp32?
Hi.
Yes, it is because of that.
Are you logging in the second ESP32 with a different email and password (it is a different user?)?
The easiest way to make this work is to use the same user on all ESP32 boards.
Otherwise, you need to change the way the web app gets the data because at the moment it only gets the data from the ESP32 with the same user ID.
I hope this makes sense.
Regards,
Sara
Hi,
I am logged is as the same user on both esp32s. The database gets the data from both esp32s but the web app is only written for the first esp32. If I modify the web app on the public folder in platformio for the first esp32 to get data from temperature2 it says undefined but if you look at the database it is there.
Maybe I need to change other settings in index.html and index.js to accomplish this. Here is what I have changed:
Index.html
<!– Temperature –>
<div class=”col-sm mb-3 text-center”>
<div class=”card”>
<div class=”card-header”>
<h5>Temperature</h5>
</div>
<div class=”card-body”>
<h2 class=”card-title”><span id=”temperature2″></span> ºF</h2>
</div>
</div>
</div>
Index.js
// Get the latest readings and display on cards
dbReadingsRef.limitToLast(1).on(‘child_added’, snapshot =>{
var jsonData = snapshot.toJSON(); // example: {temperature: 25.02, humidity: 50.20, pressure: 1008.48, timestamp:1641317355}
//console.log(“Cards Display”);
//console.log(jsonData);
var temperature = jsonData.temperature2;
var humidity = jsonData.humidity;
var pressure = jsonData.pressure;
var timestamp = jsonData.timestamp;
// Update DOM elements
tempCardElement.innerHTML = temperature2;
humCardElement.innerHTML = humidity;
presCardElement.innerHTML = pressure;
lastUpdateElement.innerHTML = epochToDateTime(timestamp);
});
I appreciate your help. Also I love the books that you have written. Very helpful and insightive.
Hi.
Are you sure you’re using the same login?
As you can see you have multiple user IDs on the database.
If all ESP32 are logged in as the same user, the UUID should be the same, and it is not the case.
The web app only reads the data of the same user that’s logged in on the app.
If everything has the same UUID, it should work.
In your database console, go to Authentication > Users and check your users. You should have one user that’s the same for the ESP32 and for the web app.
Regards,
Sara
Hi,
I only have one user created under authentication. I do not see where I can create users for different things thou. But here is the image of the database:
I have figured it out sort of. If I have temperature on both of the esp32s instead of temperature (outside) and temperature2 (inside) the output of the web app is inside temp, outside temp, inside temp….
Is there a way to have the web app show both inside and outside temperature, humidity and pressure at the same time?
Hi.
I’m sorry, I was misinterpreting the database data. I was looking at the timestamp references as if they were user UIDs.
Do you want outside temperature and inside temperature on the same chart, but in different series?
Can you show me your current javascript file?
I think the best way to do that is to organize your database differently: for example:
- ESPInterior
- sensor
- timestamp
- temperature
- humidity
- pressure
- timestamp
- sensor
- ESPExterior
- sensor
- timestamp
- temperature
- humidity
- pressure
- timestamp
- sensor
Then, on your javascript, you need to create two different paths for the sensor readings, one for the inside and other for the outside.
You need to add listeners for each path.
Then, you place each data on its corresponding series on the chart. We have a tutorial showing how to display multiple series on the charts: https://randomnerdtutorials.com/esp32-plot-readings-charts-multiple/
I hope this helps.
Let me know if you need further help.
Try it out and tell me if you need more help, I can write a sample code.
Regards,
Sara
Thank you for your help. The only issue that I am seeing is I am using the BME280. Are there different commands to retrieve them from the database? If you could make a small sample code for the BME280 I would appreciate it.
Thank you
Heath
Hi.
You just need to adapt the JavaScript code with the right paths and plot the readings on different series.
The tutorial shows how to create a chart with multiple series and how to plot them on different series. That’s what you need to look at.
Regards,
Sara