Table of Contents |
| Widgetation

On this page you can create web pages made up of widgets. Widgets are items such as images or text, portions of other web pages, time or weather display and other bits of information.
Please also visit iFuntastic.com for more documentation on conditions and the sprite widget.
WinterBoard themes can use a LockBackground.html file for display on the Lock Screen and a Widgets.html file for display on the Home Screen. In addition, you can create up to three pages named WebPage1..4 that the other pages can link to. WebPage1 of a Widgetation theme can also be chosen as the main page for a web clip on the Jack the Clipper page. This, for example, lets you create web clips with password protection. Lastly, you can create a page that can be used as your E-mail Signature - and you can switch between signatures with WinterBoard!
Overview
The Widgetation page has three main sections: on the left is the preview area which displays the page you are creating. On the top of the right side is the list of widgets which make up your page. Below that are the widget attributes. It is a list of settings for the currently active widget.
Getting Started
Create a theme with the Theme menu on the upper left, or select an existing theme.
Next to the theme menu is the Mode menu which lets you choose which kind of web page you are creating. The choices are E-mail signature, Lock Screen, Home Screen, and Web Page 1..4. Underneath the mode menu are the Replace and Ignore radio buttons. If you select 'Ignore', then the web page is inactive. This allows you to keep your composition around, although it won't be used in the theme. 'Replace' activates the web page and will replace the appropriate web page in the theme with your creation. Keep this in mind when working on themes that were not created in iFuntastic! As usual, I recommend creating new themes rather than editing existing third party themes.
The preview is updated whenever you make changes to the widgets on your page. Depending on the kind of widgets and their attributes, the preview can get stuck. If this happens, click on the Update Preview button to get things going again. Next is the View menu with some options to display (or hide) guides that help in positioning the widgets. Last is the Device menu which lets you install the theme (and your page) on the device.
Widgets Menu
This menu displays a list of widget definitions to choose from. Some kinds of widget (such as the background) can be used only once on a page. Most others can be added multiple times. You can save the active widget to the Widgets folder and re-use it in other themes. 'Delete' removes the active widget. 'Open Folder' opens the current mode's widget folder in the File Manager. There you can examine the widgets or delete multiple widgets.
Region Menu
Some widgets contain text strings that can be localized. This means you can have different versions for each supported language. The region menu lets you choose the set of text strings to work with. On the device, the appropriate set is chosen based on the current language setting.
The Preview Area
iFuntastic uses an external application to render the web page. What you see is the resulting image, not an editable web page. The active widget is displayed with a frame. You can position a widget by dragging its frame or resize it by grabbing one of the resize handles. If the widget is auto sized, auto positioned or transformed then iFuntastic cannot display its frame correctly and things get a bit tricky.
If the preview does not update after you make a change then it may have gotten stuck - click on the 'Update Preview' button to restart it.
You can make a widget active by double-clicking on it in the preview area or by clicking on it in the widget list.
The preview uses the computer's WebKit framework which may render pages differently from the WebKit version on the device. Watch out for some inconsistencies in spacing.
The Widget List
The widget list displays the widgets that make up your web page. You can drag widgets in the list to change their front-to-back ordering. Click on the 'eye' icon to show or hide individual widgets. The 'lock' icon can be used to lock a widget in the preview area. When a widget is locked, it will ignore clicks. This helps avoid accidental selection (and modification) of a widget and makes dealing with overlapping widgets easier.
You can have multiple widgets with the same name in the list - to help distinguish them, give them individual names in the attributes list.
The Attributes List
This list shows the available attributes for the active widget. There is a great wealth of settings that can be tweaked and they are loosely grouped into categories. Each category has a title line with a 'show/hide' triangle icon. A click on the icon toggles the state. Only one category at a time can be open. Different widgets have different attributes and categories, but a lot of them are common to all widgets.
Here is a list of most of the attributes - some of the self explanatory ones have been skipped.

- Name this edit box is only for your convenience. Enter a name to distinguish the widget from others in the widgets list and widgets menu.
- Info this (optional) category displays information that pertains to that particular kind of widget.
- Content
  - Format lets you enter text or variables for the widget (more detail in the 'Info' section of the widget.)
  - Content Position sliders to change the content within the widget (a control-click on the widget changes these values as well.)
  - Padding space that is added to each side of the content; note that this affects the dimensions of the widget
- Strings some widgets let you edit the strings they use (weekday names, for example.) You can select each field and enter your own string. Use the region menu (see above) to create or change the set of strings used by a specific language setting on the device.
- Images you can assign, hide or edit images in the standard way.
- Size & Location
  - Width, Height you can set the dimensions of the widget with these sliders. Control-click on the slider's thumb to enter a numeric value; double-click to set to the default value. The dimensions can also be changed by dragging the size handles on the widget frame. If you click the Auto radio on, the width or height is determined by the natural size of the content. The length of a piece of text for example. iFuntastic cannot determine the 'auto' size and simply uses '10' as the value when drawing the frame.
  - Absolute Position the position of the widget on the page. You can also drag the widget in the preview area to change the position. If you select 'auto' positioning, then the widgets are positioned according to thei order and size as you would expect on a web page. However, iFuntastic won't know that position, so the frames will not be anywhere near the widget. You can use the margin attribute in the 'Advanced' category to adjust the space between auto-positioned widgets.
