[GUI] Use HTML and CSS for your GUIs!

Put simple Tips and Tricks that are not entire Tutorials in this forum
xandu
Posts: 3
Joined: 28 Aug 2016, 08:31

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

30 Aug 2016, 12:17

You are right about the post.
The version is 1.1.24.01, as reported by the command you suggested (the release was downloaded from here, the official site).
DanielToward13
Posts: 63
Joined: 18 May 2017, 10:56

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

16 Dec 2017, 02:47

How to change the innerHtml of the div tags in the DOM for UTF-8 languages in your code? I have modified your example code to change the default text to a Hebrew word מִבְחָן but the result isn't showing in UTF-8 despite adding the <meta http-equiv='X-UA-Compatible' content='IE=edge' charset='UTF-8'> in the header section. I also have tried to show UTF-8 messages in MsgBox but it fails.

Code: Select all

;activex gui 2 - test  joedf - 2014/09/19
#SingleInstance, off
OnExit,OnExit

HTML_page =
( Ltrim Join
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge' charset='UTF-8'>
		<style>
			@charset "utf-8";
			body{font-family:sans-serif;background-color:#1A1A1A;color:white}
			#title{font-size:36px;}
			input{margin:4px;Border: 2px white solid;background-color:black;color:white;}
			p{font-size:16px;border:solid 1px #666;padding:4px;}
			#footer{text-align:center;}
		</style>
	</head>
	<body>
		<div id="MyTextBox" charset="UTF-8">1234567890-=\ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$^&*()_+|~</div>
		<p id="footer">
			<input type="button" id="MyButton2" value="Change Content with AHK">
			<input type="button" id="MyButton3" value="Greetings from AHK">
		</p>
	</body>
</html>
)

Gui Add, ActiveX, x0 y0 w640 h480 vWB, Shell.Explorer  ; The final parameter is the name of the ActiveX component.
WB.silent := true ;Surpress JS Error boxes
Display(WB,HTML_page)

;Wait for IE to load the page, before we connect the event handlers
while WB.readystate != 4 or WB.busy
	sleep 10

;Use DOM access just like javascript!
MyButton1 := wb.document.getElementById("MyButton1")
MyButton2 := wb.document.getElementById("MyButton2")
MyButton3 := wb.document.getElementById("MyButton3")
ComObjConnect(MyButton2, "MyButton2_")
ComObjConnect(MyButton3, "MyButton3_")
Gui Show, w640 h480
return

GuiClose:
ExitApp
OnExit:
	FileDelete,%A_Temp%\*.DELETEME.html ;clean tmp file
ExitApp

; Our Event Handlers
MyButton2_OnClick() {
	global wb
	data := "מִבְחָן"
	wb.Document.getElementById("MyTextBox").innerHtml := data
}
MyButton3_OnClick() {
	MyUTF8 := "שלום"
	MsgBox, % MyUTF8
}
;------------------
Display(WB,html_str) {
	Count:=0
	while % FileExist(f:=A_Temp "\" A_TickCount A_NowUTC "-tmp" Count ".DELETEME.html")
		Count+=1
	FileAppend,%html_str%,%f%
	WB.Navigate("file://" . f)
}
User avatar
joedf
Posts: 6618
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 Dec 2017, 11:17

Hmmm... weird.. what about it simplified <meta charset="UTF-8">
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]
A_AhkUser
Posts: 881
Joined: 06 Mar 2017, 16:18
Location: France

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

16 Dec 2017, 12:30

@DanielToward13,

Save your script as utf-8.
DanielToward13
Posts: 63
Joined: 18 May 2017, 10:56

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

16 Dec 2017, 20:39

It's saved as UTF-8 file and I have tried different options in order to display it correctly but none works for me.
1. I create a file in Notepad++ and save it in UTF-8 encoding.
2. In SciTE4AutoHotkey Ver 3.0.06.01, I go to the File>Encoding>UTF-8
3. Tools>SciTE4AutoHotkey settings>File>UTF-8
4. Add ;; # -*- coding: utf-8 -*- in the first line of the script according to lexikos's reply
5. Changing the SciTEUser.properties file according to Joe Glines's settings (output.code.page=65001 and code.page=65001)

Did I miss something?
User avatar
joedf
Posts: 6618
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!

17 Dec 2017, 13:25

hmmm... And if try opening the local html file in your browser directly... does that work?
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]
DanielToward13
Posts: 63
Joined: 18 May 2017, 10:56

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

17 Dec 2017, 13:57

As an html file it works. When I convert the script to UTF-16 Little Endian, it works but I don't know why UTF-16 !?
User avatar
joedf
Posts: 6618
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!

17 Dec 2017, 14:45

hmmm.... that's interesting... :think: and with or without BOM doesnt affect anything?
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]
DanielToward13
Posts: 63
Joined: 18 May 2017, 10:56

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

