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
);
}