example/page.html

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' 'unsafe-inline'">
    <style>
        h1, p, li { color : white; }
        span.ifnot { background : rgba(100,0,0,0.8); }
        div#explanation {
            background: rgba(0,0,0,0.7);
            position: absolute;
            padding: 2em;
            width: 30em;
        }
        .monitor-frame {
            background: radial-gradient(#0000ff11, #0000ff33);
            position: absolute;
            border: 10px solid red;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="monitor-frame-container"></div>
    <div id="explanation">
    <h1>Welcome to the future!</h1>
    <p>You should be able to—
        <ul>
            <li><strong>see your desktop</strong> through <strong>translucent
                    blue</strong>,</li>
            <li>see each monitor <strong>correctly outlined</strong> and
                labelled with its device name, and</li>
            <li><strong>click on stuff normally</strong> through this overlay;
                except inside this magic red square, inside which clicks hit
                the overlay window and make the text in it change between
                upper- and lower-case:
                <br />
                <svg width="4em" height="4em" id="magic-square"
                            cursor="pointer">
                    <rect stroke="rgba(255,0,0,1)" fill="rgba(255,0,0,0.1)"
                                                   stroke-width="5%"
                    width="100%" height="100%"/>
                    <text fill="red" x="10%" y="50%" textLength="80%"
                                                     dominant-baseline="middle"
                                                     pointer-events="none">magic</text>
                </svg>
            </li>
        </ul>
    <p><span class='ifnot'><strong>If not</strong>, create an issue at
        <em>https://github.com/anko/hudkit/issues</em>.</span></p>

    <p>
    Detected monitors:
    <ol id="monitor-list">
        <!-- Filled in by JavaScript -->
    </ol>
    </p>
    </div>
    <script>

        // Async wrapper necessary so we can use `await`
        ;(async () => {
            // Make the magic square clickable.
            let square = document.getElementById('magic-square')
            await Hudkit.setClickableAreas([ square.getBoundingClientRect() ])

            // Clicks flip its text between uppercase and lowercase.
            let state = true
            square.addEventListener("click", e => {
                let text = square.getElementsByTagName("text")[0]
                text.textContent = state ? text.textContent.toUpperCase() :
                    text.textContent.toLowerCase()
                state = !state
            })

            async function showMonitorFrames() {
                // At the location of each monitor, show obvious blue frames
                // with red borders, and the monitor's name.

                let container = document.getElementById('monitor-frame-container')
                // Clear container
                for (let i = container.children.length; i > 0; --i) {
                    container.removeChild(container.children[0])
                }

                const monitors = await Hudkit.getMonitorLayout()

                console.log(JSON.stringify(monitors, null, 2))

                const monitorList =
                    document.getElementById('monitor-list')
                for (const {name, x, y, width, height} of monitors) {
                    const item = document.createElement('li')
                    item.textContent = `"${name}": position (${x},${y}), size ${width}×${height}`
                    monitorList.appendChild(item)
                }

                monitors.forEach((monitor, monitorIndex) => {

                    let monitorFrame = document.createElement('div')
                    monitorFrame.setAttribute('class', 'monitor-frame')
                    monitorFrame.style.left = monitor.x
                    monitorFrame.style.top = monitor.y
                    monitorFrame.style.width = monitor.width
                    monitorFrame.style.height = monitor.height
                    container.appendChild(monitorFrame)

                    let labelDiv = document.createElement('div')
                    labelDiv.style.margin = '0 auto'
                    labelDiv.style.width = '50%'
                    let label = document.createElement('h1')
                    label.appendChild(document.createTextNode(monitor.name))
                    label.style['font-size'] = '100pt'
                    label.style.color = 'red'
                    label.style['text-align'] = 'center'
                    labelDiv.appendChild(label)
                    monitorFrame.appendChild(labelDiv)
                })
            }

            // Show initially
            await showMonitorFrames()
            // Update the display whenever the monitor layout changes
            Hudkit.on('monitors-changed', showMonitorFrames)
            Hudkit.on('composited-changed', haveTransparency => {
                if (!haveTransparency) {
                    console.log("Lost transparency support!  Closing.")
                    window.close()
                }
            })
        })()
    </script>
</body>
</html>