Global

Members

(constant) colorpalette

The color palette used by wplace.live

Since:
  • 0.78.0
Source:

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.

Since:
  • 0.43.11
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.12
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.12
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.10
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.2
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.7
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.7
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.2
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.13
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.17
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.2
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.55.8
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.13
Source:
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.
Returns:
Type:
Overlay

Overlay class instance (this)

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

Since:
  • 0.72.9
Source:
Parameters:
Name Type Description
base64 Uint8Array

The base 64 encoded Uint8Array to convert
Returns:
Type:
Uint8Array

The decoded 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:
Type:
Overlay

Overlay class instance (this)

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.

Since:
  • 0.43.2
Source:
Parameters:
Name Type Description
parent HTMLElement

The parent HTMLElement this overlay should be appended to as a child.
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().

Since:
  • 0.58.13
Source:
Parameters:
Name Type Attributes Description
args any <repeatable>

Arguments to be passed into the error() function of the Console

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().

Since:
  • 0.58.9
Source:
Parameters:
Name Type Attributes Description
args any <repeatable>

Arguments to be passed into the log() function of the Console

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().

Since:
  • 0.58.13
Source:
Parameters:
Name Type Attributes Description
args any <repeatable>

Arguments to be passed into the warn() function of the Console

(async) createJSON() → {Object}

Creates the JSON object to store templates in

Since:
  • 0.65.4
Source:
Returns:
Type:
Object

The JSON object

createObserverBody(target) → {Observers}

Creates the MutationObserver for document.body

Since:
  • 0.43.2
Source:
Parameters:
Name Type Description
target HTMLElement

Targeted element to watch
Returns:
Type:
Observers

this (Observers class)

(async) createTemplate(blob, name, coords)

Creates the template from the inputed file blob

Since:
  • 0.65.77
Source:
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

(async) createTemplateTiles() → {Object}

Creates chunks of the template for each tile.

Since:
  • 0.65.4
Source:
Returns:
Type:
Object

Collection of template bitmaps & buffers organized by tile coordinates

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.

Since:
  • 0.65.77
Source:
Parameters:
Name Type Description
tileBlob File

The pixels that are placed on a tile
tileCoords Array.<number>

The tile coordinates [x, y]

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.

Since:
  • 0.44.2
Source:
Parameters:
Name Type Description
text string

The text to sanitize
Returns:
Type:
string

HTML escaped 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.

Since:
  • 0.41.6
Source:
Parameters:
Name Type Description
text string

The error text to display.

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.

Since:
  • 0.58.4
Source:
Parameters:
Name Type Description
text string

The status text to display.

handleDrag(moveMe, iMoveThings)

Handles dragging of the overlay. Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.

Since:
  • 0.8.2
Source:
Parameters:
Name Type Description
moveMe string

The ID of the element to be moved
iMoveThings string

The ID of the drag handle element

importJSON(json)

Imports the JSON object, and appends it to any JSON object already loaded

Source:
Parameters:
Name Type Description
json string

The JSON string to parse

inject(callback)

Injects code into the client This code will execute outside of TamperMonkey's sandbox

Since:
  • 0.11.15
Source:
Parameters:
Name Type Description
callback *

The code to execute

negativeSafeModulo(a, b) → {number}

Negative-Safe Modulo. You can pass negative numbers into this.

Since:
  • 0.55.8
Author:
  • osuplace
Source:
Parameters:
Name Type Description
a number

The first number
b number

The second number
Returns:
Type:
number

Result

numberToEncoded(number, encoding) → {string}

Encodes a number into a custom encoded string.

Since:
  • 0.65.2
Source:
Parameters:
Name Type Description
number number

The number to encode
encoding string

The characters to use when encoding
Returns:
Type:
string

Encoded 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

Since:
  • 0.43.2
Source:
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

observeBlack()

Observe the black color, and add the "Move" button.

Since:
  • 0.66.3
Source:

selectAllCoordinateInputs() → {Array.<Element>}

Returns the coordinate input fields

Since:
  • 0.74.0
Source:
Returns:
Type:
Array.<Element>

The 4 coordinate Inputs

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

Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.

Since:
  • 0.42.4
Source:
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"])
Returns:
Type:
Array.<number>

[tile, pixel]

Example
console.log(serverTPtoDisplayTP(['12', '123'], ['34', '567'])); // [34, 3567]

setApiManager(apiManager)

Populates the apiManager variable with the apiManager class.

Since:
  • 0.41.4
Source:
Parameters:
Name Type Description
apiManager apiManager

The apiManager class instance

setTemplatesShouldBeDrawn(value)

Sets the templatesShouldBeDrawn boolean to a value.

Since:
  • 0.73.7
Source:
Parameters:
Name Type Description
value boolean

The value to set the boolean to

spontaneousResponseListener(overlay)

Determines if the spontaneously received 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

Since:
  • 0.11.1
Source:
Parameters:
Name Type Description
overlay Overlay

The Overlay class instance

uint8ToBase64(uint8) → {Uint8Array}

Converts a Uint8 array to base64 using the browser's built-in binary to ASCII function

Since:
  • 0.72.9
Source:
Parameters:
Name Type Description
uint8 Uint8Array

The Uint8Array to convert
Returns:
Type:
Uint8Array

The base64 encoded 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.

Since:
  • 0.24.2
Source:
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