Custom Navigation Tiles - How to make a Dynamic Weather Tile using Weather Underground API

Jesse · September 29, 2015, 3:28pm

Yes use this:

{CALL:weather.forecast('ZA','Jeffrey's_Bay','9c4fxxxxxx','c')}

hugove · September 29, 2015, 3:30pm

Nicely done, Thanks you. Awesome!

Jesse · September 29, 2015, 3:30pm

The nice script was written by @emre he deserves that credit for making it so dynamic. Its a great example of writing a nice script and how to use various jscript functions. I learned a lot from it and was able to write my own scripts easier by studying his weather script.

pauln · September 30, 2015, 8:41am

What I would like to know is can you get a nice big Symbol like the default tiles? Tried a few things but have not seem it done yet… Of course its only cosmetic and not a high priority.

emre · September 30, 2015, 10:22am

try <font segoe ui symbol><size 40>insert symbol here</size></font>

Other than these defaults you should be able to use any symbol font you’ve installed on your computer.

pauln · October 9, 2015, 9:11am

Sorry @emre tried a few things but does not work?

<font segoe ui symbol><size 40><sym></sym></size></font><linebreak/> <size 48><bold>Work Period</bold></size>

AND

<font segoe ui symbol><size 40><sym></sym></size></font><size 48><bold>Work Period</bold></size>

Obviously the correct symbol was pasted in the code above. Either result I still get a tiny weeny symbol:

Really want one of these below or something bigger than above…

EDIT: Will add this is minor cosmetics, just bugging me that’s all

Jesse · October 9, 2015, 12:01pm

You can experiment with block tags to get result you like.

pauln · October 9, 2015, 1:58pm

Nup, don’t get it? I can create a bigger symbol (new), but It effect the rest of the text by adjusting all the sizing like so:

The Formatting:

<font segoe ui symbol><block left><size 180><sym></sym></size></block></font><linebreak/><size 48><bold>Work Period</bold></size>

Alignment seems ineffective and I know it just lack of understanding but I fail to see how I can cut the tile in half like the default tiles…

Jesse · October 9, 2015, 2:11pm

Try this:

<block><size 100><sym></sym></size><size 50> Work Periods</size></block>
{CALL:weather.forecast('AR','Newark','APIKEY','f')}

pauln · October 9, 2015, 2:20pm

Thanks kendash - almost similar result, so that’s good I was close. I trying to achieve the big symbol like shown in the reports tile above but this must be some internal formatting thing. It would almost mean placing a “table” - 2 cells in the tile using 1 side for a large symbol and the other side for text.

Happy to conclude this experiment.
EDIT: Yours does seem a little bigger than mine

Jesse · October 9, 2015, 2:21pm

Well it will be hard to get exact same size because there is so much data in the script to fit in there and it auto resizes it so it fits. So its my opinion it looks better to put symbol and tile name above the data.

We can make it put symbol full size on left and script data on right but the weather data will be very small and hard to read.

Your two screenshots above might demonstrate it … Look at the two screenshots with one on top of the other. Look at the space available to right of the large icon… then look at how if you overlap the top screenshot the script data would be on top of the last bar in the icon image… it would have to shrink to fit that space…making the data even smaller to read.

So we needed to find a happy balance of sizes so it looks nice.

padthai · March 7, 2016, 11:36am

I have copied and paste but it does not show anything

could you please check what i am missing here

My Script

var nl = '<linebreak/>';

function forecast(region,city,key,t)
{
  if (typeof(t) == "undefined") { var t = 'f'; }
  var result = nl;
  var weather = getCurrent(region,city,key)
  result += toBlock(cdegree(weather,t)) + nl;
  var root = getForecast(region,city,key);  
  for (i = 0; i < root.length; i++) {
    result += toBlock(toTile(root[i],t)); 
  }
  return result;
}

function getForecast(region,city,key)
{
  var u = 'http://api.wunderground.com/api/'+key+'/forecast/q/'+region+'/'+city+'.json';
  var allweather = web.Download(u);
  var weather = JSON.parse(allweather);
  return weather.forecast.simpleforecast.forecastday;  
}

function getCurrent(region,city,key)
{
  var u = 'http://api.wunderground.com/api/'+key+'/conditions/q/'+region+'/'+city+'.json';
  var allweather = web.Download(u);
  var weather = JSON.parse(allweather);
  return weather.current_observation;  
}

function toBlock(content)
{
   return '<block 30,0,0,0>' + content + '</block>'
}

function toTile(forecast,t)
{
   return forecast.date.weekday_short + ' ' +sym(forecast.icon) + nl + 
     degree(forecast.high,t) + ' / ' + degree(forecast.low,t);
}

function degree(value, t)
{
   return t=='c' ? value.celsius: value.fahrenheit;
}

function cdegree(value, t)
{
   var result = t=='c' ? value.temp_c: value.temp_f;
   return '<size 70><bold>'+result+' '+degreesym(t)+'</bold></size>';
}

function degreesym(t)
{
   return t=='c' ? 'C˚': 'F˚';
}
function sym(icon)
{
  if(icon.indexOf('partlycloudy') != -1) return '<sym></sym>';
  if(icon.indexOf('cloudy') != -1) return '<sym></sym>';
  if(icon.indexOf('rain') != -1) return '<sym></sym>';
  if(icon.indexOf('snow') != -1) return '<sym></sym>';
  if(icon.indexOf('clear') != -1) return '<sym></sym>';
  if(icon.indexOf('sleet') != -1) return '<sym></sym>'
  if(icon.indexOf('fog') != -1) return '<sym></sym>'
  if(icon.indexOf('storm') != -1) return '<sym></sym>'
  return icon;
}

Result

through web browser

Jesse · March 7, 2016, 1:24pm

Show your script via screenshot. Is your handler weather?

PS: I edited your image to get rid of your key, you do not want to share your private weather api key with public.

padthai · March 10, 2016, 7:30am

Sorry I don’t know what is handler weather? where can i find it

Jesse · March 10, 2016, 1:29pm

It’s all in the tutorial. Read it carefully. It’s about third post down by another member.

QMcKay · March 10, 2016, 2:40pm

The Name is arbitrary - it can be anything you want.

The Handler is important. This is how you reference the functions in the Script.

{CALL:handler.function()}

For the screenshot below, your call would look like this:

{CALL:weather.current('Istanbul','Turkey')}
handler ^        ^ function

GreatShakesBar · March 10, 2016, 2:59pm

I tried this, but im getting nothing on my screen…

Ive sort of started my till from scratch at home to play about ready for when I build the biggy. THis would be a great asset to me as I have a milkshake bar and of course everything is weather dependent.

So, ive done the script… Ive done the Automation COmmand and yet its not even showing a tile?

I have deleted it since but just saw this topic pop up and so thought id give it another shot.

Ill post screenshots in due course

Regards

Matt

QMcKay · March 10, 2016, 3:22pm

Map the button to Display on Navigation.

You should also set your Tile Cache to a reasonable value, such as 30 or 60. This will prevent using up your allowed API “hits”, since in most cases, there is a limit to how often you are allowed to query per day.

Jesse · March 10, 2016, 6:09pm

This seems obvious but you never know, also ensure your internet is working on the terminal and firewall is not blocking access.

GreatShakesBar · March 11, 2016, 9:51am

I dont have a firewall installed, and its all on this PC at the moment I havent transferred the new setup to the terminal.

Ill have another gander at it all today, but im sure im doing something wrong

regards

Matt

Edit: I have managed to get a button on the Nav screen. It seems I needed to give it a name. So im getting there!

Edit Edit:

Ive disabled the firewall but still isnt showing