[GUI] Use HTML and CSS for your GUIs!

Put simple Tips and Tricks that are not entire Tutorials in this forum
gallaxhar
Posts: 143
Joined: 03 Sep 2014, 06:35

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

21 Apr 2016, 19:16

Is it possible for AHK to see javascript events that are created by Html/CSS/JS entities on ActiveX controls and respond to them?
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

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

05 May 2016, 14:39

Take a look at Installer.ahk in your installation directory. Lexikos makes use of something like this. I think you can make a JS function and within that, call an AHK function and pass the events to it.
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

05 May 2016, 20:45

Yes, Installer.ahk is indeed a very good example. :)
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
Phatricko
Posts: 3
Joined: 13 Nov 2015, 12:12

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

08 Aug 2016, 12:06

This is very cool! If you have written a full blown class for this please let me know!

Thought I'd share this too, it registers the event for all input tags so you don't have to do it manually for each button. :D

Code: Select all

loop % wb.document.getElementsByTagName("input").length{
    ;ComObjConnect needs a unique variable for each iteration for all to work
    button%a_index% := wb.document.getElementsByTagName("input")[A_Index-1]
    id := button%a_index%.id
    ComObjConnect(button%a_index%, id . "_")
}
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

08 Aug 2016, 22:13

Cool :3
I should make a class library... Webkit.ahk 8-)
https://github.com/joedf/Webkit.ahk
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
Bruttosozialprodukt
Posts: 463
Joined: 24 Jan 2014, 22:28

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

09 Aug 2016, 03:26

Webkit is a bit misleading if it's using IE's Trident engine don't you think?

Oh and btw:
https://github.com/cocobelgica/AutoHotk ... ebView.ahk
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

10 Aug 2016, 10:07

@Bruttosozialprodukt
You're right haha
thanks for the link, I remember seeing that. seems quite complete.
I'm thinking maybe using Exo, so we would only need to edit HTML and js files.
I guess this would be more like a wrapper to simplify the work of making web+ahk apps.
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

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

10 Aug 2016, 12:47

Are either of you savvy enough to figure out why CWebView.ahk doesn't let any accelerator keys through?

In my only implementation, I modified the function used in Installer.ahk to let ctrl+a, ctrl+x, ctrl+c, ctrl+v through, and Enter also seems to be recognized. But can't seem to figure out how to do the same with this class.

Code: Select all

/*  Fix keyboard shortcuts in WebBrowser control.
 *  References:
 *    http://www.autohotkey.com/community/viewtopic.php?p=186254#p186254
 *    http://msdn.microsoft.com/en-us/library/ms693360
 */

gui_KeyDown(wParam, lParam, nMsg, hWnd) {
    global wb
    if (Chr(wParam) ~= "[B,D-U,W,Y-Z]" || wParam = 0x74) ; Disable Ctrl+O/L/F/N and F5.
        return
    pipa := ComObjQuery(wb, "{00000117-0000-0000-C000-000000000046}")
    VarSetCapacity(kMsg, 48), NumPut(A_GuiY, NumPut(A_GuiX
    , NumPut(A_EventInfo, NumPut(lParam, NumPut(wParam
    , NumPut(nMsg, NumPut(hWnd, kMsg)))), "uint"), "int"), "int")
    Loop 2
    r := DllCall(NumGet(NumGet(1*pipa)+5*A_PtrSize), "ptr", pipa, "ptr", &kMsg)
    ; Loop to work around an odd tabbing issue (it's as if there
    ; is a non-existent element at the end of the tab order).
    until wParam != 9 || wb.Document.activeElement != ""
    ObjRelease(pipa)
    if r = 0 ; S_OK: the message was translated to an accelerator.
        return 0
}
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

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

10 Aug 2016, 14:40

Was able to figure that part out by doing the below and passing my own function:

Code: Select all

cwb := new CWebView(1, "x0 y20 w250 h500", html)
cwb.TranslateAccelerator := ["D", gui_KeyDown]
Now, the problem is that setting cwb.Window.AHK := Func("JS_AHK") is now not working.
lexikos
Posts: 9494
Joined: 30 Sep 2013, 04:07
Contact:

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

