Is it possible to prevent cursor capture by a specific UI app?

My goal is to have a full screen UI app that displays a red gradient for "injury" indication in the corner of the screen during hard crashes. Example:



The problem is that this captures mouse input anywhere that isn't fully transparent. I'd like to completely ignore mouse events for this app, ensuring that they still propagate to the game so orbit camera and other apps below the overlay are still working. What I tried so far:

• z-index (works for allowing other apps to work but orbit camera isn't working)
• pointer-events: none (stops app from getting mouse input but orbit camera still isn't working)
  
• commenting out a bunch of "preventDefault()" and "stopImmediatePropagation()" calls and mouse click listeners in JS files (similar results)

I've been looking around for a couple hours and can't seem to find anything that would let me turn off mouse capture for this particular app. If someone more familiar with the UI stuff knows of a way to do this (or a better way to do such overlay effects than using UI apps) I'd love some help.

 

You won't be able to let the mouse pass through the CEF UI. However, you can use Lua + ImGui (and the background drawlist) to still achieve this.
Here's something that should get you on track (with comments):

Code:

local M = {}

-- Shortcut to the imgui extension (lua/common/extensions/ui/imgui_gen.lua)
local im = ui_imgui

-- White UV pixel, otherwise we might not be able to add color
-- This is needed since ImGui always has to sample a texture for any vertex
local whiteTexelUV = im.GetFontTexUvWhitePixel()

-- Pre-define colors to avoid constant function calls
-- You can still move this to onUpdate in case you need dynamic colors
local red = im.GetColorU322(im.ImVec4(1,0,0,1))
local transparentRed = im.GetColorU322(im.ImVec4(1,0,0,0))

-- Helper to draw a multi-colored triangle using vertex painting
-- There are pre-made functions for some shapes/objects in imgui_gen
local function drawMultiColorTri(drawlist, vert1Pos, vert1Col, vert2Pos, vert2Col, vert3Pos, vert3Col)
    im.ImDrawList_PrimReserve(drawlist, 3, 3)
    im.ImDrawList_PrimVtx(drawlist, vert1Pos, whiteTexelUV, vert1Col)
    im.ImDrawList_PrimVtx(drawlist, vert2Pos, whiteTexelUV, vert2Col)
    im.ImDrawList_PrimVtx(drawlist, vert3Pos, whiteTexelUV, vert3Col)
end

local function onUpdate()
    -- Get drawlist
    local drawlist = im.GetBackgroundDrawList1()

    -- Get viewport for Pos/Size
    local viewport = im.GetMainViewport()
    -- The drawlist's 0x0 is always the top left corner of the screen
    -- The viewport's position is an offset we need to add
    local viewportPos = viewport.Pos
    local viewPortSize = viewport.Size

    -- Adjust to screen size
    local triangleSize = im.ImVec2(0.2 * viewPortSize.x, 0.2 * viewPortSize.y)

    -- Send draw command
    drawMultiColorTri(drawlist,
        im.ImVec2(viewportPos.x, viewportPos.y), red,
        im.ImVec2(viewportPos.x + triangleSize.x, viewportPos.y), transparentRed,
        im.ImVec2(viewportPos.x, viewportPos.y + triangleSize.y), transparentRed
    )
end

M.onUpdate = onUpdate

return M

Result:

 

Wow I had no clue imgui could be used like this! Bit of a shame about the mouse, I'm not too familiar with CEF and AngularJS but given the app frame is full screen yet mouse input goes through transparent pixels I assumed there had to be some type of hack to get it working.

Anyhow thanks a bunch for the quick reply, this helps a ton!

 

I absolutely agree. It's awesome since you can build apps really quickly yet can also directly tell it what to do, even with different levels of complexity.
This app was made entirely in imgui.


I also tried this proof of concept project a few updates ago with imgui, just to see what it can do.
Turns out - it's a whole lot. And none of the graphics elements broke for 3 major updates.

All of the icons are done with a proprietary replacement for svg:

As you can probably tell, it never really went anywhere, but it was lots of fun.