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.
This example, while named Simple, is not the most simplistic example. Instead, it is designed to demonstrate all of Neutron's built in behavior as a single custom page. It is meant to be simple by comparison to other examples like the Bootstrap example which demonstrate extending Neutron's functionality with third party web frameworks.
Trigger AHK by page events
The simplest way of integrating a page to your script is by linking a
button's click event to a function in your script. This can be easily
achieved using the button's onclick
attribute.
Click events aren't the only type that can be handled. The box below responds to mouse movement events and gets automatically updated with the cursor position by AutoHotkey.
Update page by Hotkey
Try pressing the keys 1 through 4 on your keyboard!
This example demonstrates the following tasks:
- Limit a hotkey's activity to the Neutron window.
- Find a collection of elements using CSS selectors.
- Iterate over the collection with
Neutron.Each
- Update an element's CSS class string.
Pass form data to AHK
This example shows how you would collect form data from Neutron.
You can also use forms where there are multiple options for a value, such as by a set of checkboxes or multi-select. Radio selections work too!
Dynamic Content Generation
Often you won't have the HTML you want on the page in advance, but instead need to generate it based on some data that the script receives, whether from a file, a web API, input boxes on the page, etc. Generating HTML on the fly is possible, but unless done right can introduce subtle bugs into your application.
There are two main techniques to dynamic generation. First, you can
write code that creates the HTML, then load that HTML onto the page by
using something like document.write(html);
or
element.innerHTML = html;
. Second, you can use DOM
functions like document.createElement
to generate the page
elements directly without worrying about the HTML markup. This second
option is usually the safer option, but is much more difficult to work
with. Both techniques are demonstrated below.
HTML Generation
Item | Cost |
---|
DOM Generation
Item | Cost |
---|