Image
Preview shows included styles, clockwise from top-left: iconOnly, myopia, split and originalBubble. All with Klear icon set. (The background and dock are from the Dark Aluminium shelves or Wooden shelves sets.)

Latest Download: Click Here
Additional Icon Sets: Tango

Credit:
Largely Coded in XHTML, CSS and JS by myself barring the AccuWeather fetcher 'borrowed' from Leopard*.
Data sources are currently either AccuWeather (Apple's feed*) or Yahoo!Weather (beta-quality).
With help from Jimmy who located the Klear and Tango icon sets and designed the 'split' display style.
(N.B. This is technically unrelated to, but inspired by, sjaq's release.)

As regards the newly added LockBackground.html in Winterboard:
For this to work correctly, sharing data between both Lock screen and Wallpaper, I will need to write the data to a local database (as spec'd in HTML5). This will involve a significant rewrite.
There is also a significant problem with just copying Wallpaper.html to LockBackground.html, as doing so will result in hitting Apple's servers every time you view your lock screen. The lock screen WebView is not persistent!!
I do intend to release a version which has significant improvements generally to the backend that will use the same data for the LockBackground and Wallpaper. However this release is currently stalled by a bug in Winterboard preventing the use of HTML5 clientside databases. Saurik has been made aware of this and, while he can obviously make no promises, it may be fixed at some point.

Basic Installation
Having unzipped WeatherWidget.theme.zip edit WeatherWidget.theme/Private/configureMe.js so that the line:
Code: Select all
var locale = "…"

reads correctly for your location (e.g. 'Defiance, Ohio', 'Moscow, Russia, 'London, UK').
Then just copy WeatherWidget.theme into /Library/Themes onto your iTouch.

Changing Appearance
Both the icon sets and layout can be changed by editing the iconSet and stylesheet variables respectively.
You can design your own icon set placing a folder with correctly named files (see one of the included sets for the schema; compatible with KWeather) in the Icon Sets folder and your own stylesheet in the Stylesheets folder.
Please post your creations! (As a warning, the structure of the XHTML may yet change, although I am trying to maintain compatibility.)


Troubleshooting
Not Found usually indicates you should try a variation on your locale. Apple/Accuweather's backend is very good but can be stumped. (Yahoo!'s is unforgiving.)
No Response usually indicates that you need to check your iTouch is connected to the Internet. The AccuWeather servers could also be down.
You can try checking with Leopard's Weather widget that your locale works.

*Copyright Note
I feel that it is not too great infringement to use relatively generic code by Apple (which I am now butchering anyway) and Apple's (presumably paid-for) feed to help provide this; it will only be used a relatively small number of people on an Apple-manufactured device. Nevertheless, I am aiming to build a number of alternative, free feeds and eventually retire the Apple/Accuweather source,

As regards the rest of the code, you're free to modify and redistribute so long as you attribute.

The Klear icon set is provided under the GPL by 'Kubicle'
Last edited by Zetetic Apparatchik on August 29th, 2008, 4:05 pm, edited 1 time in total.
wow this is way better than the other thing, much easier to install and looks nicer.
I'm hoping that you're talking as someone for whom it worked? :thumbsup:
is it possible to get "real feel" temperature, rather then actual temperature?

for example...HK actual temperature is 81 degrees....which is what the weatherwidget.theme reports accurately. However the real temperature (when taking other factors such as humidity and wind chill) is closer to 105 degrees. It s abig difference between feeling pleasant and melting on the streets.

Some weather sites include both temperatures in their details such as accuweather: http://www.accuweather.com/world-index- ... G&metric=0

anyway to pull the "real feel" temperature instead?
Thanks for this, beautiful !
benderbends wrote:is it possible to get "real feel" temperature, rather then actual temperature

It should be, at least from the Apple/AccuWeather feed. I'll try to implement it.
works great.. but is there any way to disable the automatic updating and have a 'tap-to-update' function?
Image

would you happen to know what i did wrong :(
Update:
Added requested 'Real Feel'. (Change 'useRealFeel' to true.) (Semi-compatible with Yahoo! feeds.)
Increased update interval to 55 minutes. This better reflects life-time of the feeds. Any quicker won't really update the actual weather.
Might report errors in the initial 'Loading...' better.

@huey85:
I don't believe that Winterboard allows Wallpaper.html to register clicks or what-have-you, but I haven't checked...
@Tikopowii:
What is your configureMe.js like? (Please wrap in code tags.)
This is absolutely amazing now. I can't believe how much it is progressed since the first release version. Amazing work guys! Kudos to both of you!
Code: Select all
// WeatherWidget.theme
// Produced by Adam Watkins (http://www.stupidpupil.co.uk)

// The location field should be a relatively machine-legible string
// if using the default, Apple/AccuWeather parser (originally from Leopard's Weather.wdgt)
var locale = "USTX0057" //e.g. 'Defiance, Ohio'|'Moscow, Russia'|'Ledyard, AT'|'London, UK'

// Set to 'false' if you'd prefer Farenheit
var isCelsius = false //true|false

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

// Supplied styles are 'originalBubble', 'myopia', 'iconOnly' and 'split'.
// (Add your own to the CSS folder!)
var stylesheet = 'myopia' //'originalBubble'|'myopia'|'iconOnly'|'split'

// The supplied icon set is 'klear'
// Images must follow the same naming schema as the 'klear' set (borrowed from KWeather)
var iconSet = "klear" //'klear'|'tango'|null (null makes iconSet = stylesheet)
var iconExt = ".png" //'.png'|.'gif' etc.

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

// The other available source is 'yahooWeather' which for the 'locale'
// requires a US zip or location code (e.g. UKXX0085 or CHXX0008) from http://weather.yahoo.com
var source = 'yahooWeather' //'appleAccuweatherStolen'|'yahooWeather'

// Please endeavour to set this to a sensible value if you really must change it...
var updateInterval = 35 //Minutes
Try updating, it's working for me (at least in Safari, I'll try in MobileSafari).
(Don't just overwrite configureMe.js, however, add the values back in. Apologies, otherwise you'll break the new preference. I'll try to avoid such situations in future.)
Last edited by Zetetic Apparatchik on August 27th, 2008, 4:19 am, edited 1 time in total.
Ah i accidentally named the Stylesheets folder Stylesheet :D im really dumb

Sorry for wasting your time but thanks :)
@Zetetic Apparatchik: oh ok then, it would be great if such a function could be implemented. but its great nonetheless

off topic: @tikopowii: could u tell me what dock that is?
No worries. :thumbsup:
by the way i love this :D thanks for making it
and originalbubble is my favorite :)
I got my phone back up and running so I'm ready to kill it again, I'd like to try my hand at making a set of animated walls and use them as an icon set but I would really need you Zetetic or Jimmy to help me position the wallpaper so that it displays as the icon (it will look like this one I made for day and it's only 3 frames) and when it is night weather and a moon normally displays the entire wallpaper will change to night w/ a moon on it, if it's raining at night the rain will be raining on a night time wallpaper (I think you get the idea right?)

Image

Can you take this animated icon/wall here and just rename it to cloudy.gif and drop it in your icon folder to use and give me whatever edited files I need to position things so I can make the other animated icon walls?

I will post the completed set here for everyone if you guys can do me that favor? Everyone who wants to use it will have to set up one page w/ one transparent icon on that page to lock it and then you will have a full screen that changes from day to night w/ animated weather on it...
Last edited by Doreen on August 27th, 2008, 4:47 am, edited 1 time in total.
@Doreen:
Code: Select all
#WeatherContainer{

}

#TextContainer{
display:none;
}


#weatherIcon{
   height:480px;
   width:320px;
   position:fixed;
   top: 0;
   left:0;
}

That's a suitable stylesheet (put it in a file (e.g. doreen.css), in Stylesheets, change stylesheet =, appropriately (e.g. doreen)).
Once, you've created an Icon Set (as a folder in Icon Sets), you'll also have to change iconSet and iconExt.
Got it, thank you, when I come back I'll have a lil donation for "you" and your script and jimmy's hard work too. =)
Dedicated thread!

Here is how I have got mine working:

Image
neo...please post your changes so i can have that as an option
Image

Image

Image

Zetetic grab the 3rd icon and rename it to whatever your current icon is showing to test it, it works! however there may be a limit to num of frames it can handle cuz the sun one animated flawlessly very smooth and no hanging on my springboard etc. but though the night time weather icon did change and load up (as you can see via my ss) it would not animate my twinkling stars (possibly due to the fact that one has more frames in the ani vs the sun one that is only 3 frames)
Last edited by Doreen on August 27th, 2008, 7:34 am, edited 1 time in total.
Thanks man, this is awesome and damn easy if you have dreamweaver. My iPhone looks awesome

Image
In an attempt to stop my ISP complaining, I've taken out the included Tango. (Download it from KDE-Look and rename to folder etc. if you want it.)