Pages

Cydget and Convergance weather template



I have created a Cydget and Convergance (I didn't spell it wrong) template for those who want to create a weather lock screen. It contains an already working weather GPS Cydget. Complete with functions such as converting Celsius to Fahrenheit, sunrise time to 12hr, and mph to kph. 

It is currently named Default.cydget you can change this name to anything, just make sure you change the name in the info.plist.

About the code. The code is 2 scripts one is a .cy file, this is actually what connects to the iOS weather.framework. Nothing here needs to be altered. The weather.js is where you can decide what weather elements you want and have them change the html. By default I have 3 showing: temp, wind, and sunset. I chose these three because they use the inner functions of weather() to modify them.

All weather elements are stored in the WC object, that means to retrieve any weather element you would simply need to use a syntax such as WC.temperature to get the current temp. Most all elements are listed at the top of weather.js.

Inside the loadWeather function is where most of all your changes will happen. For an example I have.

document.getElementById('temp').innerHTML = celsius ? WC.temperature + "°" : cvtF(WC.temperature) + "°"; 

Our div in the html is <div id="temp"></div> so we use document.get to get that div. Then we need to do some special things to it. If a user wants celsius then we need to change the temp. 

celsius ? WC.temperature + "&deg;" : cvtF(WC.temperature) + "&deg;"

Is a ternary operator, basically it is a short way of writing an if statement. If you were to read this aloud it would say if celsius is true then the temp is WC.temperature if it is not true then temperature is cvtF(WC.temperature). 

cvtF() is an inner function of weather() it's purpose is to convert to fahrenheit. In this case WC.temperature is by default celsius, so to change to Fahrenheit we just call the function cvtF() and pass in the variable WC.temperature.

Next in the loadWeather function is 

document.getElementById('wind').innerHTML = celsius ? WC.windSpeed : cvtK(WC.windSpeed);

Same basic principle here, we have a ternary operator that decides what the variable is going to be depending on what value celsius is set to. We do see a new function cvtK() this is used to convert windspeed from mph to kph. If a users sets a lock screen to celsius 99% of the time they want kph too. 

Next in the loadWeather function is

document.getElementById('sunset').innerHTML = celsius ? WC.sunsetTime : cvtS(WC.sunsetTime);

Same as earlier we use a Ternary Operator to change the variable depending on what celsius is set to, here cvtS() function will convert the 24 hr string into 12hr. As it is 24 by default.

Other options.

We don't need to update the weather every time you unlock your device, for this I added a function that will only get new weather information at a certain interval. Since this pulls directly from iOS, when the weather is called it pulls from the cache of weather.framework. When it updates it gets new GPS coordinates and updates the weather according to that. The variable that contains the interval amount is weatherInterval = 60000 * 15; by default it is set to 15 minutes, you can change the 15 to any amount of minutes.

Basically it is as easy as this. Set the celsius variable, set the weatherInterval variable, and add whatever weather elements you want to the loadWeather function and your html. That is it.



Download: Default.cydget











Follow



Previous Article - 7 Free Lockscreens


miWeather Forecast

Zen8

Alizhe






No comments:

Post a Comment