🚀 Upgrade your AHK GUI - Display modern websites easily with WebView2!

An AHK Hero member was having problems using the WebView2 library. We have been working with it for our client, and AHK Hero member, Thomas Kahn, and asked all of them on for a call to demonstrate it's usage. Active X & IE is dying and we need a solid replacement for loading web pages. Here we demonstrate how easy it can be.

Thank you Thomas and Ryan for a great call! It was a lot of fun and we all learned from it!

Summary: Using AutoHotkey and JavaScript, you can create a GUI with a webview controller to visualize API data on a map.

1. 00:00 💻 Download the files from the URL and use version 2 of Otto hotkey for Webview2 to execute JavaScript in a webview controller and visualize API data on a map in an AutoHotkey GUI.
1.1 We're making a video to discuss the problems with ActiveX and IE, and to showcase a tool Thomas has been working on.
1.2 Download the files from the URL provided and make sure to use version 2 of Otto hotkey for Webview2.
1.3 I want to take the information from an API and visualize it on a map in an AutoHotkey GUI by dropping a pin or drawing a circle.
1.4 Thomas recently made changes to a library that allows you to execute JavaScript in a webview controller, and I'm going to show how easy it is.
1.5 The lib folder needs to be included in the project, and the webview runtime needs to be installed, with a script to check if it is installed.

2. 04:46 🤔 Attaching a webview controller to a window and using an invisible text control as a placeholder to determine the size and position of the controller allows you to embed a web page into your GUI.
2.1 In version two of GUI, objects are created in a variable and functions can be called from the main variable.
2.2 Creating a GUI with a webview controller requires attaching it to a window and the size of the webview is determined by the size of the window.
2.3 To create a placeholder for a GUI element, a workaround is to add an invisible text control with the desired width and height.
2.4 The webview will take the size of the window it is attached to, and when attaching it to a text control, it will take the size of that text control.
2.5 You can embed a web page into your GUI by using the text object to determine the size and position of the controller.
2.6 The webview control needs a host object to attach to, and its position can be automatically determined by the text control.

3. 13:14 🤔 Thomas is creating a GUI with a webview control, and I added a function to Dropbox to make it easier to run JavaScript and get a readable output in the console.
3.1 When creating a webview control, the core web view object must be accessed to navigate to a web page.

4. 19:49 🤔 Put all code into one Handler and use if statements to define behavior depending on conditions.
4.1 The browser will notify you when an event occurs, and you just have to capture the notification.
4.2 When navigation is complete, call a function to continue the process.
4.3 When the navigation is completed, a Handler is defined to capture the script completing Handler and add another click to call another Handler.

5. 25:57 🔍 Set the value of an input box, use document query selector to click a button, and run execute script with a parameter to check the exit value.
5.1 Navigate to a web page, set up a search bar with JavaScript, and create a Handler with three parameters to execute a script.
5.2 Set the value of an input box to a search term, then use document query selector to click a button to perform the search.

6. 32:28 🔎 Inspecting events with Chrome can help with web scraping and event listeners, and sending an event requires more than just the key code.
6.1 Interacting with the page after it is loaded allows for other things to be done.
6.2 Using Chrome to look at the events that get fired can help with web scraping and event listeners.
6.3 Create an event, initialize it, dispatch it to the input, and set the enter key to 13.
6.4 Entering a location into the URL can scroll to the desired location on the map.

7. 40:00 🗺️ Using a Google API and JavaScript, we can create an interactive map with multiple circles and a webview to display a file.
7.1 Main Street was able to interactively pull up houses tagged with an app using a URL in Google Maps.

8. 44:00 🗺️ Using the Google API and AutoHotkey GUI, you can interact with webpages and create dynamic maps with JavaScript objects.
8.1 You can use a webview to display a map with dynamic code, which can be inserted into the webview as JavaScript commands or stored in a separate file.
8.2 Interacting with complex webpages can be tricky, but it is possible to use the Google API and AutoHotkey GUI to manipulate data and update a map based on user interaction.

[ryanwells]

Joe, Isaias — what a wondering learning session. Thrilled to be an AHK Hero and have access to such great minds! I learned so much from this session with you all. Special thanks to Thomas too for sharing his invaluable insights.

Watch this to learn more about a reliable way to handle HTML objects — inserting HTML into your AHK GUIs — and discover how you can use javascript with your AHK code using AHK v2.

This fun hour taught be so much and helped me take my project to the next level. You're all AHK Heroes to me.

[corbinlinder]

Great video. Thank you, guys. I love this collaborative video style.

[dimaswidi]

i think i've seen thomas on another site.