17 Dec 2017, 18:56

I have realized that the script with UTF-8 with BOM encoding works only when I type the Hebrew words using SciTE4AutoHotkey editor with BOM. Which means if I type them using UTF-8 somewhere else and then copy and paste them it won't show up correctly.
User avatar
joedf
Posts: 6618
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!

17 Dec 2017, 19:11

hmm.... looks like there's something wonky in the utf implementation of either scite or IE... :think:
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]
User avatar
nnnik
Posts: 3482
Joined: 30 Sep 2013, 01:01
Location: Germany

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

18 Dec 2017, 01:11

Microsoft isn't able to handle the most common standard Utf-8 because it's stuck in the 16-bit era with Utf-16
Recommends AHK Studio
shauryasinha
Posts: 1
Joined: 29 Dec 2017, 00:53
Contact:

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

29 Dec 2017, 01:24

Quite handful about HTML and CSS for GUI's. Thanks.
Stavencross
Posts: 60
Joined: 24 May 2016, 16:42

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

06 Jan 2018, 10:07

Hello!

First, I'd like to thank you Joe, because your webapp.ahk has really helped me and I've built an entire platform for myself on it, looping in PHP, JS, HTML,CSS, even making SOAP API calls! it's really awesome!!!

I do have one challenge I just can't seem to get past though.

I have full fledged "webpages" in my app running on a local webserver on my computer, and some times (about 25% of the time) if I'm typing in an HTML textbox/text area, autohotkey has a fatal crash!
I think I've narrowed it down to the fact that in webapp.ahk I changed your code to allow me to use accelerators such as copy/paste/enter.

Here is the function I've modified to allow me to have hotkeys:

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) {
	wb := getDOM()
	; if (Chr(wParam) ~= "[A-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
}
I was wondering if you ran into this issue yourself and if you had maybe fixed it since releasing this?
User avatar
joedf
Posts: 6618
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!

06 Jan 2018, 13:15

Glad to hear! :dance:
About the crash, interestingly I have not run into this issue. :think: Could you make a pull request? :+1:
https://github.com/joedf/Webapp.ahk
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]
Stavencross
Posts: 60
Joined: 24 May 2016, 16:42

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

06 Jan 2018, 17:22

joedf wrote:Glad to hear! :dance:
About the crash, interestingly I have not run into this issue. :think: Could you make a pull request? :+1:
https://github.com/joedf/Webapp.ahk

Im not going to lie to you, I'm not sure how to go about doing that!

Edit: I'll do one in the morning as I'm away from my computer.

One thing to note, in a secondary AHK gui with an edit box, this error is not present.

It only happens if you launch webapp.ahk with accelerators turned on and you're typing into an html textbox or text area.

I've had some success mitigating it by changing the max threads of onmessage to be more than one but the error is still present.

The stack trace says its an error between AHK and mshtml.dll
User avatar
joedf
Posts: 6618
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!

07 Jan 2018, 01:31

No problem, let me know. I can make the change later on :+1:
That's interesting, could you post a screenshot of this error? And, Is this error gone or mitigated with your fix?
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]
Stavencross
Posts: 60
Joined: 24 May 2016, 16:42

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

07 Jan 2018, 09:57

joedf wrote:No problem, let me know. I can make the change later on :+1:
That's interesting, could you post a screenshot of this error? And, Is this error gone or mitigated with your fix?

The error itself is non-descriptive, it just says "Autohotkey has encountered an error and needs to close". The symptom is rather interesting, because when this error pops, you loose control of your mouse and it moves really slowly. My first thought was a memory leak, however, process manager reports that system resources are not maxing out or anything crazy like that.

Here is the trace from event viewer:

Code: Select all

Faulting application name: AutoHotkey.exe, version: 1.1.26.1, time stamp: 0x596abeba
Faulting module name: MSHTML.dll, version: 11.0.15063.786, time stamp: 0x3868b3d0
Exception code: 0xc0000602
Fault offset: 0x00000000005ec4b1
Faulting process id: 0x3af4
Faulting application start time: 0x01d387018cec4ad2
Faulting application path: C:\Program Files\AutoHotkey\AutoHotkey.exe
Faulting module path: C:\WINDOWS\SYSTEM32\MSHTML.dll
Report Id: 29b1a9c2-092e-474f-9cf3-45fa048f3a75
Faulting package full name: 
Faulting package-relative application ID: 

