Global

Methods

addBr(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `br` to the overlay. This `br` element will have properties shared between all `br` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `br` that are NOT shared between all overlay `br` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `br`.
Since:
  • 0.43.11
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <br> elements have a shared class (e.g. {'className': 'bar'})
overlay.addbr({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <br id="foo" class="bar">
</body>

addButton(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `button` to the overlay. This `button` element will have properties shared between all `button` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `button`.
Since:
  • 0.43.12
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <button> elements have a shared class (e.g. {'className': 'bar'})
overlay.addButton({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <button id="foo" class="bar">Foobar.</button>
</body>

addButtonHelp(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a help button to the overlay. It will have a "?" icon unless overridden in callback. On click, the button will attempt to output the title to the output element (ID defined in Overlay constructor). This `button` element will have properties shared between all `button` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `button`.
Since:
  • 0.43.12
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Examples
// Assume all help button elements have a shared class (e.g. {'className': 'bar'})
overlay.addButtonHelp({'id': 'foo', 'title': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <button id="foo" class="bar" title="Help: Foobar.">?</button>
</body>
// Assume all help button elements have a shared class (e.g. {'className': 'bar'})
overlay.addButtonHelp({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <button id="foo" class="bar" title="Help: Foobar.">?</button>
</body>

addCheckbox(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a checkbox to the overlay. This checkbox element will have properties shared between all checkbox elements in the overlay. You can override the shared properties by using a callback. Note: the checkbox element is inside a label element.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the checkbox that are NOT shared between all overlay checkbox elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the checkbox.
Since:
  • 0.43.10
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all checkbox elements have a shared class (e.g. {'className': 'bar'})
overlay.addCheckbox({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <label>
    <input type="checkbox" id="foo" class="bar">
    "Foobar."
  </label>
</body>

addDiv(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `div` to the overlay. This `div` element will have properties shared between all `div` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `div` that are NOT shared between all overlay `div` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `div`.
Since:
  • 0.43.2
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <div> elements have a shared class (e.g. {'className': 'bar'})
overlay.addDiv({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <div id="foo" class="bar"></div>
</body>

addHeader(level, additionalPropertiesopt, callbackopt) → {Overlay}

Adds a header to the overlay. This header element will have properties shared between all header elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
level number The header level. Must be between 1 and 6 (inclusive)
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the header that are NOT shared between all overlay header elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the header.
Since:
  • 0.43.7
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all header elements have a shared class (e.g. {'className': 'bar'})
overlay.addHeader(6, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <h6 id="foo" class="bar">Foobar.</h6>
</body>

addHr(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `hr` to the overlay. This `hr` element will have properties shared between all `hr` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `hr` that are NOT shared between all overlay `hr` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `hr`.
Since:
  • 0.43.7
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <hr> elements have a shared class (e.g. {'className': 'bar'})
overlay.addhr({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <hr id="foo" class="bar">
</body>

addImg(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `img` to the overlay. This `img` element will have properties shared between all `img` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `img` that are NOT shared between all overlay `img` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `img`.
Since:
  • 0.43.2
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <img> elements have a shared class (e.g. {'className': 'bar'})
overlay.addimg({'id': 'foo', 'src': './img.png'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <img id="foo" src="./img.png" class="bar">
</body>

addInput(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `input` to the overlay. This `input` element will have properties shared between all `input` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `input` that are NOT shared between all overlay `input` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `input`.
Since:
  • 0.43.13
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <input> elements have a shared class (e.g. {'className': 'bar'})
overlay.addInput({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <input id="foo" class="bar">Foobar.</input>
</body>

addInputFile(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a file input to the overlay with enhanced visibility controls. This input element will have properties shared between all file input elements in the overlay. Uses multiple hiding methods to prevent browser native text from appearing during minimize/maximize. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the file input that are NOT shared between all overlay file input elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the file input.
Since:
  • 0.43.17
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all file input elements have a shared class (e.g. {'className': 'bar'})
overlay.addInputFile({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <div>
    <input type="file" id="foo" class="bar" style="display: none"></input>
    <button>Foobar.</button>
  </div>
</body>

addP(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `p` to the overlay. This `p` element will have properties shared between all `p` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `p` that are NOT shared between all overlay `p` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `p`.
Since:
  • 0.43.2
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <p> elements have a shared class (e.g. {'className': 'bar'})
overlay.addP({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <p id="foo" class="bar">Foobar.</p>
</body>

addSmall(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `small` to the overlay. This `small` element will have properties shared between all `small` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `small` that are NOT shared between all overlay `small` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `small`.
Since:
  • 0.55.8
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <small> elements have a shared class (e.g. {'className': 'bar'})
overlay.addSmall({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <small id="foo" class="bar">Foobar.</small>
</body>

addTextarea(additionalPropertiesopt, callbackopt) → {Overlay}

Adds a `textarea` to the overlay. This `textarea` element will have properties shared between all `textarea` elements in the overlay. You can override the shared properties by using a callback.
Parameters:
Name Type Attributes Default Description
additionalProperties Object.<string, any> <optional>
 {} The DOM properties of the `textarea` that are NOT shared between all overlay `textarea` elements. These should be camelCase.
callback function <optional>
 ()=>{} Additional JS modification to the `textarea`.
Since:
  • 0.43.13
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
// Assume all <textarea> elements have a shared class (e.g. {'className': 'bar'})
overlay.addTextarea({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume <body> already exists in the webpage)
<body>
  <textarea id="foo" class="bar">Foobar.</textarea>
</body>

base64ToUint8(base64) → {Uint8Array}

Decodes a base 64 encoded Uint8 array using the browser's built-in ASCII to binary function
Parameters:
Name Type Description
base64 Uint8Array The base 64 encoded Uint8Array to convert
Since:
  • 0.72.9
Source:
Returns:
The decoded Uint8Array
Type
Uint8Array

buildElement() → {Overlay}

Finishes building an element. Call this after you are finished adding children. If the element will have no children, call it anyways.
Since:
  • 0.43.2
Source:
Returns:
Overlay class instance (this)
Type
Overlay
Example
overlay
  .addDiv()
    .addHeader(1).buildElement() // Breaks out of the <h1>
    .addP().buildElement() // Breaks out of the <p>
  .buildElement() // Breaks out of the <div>
  .addHr() // Since there are no more elements, calling buildElement() is optional
.buildOverlay(document.body);

buildOverlay(parent)

Finishes building the overlay and displays it. Call this when you are done chaining methods.
Parameters:
Name Type Description
parent HTMLElement The parent HTMLElement this overlay should be appended to as a child.
Since:
  • 0.43.2
Source:
Example
overlay
  .addDiv()
    .addP().buildElement()
  .buildElement()
.buildOverlay(document.body); // Adds DOM structure to document body
// <div><p></p></div>

buildOverlayMain()

Deploys the overlay to the page with minimize/maximize functionality. Creates a responsive overlay UI that can toggle between full-featured and minimized states. Parent/child relationships in the DOM structure below are indicated by indentation.
Since:
  • 0.58.3
Source:

consoleError(…args)

Bypasses terser's stripping of console function calls. This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't. However, the distributed version needs to call the console somehow, so this wrapper function is how. This is the same as `console.error()`.
Parameters:
Name Type Attributes Description
args any <repeatable>
 Arguments to be passed into the `error()` function of the Console
Since:
  • 0.58.13
Source:

consoleLog(…args)

Bypasses terser's stripping of console function calls. This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't. However, the distributed version needs to call the console somehow, so this wrapper function is how. This is the same as `console.log()`.
Parameters:
Name Type Attributes Description
args any <repeatable>
 Arguments to be passed into the `log()` function of the Console
Since:
  • 0.58.9
Source:

consoleWarn(…args)

Bypasses terser's stripping of console function calls. This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't. However, the distributed version needs to call the console somehow, so this wrapper function is how. This is the same as `console.warn()`.
Parameters:
Name Type Attributes Description
args any <repeatable>
 Arguments to be passed into the `warn()` function of the Console
Since:
  • 0.58.13
Source:

(async) createJSON() → {Object}

Creates the JSON object to store templates in
Since:
  • 0.65.4
Source:
Returns:
The JSON object
Type
Object

createObserverBody(target) → {Observers}

Creates the MutationObserver for document.body
Parameters:
Name Type Description
target HTMLElement Targeted element to watch
Since:
  • 0.43.2
Source:
Returns:
this (Observers class)
Type
Observers

(async) createTemplate(blob, name, coords)

Creates the template from the inputed file blob
Parameters:
Name Type Description
blob File The file blob to create a template from
name string The display name of the template
coords Array.<number, number, number, number> The coordinates of the top left corner of the template
Since:
  • 0.65.77
Source:

(async) createTemplateTiles() → {Object}

Creates chunks of the template for each tile.
Since:
  • 0.65.4
Source:
Returns:
Collection of template bitmaps & buffers organized by tile coordinates
Type
Object

deleteTemplate()

Deletes a template from the JSON object. Also delete's the corrosponding Template class instance
Source:

(async) disableTemplate()

Disables the template from view
Source:

(async) drawTemplateOnTile(tileBlob, tileCoords)

Draws all templates on the specified tile. This method handles the rendering of template overlays on individual tiles.
Parameters:
Name Type Description
tileBlob File The pixels that are placed on a tile
tileCoords Array.<number> The tile coordinates [x, y]
Since:
  • 0.65.77
Source:

escapeHTML(text) → {string}

Sanitizes HTML to display as plain-text. This prevents some Cross Site Scripting (XSS). This is handy when you are displaying user-made data, and you *must* use innerHTML.
Parameters:
Name Type Description
text string The text to sanitize
Since:
  • 0.44.2
Source:
Returns:
HTML escaped string
Type
string
Example
const paragraph = document.createElement('p');
paragraph.innerHTML = escapeHTML('<u>Foobar.</u>');
// Output:
// (Does not include the paragraph element)
// (Output is not HTML formatted)
<p>
  "<u>Foobar.</u>"
</p>

getObserverBody() → {MutationObserver}

Retrieves the MutationObserver that watches document.body
Since:
  • 0.43.2
Source:
Returns:
Type
MutationObserver

handleDisplayError(text)

Handles error display. This will output plain text into the output Status box. Additionally, this will output an error to the console.
Parameters:
Name Type Description
text string The error text to display.
Since:
  • 0.41.6
Source:

handleDisplayStatus(text)

Handles status display. This will output plain text into the output Status box. Additionally, this will output an info message to the console.
Parameters:
Name Type Description
text string The status text to display.
Since:
  • 0.58.4
Source:

handleDrag(moveMe, iMoveThings)

Handles dragging of the overlay. Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
Parameters:
Name Type Description
moveMe string The ID of the element to be moved
iMoveThings string The ID of the drag handle element
Since:
  • 0.8.2
Source:

importJSON(json)

Imports the JSON object, and appends it to any JSON object already loaded
Parameters:
Name Type Description
json string The JSON string to parse
Source:

inject(callback)

Injects code into the client This code will execute outside of TamperMonkey's sandbox
Parameters:
Name Type Description
callback * The code to execute
Since:
  • 0.11.15
Source:

negativeSafeModulo(a, b) → {number}

Negative-Safe Modulo. You can pass negative numbers into this.
Parameters:
Name Type Description
a number The first number
b number The second number
Since:
  • 0.55.8
Author:
  • osuplace
Source:
Returns:
Result
Type
number

numberToEncoded(number, encoding) → {string}

Encodes a number into a custom encoded string.
Parameters:
Name Type Description
number number The number to encode
encoding string The characters to use when encoding
Since:
  • 0.65.2
Source:
Returns:
Encoded string
Type
string
Example
const encode = '012abcABC'; // Base 9
console.log(numberToEncoded(0, encode)); // 0
console.log(numberToEncoded(5, encode)); // c
console.log(numberToEncoded(15, encode)); // 1A
console.log(numberToEncoded(12345, encode)); // 1BCaA

observe(observer, watchChildList, watchSubtree)

Observe a MutationObserver
Parameters:
Name Type Default Description
observer MutationObserver The MutationObserver
watchChildList boolean false (Optional) Should childList be watched? False by default
watchSubtree boolean false (Optional) Should childList be watched? False by default
Since:
  • 0.43.2
Source:

observeBlack()

Observe the black color, and add the "Move" button.
Since:
  • 0.66.3
Source:

serverTPtoDisplayTP(tile, pixel) → {Array.<number>}

Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.
Parameters:
Name Type Description
tile Array.<string> The tile to convert (as an array like ["12", "124"])
pixel Array.<string> The pixel to convert (as an array like ["12", "124"])
Since:
  • 0.42.4
Source:
Returns:
[tile, pixel]
Type
Array.<number>
Example
console.log(serverTPtoDisplayTP(['12', '123'], ['34', '567'])); // [34, 3567]

setApiManager(apiManager)

Populates the apiManager variable with the apiManager class.
Parameters:
Name Type Description
apiManager apiManager The apiManager class instance
Since:
  • 0.41.4
Source:

setTemplatesShouldBeDrawn(value)

Sets the `templatesShouldBeDrawn` boolean to a value.
Parameters:
Name Type Description
value boolean The value to set the boolean to
Since:
  • 0.73.7
Source:

spontaneousResponseListener(overlay)

Determines if the spontaneously recieved response is something we want. Otherwise, we can ignore it. Note: Due to aggressive compression, make your calls like `data['jsonData']['name']` instead of `data.jsonData.name`
Parameters:
Name Type Description
overlay Overlay The Overlay class instance
Since:
  • 0.11.1
Source:

uint8ToBase64(uint8) → {Uint8Array}

Converts a Uint8 array to base64 using the browser's built-in binary to ASCII function
Parameters:
Name Type Description
uint8 Uint8Array The Uint8Array to convert
Since:
  • 0.72.9
Source:
Returns:
The base64 encoded Uint8Array
Type
Uint8Array

updateInnerHTML(id, html, doSafeopt)

Updates the inner HTML of the element. The element is discovered by it's id. If the element is an `input`, it will modify the value attribute instead.
Parameters:
Name Type Attributes Default Description
id string The ID of the element to change
html string The HTML/text to update with
doSafe boolean <optional>
 false (Optional) Should `textContent` be used instead of `innerHTML` to avoid XSS? False by default
Since:
  • 0.24.2
Source: