Take away gradients, drop shadows, other lighting effects, and colour, then what's left of an image? Black, white and opacity. Let your wallpaper define the weather condition through opacity and "negative space".





Through the brilliant coding mind of my friend Marty McFly, we were able to carefully piece to together the frame, with the standard and forecast weather conditions, to allow a seamless transition across the widget. What seems like simplicity at first, can often be a well executed dance between complicated elements It's not often that the coding mind and graphic art minds can communicate each others ideas, considering the complexity of this project. I just want to say I'm truly grateful to have had this opportunity.









::The Objectives::





1.) To create a weather widget for your homescreen that is complimented by your wallpaper.

2.) To have your wallpaper define the weather condition through a "cut out" transparent stroke that surrounds the weather icon.

3.) To have the weather image seperate from the frame to allow for a 5 day touch forecast.

4.) To create a stable template as a base to allow for many adaptations of the background layers.

5.) To complimanet the look and feel of iOS8, whilst also offereing an alternative with more depth and lighting effects.









::Features::





(-) 5 day forecast.

(-) Separate MyLocation, or WidgetWeather choices.

(-) Several frames to choose from, including new Fuel and 7hemis inspired sets.

(-) Black, white, and coloured weather sets, custom made for this widget.

(-) Font colour option.

(-) Many Language options.

(-) Plenty more options including; Neighbourhood, C/F Temp, WOIED (MyLocation iWidget only), and more.









::The Challenges::





The weather images are "cut out" from the background (BG) image, via a hollow space that follows the outer edge of the entire weather condition. This seems an easy task, but the widget uses the same weather images for both the 5 day forecast view, and the standard view. It only calls upon a different frame for each view, with its own unique "cut out" windows for the apropriatly scaled weather image.





Although the initial design had no shadows in the frame, I had to adjust the size of the weather image portion to suit the retina display, so I cut out a little extra from the fame BG's so I could later incorporate shadow'd frames with the same set of weahter images. This seamless "Puzzle Piece" of weather condition with their associated BG images was not an easy task. Once Marty gave me the base code, I had to run scripts on my PSDs and use the caculator to work out a canvas size, and "coloured pixel" size that could be divided by 2 (for retina diplays), and reach a number that could be centred to pixel value in the CSS. Then the 5 day forecast images are also scaled down concentrating on aspect ratio and "coloured pixel" size.





When an image is "rendered" onto the display, a simple type of Anti Alaising happens. Even with horizontal lines I work with here, if the edge of my image doesn't fall exactly on a pixel, it renders the pixels transperent, that it passes through. I need a scale system that makes these edges perfectly snapped to a pixel, so that I know the exact dimensions to cut out from my frames, so that every image is seamlessly aligned to the next.





::Download Links::

Due to the very precise nature of the alignment in this widget, there's seperate downloads for iP6+. These are indicated by the "[iP6]" extension in the name. These larger widgets will work on iP6 and lower devices, but the alignment has small discrepncies.



