overlay (roll option): Difference between revisions

From RPTools Wiki
Jump to navigation Jump to search
No edit summary
(Add some technical implementation notes from GitHub)
Line 32: Line 32:


}}
}}
==Implementation Notes==
To make overlays responsive to the mouse, mouse events are first captured from the JFXPanel containing the overlays. If the mouse event is a drag/movement/etc, the event gets dispatched to the current zone renderer via {{code|passMouseEvent}}. So, it's as if the overlay wasn't there.
In case of a mouse click or press, the click is first ran through {{code|validateAndPassEvent}} to see if it should be dispatched to the current zone renderer or not. The validation is done by the webView, which check the value of {{code|--pointermap}} for the html element clicked. If the value is {{code|--pointermap:block}}, the mouse event is not forwarded; if it is {{code|--pointermap:pass}}, it is forwarded, and if it is {{code|--pointermap:blockopaque}}, the transparency of the point clicked determines if the click goes through or not.


[[Category:Display Roll Option]]
[[Category:Display Roll Option]]
[[Category:Overlay Function]]
[[Category:Overlay Function]]
[[Category:Roll Option]]
[[Category:Roll Option]]

Revision as of 19:40, 19 May 2020

[overlay():] Roll Option

* Introduced in version 1.7.0

Places a transparent HTML5 overlay over the map view. Players can click through the overlay to affect the map as normal, but clickable effects on the overlay will work as intended. Using HTML5, CSS, and JavaScript, overlays enable graphical user interfaces akin to Diablo and WoW right in MapTool.

Because overlays don't have a close gadget like a frame or a dialog, you can use closeOverlay() to close the overlay or you can toggle them on or off in the Window > Overlays menu.

An overlay showing selected units' health bars in the top left.

Usage

[overlay(overlayName): { ... }]

The title parameter overlayName, should be a string that specifies the internal name of the overlay. It is also the name of the overlay as it will appear in Window > Overlays menu.

Examples

The following code simply prints 'Hello World' in large white letters at the top left of the map view:

[overlay("MyOverlay"): { <h1 style='color:white;'>Hello, World!</h1> }]

See Also

[frame():]
[frame5():]
[dialog():]
[dialog5():]
Whitelisted CDNs

Version Changes

  • 1.7.0 - Introduced.

Implementation Notes

To make overlays responsive to the mouse, mouse events are first captured from the JFXPanel containing the overlays. If the mouse event is a drag/movement/etc, the event gets dispatched to the current zone renderer via passMouseEvent. So, it's as if the overlay wasn't there.

In case of a mouse click or press, the click is first ran through validateAndPassEvent to see if it should be dispatched to the current zone renderer or not. The validation is done by the webView, which check the value of --pointermap for the html element clicked. If the value is --pointermap:block, the mouse event is not forwarded; if it is --pointermap:pass, it is forwarded, and if it is --pointermap:blockopaque, the transparency of the point clicked determines if the click goes through or not.