Show hovering window (with HTML content) & transparent faded BG fullscreen by holding shortcut keys

omareg94 · 27 Dec 2017, 23:37

Let's say I have some notes/HTML content stored in an HTML file.
How could I display a hovering window (like below) with that HTML content and transparent fading on the edges (like shown).
I'm trying to make the hovering window show only while holding the shortcut key, and disappear if I release.

Illustrative GIF describing what I'm looking for:

A_AhkUser · 27 Dec 2017, 23:59

Hi omareg94,

Here's a simple example:

Code: Select all

; FileRead, html, myHTMLFile.html

html =
(
<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8" />
	<title>HTMLFile</title>
	<style>
		body {
			font: normal normal normal 24px Segoe UI;
			background-color: black;
		}
		li::before {
			content: "";
		}
		li, p {
		color: white;
		}
	</style>
    </head>
<body>
	<div class="C">
		<p>SOME HTML CONTENT HERE</p>
		<ul>
			<li>Text: Description</li>
			<li>Text: Description</li>
			<li>Text: Description</li>
		</ul>
	</div>
</body>
</html>
)

GUI, % "+LastFound -Border +ToolWindow -Caption +AlwaysOnTop +" . WS_EX_NOACTIVATE:="E0x08000000" ; https://msdn.microsoft.com/en-us/library/windows/desktop/ff700543(v=vs.85).aspx
DetectHiddenWindows, On
WinSet, Transparent, 165
DetectHiddenWindows, Off
GUI, Color, 000000, 000000
GUI, Add, ActiveX, w350 h300 vDoc, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
DOC.document.Open()
DOC.document.Write(html)
DOC.document.Close()
return


a::
Gui, Show, AutoSize
KeyWait % A_ThisHotkey
Gui, Show, Hide AutoSize
return

Hope this helps.

omareg94 · 28 Dec 2017, 01:37

A_AhkUser wrote: Post

Hi A_AhkUser,

Really amazing. thank you a lot.

I'm also looking for adding the other transparent layer on the rest of the screen. How could I do this?

Here:

A_AhkUser · 28 Dec 2017, 02:18

You can use a timer and benefit from both the hide and NA word options that can be specified when using the GUI, Show command in order to achieve this:

Code: Select all

html =
(
<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8" />
	<title>HTMLFile</title>
	<style>
		body {
			font: normal normal normal 24px Segoe UI;
			background-color: black;
		}
		li::before {
			content: "";
		}
		li, p {
		color: white;
		}
	</style>
    </head>
<body>
	<div class="C">
		<p>SOME HTML CONTENT HERE</p>
		<ul>
			<li>Text: Description</li>
			<li>Text: Description</li>
			<li>Text: Description</li>
		</ul>
	</div>
</body>
</html>
)
DetectHiddenWindows, On
Loop, 2 {
	GUI, % a_index . ":+LastFound -Border +ToolWindow -Caption +E0x08000000" ; specifying +toolwindow the GUI will have no taskbar button
	WinSet, Transparent, 165 ; no title parameter: we use the last found window
}
DetectHiddenWindows, Off

GUI, 1:+AlwaysOnTop
GUI, 1:Color, black
GUI, 1:Add, ActiveX, w350 h300 vDoc, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
DOC.document.Open(), DOC.document.Write(html), DOC.document.Close() ; functions can be listed side by side using the comma operator

GUI, 2:Color, yellow
GUI, 2:Show, w%A_ScreenWidth% h%A_ScreenHeight% Hide, ; both A_ScreenWidth and A_ScreenHeight contain respectively the width and height of the primary monitor
return


a::
i := 0
SetTimer, flash, 600
Gui, 1:Show, NA
KeyWait % A_ThisHotkey
Loop, 2
	Gui, %a_index%:Show, Hide
SetTimer, flash, Off
return

flash:
Gui, 2:Show, % "NA" . ((i:=!i) ? "" : "Hide") ; NA shows the window without activating it
return

omareg94 · 28 Dec 2017, 10:00

Thanks a lot.

That's exactly what I'm looking for:

