Raspberry Pi Pico W - BME280 Weather Station Dashboard

welcome to Don's keep Tech I'm going to show you my new project called the Raspberry Pi Pico W zme280 weather station dashboard as you can see in here this is the weather station dashboard that I have created that will show you the sensor readings coming from my BME to 8 e sensor at the top of my page are the current values of the temperature humidity pressure and the relative altitude and the rightmost part of the page are the gauge chart representation of my readings the gauge chart will tell you if the current readings exceeds a particular threshold so for example in here my threshold is 30 degrees Celsius and you can see the current temperature is 25 so the Delta value is less than minus 4.9 on the left hand side of my screen is the historical line chart of cancer readings I am saving the last stop sensor reading and displaying them as line charts the user interface automatically updates to retrieve the latest sensor readings so for example here I have here my Raspberry Pi Pico W and my BME 280 Cent first okay if I try to touch this BME 280 sensor with my finger then I am assuming that the temperature should change so that's right now the temperature is 25.2 now it becomes 27 27.4 Northeast that need temperature has now changed and it has gone up if I remove my finger then I am assuming that that it should go down so I remove my index finger and as you can see the temperature indeed went down I use micro python in developing bme280 weather station project and have used the micro dot well server framework would you like to know how I did this then let's start text story [Music] before we start let's discuss a little bit about what the bme280 sensor is sensor was developed by Bosch or mobile and wearable devices application it is capable of retrieving the temperature humidity pressure and relative altitude with high accuracy disable here lists some of the important specification of the sensor the bme280 module can use SPI or i2t Communication in my case in here I have an i2c module so the pin out is the usual SDA and scl pin plus the Power Pin BTC and ground I use my Raspberry Pi Pico w microcontroller and I'm using the standard i2c Channel 0 dpio pin which are the kpio0 and gpio1 assigned as the SEL and the esda pins the parliament is the overall design of my Raspberry Pi picot W BME weather station dashboard I have created a micro dot web server inside my Raspberry Pi Pico W that will create a web application which is my weather station dashboard the weather station dashboard periodically requires sensor readings through a HTTP call and when the web server receives these request then it communicates with the BME to x0 sensor through my Raspberry Pi Pico w then my BME 280 sensor will return back the sensor reading into into my micro.web server and my micro dot web server will then forward it back into my web application the weather station dashboard intern updates each user interface to show the latest sensor readings these are the parts of my weather station dashboard the important parts are the boxes which displays the latest values of the temperature humidity pressure and altitude the gauge charts and the live charts are in here the sidebars just displace my name here let us now discuss some code first how do we read the bme280 sensor reading to read the bme280 sensor reading then we use a library called the micro python bme280 Library the code is really simple as with declare an instance of an i2c class passing in the channel between this case is 0 and my scl and SDA pins next we create an instance of a BME to h0 plus and we pass in the previous i2c object that we created earlier lastly we call the BME that value to retrieve the sensor readings so let's try running this one as you can see the when calling the BME dot values then it will return the following thanks for readings I have here the temperature at 25.7 degree Celsius did the one one thousand two point seven pressure and the 40.61 percent relative humidity that is how simple it is to communicate with this sensor now we're going to discuss some of the important parts of my micro dot web server the first one is the BME module.py the BME underscore module that py is the representation of my BME 280 sensor as you can see I have a class here named bme280 module which has a Constructor that requires the i2c channel ID the SEL pin and the SDA pin he directly ate the same code that we have done earlier wherein we create an i2c class and dbme280 plus also the method that sensor reading is where we retrieve the readings from our bme280 by calling the same values which is the BME that values the additional code in here is called the altitude approximation using this formula if we know the T level pressure at the current time like in this case I am hard coding the value that the value is 1013.25 then we can guess the AL the relative altitude where we are right now the formula here was taken from the the code that I have seen so I just copied it here once we know this altitude value then we will just return everything as a python couple the other code is the boot.py the boot.py will just connect our Raspberry Pi Pico W to our Wi-Fi network let's make sure to change these lines to match your network configuration file will get executed every time our pqw beats restarted the main.py is where we create our micro dot web server we declare our micro dot in specific packages here including our bme280 modified I have here the pins that we will use and the creation of the micro dot application module is initialize at this point also the important part of this file is our route which will respond to requests coming from our browser or our bme280 weather station dashboard first the index or the rootral will serve our index.html page next the slash sensor with links well we'll read the values from our bme280 answer as you can see in here I have here the BME module that I created earlier and then it just calls the method get sensor readings after getting the sensor readings then we return a Json object back to the following client and the static routes are just used to shut down our micro dot application and serve our CSS JavaScript files yeah the part of the hold here will just exit here our micro dot application by calling the app.front when the app that run is finished running then it will create a web server at Port 5000. the IP address this is my IP address and the part is defaulted to 5000. the index.html which is in the template folder connects the HTML elements for our projects and if you use to display the sensor reading let's scan the important part in here in the head section I am importing the Box icon and the plotly.js which I use to display graphs and charts a sidebar logo which in this case is here yes display is my logo name and my name which is dot kit tag the home section or home content is where I create the boxes so this is the boxes for the temperature the humidity the pressure and the altitude so these are what I call as the boxes the insuri chart contains the HTML dips that will display my line card and the each chart which leads in here will display the my gauge start as you can see they are just the HTML deep elements and it is the job of the plotly.js JavaScript library to populate it with chart and text the tile.css which is in my static folder in here is our cascading style sheet file it contains the classes it will beautify our page I cannot discuss so much about how CSS works because that is a big topic on its own but one thing I can say to learn how it works is to comment everything out and then I comment it one by one starting from the top there you would see the impact of such tithing on our index.html page the last and most important file is the main.js file in the main.js file it initializes all the configurations for our graphs so as you can see here there is a configuration for our history which is the trace for pressure temperature and altitude and some layout variables also so these are the configurations that we are going to call to create our graph by calling the API function plotly.new plot as you can see I'm just passing the configurations that I have created earlier so that it will draw the initial layout of our graph the thing also with the gauge data in here these are the gauge information or page configurations needed to draw our gauge chart which I as I've mentioned is I'm using the blackly that new plot also the array variables that you are seeing in here will hold the last 12 sensor readings for each data coming from the BME to excel sensors I am limiting the value to 12 so that I will not show so much information to optimize user now the function of this sensor reading is an important function this will call our route slash sensor readings as you can see there is a flash answer readings in here which we'll call our initial route which is this large Center Reading what this function will do is that it will parse the Json response and then after parsing the Json response and using the data retrieved so for example we are able to retrieve the temperature humidity pressure and altitude then we can now update our user interface as you can see there is a function here called update boxes which will update our boxes and then there is an update gauge and there is an update starting here using the data that comes from our web server then we are able to update the different parts of our application by using these sub functions so this is the example of the update boxes as you can see it updates the information in my boxes by changing the inner HTML of my HTML component the glitch update gauge we just call the plotly that update and update card basically which is called the plotly that update line chart the last function that you're seeing here is what we use to automatically trigger a refresh of our page every three seconds we have set I look functioning here that will call our update sensor readings for every three thousand three thousand milliseconds or three seconds the micro dot that you are seeing here are just micro dot ECC big files which I just copied from the micro dot micro dot GitHub repository now to deploy this project you just first need to install the following Library switch the U template and the microton micro Python bme280 and then after installing the library then the next thing you will do is just to copy everything in here and then upload it into the file system of our Raspberry Pi Pico w that is how our our project works if there are any questions or comments then please ask this in the combined write-up of this video the companion write-up code and everything are in the description of this video I hope you learned something happy exploring

Channel: DonskyTech

Views: 8,049

Keywords: micropython, raspberrypipicow, pico-w, bme280, weatherstation, iot

Id: duDBkU1HOuY

Length: 15min 40sec (940 seconds)

Published: Sat Dec 24 2022