Dynamic Image Loading

Problem:

You want to display images in your Klip based on data contained in the data feed, such as whether a server is up or down, but the data feed doesn't contain any links to the images you want to use.

Solution:

The solution is to use an onCreate handler to examine the data of each created item, and then set the item's image URL based on that data.

myImage
{
     type: image;
     itemcol: 1;
     noterow: 1;
     notelabel: false;
}

function onLoad()
{
     Engines.Data.onCreate = myCreate;
     Engines.Data.onUpdate = myUpdate;
}

function myCreate(item)
{
     // Get the status data from the item
     var status = item.getData("status");

     if(status.indexOf("down") != -1)
     {
          // The server is down
          item.setData("myImage", "http://www.myserver.com/images/down.png");
     }
     else
     {
          // The server is OK
          item.setData("myImage", "http://www.myserver.com/images/up.png");
     }

     // Return true to allow the item to be created
     return true;
}

function myUpdate (old_item, properties)
{
     return(myCreate(properties));
}

Using this method, each item will have its image set based on the data read from the data feed.