cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Sprite Widget & Repeater Widget Incompatible

SOLVED
waynelove
Participant

Sprite Widget & Repeater Widget Incompatible

I've found what seems to be an issue with the sprite widget when used in conjunction with the repeater widget.

The scenario is as follows....

1. Create a static mashup that includes a sprite widget.

At this point, if you display the static mashup everything works as expected.

2. Create a dynamic mashup that contains a repeater widget and point this to the mashup created in step 1.

Display the dynamic mashup and you will see that only the 1st instance of the static mashup has animated sprites.  All the other instances have static images for the sprite.  Additionally, the FPS rate for the first sprite seems to be the requested FPS * the number of instances displayed.  It seems that the JS event that drives the animation is being created once for each instance of the static mashup displayed (this is expected) but every instance of the JS is binding to the first instance displayed rather than to each consecutive instance.

I'm hoping that someone can provide an easy solution to this or as an alternative provide a way to display an animated gif or png image (which IMHO is a much cleaner solution).

Thanks

Wayne

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Sprite Widget & Repeater Widget Incompatible

After some quick and dirty hacking, I think that I have a solution.  I've added a random GUID to the sprite instance id so that each instance on the page has a unique identifier.

From sprites.runtime.js lines 6 & 7 were...

//the id of the widget

this.uniqueIdentifire = this.getProperty('Id')

and are now...

//the id of the widget

//append a guid to distinguish betweeen widget that are in repeated frames

this.uniqueIdentifire = this.getProperty('Id') + "-" + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>

    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))

The code for the GUID generation comes from here... Create GUID / UUID in JavaScript? - Stack Overflow

Attached is an updated package with a minor version bump.

I'd appreciate feedback on the effectiveness/correctness of this solution.

Also, I'd much prefer to do this by animated gifs.  Any feedback on how to use these would be appreciated.

Thanks

Wayne

View solution in original post

4 REPLIES 4

Re: Sprite Widget & Repeater Widget Incompatible

You can put an animated Gif without issues as an image I think.

The other way around would be to correct Sprite Extension ( which for your analysis shouldn't be hard to find the bug )

Re: Sprite Widget & Repeater Widget Incompatible

Hi Charles

I initially looked into the animated gif and animated png path before moving on to the sprite widget.  Using a animate image would be perfect but whenever I upload a image to the media repository the image seems to be automatically converted to a static png, this removes all the animation.  Is there an alternative way of displaying a image, I really don't want to link to a image stored outside of the TW platform.

WRT the sprite extension, I know enough to diagnose the problem, I don't know enough of the TW architecture to be able to fix the problem, though I'm happy to learn if someone were to give me some pointers.  :-)

Thanks

Wayne

Re: Sprite Widget & Repeater Widget Incompatible

After some quick and dirty hacking, I think that I have a solution.  I've added a random GUID to the sprite instance id so that each instance on the page has a unique identifier.

From sprites.runtime.js lines 6 & 7 were...

//the id of the widget

this.uniqueIdentifire = this.getProperty('Id')

and are now...

//the id of the widget

//append a guid to distinguish betweeen widget that are in repeated frames

this.uniqueIdentifire = this.getProperty('Id') + "-" + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>

    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))

The code for the GUID generation comes from here... Create GUID / UUID in JavaScript? - Stack Overflow

Attached is an updated package with a minor version bump.

I'd appreciate feedback on the effectiveness/correctness of this solution.

Also, I'd much prefer to do this by animated gifs.  Any feedback on how to use these would be appreciated.

Thanks

Wayne

View solution in original post

Re: Sprite Widget & Repeater Widget Incompatible

There is also an issue with the sprites widget and dynamically binding the sourceURL.  I've posted a workaround in this thread (Re: Sprites add-on and dynamic binding) that supersedes the package posted above.

Wayne

Announcements

Check out the upcoming Expert Session: Understanding ThingWorx Navigate Licensing in Community "Customer Events" section.