Images

In this article we look at Image and AnimatedImage, as well as a number of other kinds designed to house and display image objects.

Image

An Image object is a control that displays an image specified via the src property. The src can be an absolute or relative url. It can also be a path relative to any loaded enyo package.

For example:

{kind: "Image", src: "http://www.example.com/image.jpg"},
{kind: "Image", src: "images/image.jpg"},
{kind: "Image", src: "$enyo-Heritage/images/popup-heritage.png"}

To change the image, call the setSrc method:

buttonClick: function() {
  this.$.image.setSrc("images/image2.jpg");
}

The default value of src is "$base-themes-default-theme/images/blank.gif".

AnimatedImage

An AnimatedImage is a control that animates based on its CSS background image. The className property should refer to a valid CSS class that defines a background image.

The background image should be constructed so that it contains a series of animation frames stacked vertically. The imageHeight property should be set to the height of an animation frame, and imageCount should be set to the number of frames. The default value of imageHeight is 32.

The tick property changes animation speed by controlling the number of milliseconds between frames. Use the repeat property to set the number of times the animation should repeat. A value of 0 indicates that the animation should repeat indefinitely.

Here's an example:

{kind: "AnimatedImage", className: "snoopyAnimation", imageHeight: 200,
  imageCount: 10; repeat: 0}

Call the start method to start the animation and the stop method to stop it:

startButtonClick: function() {
  this.$.animatedImage.start();
},
stopButtonClick: function() {
  this.$.animatedImage.stop();
}

SizeableImage

SizeableImage, which extends enyo.VFlexBox, is a control designed to view an image, with support for zooming. It is meant to be placed inside a Scroller.

{kind: "Scroller", components: [
  {kind: "SizeableImage", src: "images/tree.jpg"}
]}

The zoom level, whose default value is 1, can be changed by calling the setZoom method.

SizeableImage has one published event, onImageLoaded.

ScrollingImage

ScrollingImage extends SizeableImage, adding support for panning in addition to zooming. There are no additional public methods, published properties, or published events.

CroppableImage

CroppableImage, which extends ScrollingImage, is a control designed to crop a zoomable, pannable image.

The onCrop event returns the parameters necessary to crop the image:

{
  suggestedXtop: left pixel start of the cropped image
  suggestedYtop: top pixel start of the cropped image
  suggestedScale: zoom percentage
  suggestedXsize: rounded X size of the cropped image
  suggestedYsize: rounded Y size of the cropped image
  sourceWidth: original image width
  sourceHeight: original image height
  sourceImage: absolute path to the image
  focusX: center of the cropped image in relation to width
  focusY: center of the cropped image in relation to height
}

Use a CroppableImage like so:

{kind: "VFlexBox", components: [
  {kind: "CroppableImage" src: "image.jpg", flex: 1, onCrop: "cropHandler"},
  {kind: "Button", onclick: "crop"}
]}

crop: function() { this.$.croppableImage.getCropParams() }

ViewImage

ViewImage, another kind that extends ScrollingImage is a scrolling image designed to work in a Carousel.

{kind: "Carousel", flex: 1, components: [
  {kind: "ViewImage", src: "images/01.png"},
  {kind: "ViewImage", src: "images/02.png"},
  {kind: "ViewImage", src: "images/03.png"}
]}

Carousel

A Carousel is a control that provides the ability to slide back and forth between different views without having to load all the views initially. It is descended (through several intermediate kinds) from SnapScroller, a scroller control that snaps to the positions of the controls it contains.

A single carousel may contain thousands of views/images. Loading all of them into memory at once is not be feasible. Carousel solves this problem by only holding onto the center view (C), the previous view (P), and the next view (N). Additional views are loaded as the user flips through the items in the carousel.

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
              P   C   N

To initialize a carousel:

{kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight"}

Use the setCenterView method to set the center view, and the onGetLeft and onGetRight events to build a scrolling list of views.

create: function() {
  this.inherited(arguments);
  this.$.carousel.setCenterView(this.getView(this.index));
},
getView: function(inIndex) {
  return {kind: "HFlexBox", align: "center", pack: "center", content: inIndex};
},
getLeft: function(inSender, inSnap) {
  inSnap && this.index--;
  return this.getView(this.index-1);
},
getRight: function(inSender, inSnap) {
  inSnap && this.index++;
  return this.getView(this.index+1);
}

ImageView

An ImageView is a Carousel designed to view an image full-screen, with support for zooming and panning, while optionally moving between additional images. It can be used to display a single image, or a set of images that may be flipped through.

Here's a simple example:

{kind: "ImageView", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight"}

Use the centerSrc property to specify the center image, and the onGetLeft and onGetRight events to build a scrolling list of images.

create: function() {
  this.inherited(arguments);
  this.$.imageView.setCenterSrc(this.getImageUrl(this.index));
},
getImageUrl: function(inIndex) {
  var n = this.images[inIndex];
  if (n) {
      return "images/" + n;
  }
},
getLeft: function(inSender, inSnap) {
  inSnap && this.index--;
  return this.getImageUrl(this.index-1);
},
getRight: function(inSender, inSnap) {
  inSnap && this.index++;
  return this.getImageUrl(this.index+1);
}

Add images to an ImageView by calling the addImages method.