Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
mrchow19910319

What kind of icon set + font does momentum dashboard use?

If you want custom icons you will need to use the weather type to choose between your own files. Probably with either data.weather[0].description or with data.weather[0].main if you want a more general description.

 

Edit:

Actually, it might be easier to swap based on data.weather[0].id

Those are all listed here https://openweathermap.org/weather-conditions

Recommended Posts

Posted · Original PosterOP

I am doing this momentum clone project.
I can retrieve all the data + icons from open weather API alright.
But on momentum page their fonts + icons are all customized.

If I choose to use custom icons, (like font awesome) how do I match it with open weather API’s icon set?

 

 

// get the user's location

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    alert("You are either disabled your location services or geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  
  //Get the latitude and longtitude from getLocation
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  
  //Prepare API key + submit everything into the URL for api call
  const KEY = "f70ed550e82179ce0014bcc32bc867ec";
  let URL = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${KEY}`; 
  
  console.log(URL);
    
  //Call api get data using fetch
  fetch(URL)
    .then((resp) => resp.json())
    .then(
      function(data){
        console.log(data);

        let cityName = data.name; 
        outputCityName(cityName);

        let cityDesc = data.weather[0].description;
        // console.log(cityDesc);
        outputDescription(cityDesc);

        let mainIcon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png"; 
        console.log(mainIcon);
        outputMainIcon(mainIcon);
      }
    )
    .catch(function(error) {
    console.log(error)
    });
}


//
// Functions that actually output those data
//
// right corner city name
function outputCityName(cityName){
  document.getElementById('city_name').innerHTML = `${cityName}`;
}
// right corner weather description
function outputDescription(cityDesc){
  document.getElementById('city_desc').innerHTML = `${cityDesc}`;
}
// right corner weather icon
function outputMainIcon(mainIcon){
  document.getElementById('main_icon').src = `${mainIcon}`; 
}

1938055100_fullapp.png.d0e74d8d3bd8a3fdc3dee8ada29562d4.png


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Best Answer

If you want custom icons you will need to use the weather type to choose between your own files. Probably with either data.weather[0].description or with data.weather[0].main if you want a more general description.

 

Edit:

Actually, it might be easier to swap based on data.weather[0].id

Those are all listed here https://openweathermap.org/weather-conditions


¯\_(ツ)_/¯

 

 

Desktop:

Intel Core i7-3820 | Corsair H100i | ASUS P9X79-LE | 16GB Patriot Viper 3 1866MHz DDR3 | MSI GTX 970 Gaming 4G | 2TB WD Blue M.2 SATA SSD | 2TB Hitachi Deskstar HDD | 1TB WD Black HDD | Corsair CX750M Fractal Design Define R5 Windows 10 Pro / Linux Mint 19 Cinnamon

 

Laptop:

Dell XPS 15 9560 4K Touch | Intel Core i5-7300HQ | 12GB Generic (Crucial?) 2133MHz DDR4 | Nvidia GTX 1050 | 256GB Toshiba M.2 NVMe SSD | Windows 10

Link to post
Share on other sites
Posted · Original PosterOP
1 minute ago, BobVonBob said:

If you want custom icons you will need to use the weather type to choose between your own files. Probably with either data.weather[0].description or with data.weather[0].main if you want a more general description.

how do I match all those icons with open weather API's icons?

I assume there must be hundreds of them..


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Just now, mrchow19910319 said:

how do I match all those icons with open weather API's icons?

I assume there must be hundreds of them..

edited my first post.


¯\_(ツ)_/¯

 

 

Desktop:

Intel Core i7-3820 | Corsair H100i | ASUS P9X79-LE | 16GB Patriot Viper 3 1866MHz DDR3 | MSI GTX 970 Gaming 4G | 2TB WD Blue M.2 SATA SSD | 2TB Hitachi Deskstar HDD | 1TB WD Black HDD | Corsair CX750M Fractal Design Define R5 Windows 10 Pro / Linux Mint 19 Cinnamon

 

Laptop:

Dell XPS 15 9560 4K Touch | Intel Core i5-7300HQ | 12GB Generic (Crucial?) 2133MHz DDR4 | Nvidia GTX 1050 | 256GB Toshiba M.2 NVMe SSD | Windows 10

Link to post
Share on other sites
Posted · Original PosterOP
7 hours ago, BobVonBob said:

edited my first post.

ahhh I see. Thanks I think I can swap them out one by one! 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×