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 ? `${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
    );
  }