I quite like the idea of "Live Tiles" on an application desktop a-la-Windows 8 (Metro). It gives your user up-to-date feedback in an animated tile of whatever information you choose to display.

For this post I created three different types of Live Tiles. All tiles are clickable so you can put any code you want into the click() method. All tiles are 310x150 px in size

1. The Rollover Tile

This tile allows you to display an image of 310x150 px as well as a text message that can be anything you choose. As the user moves the mouse over the tile the tile scrolls up revealing another image and the message.

The tile has the following properties that can be set:

bottomimage - the image to display when moused over

topimage - the default image with no mouse

headertext - The main header - (Windows 8 in the sample below)

detailtext - the 2 line message as in the second image below

The Normal Display

The Rollover Display

 

2. The Auto-Update Scroller

This tile auto-scrolls up and down at a specified interval and displays 2 sets of information. This information can be manually updated by putting code in its updateme() method. The tile consists of

Two images - one for each view

8 Text fields where the text can be set to whatever you want - 4 per view

A click-able URL with a tool tip.

The control has a custom method called Updateme() which can be called to update the properties. See the code in the Update button in the sample form  to see how this can be done. The interval between auto-scrolling can also be set using the property changeinterval.

The images used for the clouds, sun etc. are jpg images. I used transparent PNG's on a plain coloured surface and then cropped them and saved as JPG's. This is because in VFP, when using PNG;s there is some flashing when the PNG's are moved. So to avoid this flashing I used JPG's instead.

3. Auto Display Data

This control has the ability to read data from a user created table and display the data in the fields. It scrolls automatically and the data is updated in a continuous loop automatically. It also displays the number of records in the table.

The control has these user settable properties:

changeinterval - period in ms between scrolls.

datatablename - the name of the table (without the dbf ext.) that will be used by it to get its data

There is also an icon  image in the control and this be set to anything.

This control is useful to display data like emails RSS feeds, news etc.

I have used it to display a list of dummy emails. It can be enhanced so that it can refresh itself when the table is updated, though I have not added this as yet.

25/03/2010

This class has been updated and a Refresh button added. Clicking this button will refresh the tile with the latest data in the table. So you can now INSERT records into the table while it is running and clicking the Refresh button will force the tile to re-read the data.

Unfortunately I cannot do anything about deleted records because this would depend on the user's environment setting. Hopefully anyone who uses this will SET DELETED ON and then deleted records will be ignored.

Also fixed the reference to the correct background image for the form.

In my testing all animations were smooth and static images do not show how nice these controls look. To actually see how these tiles look run the sample form.

Run the attached sample form and then hover the mouse and see. Here is the sample form

The attached source contains some additional images that you can use for tiles and icons.

You can download the complete updated source and sample form from here.

bbWin8Tiles v1.1

Leave a Reply

Your email address will not be published. Required fields are marked *