[GUI] Use HTML and CSS for your GUIs!

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

[GUI] Use HTML and CSS for your GUIs!

16 Sep 2014, 14:03

This has already been done. The autohotkey installer is an example. This is just a post to shed some light on this.
To achieve this, we are using an ActiveX Control. More precisely, we are going to "pseudo-integrate" InternetExplorer into our GUI.

TLDR:


For those who don't feel like learning all of it (even though it's not hard), I've made a library to simplify your lives.
Webapp.ahk:
Check it out: https://autohotkey.com/boards/viewtopic.php?f=6&t=21516 :)
Otherwise, keep reading ;)



Here's an example script, i wrote a while ago. It is pretty much self-explanatory.
ScreenShot

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


The trick is using "invalid" urls and catch them, then execute some code.

Now let's investigate "code-direction" : In the above example, we see how we make the "webpage" execute some functions.
In this next example, we are going to read the contents of textbox and then change its contents. >Read & Write<
Webpage >> AHK
AHK >> WebPage

In this second example, we see that we can actually use DOM to access & change things, just like javascript! ;)
A thing to note is that, here we are not using invalid links to our advantage, but we are directly handling the "connected" events for the buttons.
ScreenShot

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


Now that we know how to access the DOM, we can basically almost anything the web has to offer (...or at least what IE has to offer ;) ) Just learn some basic DOM-handling and/or javascript and there you go! ;)
Important links:
http://ahkscript.org/docs/commands/GuiC ... tm#ActiveX
http://ahkscript.org/boards/viewtopic.php?f=5&t=4449

DON'T BE SHY TO POST ANY COMMENTS, QUESTIONS OR IDEAS! :cookie:

Hoping to see some nice GUIs! ;)
Cheers! :D
tmplinshi
Posts: 1063
Joined: 01 Oct 2013, 14:57

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

17 Sep 2014, 06:40

useful! thanks.
User avatar
joedf
Posts: 5649
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 Sep 2014, 16:04

Thank you guest3456 & tmplinshi!
--
Added Example 2 :D
User avatar
Grendahl
Posts: 158
Joined: 30 Sep 2013, 08:21

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

24 Sep 2014, 15:12

Example 2 throws an error at me. Line# 38/39/40
tmplinshi
Posts: 1063
Joined: 01 Oct 2013, 14:57

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

25 Sep 2014, 04:05

Grendahl wrote:Example 2 throws an error at me. Line# 38/39/40

same here
Coco
Posts: 771
Joined: 29 Sep 2013, 20:37
GitHub: cocobelgica

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

25 Sep 2014, 06:40

Grendahl wrote:Example 2 throws an error at me. Line# 38/39/40
Particularly these lines:

Code: [Select all] [Download] GeSHi © Codebox Plus

ComObjConnect(MyButton1, "MyButton1_") ;connect button events
ComObjConnect(MyButton2, "MyButton2_")
ComObjConnect(MyButton3, "MyButton3_")

What error are you getting? AHK version?
tmplinshi
Posts: 1063
Joined: 01 Oct 2013, 14:57

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

25 Sep 2014, 06:43

Code: [Select all] [Expand] [Download] (Error.txt)GeSHi © Codebox Plus

Coco
Posts: 771
Joined: 29 Sep 2013, 20:37
GitHub: cocobelgica

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

25 Sep 2014, 06:55

Can you check with MsgBox % ComObjType(MyButton1, "name"). Also check if the temp files are successfully written/created. Put a MsgBox(to halt execution) below Display(WB,HTML_page) then check your A_Temp folder. What version of IE do you have installed?
tmplinshi
Posts: 1063
Joined: 01 Oct 2013, 14:57

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

25 Sep 2014, 07:02

MsgBox % ComObjType(MyButton1, "name") displays "DispHTMLInputElement". I'm using IE8.

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

Display(WB,HTML_page)
MsgBox, hi

The MsgBox, hi will fix the error :P . So the reason was haven't wait the page loading finished. I think joedf's computer is super fast. :mrgreen:

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

Display(WB,HTML_page)

while WB.readystate != 4 or WB.busy
sleep 10


Thanks, Coco.
User avatar
joedf
Posts: 5649
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!

25 Sep 2014, 09:34

