top

Display Images

Published 2014-10-27 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

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

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use functionalities of Appsframework, refer to here.

 

For more information on ImageViewer see the ImageViewer in API Reference.

 

Source Files

Note

The files needed for the sample application are here.

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
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image1.jpg',  // (String) image URL
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image2.jpg',  // (String) image URL
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
} ... ]);

// 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',   // image URL
    width: '1920',   // image width
    height: '1080'   // image height
});

Converting 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
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image1.jpg',  // (String) image URL
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
}, {
    url: 'http://www.samsung.com/sample/image2.jpg',  // (String) image URL
    width: 1920, // (Number) image width
    height: 1080 // (Number) image height
} ... ];

...

/**** 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]);  // THIS HAVE TO BE CALLED so that draw the partial view
                                                    // after the slideshow is ended.
});

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