Based on block detect samples of webcam surface. nui commander support msgbox yes/no, ...
npm install nui-commander
AR manner.
0. This is just example of usage!
html
`
$3
`js
import {
indicatorsBlocks,
canvasEngine,
interActionController,
nuiMsgBox } from "nui-commander";
var nuiCommander = {};
nuiCommander.drawer = new canvasEngine( interActionController );
nuiCommander.drawer.draw();
nuiCommander.indicatorsBlocks = indicatorsBlocks;
nuiCommander.drawer.elements.push( nuiCommander.indicatorsBlocks );
nuiCommander.drawer.elements.push(
new nuiMsgBox( "Do you love this project?", function ( answer ) {
console.log( answer );
nuiCommander.drawer.removeElementByName( "nuiMsgBox" );
if (answer == "yes") {
console.log( "Good answer is yes." );
setTimeout( () => {
nuiCommander.drawer.elements.push(
new nuiMsgBox(
"Do you wanna to activate some commander options?",
function (answer) {
nuiCommander.drawer.removeElementByName( "nuiMsgBox" );
if (answer == "yes") {
alert("ok , interest idea.");
}
}
)
);
}, 100);
} else {
console.log( "Ok good buy." );
window.location.href = "https://google.com";
}
} )
);
console.info( "nui-commander controls attached." );
`
Example for mask
#### Adding Block partial backgrounds
`js
nuiCommander.indicatorsBlocks.icons = [];
for ( var x = 0; x < 64; x++ ) {
var commanderIconField = new Image();
commanderIconField.src = "images/tile.png";
commanderIconField.onload = function () {
nuiCommander.indicatorsBlocks.icons.push( this );
};
}
``