Conditions are simplistic way of telling a widget what to do; they are ultimately translated into Javascript instructions. Each widget, as an element of a web page, has many attributes such as position, size, color, content and so on. The most important of these attributes can be changed by checking some requirements to be met - the condition - and then assigning a new value or performing a specialized action. The list of conditions is evaluated over and over - it is important to set the evaluation interval as large as possible while still retaining the desired functionality. This keeps the processor load down and makes the battery last longer. For example, fixed text needs no further processing, but the second hand of a clock needs to check the time every half second to reliably update its position.

Anatomy of a Condition

You assemble the desired behavior by picking values and actions from the popup menus or entering desired values in the edit fields. Line 1 contains the actual condition: If some value... The right menu allows you to pick a test or comparison. Line 2 lets you enter values for X and Y if they are part of the comparison; these are custom values. The menus next to the edit fields contain a large number of variables that you can use instead of a custom (constant) value.

In this case the condition to be met is: if the number of seconds on the clock is less than 15 (X) or greater than 45 (Y) then set the Image ID variable to 0 else set it to 1.

The sprite widget has a list of images - so this condition switches between two images depending on which half of a minute we're in (actually we're off by one second, 46 to 59 are only 14 seconds; programming is a very precise business.) Next to each of Action menu (which also contains a list of variables) is an operator menu. It determines what to do with the Image ID. In this case we assign a custom value.

The bottom line lets you move the condition, enable or disable it, test it by forcing it to true or false, duplicate it and add a new one or delete the condition.

This opens up quite a large set of possibilities... consider this a box of Legos and start playing and experimenting!

Making Things Move

Each widget evaluates its conditions continuously. There are two methods to animate a widget: either change values every time through the loop or set values based on a time dependent curve function.

The 'Animate ...' items in the action menu change the corresponding variable (location, rotation, size) by adding a given value to the previous value. The given value is multiplied by associated speed and direction values which can be set independently. This way you can set the basic amount of the change (e.g. move left by 10 pixels) and then, depending on the circumstances, reverse the direction (change it from 1 to -1) or increase or decrease the speed (make it larger or smaller than 1.) If you don't change the direction at some point (or reset the location,) the widget will keep moving left until it's gone.

The second way is the use of curve functions. The advantage of these is that they cycle, that is, if you use them to set the left position, for example, the widget will move left up to a point and then move right towards (or jump back to) the start position. The exact behavior is governed by curve parameters which you should set before evaluation of the curve function. You can choose between a full, half and quarter sine curve, a full, and half triangle 'curve' and a sawtooth 'curve'. (In the example themes the triangle curve is called sawtooth and the actual sawtooth is called 1/4 sawtooth :-( I never claimed to be infallible.) A full curve starts at 0, increases up to 1, drops back down to 0, keeps going to -1, then back up to 0 and then repeats. A half curve starts at 0, increases up to 1, drops back down to 0 and then repeats. The quarter sine curve and the sawtooth curve start at 0, increase up to 1 and then repeat - they jump back to 0. Triangle and sawtooth curves change linearly while sine curves 'slow down' or 'flatten out' towards the 1 and -1 values.

To make larger changes than -1 or 1 you set the amplitude parameter. For scale and opacity, 100 is a good value (since these go from 0 to 100%). For location, use the screen width or height; for color hue or rotation, 360 covers the whole range. A pendulum will look fine with an amplitude of 45 (degrees). The default value is 100.

The offset parameter (default 0) determines the start value - the sum of offset and amplitude determine the maximum value of the curve.

The period parameter (default 2) determines how much time (in seconds) it takes to complete one cycle.

A Note on Color

You can change the text and background colors of a widget through variables. The colors are expressed as hue (0..359), saturation (0..100) and lightness (0..100) and also have an alpha (opacity) value (0..100). In the UI, a lightness of 100 means fully bright - you get white by setting the saturation to 0. In the widgets (HTML) a lightness of 100 means white whereas a lightness of 50 means fully bright. The problem is that iFuntastic really uses the HSV color model and HTML uses HSL. Furthermore, HTML converts the colors internally to RGB and if we try to convert that back to HSL we may lose the hue since black and white don't really have a color. Anyhow, it's all very frustrating, but that's where we are. When cycling through colors, try to keep lightness and saturation a little above 0 and a little below 100 to avoid these special cases.

User Variables and Global Variables

You have five user variables and five global variables that you can use for computations and to hold intermediate values. It is tedious to do math that way, but at least it's possible. Global variables are shared between widgets and are useful for 'staging'. Cycle through stages and let each widget to its own thing depending the current stage.

Widget Content

Each sprite widget can be used to display images or text. It has an image list and a text list and you can switch images and text or between image and text content with variables. Click on the 'Use Text Instead of Images' check box in the widget attributes list to set the initial value of the content variable. The Image ID and Text ID variables determine (by index) which image or which text to display. Text can also contain placeholders which will be replaced by various values: number of unread e-mails, time, date, disk space used, battery level and many more. You can also display the value of a variable by assigning it to a text variable. You can also display images within a line of text.

Weather

Click on the 'Enable Weather' check box in the widget attributes list to have the sprite widget get weather information. Unless you use the 'Update Weather' action, weather information is retrieved whenever the page loads or every five minutes. Keep in mind that this accesses the internet - it won't work if you have no connection, and if you do, it will use some of your allocated bandwidth! (The same goes for the loading of external web pages.) With weather enabled, you can use a large number of text placeholders for weather information. Some information is also available as variables to be used in conditions to control widget behavior.

Hopefully this is sufficient to get you started. If you run into problems or have suggestions, send me a note from iFuntastic's Help menu.