1630 sujets

Formats, encodage, internationalisation, XML

[Résolu] Modifier image/icone en fct valeur JSON

Bonjour et bonnes vacances au juillettiste et courage aux autres.

Mon soucis,
je souhaiterai pouvoir modifier une icône (image .png) en fonction d'une valeur récupérer au format JSON.

Dans mon cas j'utilise l'API "Openweather" (version gratuite) et je voudrai pouvoir afficher une icône ), en fonction de cette valeur:
(valeur JSON = $weather = $json->weather[ 0 ]->main;

(Une image par info : 'Clouds' => icône d'image nuages, 'Rain' => icône de pluie ..etc..)

Voici mon fichier :

?php
// Url de l'API
$url = "http://api.openweathermap.org/data/2.5/weather?q=Marseille&lang=fr&units=metric&appid=APIKey";

// On get les resultat
$raw = file_get_contents( $url );

// Décode la chaine JSON
$json = json_decode( $raw );

// Nom de la ville
$name = $json->name;

// Météo (Main = Nom principal / description = texte)
$weather = $json->weather[ 0 ]->main;
$desc = $json->weather[ 0 ]->description;


// Températures
$temp = round( $json->main->temp, 1 );
$feel_like = round( $json->main->feels_like, 1 );


// Vent
$speed = round( $json->wind->speed, 1 );

//Hummidité
$humidity = $json->main->humidity;

?>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Météo</title>
</head>
<body>
Météo du jour à <strong><?php echo $name; ?></strong> <br>
Description : : <?php echo $desc ; ?> <br>
Temp : <?php echo $temp ; ?> °C <!--/ Ressenti : <?php echo $feel_like; ?> °C--> <br>
<img src="img/weather/wind.png" alt="" width="25" height="25"> <?php echo $speed; ?> Km/h - <img src="img/weather/humidity.png" alt="" width="25" height="25"> <?php echo $humidity; ?> % <br>
</body>
</html>

La mise en forme est prévu dans un second temps.

Par avance, merci à tout ce qui pourront éclairer ma lanterne de débutant. Smiley murf

Bien à vous.
Daniel SIAUVE
Hello !

Une solution possible (parmi d'autres) serait d'utiliser un tableau qui associe pour chaque valeur de "météo" le chemin vers l'icône correspondante :

$weatherIconMap = array(
    "Clear" => "img/weather/clear.png",
    "Rainy" => "img/weather/rainy.png"
    // ...
);


Ensuite, on pourrait utiliser ce table pour trouver la bonne icône :
$weatherIconPath = $weatherIconMap[$weather];


Et l'insérer dans ton HTML :
<img src="<?php echo $weatherIconPath; ?>" />


Cette solution implique de connaître à l'avance toutes les valeurs possibles de weather.main que peut renvoyer l'API, ce qui n'est pas indiqué dans sa documentation.

Par contre, dans sa v3, l'API envoie une valeur weather.id, qui est un code décrivant de manière normée les conditions. Toutes les valeurs possibles de ce champ sont décrites ici : https://openweathermap.org/weather-conditions#Weather-Condition-Codes-2. Ça vaut le coup d'y jeter un oeil Smiley cligne
Modifié par GuillaumeBauer (02 Jul 2023 - 17:34)
Merci bcp pour ton aide.

J'ai trouvé sur le net une solution qui me donne satisfaction :

<!--Affichage météo-->
<center>
  <h1 class="city">New York</h1>
  <img src="" alt="" class="weather-icon">
  <h1 class="temp">22°C</h1>
  <p class="description"> Ciel clair</p>
  <div class="col">
    <p class="humidity">50%</p>
    <p class="wind">15 km/h</p>
  </div>
</center>
<script>
  const apiKey = "MyApiKey";    
  const apiUrl2 = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang=fr";
    const weatherIcon = document.querySelector(".weather-icon");
  async function checkWeather (){                                
    const response = await fetch(apiUrl2 + `&appid=${apiKey}`+ '&q=[b]marseille[/b]');
    var data = await response.json();  
    console.log(data); 
    document.querySelector(".city").innerHTML = data.name;
    document.querySelector(".temp").innerHTML = Math.round (data.main.temp)  + " °c" ;
    document.querySelector(".description").innerHTML = "Description : " + data.weather[0].description; 
    document.querySelector(".humidity").innerHTML = "Humidité : " + Math.round (data.main.humidity) + " %" ;
    document.querySelector(".wind").innerHTML = "Vitesse du vent : " + Math.round (data.wind.speed) + " km/h" ;
      
     if(data.weather[0].main == "Clouds"){
          weatherIcon.src = "img/weather/clouds.png";
      }
      else if (data.weather[0].main == "Clear"){
          weatherIcon.src = "img/weather/clear.png";
      }
        else if (data.weather[0].main == "Rain"){
          weatherIcon.src = "img/weather/rain.png";
      }
        else if (data.weather[0].main == "Drizzle"){
          weatherIcon.src = "img/weather/drizzle.png";
      }
        else if (data.weather[0].main == "Mist"){
          weatherIcon.src = "img/weather/mist.png";
      } 
        else if (data.weather[0].main == "Thunderstorm"){
          weatherIcon.src = "img/weather/Thunderstorm.png";
      }
        else if (data.weather[0].main == "Snow"){
          weatherIcon.src = "img/weather/snow.png";
      }
        else if (data.weather[0].main == "Fog"){
          weatherIcon.src = "img/weather/fog.png";
      }  
      
  }
    checkWeather ();  
    
</script>


et pour le CSS :

   @charset "utf-8";

   .weather-icon {
     width: 60px;
     margin-top: 0px;
   }
   .city {
   
     font-size: 20px;
   }
   .description, .humidity, .wind {
 
     font-size: 12px;
     margin-top: -6px;
     font-style: italic;
   }

Cordialement.
Prévenir un modérateur
Répondre au sujet
Aller à