[ Proof Of Concept ] Scrollable image list ( supports .gifs)

Post your working scripts, libraries and tools
User avatar
Sjc1000
Posts: 39
Joined: 02 Oct 2013, 02:07

[ Proof Of Concept ] Scrollable image list ( supports .gifs)

05 Jan 2014, 00:16

This is just a small proof of concept. Fully working code that puts an image list control in your GUI ( can be any GUI and size etc. ).
It uses MSHTML and embeds a website into the GUI with images.

It supports .gifs and alpha channel.


Here is everything you need. Enjoy.

Select a folder with image in it and it will load them up. :D it also shows the directory of the one you clicked on.

Code: Select all


FileSelectFolder, myFolder, 

imageExt 					:= "jpg,bmp,gif,png"

main 						:= new imageDisplay(1, A_ScreenWidth / 1.2 - 20, A_ScreenWidth / 3, ( A_ScreenWidth / 1.2 ) / 4.6 )

imageList 					:= Object()


Gui, Color, 0x333333
Gui, Show

MsgBox, % myFolder

Loop, %myFolder%\*.*,, 1
{	If A_LoopFileExt not in %imageExt%
		continue
		
	main.newImage( A_LoopFileFullPath, A_Index, "Name" )
	imageList[ A_Index ] 				:= A_LoopFileFullPath
}

Return





Class imageDisplay
{		
	__New( guiNumber, width, height, imageWidth=200, imageHeight="auto", eventName="evnt_" )
	{		static imgList
			this.width 			:= width
			this.height 		:= height
			this.imageWidth 	:= imageWidth
			this.imageHeight 	:= imageHeight
		Gui, %guiNumber%: Add, ActiveX, w%width% h%height% vimgList, MSHTML:
		
		html 			=
		(
		<!DOCTYPE html>
			<html>
				<head>
				<style type="text/css">
					img:hover { background-color: #444444; }
					
				</style>
				</head>
		
				<body>

					<div id="imgCont">
					</div>
					
				</body>
			</html>
		)	
		
		imglist.write( html )
		ComObjConnect(imgList, eventName )
		imglist.getElementsByTagName("body")[0].style.backgroundColor 			:= "333333"
		imglist.getElementsByTagName("div")[0].style.overflow					:= "auto"
		imgList.getElementsByTagName("div")[0].style.height 					:= height - 20
		imgList.getElementsByTagName("div")[0].style.width 						:= width - 20
		imgList.close()
			
		this.var 				:= imgList
		return this
	}
	
	newImage( imageDir, imageID, imageText )
	{	element 				:= this.var.createElement( "img" )
		element.src				:= imageDir
		element.Id 				:= imageID
		element.style.width		:= this.imageWidth
		element.style.height 	:= this.imageHeight
		element.style.padding 	:= this.imageSpace ? this.imageSpace : "10px"
		this.var.getElementById( "imgCont" ).appendChild( element )
	}
	
}


evnt_OndblClick( p* )
{	global activeImage
	elm 						:= p[1].parentWindow.event.srcElement.Id
	activeImage 				:= p[1].getElementById(elm).Id
	SetTimer, OnClick, -1

}

evnt_OnClick( p* )
{	global prevImage, backgroundColor
	prevImage.style.backgroundColor			:= backgroundColor
	
	elm 									:= p[1].parentWindow.event.srcElement.Id
	
	If elm is not digit
		Return
	
	image 									:= p[1].getElementById(elm)
	
	image.style.backgroundColor 			:= "FFFFFF"
	
	prevImage 								:= image
}

OnClick:
	imageDir 					:= imageList[ activeImage ]
	MsgBox, % imageDir
Return



GuiClose:
	ExitApp
Return
Example of it in use.

Image
Last edited by Sjc1000 on 06 Jan 2014, 20:53, edited 1 time in total.
Please find me on the IRC if you have any questions, I'm never on the forum anymore.
User avatar
tidbit
Posts: 1093
Joined: 29 Sep 2013, 17:15
Location: USA

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

05 Jan 2014, 17:06

Nice use of MSHTML instead of InternetExplorer.Application.
And a nice little class demo too. And GIF support :D

This'll be a good reference, awesome.
rawr. fear me.
*poke*
Is it December 21, 2012 yet?
User avatar
joedf
Posts: 6605
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

06 Jan 2014, 15:38

Nice! :D
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500 @ 3.00 GHz, 16GB DDR4 3200 MHz, NVIDIA GTX 1060 6GB | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
tmplinshi
Posts: 1278
Joined: 01 Oct 2013, 14:57

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

06 Jan 2014, 20:37

Nice, and I've learned something from it. Thank you!
User avatar
Sjc1000
Posts: 39
Joined: 02 Oct 2013, 02:07

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

06 Jan 2014, 20:54

Thanks for all the positive feedback.. Feel free to ab[use] the code!

I also changed it around a bit. You can click to select one ( highlight ) and now double click to activate.
Please find me on the IRC if you have any questions, I'm never on the forum anymore.
tmplinshi
Posts: 1278
Joined: 01 Oct 2013, 14:57

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

06 Jan 2014, 21:43

Thanks for all the positive feedback.. Feel free to ab[use] the code!

I also changed it around a bit. You can click to select one ( highlight ) and now double click to activate.
Like the changes. :D
User avatar
TLM
Posts: 1338
Joined: 01 Oct 2013, 07:52

Re: [ Proof Of Concept ] Scrollable image list ( supports .g

15 Jan 2014, 21:10

*yoinx aspect ratio maths and tern
fauzone

Re: [ Proof Of Concept ] Scrollable image list ( supports .gifs)

11 Feb 2018, 02:51

this is cool.

but since I'm not an advanced in AHK, I still dont understand how to work with functions.

Could you please help me, I need a few changes:

How to change the window into full screen window? I only understand using these lines, but I couldnt find how to put it in this script
Gui Show, w%A_ScreenWidth% h%A_ScreenHeight%
Gui, -Caption +AlwaysOnTop

I also need the thumbnail to show in only one row, so the scrollbar also will be horizontal.

I also need option to hide the scrollbar, but the window still scrollable, is it possible?

Thank you all for your time.
Guest

Re: [ Proof Of Concept ] Scrollable image list ( supports .gifs)

11 Feb 2018, 03:51

this is cool.

but since I'm not an advanced in AHK, I still dont understand how to work with functions.

Could you please help me, I need a few changes:

How to change the window into full screen window? I only understand using these lines, but I couldnt find how to put it in this script
Gui Show, w%A_ScreenWidth% h%A_ScreenHeight%
Gui, -Caption +AlwaysOnTop

I also need the thumbnail to show in only one row, so the scrollbar also will be horizontal.

I also need option to hide the scrollbar, but the window still scrollable, is it possible?

Thank you all for your time.
User avatar
noname
Posts: 507
Joined: 19 Nov 2013, 09:15

Re: [ Proof Of Concept ] Scrollable image list ( supports .gifs)

12 Feb 2018, 06:56

Thanks for sharing Sjc1000 , this is an excellent example in so many ways! :)
burque505
Posts: 628
Joined: 22 Jan 2017, 19:37

Re: [ Proof Of Concept ] Scrollable image list ( supports .gifs)

12 Feb 2018, 10:34

Thanks, Sjc1000, works with animated gifs just fine too.
Regards,
burque505

Return to “Scripts and Functions”

Who is online

Users browsing this forum: Bing [Bot] and 63 guests