[Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post your working scripts, libraries and tools
Lussuria
Posts: 3
Joined: 11 May 2019, 05:01

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Lussuria » 22 Jun 2020, 21:07

Requested showcase of my results by G33kDude
https://imgur.com/a/dLy3vWM

dagiccross
Posts: 2
Joined: 28 Jun 2020, 17:28

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by dagiccross » 28 Jun 2020, 18:06

Thank you by creating such amazing dependencies as always Geekdude! I'm new to AHK, curious if there is any documentation I could follow?

dagiccross
Posts: 2
Joined: 28 Jun 2020, 17:28

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by dagiccross » 02 Jul 2020, 10:13

Hi, anyone has a solution for disabling right-click option from it?

Appreciated your time!
AutoHotkey_0QY2Eq6Eaj.png
AutoHotkey_0QY2Eq6Eaj.png (60.76 KiB) Viewed 5144 times
Thanks

User avatar
joedf
Posts: 7792
Joined: 29 Sep 2013, 17:08
Facebook: J0EDF
Google: +joedf
GitHub: joedf
Location: Canada
Contact:

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by joedf » 02 Jul 2020, 12:42

I think you'll want to use the "oncontextmenu" event:
https://stackoverflow.com/a/4236294/883015

(taken from the link)

Code: Select all

<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>
You could also try overriding it with autohotkey...

GeekDude
Posts: 887
Joined: 02 Oct 2013, 22:13

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by GeekDude » 03 Jul 2020, 12:39

moefr01 wrote: :bravo: Absolutely A W E S O M E . thx a lot GeekDude
I've tried your excellent examples and found out that the checkbox and radio-control didn't scale properly (very small) on a 4k-monitor with 200% desktop-scaling. +/-DPIScale couldn't fix that issue ...
Is there a possibility to get that fixed maybe within the css or html file ?
:wave: moefr01

==============================================================
fixed it ;)

simple.html > just added the following html-code to deal with the size of checkbox and radio-control at 200%-screen:

Code: Select all

/*** Generic Form Styling ***/
...
    input[type=checkbox],
    input[type=radio],
    setsize {
      width: 0.75em; 
      height: 0.75em;
    }
Good stuff! Without a high-DPI screen of my own to test this kind of thing out on it's definitely a point that could be improved.
Tre4shunter wrote: So - printing the document(html page) using neutron. Is this something that is possible, or maybe through a third party library like print.js? the only issue i see with print.js is that it cant be done without user interation i.e the print dialog will always appear. Do you know of any way to get around this?

i know the webbrowser control has a print() function available, but not sure how i would implement it using Neutron.
I have no idea :lol:
dagiccross wrote: Thank you by creating such amazing dependencies as always Geekdude! I'm new to AHK, curious if there is any documentation I could follow?
No more than what's in the OP, examples, and comments in the library itself. Writing documentation is hard D:
dagiccross wrote: Hi, anyone has a solution for disabling right-click option from it?

Appreciated your time!

Thanks
The solution shared by joedf is the one I intended when developing Neutron, though admittedly I didn't write that down or demonstrate it anywhere. My bad!

Tre4shunter
Posts: 73
Joined: 26 Jan 2016, 16:05

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Tre4shunter » 13 Jul 2020, 10:59

Hey G33k,

Is there a way within Neutron to add callbacks to AHK when you are dynamically building the html page elements?
I'm creating tables dynamically, and then attaching click handlers to the rows. Im doing it like so currently:

Code: Select all

		...
		...
		....add table to dom....
		
		neutron.wnd.addClickHandlers()			;Execute JS function to create click handlers
		neutron.wnd.ahk_onclick := Func("OnClick")	;connect to ahk function
		
		onClick(event){
			msgbox, here
		}
So - im adding the table to the doc - then calling a JS function to attach the click handlers, and then attaching them to an AHK function. Just wondering if there is a cleaner way built into neutron. If not - this works fine :)

Thanks for all your awesome libraries and help as always.

-Tre4

User avatar
kczx3
Posts: 1195
Joined: 06 Oct 2015, 21:39

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by kczx3 » 13 Jul 2020, 19:47

You should probably just delegate the click handler to the table tag instead of attaching to the rows themselves.

Tre4shunter
Posts: 73
Joined: 26 Jan 2016, 16:05

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Tre4shunter » 13 Jul 2020, 19:51

Good point - but I'm still curious if there is a cleaner way! :)

User avatar
kczx3
Posts: 1195
Joined: 06 Oct 2015, 21:39

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by kczx3 » 14 Jul 2020, 14:19

Why do you need a JS function to then call an AHK function? Can you just insert your new row into the DOM and attach the AHK function directly to the click event? This would require that you inject the AHK function into the JS context prior to the dynamic creation of the rows.

GeekDude
Posts: 887
Joined: 02 Oct 2013, 22:13

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by GeekDude » 17 Jul 2020, 22:34

