# Weather Station (Work in progress)

**URL:** <https://discourse.processing.org/t/weather-station-work-in-progress/21211>\
**Category:** Gallery\
**Created:** [May 23, 2020, 5:21pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211 "2020-05-23T17:21:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![JustinJohnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/justinjohnson/32/192_2.png) [@JustinJohnson](https://discourse.processing.org/u/JustinJohnson)\
**Post date:** [May 23, 2020, 5:21pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/1 "2020-05-23T17:21:16Z")

</div>

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 🙂 It incorporates quite a bit of material (3D, JSON, API and DOM). It’s a weather station app with data provided by [openweathermap](https://openweathermap.org/). 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! 🙂

[Weather Station Sketch on OpenProcessing](https://www.openprocessing.org/sketch/899096)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 23, 2020, 11:07pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/2 "2020-05-23T23:07:48Z")

</div>

Fun! Thank you for sharing this.

One suggestion: more city disambiguation.

 ![Screen Shot 2020-05-23 at 4.05.19 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3577b69e6ad8bd65f1a3c55fc8440e32362834d1.png)

---

<div class="post-metadata">

**Author:** ![JustinJohnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/justinjohnson/32/192_2.png) [@JustinJohnson](https://discourse.processing.org/u/JustinJohnson)\
**Post date:** [May 23, 2020, 11:37pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/3 "2020-05-23T23:37:26Z")

</div>

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](http://openweatherapi.org) came with all of these extra cities 🤔 but that’s definitely a good future suggestion & improvement! 🙂

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [May 24, 2020, 11:30pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/4 "2020-05-24T23:30:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 25, 2020, 12:35am UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/5 "2020-05-25T00:35:46Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/551f16f78b711f7a09a0f6b0ea5e3c8383370570.png)

…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.

---

<div class="post-metadata">

**Author:** ![JustinJohnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/justinjohnson/32/192_2.png) [@JustinJohnson](https://discourse.processing.org/u/JustinJohnson)\
**Post date:** [May 25, 2020, 4:09am UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/6 "2020-05-25T04:09:20Z")

</div>

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 🙂  
Link here:  
[Weather Station (with code available)](https://www.openprocessing.org/sketch/903766)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 28, 2020, 8:34pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/7 "2020-05-28T20:34:28Z")

</div>

Hey @JustinJohnson,

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

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. 😊

---

<div class="post-metadata">

**Author:** ![JustinJohnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/justinjohnson/32/192_2.png) [@JustinJohnson](https://discourse.processing.org/u/JustinJohnson)\
**Post date:** [June 6, 2020, 5:03pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/8 "2020-06-06T17:03:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JustinJohnson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/justinjohnson/32/192_2.png) [@JustinJohnson](https://discourse.processing.org/u/JustinJohnson)\
**Post date:** [June 10, 2020, 9:02pm UTC](https://discourse.processing.org/t/weather-station-work-in-progress/21211/9 "2020-06-10T21:02:34Z")

</div>

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 🙂

> **[anartisticengineer/weather-station-react-p5js](https://github.com/anartisticengineer/weather-station-react-p5js)**
>
> A react version of my weather station sketch on openprocessing.org - anartisticengineer/weather-station-react-p5js