Automated Weather Cards with Conditions-based Backgrounds

[eatondpe]

✂️ Copy of your #42SmartBlock from Roam

Download the following zip and extract and import the enclosed JSON into your Roam graph. Automated Weather Cards.zip

📋 Describe the SmartBlock

Automated Weather Cards has been updated to be more stable and include more information, such as Current Temperature and Current Feels Like Temperature. Many thanks to @GitMurf for many of these improvements.

This SmartBlock creates a weather card with up-to-the-minute weather conditions from OpenWeatherMap.org. The background of the card changes to reflect the current weather conditions.

You will need to create an account on OpenWeatherMap.org and create an API key, then update this line in the javascript block with your API key where it says "YOURAPIKEYHERE". The API is free for personal use.

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

1. You must have a personal API key from openweathermap.org.
2. You need both the SmartBlock and the accompanying CSS, both found in the attached JSON.

📷 Screenshot of your #42SmartBlock workflow/template from Roam

💡 Additional Info

[andreasg7]

Happy New Year David! All the best for a fulfilling 2021! And awesome work! Quick q: Any parameter on the SmartBlock controlling the # of temprature decimals?

[eatondpe]

@andreasg7 Happy New Year!

@GitMurf is helping me with an upgrade that I hope will be ready shortly. In the meantime, you can use Math.round() as follows to round to the nearest integer. Below is the updated code he provided, though it's still a work in process.

var url = 'https://api.openweathermap.org/data/2.5/weather?'
    + 'q=city,state,country code'
    + '&units=imperial&cnt=1&'
    + 'APPID=your api key goes here';
var requestResults = await fetch(url);
var dataResults = await requestResults.json();

function toSentenceCase (string) {
  return string.slice(0,1).toUpperCase() + string.slice(1);
}

roam42.smartBlocks.activeWorkflow.vars['locationName'] = dataResults.name + ' (' + dataResults.sys.country + ')';
roam42.smartBlocks.activeWorkflow.vars['weatherConditions'] = dataResults.weather[0].main;
roam42.smartBlocks.activeWorkflow.vars['weatherDescription'] = toSentenceCase(dataResults.weather[0].description);
roam42.smartBlocks.activeWorkflow.vars['highTemperature'] = Math.round(dataResults.main.temp_max);
roam42.smartBlocks.activeWorkflow.vars['lowTemperature'] = Math.round(dataResults.main.temp_min);
roam42.smartBlocks.activeWorkflow.vars['curTemperature'] = Math.round(dataResults.main.temp);
roam42.smartBlocks.activeWorkflow.vars['feelsLike'] = Math.round(dataResults.main.feels_like);
roam42.smartBlocks.activeWorkflow.vars['humidity'] = Math.round(dataResults.main.humidity);

return '';

[andreasg7]

@eatondpe Nicee!! Got it; thanks! And I was thinking about current & feels-like temps!! Can't wait ;)

[eatondpe]

@andreasg7 Weather Cards has been updated to be more stable and include more information, such as Current Temperature and Current Feels Like Temperature.

[aminbenselim]

I have tried to download the zip file and google chrome keeps blocking it 😞 is it possible to update the issue with the code itself?

[eatondpe]

@amine-benselim Sorry that didn't work for you. Here is the JSON file. Download this .txt file and rename it from .txt to .json. Then you should be able to import it.

Automated Weather Card with Conditions-based Backgrounds.txt

[mandliya]

This is amazing. I am not sure if this is answered somewhere else. How can I call this smartblock in another smartblock. E.g. I want the weather in my daily workflow. When I run the daily workflow through it's smartblock, I want it to run weather workflow.

[eatondpe]

@mandliya It depends on whether you use Roam's native templates (I do) or you're template is built in a SmartBlock or by using a text expander.

In my Daily Notes template (the Roam native you get to using ;;) I add a button so I can start it with the click of a button. {{ Weather :42SmartBlock:Weather Forecast}}

To start it from any block manually, of course, you can merely type jjweather. Or change the name of the Weather Forecast SmartBlock to anything that makes it easier to find.