[GUI] Use HTML and CSS for your GUIs!

22 Mar 2015, 20:45

Hi deoauto! Welcome to ahkscript

That's weird... Have you tried having an event handler for an element with an ID ?

deoauto · 23 Mar 2015, 11:06

thanks joedf!

Anyway i found a workaround today and really excited of the results. Now html gui can see IE10 css3, such as transition, view svg picture and border-radius.. call javascript, using javascript "window.location()" and "<a href" link to call autohotkey commands. Although it's not as easy as using .getElementById(), using .BeforeNavigate2 event does the trick. But how much i wish to use the "natural" way .getElementById()

anyway, here's the ahk script for those who want to see what i mean

Code: Select all

	coordmode, mouse, screen
	mousegetpos theX, theY
	Gui destroy ; destroy previously opened gui, prevent duplicate
	
	Gui add, activeX, w100 h90 vTest, shell.explorer
	test.silent := true
	test.navigate("D:\htmgui.html")
	Gui +LastFound +AlwaysOnTop -Caption +ToolWindow  
	CustomColor = 555555 
	Gui, Color, %CustomColor%
	WinSet, TransColor, %CustomColor% 255 
	while test.readyState != 4 or test.busy
	    sleep 100
	
	;test := test.document.getElementById("div1") ; this method will fail... WHY WHY!
	ComObjConnect(test, "test_") 
	Gui, Show, x%theX% y%theY%, htmgui_tester 
	
    test_BeforeNavigate2(test, theUrl) {
    ; beforeNavigate2 will use 1st parameter "test" Object and 2nd parameter "url" for processing.
    ; check  http://msdn.microsoft.com/en-us/library/aa752085 for more events and parameters they support.
    	test.Stop() ; prevent navigating and do something else below this script:
        if (InStr(theUrl,"myapp://")==1) { 
        ; ensures BeforeNavigate2 event received theUrl that contain "myapp://" 
        ; either fired by href from "a" link tag or window.location("") from javascript will produce BeforeNavigate2 event
            stuff := SubStr(theUrl,Strlen("myapp://")) ;get stuff after "myapp://"
            if InStr(stuff,"msgbox/cool"){
                MsgBox ,,,Five!! 1,0.1
                MsgBox ,,,Five!! 2,0.2
                MsgBox ,,,Five!! 3,0.3
                MsgBox ,,,Five!! 4,0.4
                MsgBox ,,,Five!! 5,0.5
            }else if InStr(stuff,"msgbox/woah")
                soundbeep
            else if InStr(stuff,"msgbox/js"){
                SoundPlay, %A_WinDir%\Media\tada.wav
                sleep 3000
            }
        }

	Gui destroy
        SetTitleMatchMode RegEx
        WinActivate, i).*autohotkey.ahk.*
    }

return

htmgui.html file (put this html file in the correct directory where test.navigate("D:\htmgui.html") refers)
note: <meta http-equiv="X-UA-Compatible" content="IE=10"> is important to make latest css styles work.

Code: Select all

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
a{
	position:relative;
	height:25px;
	display:block;
	overflow:hidden;

	border-radius:5px;	
	background-color: #FC6;
	background-image:url(borderadius.svg);
	background-position:0px 0px;
	background-size:100% 100%;
	background-repeat:no-repeat;

	margin-bottom:3px;	

	text-align:center;
	text-decoration:none;
	line-height:25px;
	
	font-size:15px;
	font-weight:500;
	font-family:sylfaen, Geneva, sans-serif;
	color:#060;
		
	cursor:pointer;
}
</style>

<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<title>Html Gui</title>
</head>

<body style="margin:0px; padding:0px; overflow:hidden; background-color:#555555;"><!-- EEAA99 -->

<div id="div1" style="position: relative; height:25px;  display: block; text-align:center; line-height:25px; margin-bottom:3px;  background-color:#09F; border: 1px solid black; border-radius:5px; overflow:hidden; cursor:not-allowed;" onClick="joy();window.location('myapp://msgbox/js');">
Javascript..?!
</div>

<a id="a1" href="myapp://msgbox/cool">Gime 5!</a>

<a id="a2" href="myapp://msgbox/woah">Say Beep!</a>

