[GUI] Use HTML and CSS for your GUIs!

Helpful script writing tricks and HowTo's
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

Re: [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
Posts: 4
Joined: 21 Mar 2015, 21:54

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

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() :cry:

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

Code: [Select all] [Expand] [Download] (Script.ahk)GeSHi © Codebox Plus



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] [Expand] [Download] (Untitled.txt)GeSHi © Codebox Plus



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 :twisted: . 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)
Image
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

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... :(
lexikos
Posts: 5688
Joined: 30 Sep 2013, 04:07
GitHub: Lexikos

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

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.
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

19 Apr 2015, 12:36

Wow, thanks for sharing that Lexikos, I'll have to update the tutorial then ! :)
GeekDude
Posts: 777
Joined: 02 Oct 2013, 22:13

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

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 :lol:
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

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 :P
lexikos
Posts: 5688
Joined: 30 Sep 2013, 04:07
GitHub: Lexikos

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

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
Posts: 4
Joined: 21 Mar 2015, 21:54

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

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! :thumbup: 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] [Download] (Script.ahk)GeSHi © Codebox Plus

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.
GeekDude
Posts: 777
Joined: 02 Oct 2013, 22:13

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

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! :thumbup: 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] [Download] (Script.ahk)GeSHi © Codebox Plus

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)
lexikos
Posts: 5688
Joined: 30 Sep 2013, 04:07
GitHub: Lexikos

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

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
Posts: 4
Joined: 21 Mar 2015, 21:54

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

04 May 2015, 14:43

divs.onclick := Func("divs_onClick").Bind(param1, param2)
ThankS @GeekDude ! :o and where does .bind comes from in func() documentation. Feels like you just shared me a "cheat code" Lol. :superhappy:

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 :thumbup:
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

10 Jun 2015, 17:44

:D :)
gallaxhar
Posts: 143
Joined: 03 Sep 2014, 06:35

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

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

Image

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?
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

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. :)
GeekDude
Posts: 777
Joined: 02 Oct 2013, 22:13

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

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
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

15 Apr 2016, 19:10

@geekdude exactly! +1 :+1:
gallaxhar
Posts: 143
Joined: 03 Sep 2014, 06:35

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

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?
User avatar
joedf
Posts: 6132
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada, Quebec
Contact:

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

16 Apr 2016, 01:23

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

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 6 guests