- Text Style
  - Text Color the color of the widget's text (if it uses any.)
  - Text Font pick a font from the menu. The menu lists the fonts that are on the device. Some of them won't preview, because they are not among the fonts on your computer.
  - Text Alignment
- More Text Stylin'
  - Text Shadow opacity, color, offset and blurriness of the text shadow.
  - Text Weight etc.
- Background & Border
  - Background Image the image to display as the widget's background. Edit the image opacity to let whatever is underneath the widget 'shine through'. Images that are smaller than the widget size are repeated - use small images to easily make a textured background.
  - Background Color choose a color as the background. The background image covers the color; if the image has 'holes' or some transparency, then the color will shine through.
  - Border the border attribute lets you pick various borders around the widget; note that this affects the dimensions of the widget
- Transform
  - Reflection you can add a predefined reflection to the widget. The reflection is applied to the content. You need to at least double the widgets height for the reflection to display properly.
  - Transform here you can rotate, skew and scale the widget. iFuntastic cannot account for the transformation, so the frame will remain unchanged and won't match what you see in the preview.
- Advanced
  - Refresh Interval some widgets, such as time or weather display, need to update periodically. The refresh interval determines how frequently this happens. Frequent refreshing puts a strain on the battery, so you should make refresh intervals as large as possible (and, for example, not display seconds in a time display.)
  - Margin the margin specifies the offset to 'previous' widgets. This is useful if widgets are auto positioned on the page.
  - Top, Right, Bottom, Left Borders these let you hide or change each individual side of the widget border.

Background Widget
all web pages except e-mail signatures have a fixed background widget that applies to the whole screen. You can choose an image and a color or both. In contrast to each widget's background color, the color for the background widget can be applied to the image as a tint. You can also choose the Default background image. This will be the wallpaper that you set in the Settings application and so can be changed (and remains changeable) on the device. If you use this on a Home Screen page, then you can make the Home Screen background match the Lock Screen background. Note that hiding the background does not make it transparent - it makes it black.
Lock Screen
The lock screen is a busy place. Your web page won't interfere with anything (except visually,) but it may get covered by the password entry screen, the lock sliders, time and date display, messages, iPod controls and album cover of currently playing song. You can squeeze your widgets in between the time display and lock slider or you can hide any or all of them on the WinterBoard Themes page -> LockScreen template. Everything else comes up only infrequently, so you should be able to live with that.
Lock Screen dimming delay - the lock screen switches off after 5 seconds. That is not a long time to take in the information that is displayed. There is a library that you can install from Cydia that addresses this problem. It adds an entry to the Settings app which lets you set the delay from 1 to 60 seconds. To install, go to Cydia -> Sections -> Tweaks -> Lockscreen Dim Delay.
Home Screen
The home screen is busy too :-). Another drawback is that the same web page is displayed underneath all the screens. Making room for widgets to be displayed requires careful arrangement of the applications. It may not be worth the trouble, but here are some tips:
- leave a space in the dock and put a widget there. Since the dock row is fixed across all screens, that simplifies things - 'Background' images assigned on the Home Screen Layout page will cover the web page. So, assign background images underneath the apps and have the web page visible on the search screen or empty screens only - use small widgets and squeeze them in between the app icons - leave the bottom row of app icons free on all pages and display the widgets there
Web Page 1..4
These 'extra' pages will be displayed in place of the 'main' page when you click on an appropriate link. Think of them as extensions to the main page. Web Page 1 can be used in web clips (see the Jack the Clipper page for more info.) You can use it as the 'entry' page to a list of multimedia files - and you can password protect that list by placing a password entry field onto the entry page.
E-mail Signature
Design an e-mail signature with text, web links and images. You can switch between signatures by switching themes in WinterBoard! Note that the custom signature key in the Settings app is deleted when you install a theme with a signature from within iFuntastic. This makes the device use the default key, and that's the one that is being themed. If you edit the custom key in the Settings application, then it will be recreated and used instead of the default. You will have to re-install a signature theme in iFuntastic to delete it again and be able to switch between signatures. Some combinations of text, images and attributes may not display properly in a sent e-mail. Much less in e-mail programs other than Mail.app. You should test your signatures to avoid surprises.
Known Problems and Quirks
You can have only one Lock Screen or Home Screen web page - the 'top' (active) theme in WinterBoard will determine the page that is used. There is no overlay or merging of the pages from different themes. As mentioned above, rendering of widgets in iFuntastic may be different from the rendering on the device. Also see the caveats in the E-mail Signature section above. Widgets with a high refresh rate (especially when they access the internet) may be a substantial drain on the battery - they are active even if the device is 'sleeping'. Depending on the firmware (WebKit version) you use, sections of web pages (iframes) may be positioned incorrectly. It may also depend on which section of which web site you are displaying. Either way, you can get around that by increasing the size of the widget.
Please report any problems you may encounter and I'll see if I can fix them.
Custom Widgets
You can create your own custom widgets and place them into the iFuntastic Support folder: ~/Library/Application Support/bitSplit Enterprises/iFuntastic/Custom Widgets/. If you come up with an especially cool one, let me know! Each widget is represented by a folder. I haven't gotten around to documenting this - please study the provided widgets or send me an e-mail (see Help menu) for more information. You should have some knowledge of HTML and JavaScript. The predefined widgets can be found in the iFuntastic Application package's Widget folder.