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

Sprite Widget & Repeater Widget Incompatible

  • August 10, 2017
  • 1 reply
  • 2383 views

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

Best answer by waynelove

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

1 reply

C
CarlesColl1-Visitor
1-Visitor
August 10, 2017

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 )

W
waynelove1-VisitorAuthor
1-Visitor
August 10, 2017

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

W
waynelove1-VisitorAuthorAnswer
1-Visitor
August 11, 2017

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

Terms & ConditionsAccessibility statement