![\"\"](\"https:\/\/bitcows.com\/wp-content\/uploads\/2019\/08\/weatherWidget-225x300.jpg\")
<\/p>\n<\/p>\n
– ESP 32 Breakout Board Full Code<\/a><\/p>\n – Basic understanding of ESP32 and how to connect it This app uses Darksky Free API to gather all its data.<\/p>\n https:\/\/darksky.net\/<\/a> I used ArduinoJson lib (5.13.5) to parse the response from the API, the WiFI lib to connect to the WiFi Access Point.<\/p>\n Open the Arduino Library Manager The https:\/\/github.com\/ThingPulse\/esp8266-oled-ssd1306<\/a> is a great LCD lib to allow the ESP32 to chip to easily communitcate with the display The screen is a 128×64 i2c LCD. You can get these on ebay or adafruit pretty cheap. This is a pinout of the ESP32 I have for this. Ok lets talk about whats going on in the code. If you don’t care about this just skip this section and you’re done. <\/p>\n The main loop is where all the button action takes place. Wiring up the button pin produces a high button state which means when pressed this code will run. The loop runs constantly so if you hold the button down it will cycle through these conditions every 600th of a second. As you can see the default is the DAILYWEATHER and as you click the button it increments by one. Then once its at the last one (3) it sets it back to the start so we can keep looping. Lastly there is a call that happens every 9 minutes (9000)<\/p>\n The API returns back a string of an icon, but I can’t use icons since i’m using I feel like most everything else is pretty self explanitory code wise.<\/p>\n NOTE<\/strong>: if you have a screen with a yellow and blue color scheme there is a boolean at the top that will shift the icons for you. Componenents Needed – ESP 32 Breakout Board – 128×63 OLED – Momentary button – 10k Resistor – Darksky API Key Not interested in learning just want the code? Full Code Expected Knowledge – Basic understanding of ESP32 and how to connect it – How to push code to ESP32 using the Arduino IDE – Basic…<\/p>\n
\n– 128×63 OLED
\n– Momentary button
\n– 10k Resistor
\n– Darksky API Key<\/a><\/p>\n\nNot interested in learning just want the code?
\n<\/h3>\n\nExpected Knowledge
\n<\/h3>\n
\n– How to push code to ESP32 using the Arduino IDE
\n– Basic understanding of C and coding in Arduino<\/p>\n\nThe Overview
\n<\/h3>\n
\nExample:
\nhttps:\/\/api.darksky.net\/forecast\/[API_KEY]\/33.307575,-111.844940?exclude=minutely,hourly,alerts,flags<\/code><\/p>\n
\nSearch for \u201cArduinoJson\u201d<\/p>\n
\nI wrote my own font lib and graphics lib for the graphics using:
\nhttp:\/\/oleddisplay.squix.ch\/#\/home<\/a> for fonts and http:\/\/chilipeppr.com\/esp32<\/a> to convert the images
\nImages are in WeatherGraphics.h<\/code> and MoonPhase.h<\/code>
\ntime.h<\/code> and math.h<\/code> are used to format the Unix time stamps to a readable date and round temperatures<\/p>\n#include \"WeatherGraphics.h\"\n#include \"CustomDisplayFonts.h\"\n#include \"MoonPhase.h\"\n#include
\n![\"\"](\"https:\/\/bitcows.com\/wp-content\/uploads\/2019\/08\/128x64-Blue-I2C-OLED-Display.png\")
\nPinout is pretty straight forward. 3.3v and ground. The pin 21 and 22. I also wired in a button, for this you will need a momentary button and a 10k resistor. That is connected to pin 23
\n![\"\"](\"https:\/\/bitcows.com\/wp-content\/uploads\/2019\/08\/weatherstationpin-1024x450.png\")
<\/p>\n
\n![\"\"](\"https:\/\/bitcows.com\/wp-content\/uploads\/2019\/08\/ESP32-S-Pinout.png\")
<\/p>\n\nDeeper Code Dive
\n<\/h3>\n\nint updateWeather = 0;\nint countDownSeconds = 9000;\nenum Screens\n{\n DAILYWEATHER = 1,\n MOONPHASE = 2,\n THREEDAY = 3\n};\nint screenId = DAILYWEATHER;\nvoid loop()\n{\n int buttonState = digitalRead(btnPin);\n \/\/ Serial.println(screenId);\n if (buttonState == HIGH) \/\/(buttonState != previousButtonState))\n {\n screenId++;\n\n displayWeather = false;\n if (screenId == MOONPHASE)\n {\n display.clear();\n drawMoonPhase();\n }\n else if (screenId == THREEDAY)\n {\n threeDayforcast();\n }\n else if (screenId = DAILYWEATHER)\n {\n display.clear();\n drawCurrentWeatherData();\n screenId = DAILYWEATHER;\n }\n\n delay(500);\n }\n\n delay(100);\n\n updateWeather++;\n\t\/\/called every 9 mins\n if (updateWeather % countDownSeconds == 0)\n {\n callWeatherApi(true);\n }\n}<\/pre>\nints<\/code> to represent icons. So I created a map of icons that map to the enums of icons.<\/p>\nString jsonMap = \"{\\\"partly-cloudy-night-sm\\\":18,\\\"clear-day-sm\\\":10,\\\"rain-sm\\\":11,\\\"snow-sm\\\":12,\n\\\"partly-cloudy-day-sm\\\":13,\\\"sleet-sm\\\":14,\\\"wind-sm\\\":15,\\\"cloudy-sm\\\":16,\n\\\"thunderstorm-sm\\\":17,\\\"partly-cloudy-day\\\":0,\\\"clear-day\\\":1,\\\"clear-night\\\":7,\\\"rain\\\":2,\\\"snow\\\":3,\n\\\"partly-cloudy-night\\\":4,\\\"sleet\\\":5,\\\"wind\\\":6,\\\"cloudy\\\":8,\\\"thunderstorm\\\":9,\\\"clear-night-sm\\\":19}\";<\/pre>\n
\n\/\/NOTE FOR A SCREEN WITH A YELLOW TOP AND BLUE BOTTOM CHECK true
\nbool isYellow = true;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"