<div id="div2" style="position: absolute; top:0px; left:0px; width:100%; height:100%; display:inline-block; text-align:center; font-family:tahoma; font-size: 15px; color: white; border:1px solid green; box-sizing:border-box; border-radius:10px; background-color:black; opacity:0; visibility:hidden;">
Javascript is safe and sound!
</div>

</body>

<script>
function joy(){
	document.getElementById("div2").style.visibility = "visible";
	document.getElementById("div2").style.transition = "opacity 1s ease";
	document.getElementById("div2").style.opacity = 1;
}
</script>

</html>

credit goes to joedf, ahk script was partially taken from his/her 1st post in this topic. Now html gui wildest dreams can come true

. Still hoping .getElementById() will work some day.. instead of using URL method with BeforeNavigate2 event (perhaps it works but i've not seen enough ahk scripts? or shell.explorer require update? because .getElementById() only available for use up to IE7)

Button's border (using svg image to test browser support)

23 Mar 2015, 19:46

hmm, well I'm glad you got to work around it!

sadly, I don't why it wouldn't work...

19 Apr 2015, 03:26

Note that
* if IE8+ support registry NOT YET added, the code works but style border-radius will not show
* if IE8+ support registry ADDED, border-radius will show

On my system, it works just fine without the registry setting.

but divs := test.document.getElementById("div1") will not work and returns "Error: 0x8000402 - No such interface supported".

Nonsense. getElementByid works just fine; ComObjConnect fails because it can't find type information for the HTMLDivElement class.

You can still use standard DOM methods to hook up event handlers, like divs.addEventListener("click", Func("divs_onClick")) or divs.onclick := Func("divs_onClick").

Using BeforeNavigate2 with an invalid URL protocol (like "myapp://") is unreliable, since some OS or IE versions will not even attempt the navigation. I had this problem with an older version of the AutoHotkey installer, and worked around it by also hooking the NavigateError event. The current version of the installer stores an AutoHotkey function in window.AHK and calls it via javascript:AHK('...').

Another easy and flexible way for the scripts to communicate is to write a class in AutoHotkey and store it in the window object, or call JavaScript functions from AutoHotkey via the window object.

If you use IE=edge instead of IE=10, you'll get the latest available IE version.

19 Apr 2015, 12:36

Wow, thanks for sharing that Lexikos, I'll have to update the tutorial then !

19 Apr 2015, 12:43

lexikos wrote:You can still use standard DOM methods to hook up event handlers, like divs.addEventListener("click", Func("divs_onClick")) or divs.onclick := Func("divs_onClick").

That's amazing! I take it this isn't possible in versions of AHK before IDispatch was implemented on our objects?

joedf: You're never on IRC! Makes it hard to chat with you

19 Apr 2015, 16:58

@GeekDude yeah, sorry I barely touch my computer... Recently, just Too busy

like 1-2 times a week ...
You can always pm me or Facebook or Skype etc, I answer with my phone on the go

20 Apr 2015, 02:59

Passing an AutoHotkey object to a COM API requires v1.1.17+. Several improvements have been made since then relating to JScript/IE specifically, and objects more generally.

I take it this isn't possible in versions of AHK before IDispatch was implemented on our objects?

Passing AutoHotkey objects or functions wasn't possible, but you could do effectively the same thing by constructing your own IDispatch interface.

deoauto · 27 Apr 2015, 12:57

Note that
* if IE8+ support registry NOT YET added, the code works but style border-radius will not show
* if IE8+ support registry ADDED, border-radius will show
On my system, it works just fine without the registry setting.

Yeah, if the html has IE=10 or IE=Edge meta tag ( anything higher than "IE7" ), doesn't require the registry trick, it was actually a solution i found in one of autohotkey forum dealing with Com object like shell.explorer suggesting the registry add. But realize later, adding meta tag IE=8+ allows css3 features like border-radius. Meta tag is the way to go.

but divs := test.document.getElementById("div1") will not work and returns "Error: 0x8000402 - No such interface supported".
Nonsense. getElementByid works just fine; ComObjConnect fails because it can't find type information for the HTMLDivElement class.

I was using example from joedf's, it works because joedf's example deals with IE7 ( or below ) or html pages without css3 . I was using IE10 with css3 and the error says "0x8000402 - No such interface supported" refers to ComObjConnect(divs, "divs_") where divs_ will call functions like divs_OnClick(){ } divs_OnContextmenu.. so does that mean this method doesn't work if we set meta tag IE=8.. 9.. 10 or Edge in the html file?

You can still use standard DOM methods to hook up event handlers, like divs.addEventListener("click", Func("divs_onClick")) or divs.onclick := Func("divs_onClick").

That's great!

Never thought of using Func() and writing class, my exploration with autohotkey has not reach that far. Btw how do I pass parameter? I've tried something like this, but it calls the function immediately. Was expecting it to fire during divs element ONCLICK event only.

Code: Select all

fn := Func("divs_onClick")
divs.onclick := fn.Call(param1, param2)

divs.onclick := Func("divs_onClick") alone doesn't accept parameter does it? e.g divs.onclick := Func("divs_onClick(" var1 "," var2 ")")

Another easy and flexible way for the scripts to communicate is to write a class in AutoHotkey and store it in the window object, or call JavaScript functions from AutoHotkey via the window object

Just downloaded v1.1.21 and extract it to a folder, Studying Installer.ahk. Thanks Lexikos! Can you direct me to any link or examples where i can learn more about Window Object that you mention. Do you mean Window.ahk is a file? Couldn't find it in my installation directory, neither in the installer folder. Google "autohotkey window object" or "autohotkey window.ahk" doesn't yield any related results.

27 Apr 2015, 13:00

deoauto wrote:
You can still use standard DOM methods to hook up event handlers, like divs.addEventListener("click", Func("divs_onClick")) or divs.onclick := Func("divs_onClick").
That's great! Never thought of using Func() and writing class, my exploration with autohotkey has not reach that far. Btw how do I pass parameter? I've tried something like this, but it calls the function immediately. Was expecting it to fire during divs element ONCLICK event only.
Code: Select all
fn := Func("divs_onClick")
divs.onclick := fn.Call(param1, param2)
divs.onclick := Func("divs_onClick") alone doesn't accept parameter does it? e.g divs.onclick := Func("divs_onClick(" var1 "," var2 ")")

This should work

divs.onclick := Func("divs_onClick").Bind(param1, param2)

27 Apr 2015, 19:52

deoauto wrote:Can you direct me to any link or examples where i can learn more about Window Object that you mention. [...] Google "autohotkey window object" or "autohotkey window.ahk" doesn't yield any related results.

I was referring to the object known as window within the page's scripts, but WB.Document.parentWindow in your script (if WB is the browser control). You can just google "window object" for information.

deoauto · 04 May 2015, 14:43

divs.onclick := Func("divs_onClick").Bind(param1, param2)

ThankS @GeekDude !

and where does .bind comes from in func() documentation. Feels like you just shared me a "cheat code" Lol.

I was referring to the object known as window within the page's scripts, but WB.Document.parentWindow in your script (if WB is the browser control). You can just google "window object" for information.

Ok thanks lexikos, I just found what you mean with the window object inside the Installer.ahk

xingzhe_li · 10 Jun 2015, 01:29

10 Jun 2015, 17:44

gallaxhar · 15 Apr 2016, 17:34

Guys, it seems you really found something useful here, but for AHK-mediocres like me, can you please explain the limitations and usefulness of using html in our GUI's?

For example, I want a nice looking listview with icons, adjustable width and height based on how many rows, filterable rows by search, and obviously a search box, that looks like the modern windows 10 UI. This is possible in html/css/js using this: http://metroui.org.ua/select2.html

Is it really possible to use a borderless ahk activex control, with a framework like Metro UI, to create on-screen-gui's that don't look like you're using a browser, and then pass which options you select in the rich browser control to AHK, so that an AHK script can respond to it?

15 Apr 2016, 17:52

Yes, of course. The ahk side is all the same really. The code provided is fine already.
This is really more on the HTML and CSS side. It's really more about customizing the look on the "web" side of things.

15 Apr 2016, 17:54

It's important to note that (IIRC) any drop downs will only be visible inside the ActiveX area. I'd suggest building the whole GUI with ActiveX

15 Apr 2016, 19:10

@geekdude exactly! +1

gallaxhar · 15 Apr 2016, 21:54

Yes but if I select let's say "Alaska" from that dropdown, how would AHK know I chose alaska, or chose anything at all?

16 Apr 2016, 01:23

No problem, for example, using DOM style:
MsgBox % wb.Document.getElementById("MySelectBox").Value

[GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Who is online