Add Animated GIF file in PcApp project

Discuss PC Developer and Web Developer projects and features here.
Post Reply
User avatar
Nico595
Posts: 100
http://meble-kuchenne.info.pl
Joined: Tue Jul 04, 2023 4:17 pm
Has thanked: 20 times
Been thanked: 5 times

Flowcode v10 Add Animated GIF file in PcApp project

Post by Nico595 »

Hi,

I want add animated Gif file in my project. It's a turn magnetic winding during the recording.
But my gif file is not animated in the PcApp project.

Gif file can be added in the PcApp project ?

gif_recorder.jpg
gif_recorder.jpg (50.33 KiB) Viewed 2845 times



Thank you for your answer,
:)

Steve-Matrix
Matrix Staff
Posts: 1532
Joined: Sat Dec 05, 2020 10:32 am
Has thanked: 212 times
Been thanked: 355 times

Re: Add Animated GIF file in PcApp project

Post by Steve-Matrix »

Flowcode does not currently support animated GIFs. When an animated GIF is added to a project, only the first frame of the animation is shown.

As an alternative, it is relatively simple to create your own image animations, and you will have a bit more control over them too. See the attached as an example.

This example uses the timer and simulation start/stop events to automate the animation.
Attachments
animation example source.zip
(65.65 KiB) Downloaded 57 times
animation example.mscada
(4.17 KiB) Downloaded 60 times

medelec35
Matrix Staff
Posts: 2051
Joined: Wed Dec 02, 2020 11:07 pm
Has thanked: 637 times
Been thanked: 690 times

Re: Add Animated GIF file in PcApp project

Post by medelec35 »

Attached is an alternative approach using a component called Complex component.
Using API's to make components visible/invisible a bit similar to Steve's method.
At least now you get the choice of two ways of rotating a non rotating component/Image.
click on the switch to either start or stop the reels rotating.
Details on the Complex component can be found on the wiki here

You can change the size of the reels by clicking on the component and dragging one of the corners.

There is one issue I have updated the Timer Interrupt component.
I have requested for it to be pushed to the updated system.
If you want to play in the meantime.
Browse to this location using file explorer , it's hidden by default so just paste the link into your address bar.

Code: Select all

%ProgramData%\MatrixTSL\FlowcodeV10\Components
Place the attached TimerInterrupt.fcpx component.
If Flowcode is already open, then you will need to reload your project for the new component to work
If you run any component updates, then the component you added will be overwritten, so it will stop working again (unless the component update has been pushed).

Can you please let me know how you get on.
Attachments
TimerInterrupt.fcpx
(3.55 KiB) Downloaded 53 times
Rotation Demo1.fcsx
(35.98 KiB) Downloaded 56 times
Martin

medelec35
Matrix Staff
Posts: 2051
Joined: Wed Dec 02, 2020 11:07 pm
Has thanked: 637 times
Been thanked: 690 times

Re: Add Animated GIF file in PcApp project

Post by medelec35 »

I have just edited my post above for Simulation failed issues
Martin

User avatar
Nico595
Posts: 100
Joined: Tue Jul 04, 2023 4:17 pm
Has thanked: 20 times
Been thanked: 5 times

Re: Add Animated GIF file in PcApp project

Post by Nico595 »

Hi Steve, Hi Martin,

Thank you very much for your answer.

I also thought about using a timer component with the visible / invisible function. I use already this method in stand by mode to create flashing indicator. But in my project I have also around 40 timer components and now, the flashing indicator with the visible / invisible function can't be fast.


I will try this two methods tomorrow and I come back to you.

Thank you again for your help :)

EDIT: Tonight , I tried the two methods. In my project the Martin's method work fine but this method is more complex than the Steve's method.
Complex Shape is very complex to design a simple shape. I will try customise your great example Martin. Also I will add a flashing red round, exactly like on the real time recorder. A small App to convert shape to x,y coordinate with their prefix names is welcome.

Steve and Martin, Thank you very much for your great job :)

medelec35
Matrix Staff
Posts: 2051
Joined: Wed Dec 02, 2020 11:07 pm
Has thanked: 637 times
Been thanked: 690 times

Re: Add Animated GIF file in PcApp project

Post by medelec35 »

You're welcome.
The component has been pushed on to the component database so its now available within component updates.
If you want to change the design of complex shape, I can do the for you if you are struggling with it.
Martin

User avatar
Nico595
Posts: 100
Joined: Tue Jul 04, 2023 4:17 pm
Has thanked: 20 times
Been thanked: 5 times

Re: Add Animated GIF file in PcApp project

Post by Nico595 »

Hi Martin,

Thank you very much :)

I designed this Gif to add in my Web App, it's very nice to indicate the real time recording.
In my Pc App project, this pic is a bit smallest than in my Web App project. You can see the Pc App Gif here. I need exactly same shape.
You can see a small offset between the magnetic strip A and the magnetic strip B. I use also only 4 pics to create the rotation.

record_black_130px.gif
record_black_130px.gif (4.21 KiB) Viewed 2261 times





I share you the pics to design the shape.
Magneto_5a_vblack.png
Magneto_5a_vblack.png (3.99 KiB) Viewed 2249 times
Magneto_5ab_vblack.png
Magneto_5ab_vblack.png (4 KiB) Viewed 2249 times
Last edited by Nico595 on Fri Jul 25, 2025 1:58 pm, edited 4 times in total.

User avatar
Nico595
Posts: 100
Joined: Tue Jul 04, 2023 4:17 pm
Has thanked: 20 times
Been thanked: 5 times

Re: Add Animated GIF file in PcApp project

Post by Nico595 »

Magneto_5b_vblack.png
Magneto_5b_vblack.png (4.03 KiB) Viewed 2248 times
Magneto_5ba_vblack.png
Magneto_5ba_vblack.png (3.91 KiB) Viewed 2248 times


Thank you for your help ;)

Steve-Matrix
Matrix Staff
Posts: 1532
Joined: Sat Dec 05, 2020 10:32 am
Has thanked: 212 times
Been thanked: 355 times

Re: Add Animated GIF file in PcApp project

Post by Steve-Matrix »

For something like this, I would just make shapes visible or invisible to show the animation. Something like the attached should get you started I hope.
Attachments
animation example 02.fcsx
(25.15 KiB) Downloaded 38 times

User avatar
Nico595
Posts: 100
Joined: Tue Jul 04, 2023 4:17 pm
Has thanked: 20 times
Been thanked: 5 times

Re: Add Animated GIF file in PcApp project

Post by Nico595 »

Hi Steve,

Thank you so much for your project.

The last Sunday, I designed easily the same shape of my Gif picture. But the result is not the same of the Gif. I think it's not a good idea use Visible 0 / 1 function to design animated picture. Or only if your project is very small without other timers. I use this method to flash indicators but only when my timers are disable. And I must flash every 2 or 3 seconds to obtain a good result.

So, I will use my Magneto picture but without animating in the Pc App.


You can see bug of displayed round shapes around time var = 100ms
animation example 05.fcsx
(49.97 KiB) Downloaded 24 times


Thank you again for your help and your good job :)

Post Reply