10 Aug 2016, 22:43

CWebView.Window returns a CWebPage, not a window object. Your assignment doesn't work because CWebPrototype.__Set forwards assignments only when _IsMemberOf() returns true. I suppose it will return false for properties that haven't been defined yet, like 'AHK'.

It looks like all the wrapping is just to add a few helper functions to HTML nodes and document objects.
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

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

11 Aug 2016, 07:34

My main reason for trying this class out is because in this weather widget I've been slowly working on, it almost always shows the AutoHotkey has stopped responding window when I close it. And it wouldn't even run on my Win10 machine (untested using this class yet). Using this class, I haven't had any problems with that whatsoever.

This seems to work... whether or not its the correct way to do so.

Code: Select all

cwb := new CWebView(1, "x0 y20 w250 h500", html, Func("JS_AHK"))
cwb.TranslateAccelerator := ["D", gui_KeyDown]
w := cwb.__Ptr.document.parentWindow
w.AHK := Func("JS_AHK")
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

12 Aug 2016, 10:37

Will be adding this to the post soon, targeting newbie/intermediate.
https://github.com/joedf/Webapp.ahk

Sadly its not a class, there's some weird stuff going on.
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
func
Posts: 47
Joined: 20 May 2016, 20:52

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

18 Aug 2016, 20:52

Joedf, could your webapp.ahk be configured to detect javascript events like when a row on a table is selected? Such as at this link https://datatables.net/extensions/selec ... vents.html
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

18 Aug 2016, 22:16

Actually, try simply loading your webpages with the javascript. What webapp.ahk does, it allows you to access AHK scripting and wraps it into a lightweight "app" which can be compiled to an exe. Try it, maybe throw in a few messageboxes/alert() to debug it. :)
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
xandu
Posts: 3
Joined: 28 Aug 2016, 08:31

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

28 Aug 2016, 10:43

Newbie here... ;)
Is there a special requirement for running webapp.ahk applications (OS/IE version/anything else...)?
It works fine in Windows 10, but when I try to run Example.ahk on Vista/IE9 it throws an error when clicking a link.
Image
Any ideas?
Thanks
User avatar
joedf
Posts: 8937
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

28 Aug 2016, 18:23

Hmm....
Try commenting-out line 38... -> ;;;;SetWBClientSite() ? :?
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]
lexikos
Posts: 9494
Joined: 30 Sep 2013, 04:07
Contact:

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

28 Aug 2016, 19:49

@xandu: Make sure AutoHotkey is up to date.
Guest

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

29 Aug 2016, 10:03

joedf wrote:Hmm....
Try commenting-out line 38... -> ;;;;SetWBClientSite() ? :?
Nope, same error after commenting that line.

@lexikos: I downloaded it yesterday, so it should be up-to-date...
xandu
Posts: 3
Joined: 28 Aug 2016, 08:31

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

29 Aug 2016, 14:21

(I have to repost, I guess my reply was lost somehow)
joedf wrote:Hmm....
Try commenting-out line 38... -> ;;;;SetWBClientSite() ? :?
That didn't help, same error received...

@lexikos: I installed it yesterday, so it should be up-to date.
lexikos
Posts: 9494
Joined: 30 Sep 2013, 04:07
Contact:

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

30 Aug 2016, 03:26

Evidently your post was not lost, but probably required moderator approval because you were not logged in.

That you downloaded and installed it yesterday means very little, because you didn't say what you downloaded or from where. To actually verify that AutoHotkey is up to date, just check the version number of the program and compare it to the download link at the top of this page (currently "Download - 1.1.24.01"). The version number can be found in various places, but to be sure, the most reliable way is to run MsgBox %A_AhkVersion% within your script.

This is important because the line in question most likely requires v1.1.18+ ("Added support for creating new properties in JavaScript/IE DOM objects.")

Return to “Tips and Tricks (v1)”

Who is online

Users browsing this forum: No registered users and 18 guests