Weather Station (Work in progress)

Gallery
#1

Hi!

I’ve been working on this project over the past few days on OpenProcessing (link down below), and certainly welcome you to have a look :slight_smile: It incorporates quite a bit of material (3D, JSON, API and DOM). It’s a weather station app with data provided by openweathermap. The code is hidden to protect the API key by the way.

Anyway, there interface should be pretty straightforward:

  1. Search for a city in the search bar, and then hit the ‘Search’ button for a list of options.
  2. Click a city in order to display the data (city name, temperature, and general description).

It’s still a work in progress, but I feel this is good enough to at least share in the meantime. I still want to eventually add a toggle between F and C temperatures, along with a few other tweaks. And obviously, any feedback is welcomed as well! :slight_smile:

Weather Station Sketch on OpenProcessing

4 Likes
#2

Fun! Thank you for sharing this.

One suggestion: more city disambiguation.

Screen Shot 2020-05-23 at 4.05.19 PM
Screen Shot 2020-05-23 at 4.05.19 PM758×218 9.32 KB

#3

Thank you!

And that was actually one of the things that I was looking at, with the whole ambiguity. Cause the city list json file directly from openweatherapi.org came with all of these extra cities :thinking: but that’s definitely a good future suggestion & improvement! :slight_smile:

#4

Nice, you’ve got your first like.(despite hidden code. :smiley:)

#5

Yes, if you want feedback at the code level, definitely disable this feature in another sketch that is a copy-without-API-key:

Screen Shot 2020-05-24 at 5.35.21 PM
Screen Shot 2020-05-24 at 5.35.21 PM1272×266 55.5 KB

…that way the key is not exposed, but people can look at the code.

Of course, if the sketch is under rapid development, keep a copy up-to-date can be one more thing to deal with. But when you want feedback, it can be easy to do and quite useful.

#6

Thank you @noel and @jeremydouglass !
I actually just created a fork of the sketch without the code hidden. So now you can have a look at the code :slight_smile:
Link here:
Weather Station (with code available)

2 Likes
#7

Hey @JustinJohnson,

Thanks for sharing your project, it looks cool and managed to find the city I live in here in Sweden. Great work! :clap: :partying_face:

A friendly reminder: code that executes on a user’s machine (like in the browser) can never truly be hidden. It can just be obfuscated to some degree. In this specific case, one doesn’t even need to look at the code to figure out the API key. Observing the network traffic to openweathermap.org is enough. Just something to keep in mind. :blush:

#8

I just added a bit of extra code to filter out some of those duplicate results :slight_smile:

2 Likes
#9

Sort of a follow up:
For the past few weeks, I’ve actually been working on a version of this sketch with a React version of p5, along with some Bootstrap CSS to make it look a bit nicer and more responsive. Still working on further improvements/cleaning up the code a bit (I learned Redux kind of while doing this, so my initial confusion might make the code feel a bit messy haha), but this should be good enough to share with the public!

The repository is available on my Github page :slight_smile:

2 Likes