WebController - Utility Methods

This section includes all the functions that are useful to the sample, but don’t involve any functions from the Genvid API.

popularityToText

popularityToText(popularity)

The popularityToText method converts a popularity value to a text value.

    // Converts popularity value to popularity text
    popularityToText(popularity) {
        const hearts = ["💔", "♡", "♥", "💕"];
        const levels = [0.1, 1.0, 5.0];
        for (let i = 0; i < hearts.length; ++i) {
            if (popularity < levels[i]) {
                return hearts[i];
            }
        }
        return hearts[levels.length];
    }

centerAt

centerAt(htmlElement, pos_2d, offsetPixels)

The centerAt method modifies an HTML element position to be centered at the 2D position sent. We use it to move the name div-element displayed above each object.

    // Changes the HTML element position to be at the center of the pos 2d sent
    centerAt(htmlElement, pos2d, offsetPixels) {
        // Converts from [-1, 1] range to [0, 1].
        let vh = genvidMath.vec2(0.5, 0.5);
        let pos2dN = genvidMath.mad2D(pos2d, vh, vh);

        // Converts from [0, 1] range to [0, w].
        let p = htmlElement.parentElement;
        let pSize = genvidMath.vec2(p.clientWidth, p.clientHeight);
        let posInParent = genvidMath.mul2D(pos2dN, pSize);

        // Adjusts for centering element.
        let eSize = genvidMath.vec2(htmlElement.clientWidth, htmlElement.clientHeight);
        let eOffset = genvidMath.muls2D(eSize, -0.5);
        let posCentered = genvidMath.add2D(posInParent, eOffset);

        // Applies user offset.
        const posFinal = genvidMath.sub2D(posCentered, offsetPixels);
        Object.assign(htmlElement.style, {
            left: posFinal.x + "px",
            bottom: posFinal.y + "px",
            position: "absolute",
            zIndex: "1100",
        });
    }

preN

preN(str, n, c)

The preN method adds empty spaces to a string. We use it to correctly display the data on the Genvid overlay.

    // Widens a string to at least n characters, prefixing with spaces.
    preN(str, n, c) {
        let s = str.length;
        if (s < n) {
            str = c.repeat(n - s) + str;
        }
        return str;
    }

msToDuration

msToDuration(duration)

The msToDuration method converts milliseconds into days, hours, minutes, and seconds.

    // Method used to convert ms to specific duration
    msToDuration(duration) {
        const msInADay = 1000 * 60 * 60 * 24;
        const date = new Date(duration);
        const days = (duration - (duration % msInADay)) / msInADay;
        return `${days ? `${this.padTo2Digits(days)}:` : ""}${date.toLocaleTimeString(undefined, {
            hour12: false,
            timeZone: "GMT",
        })}.${this.preN(date.getMilliseconds().toFixed(0), 3, "0")}`;
    }

checkFullScreen

checkFullScreen()

The checkFullScreen method returns the current fullscreen status.

    checkFullScreen() {
        return (
            document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
        );
    }