Tutorial#101: Weather Here Realtime Dashboard

[jibs23labs]

WEATHER HERE

Real time Weather Dashboard

Hello World,

This project captures real time weather data, process the weather details. Captures the parameters and creates dashboard based on the weather conditions of particular city.

Screens:

[jibs23labs]

WH Dashboard Tutorial Steps

Setting Up Environment for development | 15-20 mins

1. Install development Environment (IDE) Action: Download and Install Link: https://atom.io/

2. Install the P5.js package Action: Download P5.js Complete and unzip it. Link: https://p5js.org/download/

3. Create a dedicated folder in your drive for your experiments. eg: Folder name: P5Experiments/ Action: Copy the unzipped P5.js files to the above folder

4. Access and signup to API, retrieve your API Key Link: https://openweathermap.org/current Action: Sign Up and look out for your API key in your profile.

5. Reference source file: Weather Here RealTime Dashboard Action: Download the source files https://github.com/jibs23labs/P5-Visualization

6. Add JSON Formatter from google extension Action: Add google extension to browser Link:https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en-GB

Process Approach

Concept Ideation Accessing API Evaluating API Parsing the JSON response Evaluating result via P5 Defining the logic Visual Design

Lets Begin, Executing Process | 30-60 mins

Concept Ideation

Dashboard for retrieving the city and temperature and dynamically changing the background colour based on values from API.

1. Accessing API | 5-10 mins

Link: https://openweathermap.org/current

2. Evaluating API | 5-10 mins

http://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b1b15e88fa797225412429c1c50c122a1

3. Parsing the JSON response | 10-20 mins

sample code snippet:

data.weather[0].main;
data.main.temp;

4. Evaluating result via P5: | 10-20 mins

sample code snippet:

createElement('p',"Main: "+data.weather[0].main);
createElement('p',"City: "+ data.name);

5. Defining the logic | 20-30 mins

sample code snippet:

    if(n_desc_short=="Clouds"){
      c1 = color(127,191,255);
      c2 = color(140,146,172);
    }

6. Visual Design | 10-20 mins

Adding custom fonts.

Defining Position, Font, Size, Colour, Alignment sample code snippet:

    textFont(fontLight);
    fill(255);
    noStroke();
    textAlign(LEFT);
    textSize(130);
    text(n_city+'\n',windowWidth/10,windowHeight/5,windowWidth/1.5,windowHeight/3);

We are almost there. . . .

Your first real time dashboard is here. Cheers.

-Jibs..

[jibs23labs]

Guides and References:

• Processing. Hello World! - Link
• Foundations of Programming in JavaScript - p5.js Tutorial - Link
• Generative art related Videos - Link
• Process Compendium by Casey Raes- Link
• Prominent Researchers Jer Thorp - Link Casey Reas - Link Kevin Slavin - Talk Link Robert Hodgin - Link Marius Watz - Link Neri Oxman - Link
• Prominent Educators Daniel Shiffman - Tutorials Link
• Documentaries A Communication Primer by Charles and Ray Eames - Link The Information Machine by Charles and Ray Eames - Link
• Interesting Projects Chronography by Casey Raes and Tal Rosner Protien by Casey Raes