[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: 7770
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
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".
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: 1166
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: 1166
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: 718
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: 1166
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: 7770
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
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:
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: 7770
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
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:
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: 7770
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
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()">
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: 7770
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

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

10 Jun 2020, 17:57

glad it works :salute: :thumbup:

Return to “Tips and Tricks”

Who is online

Users browsing this forum: caihoptrenkesach and 2 guests