AutoHotkey Community

Let's help each other out
https://www.autohotkey.com/boards/

[GUI] Use HTML and CSS for your GUIs!

https://www.autohotkey.com/boards/viewtopic.php?f=74&t=4588

Page 6 of 8

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

Posted: 11 Apr 2018, 17:44
by joedf
Awesome :+1:

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

Posted: 12 May 2018, 09:36
by Stavencross
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

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

Posted: 18 May 2018, 05:47
by Stavencross
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

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

Posted: 18 May 2018, 08:30
by kczx3
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

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

Posted: 18 May 2018, 11:36
by Stavencross
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

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

Posted: 19 May 2018, 08:26
by joedf
That’s weird... I don’t know of any loops on webapp.ahk ... :think:

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

Posted: 19 May 2018, 09:54
by kczx3
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.

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

Posted: 19 May 2018, 11:23
by joedf
ahh yes.. thanks for the clarification.

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

Posted: 21 Sep 2018, 09:04
by Stavencross
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

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

Posted: 21 Sep 2018, 19:52
by joedf
Good to know! :+1:

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

Posted: 01 Nov 2018, 22:16
by DRocks
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

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

Posted: 01 Nov 2018, 22:52
by joedf
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

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

Posted: 02 Nov 2018, 07:04
by DRocks
thank you!! and nice to see you're from Quebec... I'm in Longueuil near montreal

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

Posted: 02 Nov 2018, 07:41
by kczx3
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/

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

Posted: 02 Nov 2018, 08:18
by joedf
@DRocks cool! ahaha, more AHK users out there than I realize. :+1:

+1 kczx3

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

Posted: 02 Nov 2018, 09:54
by DRocks
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!!

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

Posted: 02 Nov 2018, 17:35
by DRocks
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"

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

Posted: 06 Nov 2018, 01:02
by SOTE
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...

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

Posted: 06 Nov 2018, 06:41
by DRocks
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

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

Posted: 13 Sep 2019, 05:46
by Mipha
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
All times are UTC-05:00
Page 6 of 8
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/