Adding Animated GIFs or WEBPs to GUI Topic is solved

[iseahound]

I wrote a fun tutorial on how to add animated GIFs or WEBP to an AutoHotkey GUI here:

https://github.com/iseahound/ImagePut/wiki/Add-Image-to-AutoHotkey-GUI

It shows the advantages of ImagePut over the built-in Gui.AddPicture.

Unfortunately, there is not an easy way to extract the code needed from ImagePut as a standalone set of functions. But if you'd like you are free to do so for personal use. (Irritatingly, this is the only function that can't be extracted, the rest are just copy and paste).

As far as I know, ImagePut is the only method of accurate GIF playback in AutoHotkey.

• It doesn't use SetTimer which only supports a 15.6 ms resolution.
• Compare the playback to Chrome/Firefox/Edge, and there are no desynced frames or lag.
• Also supports animated webp, which is the "newer" animated image format.

[WarlordAkamu67]

This is working very nicely for adding GIFs; however, I am having some problems resizing images. This is using the first example:

Code: Select all

#Requires AutoHotkey v2.0
#include ImagePut.ahk

image := FileSelect(,, "Select an image:", "Images (*.bmp; *.dib; *.rle; *.jpg; *.jpeg; *.jpe; *.jfif; *.gif; *.emf; *.wmf; *.tif; *.tiff; *.png; *.ico; *.heic; *.hif; *.webp)")

; Make the GUI resizable and not affected by DPI scaling.
app := Gui("-DPIScale +Resize")

; Sets the image filepath as the window title.
app.Title := image

; Create a dummy text control to repurpose for ImagePut's functionality.
display := app.Add("Text", "xm+0")

; Must resize the viewable area of the control.
display.move(,,ImageWidth(image), ImageHeight(image))

; Use ImagePut to create a child window, and set the parent as the text control.
image_hwnd := ImageShow(image,, [0, 0], 0x40000000 | 0x10000000 | 0x8000000,, display.hwnd)

; Create a dummy text control to repurpose for ImagePut's functionality.
displayagain := app.Add("Text", "xm+0 y+50")

; Must resize the viewable area of the control.
displayagain.move(,,ImageWidth(image), ImageHeight(image))

; Use ImagePut to create a child window, and set the parent as the text control.
image_hwnd := ImageShow(image,, [0, 0, 500, 500], 0x40000000 | 0x10000000 | 0x8000000,, displayagain.hwnd)

; Show the image
app.Show("xCenter y0 AutoSize")

basicexampleresize.png (63.41 KiB) Viewed 5057 times

When resizing a PNG.

resizemishap.png (89.51 KiB) Viewed 5057 times

When resizing a GIF.

errorresizing.png (103.54 KiB) Viewed 5057 times

[iseahound]

That's a strange bug which I've fixed. Guess no one ever used the extra parameters in ImageShow/ImagePutWindow, including me. As for bug #2 where you are attempting to scale an animated GIF: that currently isn't supported at the moment. I don't know the correct approach to take here, as the problem seems to involve scaling each frame and saving it to a device context to be drawn (blitted) to the screen. (This is better than the slower approach of scaling each frame right before it's drawn). I suppose if more people request support for scaling animated GIFs, I'll consider adding it in.

As for now, I think I've done enough with coding and writing up tutorials

[WarlordAkamu67]

That's a strange bug which I've fixed. Guess no one ever used the extra parameters in ImageShow/ImagePutWindow, including me. As for bug #2 where you are attempting to scale an animated GIF: that currently isn't supported at the moment. I don't know the correct approach to take here, as the problem seems to involve scaling each frame and saving it to a device context to be drawn (blitted) to the screen. (This is better than the slower approach of scaling each frame right before it's drawn). I suppose if more people request support for scaling animated GIFs, I'll consider adding it in.

As for now, I think I've done enough with coding and writing up tutorials

Thank you very much for what you've done and continue to do. I have found your resources extremely valuable in my own learning experience. ^.^

[iseahound]

I ended up coming up with the correct approach in the shower. Stores a cache of rendered device contexts.
See latest version: https://github.com/iseahound/ImagePut/blob/master/ImagePut.ahk
Updated Samples: https://github.com/iseahound/ImagePut/wiki/Add-Image-to-AutoHotkey-GUI

3x Scaling Example:

Code: Select all

#Requires AutoHotkey v2.0
#include ImagePut.ahk

image := FileSelect(,, "Select an image:", "Images (*.bmp; *.dib; *.rle; *.jpg; *.jpeg; *.jpe; *.jfif; *.gif; *.emf; *.wmf; *.tif; *.tiff; *.png; *.ico; *.heic; *.hif; *.webp; *avif; *avifs)")

; Make the GUI resizable and not affected by DPI scaling.
app := Gui("-DPIScale +Resize")

; Sets the image filepath as the window title.
app.Title := image

; Create a dummy text control to repurpose for ImagePut's functionality.
display := app.Add("Text", "xm+0")

; Get the width and height.
width := ImageWidth(image)
height := ImageHeight(image)

; Must resize the viewable area of the control.
display.move(,, 9*width, 3*height) ; Note: Extend viewable width by 3!!!

; Use ImagePut to create a child window, and set the parent as the text control.
image_hwnd1 := ImageShow(image,, [0, 0, 3*width, 3*height], 0x40000000 | 0x10000000 | 0x8000000,, display.hwnd, False)
image_hwnd2 := ImageShow(image,, [3*width, 0, 3*width, 3*height], 0x40000000 | 0x10000000 | 0x8000000,, display.hwnd, False)
image_hwnd3 := ImageShow(image,, [6*width, 0, 3*width, 3*height], 0x40000000 | 0x10000000 | 0x8000000,, display.hwnd, False)

; Show the image
app.Show("xCenter y0 AutoSize")

; Some useful functions.
Play(hwnd) => PostMessage(0x8001,,,, hwnd)
Pause(hwnd) => PostMessage(0x8002,,,, hwnd)
Stop(hwnd) => PostMessage(0x8002, 1,,, hwnd)

; Use PostMessage to asynchronously start playback!
Play("ahk_id" image_hwnd1)
Play("ahk_id" image_hwnd2)
Play("ahk_id" image_hwnd3)

[xMaxrayx]

Thank nice tutorial <3