Need help making weather API buttons in p5

banana

I don't know where I need to put buttons, "if (weather)" and "backgroundcolor()". If I put the buttons in setup() it wont work.

var bg;
var weather;
var toggle = '';
var f = '&units=imperial';
var c = '&units=metric';

var btnCity, city;
var btnDesc, desc;
var btnTemp, temp;
var btnSpee, spee;

// function windowResized() { //updates size
//   resizeCanvas(windowWidth, windowHeight);
// }

function setup(){
  var url = 'http://api.openweathermap.org/data/2.5/weather?zip=75081&appid=0a59bb3a87d56084a596f8eb5f50ee42';
  url += f;
  loadJSON(url, gotData);
  
  // bg = createCanvas(windowWidth, windowHeight); //changes so put it in draw()
  // bg.position(0, 0); //need this to overlap with html 
  // bg.style('z-index', '-1'); //css
  
  btnCity = createButton(city);
  btnDesc = createButton('weather.weather[0].description');
  btnTemp = createButton('weather.main.temp');
  btnSpee = createButton('weather.wind.speed');
  
}

function gotData(data) { //gets JSON data from API
  weather = data; //store data in var to prevent time dilation?
  // console.log(weather); //JSON
}

function draw() {
  if (weather) { //wait until JSON is loaded
    city = weather.name;
    // btnDesc = createButton(weather.weather[0].description);
    // btnTemp = createButton(weather.main.temp + ' F');
    // btnSpee = createButton(weather.wind.speed + ' mph');
  }

}
 
 

GoToLoop

https://p5js.org/reference/#/p5/preload

https://p5js.org/reference/#/p5/loadJSON

banana

That helped, GoToLoop. I am starting over.

banana

I am trying to simplify it as much as possible. Can you help me fix my temperature button?

var weather;
var btnCity;
var btnDesc;
var btnTemp;
var btnSpee;

var toggle;

function preload() {
  var url = 'http://api.openweathermap.org/data/2.5/weather?zip=75081&appid=0a59bb3a87d56084a596f8eb5f50ee42&units=imperial';
  weather = loadJSON(url);
}

function setup(){
  noLoop(); //for draw()
}

function draw() {
  toggle = weather.main.temp + ' °F';
  btnCity = createButton(weather.name);
  btnDesc = createButton(weather.weather[0].description); 
  btnTemp = createButton(toggle);
  btnSpee = createButton(weather.wind.speed + ' mph');
  
  btnTemp.mousePressed(changeTemp);
}
 
function changeTemp() {
  if (toggle.slice(-1) === 'F') {
    toggle = (weather.main.temp - 32) * 5/9 + ' °C';
  } else {
    toggle = weather.main.temp + ' °F';
  }
}

GoToLoop

http://Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45

/**
 * OpenWeatherMapJSON (v1.0.2)
 * By Banana (2017-May-03)
 * Mod GoToLoop (2017-May-04)
 *
 * https://forum.Processing.org/two/discussion/22370/
 * need-help-making-weather-api-buttons-in-p5#Item_4
 *
 * http://Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45
 */

"use strict";

const HTML = 'http' + '://',
      SITE = 'api.OpenWeatherMap.org/',
      FOLD = 'data/2.5/weather' + '?',
      CITY = '&zip=94040,us',
      UNIT = '&units=imperial',
      API_KEY = '&appid=0a59bb3a87d56084a596f8eb5f50ee42',
      PATH = HTML + SITE + FOLD + CITY + UNIT + API_KEY,
      TOGGLE = 'Toggle to ',
      IMPERIAL = (TOGGLE + 'Imperial').bold(),
      METRIC = (TOGGLE + 'Metric').bold(),
      F = ' °F', C = ' °C', MPH = ' mph', KPH = ' kph';

let weather, temp, wind, deg, vel;

function preload() {
  weather = loadJSON(PATH, print);
}

function setup() {
  noCanvas(), noLoop();

  createP('City: '.bold() + weather.name);
  createP('Weather: '.bold() + weather.weather[0].description);
  createP('Temp: '.bold() + `<temp>${weather.main.temp}</temp><deg>${F}</deg>`);
  createP('Wind: '.bold() + `<wind>${weather.wind.speed}</wind><vel>${MPH}</vel>`);

  createButton(METRIC).mousePressed(toggleStandardUnit);

  temp = select('temp'), deg = select('deg');
  wind = select('wind'), vel = select('vel');
}

function toggleStandardUnit() {
  const isMetric = ~this.value();
  this.value(isMetric);
  this.html(isMetric && IMPERIAL || METRIC);
  isMetric? setMetric() : setImperial();
}

function setImperial() {
  temp.html(weather.main.temp), deg.html(F);
  wind.html(weather.wind.speed), vel.html(MPH);
}

function setMetric() {
  temp.html(nf(toCelsius(weather.main.temp), 0, 2)), deg.html(C);
  wind.html(nf(toKph(weather.wind.speed), 0, 2)), vel.html(KPH);
}

function toCelsius(fahrenheit) {
  return 5/9 * (fahrenheit - 32);
}

function toKph(mph) {
  return 1.609344 * mph;
}

kfrajer

@GoToLoop Trying out a new js editor?

Kf

GoToLoop

I've already mentioned the Gist.GitHub.com + Bl.ocks.org combo in your forum thread: L-)

https://forum.Processing.org/two/discussion/22191/trying-loading-media-in-thimbleproject#Item_5

GoToLoop

Trying out a new JS editor?

Actually I've typed in all of it in NotePad2 text editor and run it locally as file:/// schme: ;;)

https://xhmikosr.GitHub.io/notepad2-mod/

banana

I got my bottoms to work but I have to click on it couple times for some reason. I know redraw() doesnt work well in draw(). Maybe it is the same with loop().

My html/ body does not show. I have 4 buttons with id city, desc, temp, and spee.

var weather;
var toggleT;
var toggleS;

function preload() {
  var url = 'http://api.openweathermap.org/data/2.5/weather?zip=75081&appid=0a59bb3a87d56084a596f8eb5f50ee42&units=imperial';
  weather = loadJSON(url);
}

function setup(){
  toggleT = round(weather.main.temp) + ' °F';
  toggleS = weather.wind.speed + ' mph';
  noLoop(); 
}

function draw() {
  var btnCity = select('#city').html(weather.name);
  var btnDesc = select('#desc').html(weather.weather[0].description);
  var btnTemp = select('#temp').html(toggleT).mousePressed(changeTemp);
  var btnSpee = select('#spee').html(toggleS).mousePressed(changeSpee);
}

function changeTemp() {
  if (toggleT.slice(-1) === 'F') {
    toggleT = round((weather.main.temp - 32) * 5/9) + ' °C';
  } else {
    toggleT = weather.main.temp + ' °F';
  }
  loop();
}

function changeSpee() {
  if (toggleS.slice(-3) === 'mph') {
    toggleS = weather.wind.speed * 1.6 + ' kph'
  } else {
    toggleS = weather.wind.speed + ' mph';
  }
  loop();
}

banana

I gotta go to work right now but I will try rearranging my code when I am free.

kfrajer

loop() is opposite to noLoop(). You call the latter in setup. This means draw runs once and stops. Then, when you call loop(), draw will begin executing 30 fps again. Technically you just need to call it once.

By the way, you don't use redraw in draw. You use redraw to trigger running draw. But if you call it from draw, you will need to call redraw once outside draw for the redraw inside draw to execute. It is not complicated but I have a feeling it is not what you want in your program. At least not redraw inside draw. Maybe redraw instead of loop in your call back functions?

Kf

banana

Thanks guys. I manage to simplify my code as much as possible. Here is what I have right now. It is for a freecodecamp challenge:

var weather;
var toggleT;
var toggleS;

function preload() {
  var url = 'http://api.openweathermap.org/data/2.5/weather?zip=75081&appid=0a59bb3a87d56084a596f8eb5f50ee42&units=imperial';
  weather = loadJSON(url);
}

function setup(){
  toggleT = round(weather.main.temp) + ' °F';
  toggleS = weather.wind.speed + ' mph';
  
  var btnCity = select('#city').html(weather.name);
  var btnDesc = select('#desc').html(weather.weather[0].description);
  var btnTemp = select('#temp').html(toggleT).mousePressed(changeTemp);
  var btnSpee = select('#spee').html(toggleS).mousePressed(changeSpee);
}

function draw() {
}

function changeTemp() {
  if (toggleT.slice(-1) === 'F') {
    toggleT = round((weather.main.temp - 32) * 5/9) + ' °C';
  } else {
    toggleT = weather.main.temp + ' °F';
  }
  btnTemp = select('#temp').html(toggleT); 
}

function changeSpee() {
  if (toggleS.slice(-3) === 'mph') {
    toggleS = weather.wind.speed * 1.6 + ' kph'
  } else {
    toggleS = weather.wind.speed + ' mph';
  }
  btnSpee = select('#spee').html(toggleS);
}