Displaying one large image at a time

Problem:

You want to display large images that changes frequently, such as graphs from a web-based application or webcam images, and you want to show them one at a time.

Solution:

If the effect you are looking for is to let an image fill the Klip one at a time just like on a digital picture frame, then the solution is to use the CSS property layout: frame.

<item>
  <image>
    http://static.klipfolio.com/images/klip-assets/arrows/simple/kpi_green_circle.png
  </image>
</item>

First, set the property layout: frame with type: item in the <style> block in order to tell Klipfolio Dashboard to display each item (image) as a full image or as much as will fit in the Klip.

item 
{
    type: item;
    layout: frame;
}

Then, use the fit: zoom property in the definition of the image source element to shrink and crop the image to fit the Klip's display area while still maintaining the image's aspect ratio. You'll also want to place the image at the center of the Klip by setting the horizontal and vertical alignment.

                    
image 
{
    type: image;
    itemcol: 1;
    noterow: 1;

    notelabel: false;
    fit: zoom;

    align: middle;
    valign: middle;
}

For other values you can use with the fit property, refer to the Klip Developer Guide.