[GUI] Use HTML and CSS for your GUIs!

Put simple Tips and Tricks that are not entire Tutorials in this forum
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

11 Apr 2018, 17:44

Awesome :+1:
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
Stavencross
Posts: 82
Joined: 24 May 2016, 16:42

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

12 May 2018, 09:36

I'm curious if you've done anything else with webapp.ahk in the last 6-7 months or if there's been an update to it or anything
Stavencross
Posts: 82
Joined: 24 May 2016, 16:42

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

18 May 2018, 05:47

joedf wrote:Awesome :+1:

Some of the functions I use pop up a message box that pauses the script while a user works in PowerPoint.

However, it seems that webapp.ahk will be looping in the background, once it gets to 5 million loops, internet explorer pops a message box complaining about an unresponsive script and asking if I want to close it.

Is there anything I can do about this?

I'm trying to refractor my code to do away with these message boxes, but I wanted to see if you had any insight as a temp fix
User avatar
kczx3
Posts: 961
Joined: 06 Oct 2015, 21:39

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

18 May 2018, 08:30

Stavencross wrote:
joedf wrote:Awesome :+1:

Some of the functions I use pop up a message box that pauses the script while a user works in PowerPoint.

However, it seems that webapp.ahk will be looping in the background, once it gets to 5 million loops, internet explorer pops a message box complaining about an unresponsive script and asking if I want to close it.

Is there anything I can do about this?

I'm trying to refractor my code to do away with these message boxes, but I wanted to see if you had any insight as a temp fix
https://support.microsoft.com/en-us/hel ... orer-to-ru
Stavencross
Posts: 82
Joined: 24 May 2016, 16:42

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

18 May 2018, 11:36

kczx3 wrote:
Stavencross wrote:
joedf wrote:Awesome :+1:

Some of the functions I use pop up a message box that pauses the script while a user works in PowerPoint.

However, it seems that webapp.ahk will be looping in the background, once it gets to 5 million loops, internet explorer pops a message box complaining about an unresponsive script and asking if I want to close it.

Is there anything I can do about this?

I'm trying to refractor my code to do away with these message boxes, but I wanted to see if you had any insight as a temp fix
https://support.microsoft.com/en-us/hel ... orer-to-ru

Yes, that seems to be what's happening for sure. I asked in discord and I'll time out the message box to fix
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

19 May 2018, 08:26

That’s weird... I don’t know of any loops on webapp.ahk ... :think:
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [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: 961
Joined: 06 Oct 2015, 21:39

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

19 May 2018, 09:54

Has nothing to do with loops. He is probably calling an AHK function from JS which is opening the MsgBox. The JS is in a hold State because the MsgBox is modal and pauses JS execution. This happens with the software that I support where IE is used inside a C# application.
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

19 May 2018, 11:23

ahh yes.. thanks for the clarification.
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
Stavencross
Posts: 82
Joined: 24 May 2016, 16:42

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

21 Sep 2018, 09:04

Yes Kczx3 was correct. Yesterday I redesigned the whole 1000 line function to utilize a GUI instead for control instead of messagebox. that fixed everything
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

21 Sep 2018, 19:52

Good to know! :+1:
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
DRocks
Posts: 548
Joined: 08 May 2018, 10:20

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

01 Nov 2018, 22:16

Hello joedf

Thanks for showing this! I am trying to learn the topic currently and one of my question that arose by reading the first post is this:
Can we execute a print from that ActiveX control which is inside the GUI? Id like to use that to print invoices made with html template and GUI vars by a button click in ahk GUI
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

01 Nov 2018, 22:52

You could try taking control of the print dialog with something like this: https://stackoverflow.com/a/8688247/883015
You can bring it up by calling window.print() in js

or use a library like http://printjs.crabbly.com/
or maybe something with phantomjs or headless chrome
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
DRocks
Posts: 548
Joined: 08 May 2018, 10:20

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

02 Nov 2018, 07:04

thank you!! and nice to see you're from Quebec... I'm in Longueuil near montreal
User avatar
kczx3
Posts: 961
Joined: 06 Oct 2015, 21:39

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

02 Nov 2018, 07:41

I think you have two options DRocks. You can try using ShellRun by Lexikos and calling it like so:

Code: Select all

ShellRun("C:\Users\<user>\Desktop\index.html", "", "", "print", 1)
I do believe that this requires that the default program for html files is Internet Explorer though.

Another option, though it seems that this is undocumented behavior, is to call the PrintHTML function from mshtml.dll. I wasn't able to figure it out using DllCall but I could get it to run via to following:

Code: Select all

Run, % "rundll32.exe " . A_WinDir . "\system32\mshtml.dll,PrintHTML "C:\Users\<user>\Desktop\index.html"""
See here for more info - https://stackoverflow.com/a/768/8820049 and https://stackoverflow.com/questions/199 ... mshtml-dll

EDIT:
And here's a sample of a HTML file with styles for printing - https://gist.github.com/crowcoder/c4ac49ba30048262db8c
This seems to have good info for CSS print stuff - https://print-css.rocks/
User avatar
joedf
Posts: 7386
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

02 Nov 2018, 08:18

@DRocks cool! ahaha, more AHK users out there than I realize. :+1:

+1 kczx3
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x8GB G.Skill RipJaws V - DDR4 3280 MHz | [About Me] | [ASPDM - StdLib Distribution]
[Populate the AHK MiniCity!] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library] | [About the AHK Foundation]
DRocks
Posts: 548
Joined: 08 May 2018, 10:20

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

02 Nov 2018, 09:54

kczx3 wrote:
02 Nov 2018, 07:41
I think you have two options DRocks. You can try using ShellRun by Lexikos and calling it like so:

Code: Select all

ShellRun("C:\Users\<user>\Desktop\index.html", "", "", "print", 1)
I do believe that this requires that the default program for html files is Internet Explorer though.

Another option, though it seems that this is undocumented behavior, is to call the PrintHTML function from mshtml.dll. I wasn't able to figure it out using DllCall but I could get it to run via to following:

Code: Select all

Run, % "rundll32.exe " . A_WinDir . "\system32\mshtml.dll,PrintHTML "C:\Users\<user>\Desktop\index.html"""
See here for more info - https://stackoverflow.com/a/768/8820049 and https://stackoverflow.com/questions/199 ... mshtml-dll

EDIT:
And here's a sample of a HTML file with styles for printing - https://gist.github.com/crowcoder/c4ac49ba30048262db8c
This seems to have good info for CSS print stuff - https://print-css.rocks/
wow thank you! I'll read through this tonight. Thats great news!!
DRocks
Posts: 548
Joined: 08 May 2018, 10:20

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

02 Nov 2018, 17:35

ShellRun is in fact, as you said, only bringing up the print dialog when I switch from chrome to internet explorer as my default app to open .html files.

And the second part with run % " .. " is bringing the print dialog successfully no matter what!
There was a little typo that made me scratch my head a bit but this worked. Now I'll have to check for the html generating with the GUI values

Code: Select all

Run, % "rundll32.exe " . A_WinDir . "\system32\mshtml.dll,PrintHTML ""C:\Users\Alex\Desktop\index.html"
SOTE
Posts: 895
Joined: 15 Jun 2015, 06:21

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

06 Nov 2018, 01:02

DRocks wrote:
02 Nov 2018, 17:35

Code: Select all

Run, % "rundll32.exe " . A_WinDir . "\system32\mshtml.dll,PrintHTML ""C:\Users\Alex\Desktop\index.html"
Might want to use %A_UserName% as opposed to Alex or <user>... Just saying...
DRocks
Posts: 548
Joined: 08 May 2018, 10:20

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

06 Nov 2018, 06:41

SOTE wrote:
06 Nov 2018, 01:02
DRocks wrote:
02 Nov 2018, 17:35

Code: Select all

Run, % "rundll32.exe " . A_WinDir . "\system32\mshtml.dll,PrintHTML ""C:\Users\Alex\Desktop\index.html"
Might want to use %A_UserName% as opposed to Alex or <user>... Just saying...
Right.
The only thing that bothers me is that the link to posts that Kc included mention that the mshtml.dll is not documented and might not be supported in futur Windows builds. Other than that for now.. it works fine
Mipha
Posts: 74
Joined: 27 Jul 2018, 17:08

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

13 Sep 2019, 05:46

I have been stuck with this issue for the longest time and I'm seriously thinking that no good solution exists for this one.

I am trying to change the color of an image inside a activeX gui.

Here is my code

Code: Select all

#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

;Not required for the script but it makes moving the window around with the mouse possible.
OnMessage(0x0201, "WM_LBUTTONDOWN")
WM_LBUTTONDOWN()
{
	If (A_Gui){
		PostMessage, 0xA1, 2
	}
}

gui Changeimagecolor:default
gui, add, edit, h0 w0
gui, font, s10
gui +Border -Caption +lastfound
gui, color, EBAE02
WinSet, TransColor, EBAE02
;set gui background and make that color invisible so just the elements are shown.
winsettitle, Changeimagecolor
guiwidth := A_screenwidth / 1.5
guiheight := A_screenheight / 1.5
;specify width and heights for guis
leftmenuwidth := guiwidth * 0.1
leftmenuheight := guiheight
middlemenuwidth := guiwidth * 0.8
middlemenuheight := guiheight

Gui, Add, ActiveX, x0             y0 w%leftmenuwidth%   h%leftmenuheight% vleftmenu, Shell.Browser
Gui, Add, ActiveX, x%leftmenuX%   y0 w%middlemenuwidth% h%middlemenuheight% vmiddlemenu, Shell.Browser

lefthtml := "<!DOCTYPE html><html><head><meta http-equiv='X-UA-Compatible' content='ie=edge'>"
lefthtml .= "<style type=text/css> html {overflow:hidden; height: 100%;} body {background:#777777; height: 100%;} table {left:0px; top:0px; width:100%; border-style: none; position:absolute;} [greyed=true]{background: #666666 !important;}"
lefthtml .= "button{width:100%; height:5%; background:#555555; color:#000000; border: 2px solid #440044;}"
lefthtml .= ".altercolor{filter: hue-rotate(90deg); background:#FFFFFF;}"
lefthtml .= "</style></head><body>"
lefthtml .= "<button class='button' id='changecolor'>Change image color</button>"
lefthtml .= "<button class='exitbutton' id='exitbutton'>Exit</button>"
lefthtml .= "</body></html>"

middlehtml := "<!DOCTYPE html><html><head><meta http-equiv='X-UA-Compatible' content='ie=edge'>"
middlehtml .= "<style type=text/css> html {overflow:hidden; height: 100%;} body {background:#666666; height: 100%;} table {left:0px; top:0px; width:100%; border-style: none; position:absolute;} [greyed=true]{background: #666666 !important;}"
middlehtml .= ".altercolor{filter: hue-rotate(90deg); background:#FFFFFF;}"
middlehtml .= "</style></head><body>"
middlehtml .= "<img class='image' id='image' src='" . A_WorkingDir . "\>\* Put image here*\<'>"
middlehtml .= "</body></html>"

;navigate to a blank html slate
leftmenu.navigate("about:blank")
middlemenu.navigate("about:blank")
rightmenu.navigate("about:blank")

;write html in the guis
leftmenu.document.open()
leftmenu.document.write(lefthtml)
leftmenu.document.close()

middlemenu.document.open()
middlemenu.document.write(middlehtml)
middlemenu.document.close()
;connect the button to the changecolor function
ComButton := Leftmenu.document.getElementById("changecolor")
ExitButton := Leftmenu.document.getElementById("exitbutton")
ComObjConnect(ComButton, "changeColor_")
ComObjConnect(ExitButton, "exit_")
gui, show
return


F11::
reload
return

changeColor_onclick(){
	global
	;get the ID of the image and button and set their class to 'altercolor'
	imagecheck := middlemenu.document.getElementById("image")
	imagecheck.setAttribute("className", "altercolor")
	;.altercolor{filter: hue-rotate(90deg); background:#FFFFFF;} < this should change the color and background of both the button and image but just the background changes.
	buttoncheck := leftmenu.document.getElementById("changecolor")
	buttoncheck.setAttribute("className", "altercolor")
}
exit_OnClick(){
	ExitApp
}
This script creates a gui. Loads in an image and gives you a button that adds the "altercolor" class to both the button and image which has filter: hue-rotate(90deg); which should change the color but it doesn't. Help on being able to do something like this would be appreciated.
To use the script for yourself. Put an image in the same directory as the script and replace \* Put image here*\ in the script with the image

Return to “Tips and Tricks”

Who is online

Users browsing this forum: No registered users and 5 guests