[Library] Neutron.ahk - AutoHotkey Web GUIs on Steroids (now for v2!)

Post your working scripts, libraries and tools for AHK v1.1 and older
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

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

Post by kczx3 » 07 Jan 2021, 12:10

@KiddoV
See here - https://github.com/G33kDude/Neutron.ahk/issues/2

EDIT: Actually, if you instead download the source code, it should work. Updates have been made to the accelerator handling but have not been incorporated into a GitHub "Release".

KiddoV
Posts: 13
Joined: 11 May 2020, 20:29

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

Post by KiddoV » 14 Jan 2021, 10:22

Thank you, @kczx3!
Everyone,
I recently using function ObjRegisterActive() to access Neutron object from the outer script.

Code: Select all

ObjRegisterActive(Object, CLSID, Flags:=0) {
    static cookieJar := {}
    if (!CLSID) {
        if (cookie := cookieJar.Remove(Object)) != ""
            DllCall("oleaut32\RevokeActiveObject", "uint", cookie, "ptr", 0)
        return
    }
    if cookieJar[Object]
        throw Exception("Object is already registered", -1)
    VarSetCapacity(_clsid, 16, 0)
    if (hr := DllCall("ole32\CLSIDFromString", "wstr", CLSID, "ptr", &_clsid)) < 0
        throw Exception("Invalid CLSID", -1, CLSID)
    hr := DllCall("oleaut32\RegisterActiveObject"
        , "ptr", &Object, "ptr", &_clsid, "uint", Flags, "uint*", cookie
        , "uint")
    if hr < 0
        throw Exception(format("Error 0x{:x}", hr), -1)
    cookieJar[Object] := cookie
}
Outer script...

Code: Select all

NeutronWebObj := ComObjActive("{AAAAAAAA-1111-0000-116D-616E61676572}")
...So everything works perfectly except I cannot access the NeutronWebObj.wnd.customFunction() from the outer script. (Inner script was ok) The NeutronWebObj.wnd.alert("Hello") still ok tho, only it cannot access custom javascript functions.
Does anyone know why?
Thanks all!

20170201225639
Posts: 144
Joined: 01 Feb 2017, 22:57

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

Post by 20170201225639 » 17 Jan 2021, 15:14

Wow. Thank you Geekdude. This is going to make my life so much easier.

I have a general question about the usage of Neutron, if you don't mind. Basically: when it comes to manipulating HTML DOMs, two methods seem possible:

(A) Use Neutron to manipulate the DOM directly.

Code: Select all

neutron.doc.getElementById("ahk_x").innerText := x
(B) Define a JS function, call that function from Neutron.

Code: Select all

neutron.doc.parentWindow.customDefinedJS("please do this dom update for me")
I'm wondering if, there's any difference between (A) and (B) (esp. performance-wise) which may mean there are situations where one is prefered over the other and vice versa?

I especially have in mind time-sensitive applications (think: live filtering a huge table, find-as-you-type style) where major updates are made to the DOM on each single keystroke.

tuzi
Posts: 223
Joined: 27 Apr 2016, 23:40

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

Post by tuzi » 17 Jan 2021, 22:59

Is it possible to provide a library based on the chrome kernel to do what Neutron.ahk does?
The advantages are
1. People just need a latest version of chrome.dll.
2. Most people use chrome, and most websites are optimized for chrome only, so if we want to learn the web effect of a website, this is the best solution.
3. Microsoft dropped the support for IE.
4. Different versions of IE show a big difference.
5. IE is not as fast as chrome.

7JfbcEU4prPAFEws
Posts: 3
Joined: 19 Jan 2021, 07:39

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

Post by 7JfbcEU4prPAFEws » 19 Jan 2021, 10:26

Excellent work! I've been playing with this for a couple of days and it's really nice. :bravo:

The only thing I'd change is the "borderless window" effect for a variety of reasons:

1. it doesn't really work for me (title bar appearing/disappearing every time I switch windows, flickering, etc.)
2. I like title bars and borders and I don't need any neutron window to be without
3. I found out that WinSet, Style, +0xC40000 does a better job at it

Anyway it's not a problem for me, I already changed that part of the code.

Thanks! :beer:

aerodatilo
Posts: 1
Joined: 09 Oct 2018, 04:49

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

Post by aerodatilo » 22 Feb 2021, 16:40

Hello, guys! And @GeekDude

Thanks for the script but i'm having trouble to use gLabel, goto and gosub

Well, my script is not only a screen, have others actions and i need to break the neutron and use goto/gosub (like a "gui, add, button, gLabel")

Have any way to do it on Neutron?


Edit::Hello again, guys

After 2 days thinking about it, I decided to come to the forun, and NOW (exactly) I finally have found an alternative with SetTimer.

Please, enjoy

Full Code (No Explain, detailed explain is above it)
<button type="submit" onclick="ahk.LoginEvent(event)" class="btn btn-primary">Login ></button>

LoginEvent(neutron, event)
{
SetTimer, LoginEvent, 100
}

