Gross Domestic Product
The gross domestic product (composition by sector) of all countries can be viewed as pie chart. Pick a country from the listbox - use the character buttons or the scroll buttons for navigation.
There are three displaying modes: single country and either comparing two or up to four countries. For multiple panels: A little dot indicates which panel has the focus. Click on panel to change it.
This sample also introduces a feature for left-handed persons: click on the left half of the title bar to mirror certain components of the application; like the listbox, the scroll buttons and the chart display area. Clicking on the right half of the title bar switches those components back.
The download file is an offline version of this sample using a static JavaScript-file as data source whereas the online version calls a php-script which generates the data from a database.
Dynamic Graph
graph that is updated dynamically; how it basically works: request via getUrl(), a php-script generates random data and returns it as object in literal notation (JSON), which then is processed client-side with the eval()-function
features: request-rate can be set from 1 up to 30 secs, graph scrolls up automatically when bottom is reached, three graph-types: polylines,dots or both, tooltip showing the value when moving over a dot (can be turned off)
Moving Objects
simulates how the position of several objects is retrieved and displayed - move over object to show tooltip
Klotski
shows one solution for the game 'Klotski'; animation with navigation buttons: play/pause, reset, step back/forward
Rotating an Ellipse
algorithm for rotating an ellipse built from a path so it is congruent to the original ellipse
Swap Symbols
first defining three symbols and then three use element that instanciate these symbols as intermediates;
Bound Rectangle
two handles and a rectangle: you can move the rectangle in between the handles, when you move the handles, the rectangle keeps the position relative to the handles
Dynamic Values
displays several values, indicating maximum/minimum, using a gradient in the background to show different states
Keyevents
moving a circle within bounds using the arrow keys; controlling speed, size and direction; pressing two keys to move diagionally
Moving Realtime: Cockpit
an object (circle) is created at a random starting position; it gets an unique ID and random color; it then can be moved with the arrow keys; the position is sent to the server every second and stored in a database; also open the realtime monitor to watch your circle move; then try opening several tabs/windows of the cockpit and see how the monitor fills up
Realtime: Monitor
here you can watch the objects moving that are created when a realtime cockpit window is opened; the monitor calls the server every second to request the IDs and current positions of all objects; the object will disappear a few seconds after the cockpit window has been closed
Toggle Buttons: SMIL / Script
meet the Simpsons and the Flanders hitting the toogle buttons; one uses declarative animation (SMIL), the other works with script
Boring Squares?
yes, boring squares - but you will find many interesting techniques inside, so make sure to read the comments in the source code!
Testing Linear Gradient
switching the coordinates and the gradient units of a linear gradient on the fly
Pie Chart - Basics (1)
make-some-pie-on-the-fly (1): getting familiar with the elliptical arc command
Pie Chart - Basics (2)
make-some-pie-on-the-fly (2): playing with different starting positions and sizes
