Development Guide

To Bookmark this document, click

BOOK MARK 2

Display Images

Published 2014-03-11 | Samsung Smart TV Article. (Compatible with SDK 2.5, 3.5, 4.5 and 2011, 2012, 2013 models)

Introduction to displaying images (both fulscreen and partial) on Samsung Smart TV using the ImageViewer component of the Service API.

This section demonstrates displaying high quality image contents with the ImageViewer component of the Service API.

Images can be displayed as:

Samsung Smart TV provides the following tutorials to illustrate the use of the Imageviewer component and the development of an application using images:

Creating an Image Application
Demonstrates developing an application for displaying images using the ImageViewer plugin.

You can also use Flash to display images in an application.

Displaying Images in Full Screen (Slideshow)

The Basic keys are handled in this module. Handlers can be defined with the setKeyHandler function. The fullscreen viewer functionalities are defined in sf.service.ImageViewer.SlideShow.

The following code starts slideshow in full screen.

// This function should be called on using SlideShow for the first time.
sf.service.ImageViewer.SlideShow.init();

// Sets the items to be shown.
sf.service.ImageViewer.SlideShow.setItem([{
    url: 'http://www.samsung.com/sample/image0.jpg',    // (String) image URL, change all image URLs to real ones
    width: 1920,                                        // (Number) image width
    height: 1080                                        // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image1.jpg',
    width: 1920,
    height: 1080
}, {
    url: 'http://www.samsung.com/sample/image2.jpg',
    width: 1920,
    height: 1080
}]);

// If the RETURN key is pressed at the fullscreen mode, stops slideshow.
sf.service.ImageViewer.SlideShow.setKeyHandler(sf.key.RETURN, function () {
    sf.service.ImageViewer.SlideShow.stop();
});

// Starts slideshow. After this, all key events are handled by SlideShow module.
// Stop the slideshow by calling "stop" method explicitly.
sf.service.ImageViewer.SlideShow.start();

Displaying Images in Partial Screen

The following code shows the image in partial screen.

// Sets partial play position.
sf.service.ImageViewer.setPosition({
    left: 100,
    top: 100,
    width: 500,
    height: 400
});

// Draws the image in the specified area defined by setPosition() function.
sf.service.ImageViewer.draw({
    url: 'http://www.samsung.com/samsung.jpg',  // (String) image URL, change to a real one
    width: '1920',                              // image width
    height: '1080'                              // image height
});

Switching between Full Screen (Slideshow) and Partial Screen

The following code shows image content with full and partial screen view.

/*** Items to be shown ***/
var aItems = [{
    url: 'http://www.samsung.com/sample/image0.jpg',    // (String) image URL, change all image URLs to real ones
    width: 1920,                                        // (Number) image width
    height: 1080                                        // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image1.jpg',
    width: 1920,
    height: 1080
}, {
    url: 'http://www.samsung.com/sample/image2.jpg',
    width: 1920,
    height: 1080
}];

//...

/**** Show as partial screen ****/
sf.service.ImageViewer.draw(aItems[curIndex]);

//...

/**** Show as Fullscreen(Slideshow) during partial screen. Start with current showing image. ****/
// Set item array
sf.service.ImageViewer.SlideShow.setItem(aItems);

// Set item index to be started to show
sf.service.ImageViewer.SlideShow.setItemIdx(curIndex);

// Set RETURN key handler. Stop the slideshow and DRAW THE PARTIAL VIEW.
// If the Slideshow is started, the Partial view is initialized and cleared.
// So you should draw the partial view by calling "draw" method.
sf.service.ImageViewer.SlideShow.setKeyHandler(sf.key.RETURN, function () {
    sf.service.ImageViewer.SlideShow.stop();
    curIndex = sf.service.ImageViewer.SlideShow.getItemIdx();
    sf.service.ImageViewer.draw(aItems[curIndex]);  // must be called in order to draw the partial view
                                                    // after the slideshow is ended
});

// Start slideshow
sf.service.ImageViewer.SlideShow.start();

To Bookmark this document, click

BOOK MARK 2