LoginEvent:
if(Server = "")
Server:=formData.Server,Password:=formData.Password
else goto Loggin
return

Loggin:
neutron.destroy()
SetTimer, LoginEvent, off
return


HTML Button:

<button type="submit" onclick="ahk.LoginEvent(event)" class="btn btn-primary">Login ></button>


Function Call (starts on button):
LoginEvent(neutron, event)
{
SetTimer, LoginEvent, 100
}


Activate the Timer to start with 100ms (use anytime, but care with processor)
LoginEvent:
if(Server = "")
Server:=formData.Server,Password:=formData.Password
else goto Loggin
return


After server and password is ok, starts the function normaly:
Loggin:
neutron.destroy()
SetTimer, LoginEvent, off ; to not repeat anymore
return

julesverne
Posts: 42
Joined: 18 Apr 2017, 14:39
Contact:

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

Post by julesverne » 25 Mar 2021, 20:14

I'm using the simple.ahk script and I noticed I can't paste into the form input boxes. Any reason why that would be like that?

robmar-zl
Posts: 24
Joined: 05 Feb 2015, 04:57

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

Post by robmar-zl » 11 Apr 2021, 10:52

I want to use neutron to display some links with images on the desktop. It is wokring fine so far, but I can't set the background to transparent.
Adding WinSet, TransColor to neutron doesn't work or I am adding it at the wrong position.

Any help? :think:

User avatar
Chunjee
Posts: 1397
Joined: 18 Apr 2014, 19:05
Contact:

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

Post by Chunjee » 12 Apr 2021, 17:02

Working on my second or third app with a Neutron gui.

I think many would think of interacting with Neutron can be thought of sending and receiving. In the past I tried labeling these function nc_{{description}} and nr_{{description}} for neutronCall and neutronRecieve but these were a little confusing for different reasons. I will be trying this now:

Image

ncall_/nresp_
nreq_/nres_
If you have a better pattern please let me know.

gomand
Posts: 5
Joined: 22 Aug 2020, 13:48

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

Post by gomand » 16 Apr 2021, 20:48

Anyone else notice an issue with scroll bars not going all the way to the bottom of the page? Particularly with the bootstrap example, which seems to be setup properly with the "overflow-auto" class.

When I load the bootstrap.html into chrome it works well so I'm guessing this is some shortcoming of IE. I spent a few hours trying varying fixes but still can't seem to get it to allow me to scroll all the way to the bottom when there's a large amount of content in the page.

For example (and I disabled DPI scaling to make sure this wasn't an issue) in bootstrap demo (on the left) if I make the window smaller the forms page gets cropped without a scroll bar showing up. On the right when I open the demo in chrome I get a scrollbar at this point as expected.
image.png
image.png (64.03 KiB) Viewed 4596 times
If anyone knows a workaround to get this to play nice that would be appreciated. I have limited experience with html/css.

Hobby77
Posts: 29
Joined: 25 Jan 2021, 01:27

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

Post by Hobby77 » 17 Apr 2021, 21:55

gomand wrote:
16 Apr 2021, 20:48
Anyone else notice an issue with scroll bars not going all the way to the bottom of the page? Particularly with the bootstrap example, which seems to be setup properly with the "overflow-auto" class.

When I load the bootstrap.html into chrome it works well so I'm guessing this is some shortcoming of IE. I spent a few hours trying varying fixes but still can't seem to get it to allow me to scroll all the way to the bottom when there's a large amount of content in the page.

For example (and I disabled DPI scaling to make sure this wasn't an issue) in bootstrap demo (on the left) if I make the window smaller the forms page gets cropped without a scroll bar showing up. On the right when I open the demo in chrome I get a scrollbar at this point as expected.

image.png

If anyone knows a workaround to get this to play nice that would be appreciated. I have limited experience with html/css.
Maybe you need to add "overflow" to "style",

gomand
Posts: 5
Joined: 22 Aug 2020, 13:48

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

Post by gomand » 18 Apr 2021, 11:32

Hobby77 wrote:
17 Apr 2021, 21:55
Maybe you need to add "overflow" to "style",
Thanks for the help! I tried adding "overflow-auto" to the class tags of the page contents div, and now all is well and the demo works as expected with scrolling. I have no idea why this is the case. When I try to use the style tags it doesn't quite work how I would expect.

So if I add overflow:auto to the style tags for the page-content div it does not work/ has no effect (note this section in the default neutron.ahk bootstrap example already has the class tag "overflow-auto").

Code: Select all

    <!-- Page Content -->
    <div class="flex-grow-1 " style="overflow:auto;">
However, if I add this to the window contents it works but then it also scrolls the side bar as well.

Code: Select all

   <!-- Window Contents -->
  <div class="flex-grow-1 d-flex" style="overflow:auto;">
Interestingly with this default bootstrap example it is not an issue for the "home" tab where there is just text within the div. If I copy a large block of text into any of the divs it scrolls as expected. But with the "buttons" and "forms" or if I try adding a large simple table, it doesn't overflow properly. Oh well I am happy with the above solution.

jsong55
Posts: 219
Joined: 30 Mar 2021, 22:02

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

Post by jsong55 » 12 May 2021, 23:42

Is it possible to add a neutron window within an existing GUI?

Especially if I already created my own GUI and want to use neutron to display images and videos in a tab or at a certain location of it

Stavencross
Posts: 90
Joined: 24 May 2016, 16:42

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

Post by Stavencross » 16 May 2021, 18:16

GeekDude wrote:
04 Jun 2020, 00:06
Welcome to Neutron

Neutron provides a powerful set of tools for build HTML-based user interfaces with AutoHotkey. It leverages the Trident engine, known for its use in Internet Explorer, because of its deep integration with the Microsoft Windows operating system and its wide availability across systems.

Notable features:
  • Create GUIs with HTML, CSS, JS, and AHK all working together.
  • Make responsive user interfaces that reflow when you resize the window, and scroll when elements go out of view.
  • Full customization of the title bar including fonts and colors.
  • Make better looking interfaces easily with web frameworks like Bootstrap.
  • Compile resources into your script and access them without extracting. Very useful for including images in the script!
Image

Listen and watch about Neutron on YouTube, from the May 2020 webinar recording. This was for a very early version of Neutron but it still contains many of the core concepts.


Getting Started with Neutron

The Neutron library is designed to be minimally invasive, easily included into existing scripts without major modifications. Neutron GUIs are created and managed similarly to native AutoHotkey GUIs.

This is just crazy amazing. The only thing is that I wish you had combined this with your chrome.ahk library, and built this out in a chrome wrapper instead of an IE one.

Stavencross
Posts: 90
Joined: 24 May 2016, 16:42

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

Post by Stavencross » 16 May 2021, 18:49

I created the following Bootstrap 5 HTML GUI, and installed everything the same way as in the bootstrap.ahk file, but my gui comes up broken af. All i changed was to fileinstall bootstrap bundle.min.js and I replaced neutron.Load("bootstrap.html") with neutron.Load("index.html"). Is it just that I went a little too crazy with the bootstrap?

my HTML page
https://pastebin.com/xCqU76DD

my Script
https://pastebin.com/A9PL4k4g

Here is a JS fiddle, so you can see what this page is supposed to look like
https://jsfiddle.net/stavencross/m9pgakn4/

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.
; Include the Neutron library
#Include Neutron.ahk

; Create a new NeutronWindow and navigate to our HTML page
neutron := new NeutronWindow()
neutron.Load("index.html")

neutron.Gui("+LabelNeutron")

; Show the GUI at its default size.
neutron.Show()
return

FileInstall, index.html, index.html
FileInstall, bootstrap.min.css, bootstrap.min.css
FileInstall, bootstrap.bundle.min.js, bootstrap.bundle.min.js
FileInstall, jquery.min.js, jquery.min.js


NeutronClose:
ExitApp
return


Button(neutron, event)
{
	MsgBox, % "You clicked " event.target.innerText
}

Submit(neutron, event)
{
	; Some events have a default action that needs to be prevented. A form will
	; redirect the page by default, but we want to handle the form data ourself.
	event.preventDefault()
	
	; Use Neutron's GetFormData method to process the form data into a form that
	; is easily accessed. Fields that have a 'name' attribute will be keyed by
	; that, or if they don't they'll be keyed by their 'id' attribute.
	formData := neutron.GetFormData(event.target)
	
	; You can access all of the form fields by iterating over the FormData
	; object. It will go through them in the order they appear in the HTML.
	out := "Access all fields by iterating:`n"
	for name, value in formData
		out .= name ": " value "`n"
	out .= "`n"
	
	; You can also get field values by name directly. Use object dot notation
	; with the field name/id.
	out .= "Or access individual fields directly:`n"
	out .= "Email: " formData.inputEmail "`n"
	out .= "Password: " formData.inputPassword "`n"
	if formData.gridCheck
		out .= "You checked the box!"
	else
		out .= "You didn't check the box."
	
	; Show the output
	MsgBox, %out%
}


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

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

Post by kczx3 » 17 May 2021, 12:14

From Bootstrap 5 docs:
Internet Explorer is not supported. If you require Internet Explorer support, please use Bootstrap v4.



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

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

Post by kczx3 » 21 May 2021, 08:06

No, not yet as far as I can tell.

erohtar
Posts: 20
Joined: 24 Jun 2021, 10:53

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

Post by erohtar » 24 Jun 2021, 11:00

This library is phenomenal and a game changer - thanks for creating it, Geek Dude!

I had some QQ that I wasn't able to find the answer to here, or the Neutron Webinar:
1) How do I call a JS function that I've added to the html code from AHK? Let's say something as simple as - function jsTest() { alert("Hello World");}
2) How do I make the Neutron window non-resizable?

Post Reply

Return to “Scripts and Functions (v1)”