Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use an Image object in a project.

What is Image ?

An Image object displays a picture inside of a given rectangle area of the image object. The display of aspect ratio, positioning of the picture might vary inside the image object. Image component can easily display local (depending on the screen size) and remote images. See also: SMF.UI.Image in the docs. 

Example:

var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		image : 'myimage.png'
	});
page1.add(image1);

If it is added to a Page, it will be shown like below:

Image Size

An Image object displays a picture with different image size property. If the displayed image is constrained with some proportions, it will be shown like below.

image1.imageFillType = SMF.UI.ImageFillType.ASPECTFIT;
image1.imageFillType = SMF.UI.ImageFillType.AUTOSIZE;
image1.imageFillType = SMF.UI.ImageFillType.NORMAL;
image1.imageFillType = SMF.UI.ImageFillType.STRETCH;

Supported Image Formats

Android and iOS supported different type of image formats. That’s why Smartface accepts .JPEG, .PNG and .BMP and .TIFF file formats only.
You can put these types of images into assets folder. Resource folders only supports .PNG type images.

Setting Correct Image

Android : For different screen sizes, the local image file is set to the resource drawable folder according to its screen size. The drawable folders can be found images/android directory.
iOS : There is only one resource folder on iOS devices. Different size of image file names ends with “@” prefix.

Setting From SMF.Bitmap Object

When an Image object is created, the constructor requires the URL of the image. Instead of the imageURI property, a file reference also can be set by using the file property in the constructor.
After creating the image, the file property can be retreived once the image has been successfully loaded.

var imgFile = new SMF.IO.File(SMF.IO.applicationResources, "single.png");
var i = new SMF.Bitmap({
		file : imgFile,
		onSuccess : function (e) {
			alert("Image successfuly loaded: " + e.imageUri);
		},
		onError : function (e) {
			alert(e.message);
		}
	});

Setting From Camera

Capturing a photo by the device camera is also possible with an application written in the Smartface. The captured photos with the camera will be saved under the “Camera” sub directory of applicationTemporaryData.

SMF.Multimedia.startCamera({
    cameraType : SMF.Multimedia.CameraType.REAR,
    resolution : SMF.Multimedia.Resolution.LARGE,
	autoFocus : true,
	onStart : function () {}, //do nothing
	onCapture : function (e) {
		var photoFile = new SMF.IO.File(e.photoUri); //the full URI is given
		var destination = SMF.IO.applicationDataDirectory + SMF.IO.pathSeparator + photoFile.name;
		var targetFile = new SMF.IO.File(destination);
		if (!targetFile.exists) {
			img.image = targetFile;
			if (photoFile.move(destination)) { //if moved successfully
				alert(photoFile.path);
			}
			else{
				alert("not copied");
				alert(photoFile.path);
			}
		}
	},
	onCancel : function () {}, //do nothing
	onFailure : function () {}
	//do nothing
});

Remote Images

An Image object can display a remote image via URL of this image.

image1.image = "http://smartface.io/logo.png";

Nine Patch Support

The 9-Patch is a PNG image with some coding added that allows the Android system to determine how the image can be stretched and contorted to meet the specific layout constraints during use.  It does this by taking a predefined PNG image, and allowing the user to define a 1-pixel border around the image in locations where stretching can occur. You can simply add 9-patch image to image or imagebutton objects.

image1.image = "http://smartface.io/logo.9.png";
image1.image = "logo.9.png";

Remote images supports also 9-patch format (.9.png) on Android and iOS. To make sure that your NinePatch graphics scale down properly, verify that any stretchable regions are at least 2×2 pixels in size. Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the color at the boundaries to change.
Note: A normal PNG file (*.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved NinePatch file (*.9.png) will be loaded as-is, with no drawing area added, because it already exists.

Data Binding

The Image object can be bounded to a data source with different ways. These are;

  • static image
var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		imageFillType : SMF.UI.ImageFillType.ASPECTFIT,
		image : 'myimage.png',
		enableCache : true
	});
  • remote image
var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		imageFillType : SMF.UI.ImageFillType.ASPECTFIT,
		image : 'http://smartface.io/logo.png',
		enableCache : true
	});
  • any JavaScript Object
var myImageArray = ["myImage.png", "logo.png", "image.png"];
var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		imageFillType : SMF.UI.ImageFillType.ASPECTFIT,
		image : myImageArray[2],
		enableCache : true
	});
  • any JavaScript Variable
var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		imageFillType : SMF.UI.ImageFillType.ASPECTFIT,
		image : myImg,
		enableCache : true
	});