Displaying image using PainterWidget in Netgem STB sdk

Posted By : Deepak Kumar | 13-May-2014

netgem

This blog will describe how to display images with painterWidget in Netgem.

First you have to set json configuration file.I am also using CanvasWidget to display a simple message. Below are the paraeters for canvas widget.

	  "widgets": {
	        "infoPanel": {
	            "create": "CanvasWidget",
	            "param": {
	                "w": 640,
	                "h": 360,
	                "speed": 600,
	                "zIndex": 1,
	                "defaultState": "exit",
	                "states": {
	                    "enter": {
	                        "x": 320,
	                        "y": 180,
	                        "w": 640,
	                        "h": 360,
	                        "a": 25
	                    },
	                    "exit": {
	                        "x": 640,
	                        "y": 360,
	                        "w": 0,
	                        "h": 0,
	                        "a": 255
	                    }
	                },
	                "draw": "infoPanelDraw"
	            }
	        }

Now you have to create a painterwidget. PainterWidget is used to display different types of elements like images,rectangle,circles or any other shape. So here are the parameters for painterwidget.

	 "painter": {
	            "create": "PainterWidget",
	            "param": {
	                "elements": [
	                    {
	                        "type": "image",
	                        "bounds": {
	                            "x": 0,
	                            "y": 0,
	                            "w": 283,
	                            "h": 170
	                        },
	                        "id": "img0",        
	                    }, {
	                        "type": "image",
	                        "bounds": {
	                            "x": 333,
	                            "y": 0,
	                            "w": 283,
	                            "h": 170
	                        },
	                        "id": "img1",
	                    }
	                ],
	                "zIndex": 2,
	                "speed": 300,
	                "bounds": {
	                    "x": 332,
	                    "y": 275,
	                    "w": 948,
	                    "h": 170
	                },
	                "defaultState": "enter"
	            }
	        }
	    }

To get all these into effect set the image data in mainform like this.

	MyFormWidget.prototype.onEnter = function onEnter(_data)
	{
	    var widgets = this.widgets,
	        infoPanel = widgets.infoPanel,
	        painter = widgets.painter;   
	    infoPanel.setData("How to use images in a PainterWidget");
	    infoPanel.stateChange("enter");
	    painter.setData({
	"img0" :"netgem.png",
	"img1" :"logo-netgem.png"
	});

	};

PainterWidget.setData() requires ID attribute for image. Here i displayed two images .So i have set the path for two images .you can use as many as you want.

Output looks like this.