Tre4shunter wrote:
13 Jul 2020, 10:59
Hey G33k,

Is there a way within Neutron to add callbacks to AHK when you are dynamically building the html page elements?
I'm creating tables dynamically, and then attaching click handlers to the rows.

So - im adding the table to the doc - then calling a JS function to attach the click handlers, and then attaching them to an AHK function. Just wondering if there is a cleaner way built into neutron. If not - this works fine :)
I was able to whip up a few methods. Whether any of these are convenient for you, well, that's for you to decide.

Code: Select all

#NoEnv
SetBatchLines, -1

; Include the Neutron library
#Include ../Neutron.ahk

html =
( ; html
<h1>Table 1</h1>
<table id="table1"></table>
<h1>Table 2</h1>
<table id="table2"></table>
<h1>Table 3</h1>
<table id="table3"></table>
)
css = table, tr, td { border: 1px solid black; } td { padding: 0.25em; }
js := ""
data := [["Cell 1", "Cell 2"], ["Cell 1", "Cell 2"]]
neutron := new NeutronWindow(html, css, js, "Table Test")


; --- Table 1 ---
; Write the handler into the HTML

; Create a temporary table element to house the HTML before
; appending it to the actual table
tempTable := neutron.doc.createElement("table")

; Process each row
for i, row in data
{
	; Generate the HTML for the row
	rowHTML := "<tr onclick='ahk.RowClick(event, " i ")'>"
	for j, cell in row
		rowHTML .= neutron.FormatHTML("<td>{}</td>", cell)
	rowHTML .= "</tr>"

	; Use the temporary table to parse the HTML into the DOM,
	; then transfer the row into the real table. This is necessary
	; because just doing `table.innerHTML .= rowHTML` is really
	; inefficient and will break any javascript handlers that were
	; added to the table after document load.
	tempTable.innerHTML := rowHTML
	neutron.qs("#table1").appendChild(tempTable.firstChild)
}


; --- Table 2 ---
; Attach a JavaScript handler to the element

for i, row in data
{
	; Create the row element and attach the handler
	tr := neutron.doc.createElement("tr")
	tr.onclick := ObjBindMethod(neutron.wnd, "eval", "ahk.RowClick(event, " i ")")

	; Populate the row with HTML (or you could create elements
	; for each td and append them to the tr)
	rowHTML := ""
	for j, cell in row
		rowHTML .= neutron.FormatHTML("<td>{}</td>", cell)
	tr.innerHTML := rowHTML
	
	; Append the row to the table
	neutron.qs("#table2").appendChild(tr)
}


; --- Table 3 ---
; Attach an AutoHotkey handler to the element
; (I can't get the event object to flow through for some reason)

for i, row in data
{
	; Create the row element and attach the handler
	tr := neutron.doc.createElement("tr")
	tr.addEventListener("click", Func("RowClick").Bind(neutron, "???", i))

	; Populate the row with HTML (or you could create elements
	; for each td and append them to the tr)
	rowHTML := ""
	for j, cell in row
		rowHTML .= neutron.FormatHTML("<td>{}</td>", cell)
	tr.innerHTML := rowHTML
	
	; Append the row to the table
	neutron.qs("#table3").appendChild(tr)
}


neutron.Show("w640 h480")
return

NeutronClose:
ExitApp
return

RowClick(neutron, event, i)
{
	MsgBox, % "Clicked " event.target.innerText " on row " i
}
Tre4shunter wrote:
13 Jul 2020, 10:59

Thanks for all your awesome libraries and help as always.

-Tre4
You're welcome! It's always great to build tools that others find useful :)

Tre4shunter
Posts: 73
Joined: 26 Jan 2016, 16:05

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Tre4shunter » 20 Jul 2020, 06:12

These look perfect -

I will give these a shot, thanks so much for taking a look!

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 07 Aug 2020, 10:57

Is there a way to get formdata without the user clicking a button to start the event?

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 07 Aug 2020, 13:33

I end up with formData := neutron.qs("#input").value thanks to ppl on Discord.

html:

Code: Select all

<div class="form-row">
	<div class="form-group col-lg-12">
		<textarea class="form-control" id="input" placeholder="input" rows="20" required></textarea>
	</div>
</div>
in my case I only had one form field to check for changes. If you have more the answer will obviously be different.

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 07 Aug 2020, 14:24

In an effort to get it more responsive I learned on Discord how to call more types of events. In my case an "onkeyup" event.

For anyone who may need it:
html:

Code: Select all

<div class="form-group col-lg-12">
	<textarea class="form-control" id="input" placeholder="" rows="20" onkeyup="ahk.fn_fieldChanged(event)"></textarea>
</div>
ahk:

Code: Select all

fn_fieldChanged(neutron,event)
{
	formData := neutron.qs("#input").value
	neutron.doc.getElementById("ahk_output").innerText := Convert(formData)
}

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 07 Aug 2020, 14:45

actually this is even faster because it doesn't need to query the DOM looking for that field

