[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: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

13 Sep 2019, 07:53

The code seems fine overall except for the setAttribute() calls. They should change class instead, but dont use that. You can access the class with ".className"

Also you gotta check if IE or whatever browser is running, that it supports "filter".
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]
Mipha
Posts: 77
Joined: 27 Jul 2018, 17:08

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

13 Sep 2019, 17:56

joedf wrote:
13 Sep 2019, 07:53
The code seems fine overall except for the setAttribute() calls. They should change class instead, but dont use that. You can access the class with ".className"

Also you gotta check if IE or whatever browser is running, that it supports "filter".
The browser does not support filter. I've tried more things like loading a html file into ahk and the same file into chrome and trying the same thing it it would work for chrome but not for ahk. Are there any alternatives?

I've tried changing class instead of classname in the setAttribute() before posting the code here but that didn't work at all.
User avatar
kczx3
Posts: 1677
Joined: 06 Oct 2015, 21:39

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

13 Sep 2019, 20:27

You should use classList.add actually.

And yes, Internet Explorer doesn’t support the filter css property at all. So it won’t work.
User avatar
kczx3
Posts: 1677
Joined: 06 Oct 2015, 21:39

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

14 Sep 2019, 06:28

@malcev
What’s your point? It used to be supporters but didn’t follow any standards and was thus removed
malcev
Posts: 1769
Joined: 12 Aug 2014, 12:37

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

14 Sep 2019, 06:33

They were not removed.
You can still use it using proper document mode (<10) and modifying security settings.
User avatar
kczx3
Posts: 1677
Joined: 06 Oct 2015, 21:39

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

14 Sep 2019, 06:48

Both I wouldn’t recommend to anyone
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

14 Sep 2019, 11:54

If you open your HTML file directly in IE and it doesn't work... but it works in chrome. Then it will not work with your current script since it will utilize IE.
You might have to try something like Chrome.ahk
https://www.autohotkey.com/boards/viewtopic.php?f=6&t=42890
If not you can also consider alternatives such using a js-canvas or consider different image files. Either way, filter is not a necessity. :think: :thumbup:
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]
rick123
Posts: 5
Joined: 05 Dec 2019, 09:37

Help with HTML and CSS in GUIs

09 Jun 2020, 07:05

I can't figure out why my code doesn't work.
Anyone may help me, please?
The function "myFunctionInput" doens't work in AHK, althoug it's working correctly when I open html page directly.

My HTML page

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<link rel="stylesheet" href="assets/css/github-markdown.css">
		<style>
			html{margin:0;padding:0;overflow:auto;}
			*{text-shadow:0px 1px 0px #FFFFFF;font-family:tahoma;}
			div {color: #888888;font-size:30px}
		</style>
	</head>
	<body style="background-color: #dde4ec">
		<div>Title</div>
		<p><b>Note:</b>This is an example page.</p>
		
			<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>
			Enter your name: <input type="text" id="fname" onkeyup="myFunctionInput()">
			<p>My name is: <span id="demo"></span></p>
		
		<script>
			function myFunctionInput(s) {
				MyInput = document.getElementById("fname").value;
				document.getElementById('demo').innerHTML = MyInput;
			}
		</script>
	</body>
</html>


This is my AHK program

Code: Select all

#SingleInstance off
#NoTrayIcon
SendMode Input

#Include Lib\Webapp.ahk
__Webapp_AppStart:
;<< Header End >>


;Get our HTML DOM object
iWebCtrl := getDOM()

;Change App name on run-time
setAppName("Minha Tabela Filtrável")

; cut auto run main thread.
Return

; Webapp.ahk-only Sensitive hotkeys
#IfWinActive, ahk_group __Webapp_windows
!Enter::
	;!toggle
	setFullscreen(!__Webapp_FullScreen)
Return
#IfWinActive

; Our custom protocol's url event handler
app_call(args) {
	MsgBox %args%
	if InStr(args,"msgbox/hello")
		MsgBox, % "Hello world!"
}


; function to run when page is loaded
app_page(NewURL) {
	wb := getDOM()
	
	setZoomLevel(100)
}
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

09 Jun 2020, 09:14

myFunctionInput() is only javascript. there's no AHK there.
If you want to use an AHK function, you'll need to call it like so AHK('myAHKFunctionName', parameter1, parameter2) or similar. :+1:
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]
rick123
Posts: 5
Joined: 05 Dec 2019, 09:37

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

09 Jun 2020, 13:41

Thanks joedf, but I was following the example in the file https://github.com/joedf/Webapp.ahk/blob/master/src/page2.html where we can see a function named normal_js_function that is called from javascript alone.

Code: Select all

...
<button type="button" onclick="normal_js_function()">Normal js alert</button>
...

<script>
			function normal_js_function(s) {
				alert("hello from javascript alone.");
			}
</script>
Is it not the same thing I'm trying to do? :think:
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

10 Jun 2020, 08:17

Hmm.. not sure why the keyup event isn't working :think: but you can this instead (seems to work flawlessly):
<input type="text" id="fname" oninput="myFunctionInput()" onpropertychange="myFunctionInput()">
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]
rick123
Posts: 5
Joined: 05 Dec 2019, 09:37

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

10 Jun 2020, 10:58

Great, now it's working. :bravo:
I apreciate your help.
Thank you very much!
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

10 Jun 2020, 17:57

glad it works :salute: :thumbup:
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]
Hobby77
Posts: 31
Joined: 25 Jan 2021, 01:27

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

25 Jan 2021, 01:37

Very cool project!
Thank you for your contribution!
I want to know that I have many js files and css files, they are stored in different folders.
I want ahk2exe to compile only contain html, how should it call js or css code other than rdata
sorry for my poor english.
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

25 Jan 2021, 10:18

Have you tried the following?
Webapp.ahk https://www.autohotkey.com/boards/viewtopic.php?f=6&t=21516
Neutron.ahk https://www.autohotkey.com/boards/viewtopic.php?f=6&t=76865

You can directly include files by using relative file paths in your scripts and html.
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]
Hobby77
Posts: 31
Joined: 25 Jan 2021, 01:27

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

27 Jan 2021, 09:38

Thank you for your reply! It works fine on webapp
jsong55
Posts: 321
Joined: 30 Mar 2021, 22:02

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

12 May 2021, 22:50

I'm using https://www.autohotkey.com/boards/viewtopic.php?t=35199

WebPic function. However, somehow can't seem to get the image to have border-radius: 50%; circular effect

even after I changed this part of the code

Code: Select all

	(RTRIM
	"<!DOCTYPE html>
		<html>
			<head>
				<style>
					body {
						background-color: #" C ";
					}
					img {
					<!--This was changed-->
						border-radius: 40%;
					}
				</style>
			</head>
			<body>
				<img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px;"" />
			</body>
		</html>"
	)
User avatar
joedf
Posts: 9097
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

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

13 May 2021, 08:22

Not familiar with WebPic ...
perhaps try inline style?
<img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px; border-radius: 50%;"" />
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]

Return to “Tips and Tricks (v1)”

Who is online

Users browsing this forum: No registered users and 26 guests