GIF - Show gifs and click on them.

Extensions
,
1

GIF

Display your GIFs in a WebViewer, which can detect clicks and fire events.

ㅤThe screenshot shows how the names of each gif are displayed as I click on them.ㅤ
AnimationsTest

ㅤStop & Playㅤ
StopPlay

I was making an extension to display Lotties from Assets and I thought that if you can display Lotties animations using WebViewer, why not display GIFs in a similar way, although it has limitations, it is also very useful.

ㅤFunctionㅤ

blocks (30)
blocks (30)796×214 22.1 KB

DisplayGif

Displays a GIF in a WebViewer.

  • webViewer: The WebViewer where the GIF will be displayed.
  • gifFileName: The name of the GIF file located in the assets folder.
  • id: Unique identifier.

ㅤEventㅤ

component_event (21)

WebViewerClicked

Fired when the user clicks on a specific WebViewer.

  • id: Unique identifier of the WebViewer that was clicked.

Update: Nov. 19, 2024.

blocks (32)

Stop

Stop the gif at the initial position

  • webViewer: The WebViewer component where the Stop will be applied

blocks (33)

Play

Resume the playback of the gif.

  • webViewer: The WebViewer component where the Play will be applied

ㅤExtension: v1.1ㅤ
joejsanz.joedevgif.aix (9.9 KB)

Thanks.

8 Likes
2

Again a nice one :+1:
It'll be a good practice to rename the event from OnWebViewerClicked to WebViewerClicked.

1 Like
3

Thanks a lot...

You're right, I've put it in the translator and it's better to put WebViewerClicked. I'll fix that tonight.

1 Like
4

No html needed at all for that screenshot ?

1 Like
5

Even though I keep clicking on the WebViewer; it doesn't load the gif

blocks

6

The html is embedded in the extension, when the function is called the gif path is injected into the embedded html.

1 Like
7

The function needs to be initialized or called through a button, where you are putting it is the event that is triggered after clicking on the gif

Example:

Screenshot_2024-11-18-08-32-40-890_com.android.chrome
Screenshot_2024-11-18-08-32-40-890_com.android.chrome2340×1080 164 KB

2 Likes
8

You really have a talent for creating very useful extensions!
Thank you so much
Nico

2 Likes
9

Thanks a lot for your words @nico

1 Like
10

You might be interested in :question:

Here is a simple example:

gifDemo.aia (29.3 KB)

image

2 Likes
11

Will this extension show more than one gif in one Webviewer?
If no, why it need an id parameter? since the webviewer can be used as the unique identifier.

1 Like
12

If it is interesting, from what I read it shows image by image in a picture component, which makes it easy to change the speed by means of a clock, maybe even stopping, pausing and playing again would be feasible in that method.
In a moment I will have access to the computer and I will see the aia.

13

I tried to use several WebViewers with their own different gifs, but the same gif appeared in all of them, and it was easy for me to put an ID on the function. It never occurred to me to solve it without putting an ID, but I will review that today.

14

I have tried the extension that @TIMAI2 shared, it is very good, but I saw that you can only use 1 gif, it does not take each component of the image as a unique identifier, I tried in my extension that the component was the identifier, but it changes constantly, when starting it gives an id and when clicking it changes the id of the component, so I decided to keep the id parameter so that the event works well.

15

Update: Nov. 19, 2024.

1 Like
16

I think you need to change Play and Stop block by id not by webviewer

17

I added an id when initializing the WebViewer so that it would properly capture the event, but you're right, it's better to add an id to the rest at once to better locate it when using the blocks.

I'll do it in the next update.

1 Like