Code: Select all

fn_fieldChanged(neutron,event)
{
	formData := event.target.value
	neutron.doc.getElementById("ahk_output").innerText := Convert(formData)
}

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 18 Aug 2020, 06:27

I'm trying to re-create https://jsfiddle.net/fu820y9o/1/ and could use a hand.


What I have:

Code: Select all

gui_insertTable(neutron, data, "#v-pills-home")
return

gui_insertTable(param_neutron, param_data, param_tableID)
{
	; // retrieve column header ('Name', 'Email', ect)
	col := []
	for _, object in param_data {
		for key, value in object {
			; if (col.indexOf(key) == -1) {
			; 	col.push(key)
			; }
		}
	}

	tHead := param_neutron.doc.createElement("thead")


	; // CREATE ROW FOR TABLE HEAD
	hRow := param_neutron.doc.createElement("tr")

	; // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
	for key, value in col {
		th := param_neutron.doc.createElement("th")
		th.innerHTML := col[A_Index]
		hRow.appendChild(th)
	}
	tHead.appendChild(hRow)
	table.appendChild(tHead)

	; // CREATE TABLE BODY .
	tBody := param_neutron.doc.createElement("tbody")

	; // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
	i := 0
	loop, % param_data.count() {
		i++
		; // CREATE ROW FOR EACH RECORD .
		bRow := param_neutron.doc.createElement("tr")

		j := 0
		loop, % col.Count() {
			j++
			td = param_neutron.doc.createElement("td")
			td.innerHTML := myContacts[i][col[j]]
			bRow.appendChild(td)
		}
		tBody.appendChild(bRow)

	}
	table.appendChild(tBody)


	; // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
	divContainer := param_neutron.doc.getElementById("myContacts")
	divContainer.innerHTML := ""
	divContainer.appendChild(table)
}

User avatar
Chunjee
Posts: 707
Joined: 18 Apr 2014, 19:05
GitHub: Chunjee

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by Chunjee » 19 Aug 2020, 17:29

GeekDude basically wrote it for me.

Some modifications:

Code: Select all

genTable(data, cols := false)
{
	static nw := NeutronWindow
	
	if (!cols) {
		cols := []
		for y, row in data
			for k, v in row
				cols[k] := k
	}
	
	out := "<table class=""table""><thead>"
	for _, title in cols
		out .= nw.FormatHTML("<td>{}</td>", title)
	out .= "</thead>"
	
	out .= "<tbody>"
	for y, row in data {
		out .= "<tr>"
		for _, title in cols
			out .= nw.FormatHTML("<td>{}</td>", row[title])
		out .= "</tr>"
	}
	out .= "</tbody></table>"
	
	return out
}

Code: Select all

myContacts :=
( Join
[
  {
	"name": "Parvez Ansari",
	"email": "[email protected]",
	"mobile": "555-555-5555"
  },
  {
	"name": "Tayyeb Shaikh",
	"email": "[email protected]",
	"mobile": "555-555-5555"
  },
  {
	"name": "Ashfaque Shaikh",
	"email": "[email protected]",
	"mobile": "555-555-5555",
	"sparseData": false
  }
]
)
html := genTable(myContacts, ["name", "mobile", "email"])
; or html := genTable(myContacts)
neutron.qs("#myContacts").outerHTML := html
Image

User avatar
TheDewd
Posts: 1446
Joined: 19 Dec 2013, 11:16
Location: USA

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by TheDewd » 24 Aug 2020, 10:16

Question: If a user has completely removed Internet Explorer from their PC, will this still work?

I understand that the engine is used in Internet Explorer, but is this completely independent from that meaning it will still function without IE installed?

Thanks!
Image Bulldozer - Sokoban inspired game from 1994 recreated in AutoHotkey.

User avatar
kczx3
Posts: 1195
Joined: 06 Oct 2015, 21:39

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by kczx3 » 24 Aug 2020, 10:21

IE would be required to my knowledge. And I'm not sure how easy it is to completely uninstall IE. Doing some quick searching it seems like IE11 is considered a "feature" of the OS and must be removed in a different way than just uninstalling a program.

User avatar
TheDewd
Posts: 1446
Joined: 19 Dec 2013, 11:16
Location: USA

Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids

Post by TheDewd » 24 Aug 2020, 10:25

kczx3 wrote:
24 Aug 2020, 10:21
IE would be required to my knowledge. And I'm not sure how easy it is to completely uninstall IE. Doing some quick searching it seems like IE11 is considered a "feature" of the OS and must be removed in a different way than just uninstalling a program.
Great! So, another thing I thought of... If this is using IE, then we will need to build compatibility into the HTML for older versions of IE, if the script is run on older version of Windows, for compatibility? To make sure the HTML doesn't display differently on different PC depending on which Windows and IE version is installed?
Image Bulldozer - Sokoban inspired game from 1994 recreated in AutoHotkey.

Post Reply

Return to “Scripts and Functions”