Code: Select all

html =
(
<!DOCTYPE html>
<html>
    <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8" />
  <title>HTMLFile</title>
  <style>
    body {
      font: normal normal normal 24px Segoe UI;
      background-color: black;
    }
    li::before {
      content: "";
    }
    li, p {
    color: white;
    }
  </style>
    </head>
<body>
  <div class="C">
    <p>SOME HTML CONTENT HERE</p>
    <ul>
      <li>Text: Description</li>
      <li>Text: Description</li>
      <li>Text: Description</li>
    </ul>
  </div>
</body>
</html>
)
DetectHiddenWindows, On


; Background layer
  GUI, 1:+LastFound -Border +ToolWindow -Caption +E0x08000000 ; specifying +toolwindow the GUI will have no taskbar button
  WinSet, Transparent, 205 ; no title parameter: we use the last found window

; Front layer
  GUI, 2:+LastFound -Border +ToolWindow -Caption +E0x08000000 ; specifying +toolwindow the GUI will have no taskbar button
  WinSet, Transparent, 220 ; no title parameter: we use the last found window

DetectHiddenWindows, Off

GUI, 1:+AlwaysOnTop
GUI, 1:Color, black
GUI, 1:Show, w%A_ScreenWidth% h%A_ScreenHeight% Hide, ; both A_ScreenWidth and A_ScreenHeight contain respectively the width and height of the primary monitor

GUI, 2:+AlwaysOnTop
GUI, 2:Color, black
GUI, 2:Add, ActiveX, w350 h300 vDoc, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
DOC.document.Open(), DOC.document.Write(html), DOC.document.Close() ; functions can be listed side by side using the comma operator
return


a::
Gui, 1:Show, NA
Gui, 2:Show, NA
KeyWait % A_ThisHotkey
Gui, 1:Hide
Gui, 2:Hide
return

There's only one problem that I hope it can be fixed which is the bottom area (shown in image) isn't covered with the transparent area.

meireles · 18 Jan 2018, 16:24

I don't know if it's the correct way for do this but if you add a number more than 0.99 after the letter "h" at line 49, the transparent window will cover the entire screen.

Code: Select all

GUI, 1:Show, w%A_ScreenWidth% h1%A_ScreenHeight% Hide, ; both A_ScreenWidth and A_ScreenHeight contain

A_AhkUser · 19 Jan 2018, 11:52

meireles wrote:I don't know if it's the correct way for do this but if you add a number more than 0.99 after the letter "h" at line 49, the transparent window will cover the entire screen.
Code: Select all
GUI, 1:Show, w%A_ScreenWidth% h1%A_ScreenHeight% Hide, ; both A_ScreenWidth and A_ScreenHeight contain

@omareg94 It appears i missed once again one of your reply... though in all likehood you might figure it out by yourself.
@meireles Off course it works since A_ScreenHeight contains the height of the primary monitor: append/prepend 1 to this number will by far exceed - and, consequently, window's height itself - this value. So, although you code work, I think it is more reasonable to use something like the following:

Code: Select all

#NoEnv
#SingleInstance force
SetWorkingDir % A_ScriptDir
SendMode, Input
#Warn
; Windows 8.1 64 bit - Autohotkey v1.1.27.04 32-bit Unicode

WS_EX_CLICKTHROUGH := "E0x20"
Gui, 1:+ToolWindow -Caption +AlwaysOnTop +%WS_EX_CLICKTHROUGH% +LastFound
Gui, 1:Color, Red
GUI, 1:Show, % "x-50 w" . A_ScreenWidth+100 . " y-50 h" . A_ScreenHeight+100 ; <<<<
WinSet, Transparent, 90
return

Show hovering window (with HTML content) & transparent faded BG fullscreen by holding shortcut keys

Show hovering window (with HTML content) & transparent faded BG fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded bg fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded bg fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded bg fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded bg fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded BG fullscreen by holding shortcut keys

Re: Show hovering window (with HTML content) & transparent faded BG fullscreen by holding shortcut keys

Who is online