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.
In This Section
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
);
}