Requested showcase of my results by G33kDude
https://imgur.com/a/dLy3vWM
[Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids (now for v2!)
-
- Posts: 2
- Joined: 28 Jun 2020, 17:28
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
Thank you by creating such amazing dependencies as always Geekdude! I'm new to AHK, curious if there is any documentation I could follow?
-
- Posts: 2
- Joined: 28 Jun 2020, 17:28
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
Hi, anyone has a solution for disabling right-click option from it?
Appreciated your time!
Thanks
Appreciated your time!
Thanks
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
I think you'll want to use the "oncontextmenu" event:
https://stackoverflow.com/a/4236294/883015
(taken from the link)
You could also try overriding it with autohotkey...
https://stackoverflow.com/a/4236294/883015
(taken from the link)
Code: Select all
<div oncontextmenu="javascript:alert('success!');return false;">
Lorem Ipsum
</div>
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]
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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.moefr01 wrote: 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 ?
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; }
I have no ideaTre4shunter 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.
No more than what's in the OP, examples, and comments in the library itself. Writing documentation is hard D: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?
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!dagiccross wrote: Hi, anyone has a solution for disabling right-click option from it?
Appreciated your time!
Thanks
-
- Posts: 139
- Joined: 26 Jan 2016, 16:05
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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:
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
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
}
Thanks for all your awesome libraries and help as always.
-Tre4
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
You should probably just delegate the click handler to the table tag instead of attaching to the rows themselves.
-
- Posts: 139
- Joined: 26 Jan 2016, 16:05
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
Good point - but I'm still curious if there is a cleaner way!
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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.
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
I was able to whip up a few methods. Whether any of these are convenient for you, well, that's for you to decide.Tre4shunter wrote: ↑13 Jul 2020, 10:59Hey 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
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
}
You're welcome! It's always great to build tools that others find usefulTre4shunter wrote: ↑13 Jul 2020, 10:59
Thanks for all your awesome libraries and help as always.
-Tre4
-
- Posts: 139
- Joined: 26 Jan 2016, 16:05
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
These look perfect -
I will give these a shot, thanks so much for taking a look!
I will give these a shot, thanks so much for taking a look!
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
Is there a way to get formdata without the user clicking a button to start the event?
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
I end up with formData := neutron.qs("#input").value thanks to ppl on Discord.
html:
in my case I only had one form field to check for changes. If you have more the answer will obviously be different.
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>
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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:
ahk:
For anyone who may need it:
html:
Code: Select all
<div>
<textarea class="form-control" id="input" placeholder="" rows="20" onkeyup="ahk.fn_fieldChanged(event)"></textarea>
</div>
Code: Select all
fn_fieldChanged(neutron,event)
{
data := neutron.qs("#input").value
msgbox, % data
}
Last edited by Chunjee on 31 Dec 2023, 12:30, edited 1 time in total.
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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)
{
data := event.target.value
msgbox, % data
}
Last edited by Chunjee on 31 Dec 2023, 12:30, edited 1 time in total.
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
I'm trying to re-create https://jsfiddle.net/fu820y9o/1/ and could use a hand.
What I have:
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)
}
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
GeekDude basically wrote it for me.
Some modifications:
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
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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!
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!
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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.
Re: [Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids
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?
Return to “Scripts and Functions (v1)”
Who is online
Users browsing this forum: No registered users and 188 guests