set alpha value for Transparent clickthrough window

bmatusiak commented 1 month ago

I would like to create a drawing tracing app to overlay on top of MSPaint or any image drawing editor..

the problem is,, alpha needs to be 0 for current clickthrough https://nwjs.readthedocs.io/en/latest/For%20Users/Advanced/Transparent%20Window/

i would like the opposite, i want to have clickthrough windows, for anything where value is not 1. not clickthrough if its 1/solid. if it has any transparent alpha other then 1/solid, then its clickthrough

this would allow me to overlay anything on a canvas to trace in another drawing app. or to create overlay HUDs that don't block the mouse

bmatusiak commented 1 month ago

my only current option is to, set the alpha to 0 at the pixel where the current mouse position is on the canvas. and its buggy to do it in this way

however this does not work with elements like TEXT elements.

bmatusiak commented 1 month ago

current workaround,

<html>
<head>
</head>
<body>
    <script>
        window.onload = () => {
            var newgui = require('nw.gui');
            var newWindow = newgui.Window.open('other.html', {
                position: 'center',
                width: 600,
                height: 800,
                frame: false,
                transparent: true,
                always_on_top: true
            }, function (win) {
                win.show();
            });

        }
    </script>
</body>
</html>

<html>
<head>
    <style>
        html,
        body {
            background-color: rgba(0, 255, 0, 0);
            padding: 0;
            margin: 0;
            border: 0;
            width: 100%;
            height: 100%;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="javascript: start();">
    <canvas id="viewCanvas"></canvas>
    <script>
        function start() {
            var mousePOS;
            var canvas = document.getElementById("viewCanvas");
            canvas.addEventListener('mousemove', function (event) {
                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                mousePOS = { x, y };
            });
            function draw() {
                canvas.width = document.body.clientWidth;
                canvas.height = document.body.clientHeight;
                const ctx = canvas.getContext("2d");
                ctx.globalAlpha = 0.5;
                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                ctx.beginPath();
                ctx.fillStyle = "rgb(0,0,0)";
                ctx.rect(0, 0, canvas.width, canvas.height);
                ctx.fill();
                if (mousePOS) {
                    var blockSize = 1;
                    ctx.clearRect(mousePOS.x - blockSize, mousePOS.y - blockSize, blockSize * 2, blockSize * 2); // clear canvas
                }
                window.requestAnimationFrame(draw);
            }
            window.requestAnimationFrame(draw);
        }
    </script>
</body>
</html>

nwjs / nw.js

set alpha value for Transparent clickthrough window #8200