Whoops, I did not get the chance to check the error out :P Thanks, coco :D
@tmplinshi my computer has fast I/O :P I'll update the example with your fix some time today. :)
User avatar
joedf
Posts: 5649
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!

25 Sep 2014, 11:28

Updated.
Sjc1000_

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

18 Oct 2014, 03:58

( i can't log in atm, but its worth me posting here )

There is an alternative way to using the Shell.Explorer.
You can use MSHTML.
It supports click / double click and hover events.
Though, If i remember correctly it doesn't allow CSS3. But 2 is good enough for AHK GUI's right? ;)

I have an example http://www.autohotkey.com/board/topic/1 ... orts-gifs/ here.
Im up for getting back into AHK for this exact thing, if you want to collab on something maybe we can get some wicked stuff goin on.
User avatar
joedf
Posts: 5649
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!

18 Oct 2014, 12:28

Wow, Datz cool! CSS3 animations in ahk, never thought of that.. Hover events, ... Awesome! :D Sure, just send me a PM if you get any cool ideas to work on! ;)
User avatar
Sjc1000
Posts: 39
Joined: 02 Oct 2013, 02:07

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

04 Nov 2014, 19:34

I had an idea about making a GUI class, one that uses MSHTML or Shell.Explorer. Maybe we could collab on this?
Please find me on the IRC if you have any questions, I'm never on the forum anymore.
User avatar
joedf
Posts: 5649
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!

04 Nov 2014, 22:33

Great Idea! Sure!
What to call it? wGUI? WebUI? AHK-webkit?
GeekDude
Posts: 737
Joined: 02 Oct 2013, 22:13

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

04 Nov 2014, 22:46

I did a bit of mucking around with a class for html controls a while back. IIRC the weirdness of embedded IE (and the inconsistency between doctypes and stuff) caused me to drop the project. You can probable strip out the FixIE call, that's just what I use to force it to act like newer IE versions instead of like IE7 or whatever it uses by default

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus

Coco
Posts: 771
Joined: 29 Sep 2013, 20:37
GitHub: cocobelgica

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

05 Nov 2014, 09:36

I've been working on Shell.Explorer wrapper, still a work-in-progress, but already functional. Personally, I plan to use it as a lib script for another project, an AHK version of node-webkit
Some current features:
  • IWebBrowser2, window, document, elements, collection/list objects are wrapped in their respective classes.
  • Built-in support for TranslateAccelerator( to allow common IE shortcuts such as Ctrl+C)
  • Support for FEATURE_BROWSER_EMULATION, if you have IE9+, you can take advantage of the new HTML5 features
  • + more :)
It's not yet final in its current form but the interface design should allow me to expand/alter it easily.
I'll post it formally in the forum once the next AHK release includes the support for passing AHK objects to COM API's since I still need to do some tests and redesigns..
User avatar
joedf
Posts: 5649
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!

05 Nov 2014, 10:08

I suggest we just Make a repo under AhkScript, so we can contribute together :)
I can't currently, since I don't have access to a computer/Laptop for the next 4-5 or so days, I'm not sure yet. :P
deoauto
Posts: 4
Joined: 21 Mar 2015, 21:54

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

22 Mar 2015, 14:44

hello all, :)
especially to joedf for creating this interesting thread with helpful examples. I am quite new to autohotkey, its been less than a week since I started using it extensively. The idea of having HTML as GUI sounds really "revolutionary" to me (the end of boring GUI)... until it can't take me any further due to the limitation of shell.explorer issues. I have tried the FixIE() method in this forum and creating Autohotkey.exe registry in FEATURE_BROWSER_EMULATION, as well as adding <meta http-equiv="X-UA-Compatible" content="IE=9"> in my html file. It seems that after changing registry values to support Internet Explorer 8+ (capability to display css border-radius, showing .svg picture files.. ) it looks cool and good except the function to fire autohotkey commands using the following statement.

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



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 but divs := test.document.getElementById("div1") will not work and returns "Error: 0x8000402 - No such interface supported". However if divs := test.document is used instead, clicking anywhere in the document area will fire successfully.

Can someone shed light on this? is there something I'm missing? how do I make .getElementById("div1") works again?

my htmgui.html file content

Code: [Select all] [Expand] [Download] (Untitled.txt)GeSHi © Codebox Plus



Btw this is my first post! :D hope to be part of autohotkey community.

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 2 guests