- System 
  - Provider 
   [ Name]  Application Error 
 
  - EventID 1000 
   [ Qualifiers]  0 
 
   Level 2 
 
   Task 100 
 
   Keywords 0x80000000000000 
 
  - TimeCreated 
   [ SystemTime]  2018-01-06T15:18:14.464519400Z 
 
   EventRecordID 8952 
 
   Channel Application 
 
   Computer lDALwks1knjtf2.man.co 
 
   Security 
 
- EventData 
   AutoHotkey.exe 
   1.1.26.1 
   596abeba 
   MSHTML.dll 
   11.0.15063.786 
   3868b3d0 
   c0000602 
   00000000005ec4b1 
   3af4 
   01d387018cec4ad2 
   C:\Program Files\AutoHotkey\AutoHotkey.exe 
   C:\WINDOWS\SYSTEM32\MSHTML.dll 
   29b1a9c2-092e-474f-9cf3-45fa048f3a75 

Here's a snippet from my HTML page. It creates a blank text area, and uses PHP to read a txt file to fill it.

Code: Select all

<div class="accountNotes" id="accountNotes">
	<form id="accountNotesForm" action="" method="POST" name="accountNotesForm">
 <textarea  id="area1" name="accountNotes" onfocus="onMessageOff()" onfocusout="onMessageOn()">
  <!-- make note of the onmessageoff and and, this is how I control the thread numbers. When we are typing in a box, we want to have accelerators enabled so we increase onmessage thread max count -->
<?php 
		$notesFile = __DIR__ . '/assets/accounts/' . $ServiceID . '/AccountNotes.txt';
		if($notesFile) {
		$handle = fopen($notesFile, 'r') or die('Cannot open file:  '.$notesFile);
		$contents = fread($handle, filesize($notesFile));
		fclose($handle);
		if($contents) {
		echo $contents;
		} else {			
		}
		}else{
			echo 'could not find notes file';
		}
	?>
</textarea>
<script>
	function onMessageOn() {
	AHK('enableMessageWatch');
}
function onMessageOff() {
	AHK('disableMessageWatch');
}
</script>
Here's a snippet from my AHK file

Code: Select all

;Here we are trying to mitigate the issue by allowing additional message threads.
enableMessageWatch() {
	OnMessage(0x100, "gui_KeyDown", 4)
}
	disableMessageWatch() {
		OnMessage(0x100, "gui_KeyDown", 1)
}
Now I'm not entirly sure that this is where I should be looking to mitigate this. The issue is still present even with my code running, it just seems to happen less often. I've got maybe 4-5 users testing this app for me, on Windows 7 & and Windows 10. All users have reported experiencing the crash.

Again, this error doesn't present itself when you click save or when you're typing into an AHK edit box, only when you're typing into a HTML textbox/textarea
User avatar
joedf
Posts: 6618
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!

07 Jan 2018, 13:32

Thanks this helps
My gut felling says it has something to do with the OnMessage() calls... :think:
Should the 1 not be a 0 in the Disable function?
Also, I am not sure how messages behave in this case... what are trying to achieve with these calls? Perhaps, it can be achieved in a different way?
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]
User avatar
kczx3
Posts: 668
Joined: 06 Oct 2015, 21:39

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

08 Jan 2018, 08:58

I can't get it to happen, though I am not using webapp.ahk. I simply used my own ActiveX control and modified the gui_KeyDown function from the AHK installer code. Maybe it is crashing because you are allowing all keys through as accelerators. I simply let through A/C/V and haven't seen your problem.

Code: Select all

; OnMessage handler used to block/allow certain accelerator keys in a webbrowser control.
; This one actually allows Ctrl + A/C/V
gui_KeyDown(w, l, nmsg, hwnd) {
	global doc
	ControlGetFocus, currFocus
	if (!InStr(currFocus, "Internet Explorer_Server"))
		return
	if (Chr(w) ~= "[B,D-U,W,Y-Z]" || w = 0x74) ; Disable Ctrl+O/L/F/N and F5.
		return
	pipa := ComObjQuery(doc, "{00000117-0000-0000-C000-000000000046}")
	VarSetCapacity(kMsg, 48), NumPut(A_GuiY, NumPut(A_GuiX
	, NumPut(A_EventInfo, NumPut(l, NumPut(w
	, 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 w != 9 || doc.activeElement != ""
		ObjRelease(pipa)
	if r = 0 ; S_OK: the message was translated to an accelerator.
		return 0
}

Return to “Tips and Tricks”

Who is online

Users browsing this forum: No registered users and 4 guests