Dear Community User! We are updating our platform to a new system.
Read more: Important information on the platform change.

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

Stop GIF on variable

Stop GIF on variable

davifas
Member

Hi everyone,

regarding WebIQ I would like to stop a .GIF image based on the value of a variable. For example, I want the image of a conveyor to be animated while the machine is running, while if it is stopped I also want to stop the .GIF animation.

Is there a possibility to do this with CSS properties or another way?

Alternatively I was thinking of using 2 images, a GIF and a static image of the same transporter. This way I just have to change the image path based on the value of a variable. This idea is inconvenient because I have to create a static image for each .GIF image.

How can I proceed? Thank you

2 REPLIES 2

Sgilk
Frequent Contributor

Hi @davifas ,

There is no built in functionality within WebIQ for this. You can use a local-script to control the .GIF via Javascript. See some of the solutions on this thread.

webiq-sk
Frequent Contributor

From a web standpoint switching between a GIF animation and a static GIF would be the cleanest solution. As you can see there is no simple way with web technology to stop a GIF and you have to use some quirks to get it done. This means that almost nobody is using this so it's best from a future-proof standpoint to simply switch between a static and an animated GIF using WebIQ's ImageChanger widget.

Also, you can simply use free open-source tools like ImageMagick or FFMPEG to extract frames from a GIF which will probably make it easier for you.

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist