Creating tutorial for software - need to cut out lightbox to highlight area

[mbc66]

@Chrisfits

what I try to achieve is a lightboxlike “overlay” with a hole in it.

I get what you’re going for, but it won’t be straightforward or necessarily easy. The lightbox, like all widgets, will occupy a rectangular area–regardless of visible shape–and will block all interactions behind its entire area–regardless of visible “hole” or transparent area inside its dimensions. There isn’t a way to specify something like, “make this widget block interactions behind it except for (sub)area with 0% opacity” if that makes sense.

It is possible to use a javascript injection hack to make your lightbox widget “pass-through” and not block any interactions for widgets behind it. This might be a quick fix if you can live with the rest of your widgets being accessible/interactable outside of your “hole” --anything behind the half-transparent gray area. See this old thread:

Make object linkable even if it's covered

Several years ago the legendary Gregor posted some nice demos of javascript hacks and one of them achieved just this. Actually, it utilized CSS {pointer-events: none} by calling it through javascript injection. It tells the browser to essentially ignore a widget as if it were not there, thus passing events (like OnClick) to widgets underneath it. It was originally done in RP7, updated for RP8, but should still work (hopefully) in RP9. I can’t find the threads in the forum and they would probably…

There is also another potential solution in this thread: don’t use the hack, just move your lightbox so the hole is in front of your desired widget(s), bring it to front, then bring the desired widgets to front, so only it/they are in front of the lightbox and therefore interactable. If you have multiple widgets per “tutorial step” I recommend grouping them or creating dynamic panel from them so you only have to bring one thing to front per step. The result should look and feel like there is a real “interaction hole” in your lightbox.

Other than that, if you can’t or don’t want to break up your existing layout–which could be daunting if you need to call out only part of a menu, table, or other UI component–I could imagine a lightbox made of four rectangle widgets–a top, bottom, left, and right–that you could resize and move to create an actual “interaction hole”. This hole would need to be rectangular. You should be able to use hotspots–one per tutorial step–to define the size and placement of the hole. The hotspots would be behind your UI elements, or be hidden, and would not need any Click or Tap events, they’d only be needed to define the hole size and position. A hotspot should be able to create the hole itself, using its own properties, resizing and moving the lightbox mask widgets to its edges.

I’ll try to mock this up later today or tomorrow…