Custom Widget with IMAGE property

Question

Dear Community,

I am trying to develop a custom widget which displays an image as a background and data in the foreground. The reason for developing a custom widget is to be able to scale the visualization to different screen sizes.

The idea is that we have Things with IMAGE properties and that we want to select a specific Thing and bind this image property to the widget, along with an infotable with data.

Once the image is bound to the widget, how can I display it in the widget? The property is defined like this:

'properties': {

'selectedImage': {

'baseType': 'IMAGE',

'isBindingTarget': true

}

The rendering is done in this way

this.renderHtml = function () {

return '<div class="widget-content widget-imagedisplay">' +

'<span class="selectedImage">' +

'</span>' +

'</div>';

};

 

this.afterRender = function () {

valueElem = this.jqElement.find('.selectedImage');

var myImage = this.getProperty('selectedImage');

var html = '<img src="' + myImage + '"/>';

valueElem.append(html);

};

I was expecting that this.getProperty('selectedImage') would return the image but it is difficult to verify this. And even if it returns and image, is it correct to add the html tag like I have done?

Very thankful for any help!

Erik

';valueElem.append(html);}; I was expecting that this.getProperty('selectedImage') would return the image but it is difficult to verify this. And even if it returns and image, is it correct to add the html tag like I have done? Very thankful for any help! Erik

ehalvordsson · Accepted Answer

(note that the is reformatting a colon into &colon;

Resolved! The information that flows into the widget in runtime through the updatePropertyInfo.SinglePropertyValue is a base64 string so when the property value is updated, we need to prepend data&colon;image/jpeg;base64, to the string and then we can use it directly in the img object.

this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'selectedImage') {
 var myImageString = updatePropertyInfo.SinglePropertyValue;
 var myImage = new Image();
 myImage.src="data&colon;image/jpeg;base64," + myImageString;
 html = '<img src="' + myImage.src + '" alt = "No image loaded">';
 valueElem.append(html);
}
};

posipova · Answer

I don't have much experience with your specific scenario, but if you think any of the existing widgets (out of the box) may contain a similar functionality, you may look at their structure (they are located in <tomcat installation path>\webapps\Thingworx\Common\thingworx\widgets )

I'm also attaching a widget documentation,

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.