Skip to main content
waynelove1-Visitor
1-Visitor
August 15, 2017
Solved

Sprites add-on and dynamic binding

  • August 15, 2017
  • 4 replies
  • 2753 views

Using the sprites widget from the TW market place, if you statically bind the SourceURL then everything works as expected.  However, if you dynamically bind the SourceURL to a service or data source then nothing is displayed.

Is anyone else able to reproduce this problem?

Is there a solution to this?

Thanks

Wayne

Best answer by waynelove

Attached is an updated version (1.0.2) of the package.  This incorporates the fix I previously published to address the use of the sprites within a repeater and also includes a hack to get around the dynamic binding issue.

In this instance, the widget was getting the correct values from the platform but failing to update the CSS that drove the animation.  To fix this I've added the following 3 lines after line 181 to sprites.runtime.js.

var str = '{"#'+this.uniqueIdentifire+'": {"background": "transparent url( '+srcImage.toString()+' )  0 0  no-repeat","position": "absolute","width": "'+this.getProperty('SpriteWidth') + 'px","height": "'+this.getProperty('SpriteHeight') + 'px","z-index": 10,"cursor": "pointer"}}';
this.jss =jQuery.parseJSON(str);
$.injectCSS(this.jss);

Be warned! This is a complete hack and may cause global warming for all I know.  It works for me, use it at your own risk.

To use dynamic binding all images must have the same dimensions and the same number of frames.  You must statically bind an image (any will do as long as it has the same dimensions as the dynamic bound images) as well as the dynamic binding.

It would be appreciated if someone could review this and post a correct solution that addresses the limitations mentioned above.

Thanks

Wayne

4 replies

posipova20-Turquoise
20-Turquoise
August 15, 2017

Please note that the extension is no longer supported and provided in  "as is" condition.

Support

This item has been tested and certified by ThingWorx to successfully work with the ThingWorx platform, however this item is not currently supported by ThingWorx. By utilizing this item you acknowledge that the content is provided in ‘as-is’ condition and support will not be provided.

waynelove1-VisitorAuthor
1-Visitor
August 15, 2017

Polina,

I am aware that this is not a supported product, this is why I am reaching out to the community. 

However saying that, to quote your quote... "This item has been tested and certified by ThingWorx to successfully work with the ThingWorx platform". This is demonstrably not the case, it is easy to show that it does not "successfully work".   It's a bit rich for TW to say that something is certified to work and then when proven otherwise to say sorry that is not supported.  You either stand by your certification and ensure what you say is true (ie that the product works) or drop the whole certification sham in the first place because it is essentially meaningless.

Hopefully, someone else out there will have a more positive approach to this problem and either be able to suggest a resolution or to point me in the right direction so that I am able to resolve the problem myself.

Wayne

waynelove1-VisitorAuthorAnswer
1-Visitor
August 16, 2017

Attached is an updated version (1.0.2) of the package.  This incorporates the fix I previously published to address the use of the sprites within a repeater and also includes a hack to get around the dynamic binding issue.

In this instance, the widget was getting the correct values from the platform but failing to update the CSS that drove the animation.  To fix this I've added the following 3 lines after line 181 to sprites.runtime.js.

var str = '{"#'+this.uniqueIdentifire+'": {"background": "transparent url( '+srcImage.toString()+' )  0 0  no-repeat","position": "absolute","width": "'+this.getProperty('SpriteWidth') + 'px","height": "'+this.getProperty('SpriteHeight') + 'px","z-index": 10,"cursor": "pointer"}}';
this.jss =jQuery.parseJSON(str);
$.injectCSS(this.jss);

Be warned! This is a complete hack and may cause global warming for all I know.  It works for me, use it at your own risk.

To use dynamic binding all images must have the same dimensions and the same number of frames.  You must statically bind an image (any will do as long as it has the same dimensions as the dynamic bound images) as well as the dynamic binding.

It would be appreciated if someone could review this and post a correct solution that addresses the limitations mentioned above.

Thanks

Wayne

    waynelove1-VisitorAuthor
    1-Visitor
    August 16, 2017

    After banging my head against this widget for a number of days now, I find now that there are compatibility issues with IE11.  Given all the problems that have been found with the widget I really do have to question the value of the testing and certification mentioned above.

    I've given up on the widget and am instead using animated gif's to provide the animation required.  The only thing that I lose with this approach is the ability to dynamically change the speed of the animation.  Detail of this approach can be found here... Re: Animated icons

    Terms & ConditionsAccessibility statement