Weather Band API

A team of three: Name, Cy and I worked together on creating and maintaining the weather band database from a weather station in East Village in NYC made by Yeseul. Name and Cy did most of the server side while I worked on the API demo and visualization for the client side. For more information of the backend for the server, please see Name’s post here. Check out our official github here.

System Diagram

Made by Name.

Weather API Web

Demo Video

Process

UI design by me on Figma

Name’s UI wireframe

This is when I finished the basic UI design as well as the functionality for each button at the beginning of the week.

I wrote two files separately. One is p5 sketch from Yeseul’s example and another one is pure javascript to make sure the buttons function probably.

getting the data from one file to another

I tried to use export and import but it gets too complicated and keeps giving me error. Then I followed this tutorial and decided to use sessionStorage and it works!

But then once I kept the playing with the code as below,

sessionStorage.getItem('windDir.selected');

it keeps showing true when I am clicking the variable. So I ended up combining the code in one file.

Input in html

Input is amazing. I get to choose the format for it by following the tutorial.

Collaborating is quite fun.

We collaborated remotely through GitHub as well as p5.js to build the client side. Cy used the code to put a callback function to make sure the json data is loaded before it is being processed by the sketch. She also helped to get the json data to connect with the option select events.

Name also made visualizations on the side so it is more visually pleasing.

In the meantime, I combined all the code they wrote and fixed bugs such as

  1. images drawing on top of each other
  2. not being able to reset everything
  3. not showing the default value upon loading

You can find the final code here on my github.

CSS generator

I used several generators to speed up my process.

Published by Yiting Liu

NYU ITP '21

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: