AutoHotKey GUI with embedded HTML and transparent background

Question

I'm trying to make an AutoHotKey script to display a transparent overlay from an HTML file using the following code:

SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.
#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
#Warn  ; Enable warnings to assist with detecting common errors.
#SingleInstance, force
Menu Tray, tip, %A_ScriptName% ; Custom traytip
OverlayVisible := 0

; ---------------------- CUSTOMIZE BELOW HERE ----------------------

PositionX      := 31     ; x position of top left corner of overlay
PositionY      := 423    ; y position of top left corner of overlay

F1::
    Gosub Sub_BuildHTML
    Gosub Sub_ToggleOverlay
return

Sub_ToggleOverlay:
    if !OverlayVisible {
        Gosub Sub_ShowOverlay
    } else {
        Gosub Sub_HideOverlay
    }
    OverlayVisible := !OverlayVisible
return

; Creates and shows the GUI
Sub_ShowOverlay:
    Gui GUI_Overlay:New, +ToolWindow  +LastFound +AlwaysOnTop -Caption -Border +hwndGUI_Overlay_hwnd

    Gui Margin, 0,0  
    Gui Add, ActiveX, w400 h225 vWB BackGroundTrans, Shell.Explorer
    URL := "file:///" . A_ScriptDir . "/overlay.html"
    WB.Navigate(URL)

    WinSet Transparent, 255
    ;WinSet TransColor, White 0
    Gui Show, Hide, Overlay

    WinMove PositionX, PositionY
    Gui GUI_Overlay:Show, NoActivate
return

Sub_HideOverlay:
    Gui GUI_Overlay:Destroy
return

Sub_BuildHTML:
    FileDelete, overlay.html
    FileAppend,
    (
<!DOCTYPE html>
<html>
  <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge"/>
  <head>
    <style type="text/css">
    body {
      background-color: transparent;
      overflow:hidden;
    }
    #header1 {
      color:blue;
    }
    </style>
  </head>
  <body>
    <div id="header1">TEST</div>
    <img src="https://i.stack.imgur.com/FBZq5.png" />
  </body>
</html>
), overlay.html
return

Everything except the transparency is working great. I can use WinSet Transparent to make the entire control transparent but what I want is for just the edges of the overlay to fade out to transparency so that the actual content of the HTML is visible.

I created a background image for the HTML with the desired fade to transparent but because the background of the HTML is still white it is just a fade to white instead.

Seems to be an issue with IE not wanting to render a transparent background? Is there any way to fix this so that the background is really transparent or is there some other workaround possible?

score 0 · Answer 1 · answered Sep 02 '19 at 14:33

0

This script shows the controls with transparency:

And this with TransColor. Other settings are available.

answered Sep 02 '19 at 14:33

Laurie Stearn

959
1
13
34

score 0 · Answer 2 · answered Oct 12 '20 at 03:10

ive tried to figure out the same thing. I am well versed in the ways of html, css, javascript, coffeescript, scss and a few other languages involving web design and such. In my experience the only place ive been able to make a web page have transparent bg is with electron. i have been experimenting with neutron. its a renderer like electron is but meant for ahk. I would suggest taking a look there. if you find anything let me know. Neutron for ahk can be found on github made by geek dude. heres a webinar. should have links there to the it. https://www.youtube.com/watch?v=cTRcOG28hYI

im sure there is a way to do it if electron can do it. its just a matter of just experimenting and hoping. i'll let you know if i come up with anything — G6NK, Oct 12 '20 at 03:11

AutoHotKey GUI with embedded HTML and transparent background

2 Answers2