https://github.com/zlatnaspirala/nui-commander
I will use motion detect on video stream to create and control UI Menu system with progress bar control, actions-events, popup or creating dom element or canvas staff. Interface must be drawn on video tag in `AR` manner. Point is to create total manipulation only with your hands in the air.
https://github.com/zlatnaspirala/nui-commander
Last synced: 23 days ago
JSON representation
I will use motion detect on video stream to create and control UI Menu system with progress bar control, actions-events, popup or creating dom element or canvas staff. Interface must be drawn on video tag in `AR` manner. Point is to create total manipulation only with your hands in the air.
- Host: GitHub
- URL: https://github.com/zlatnaspirala/nui-commander
- Owner: zlatnaspirala
- License: agpl-3.0
- Created: 2020-08-04T22:56:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-24T19:47:22.000Z (11 months ago)
- Last Synced: 2025-02-18T19:49:49.973Z (2 months ago)
- Language: JavaScript
- Size: 3.23 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nui-commander
Motion detect on video stream is used to create and control UI Menu system with basic GUI controls, actions-events, popup or creating dom element or canvas staff.
Interface must be drawn on video tag in `AR` manner.
Objective is to create total manipulation only with your hands in the air with minimum CPU price usage.
On canvas indicator table blocks canvas object will accumulate movement action and after some little period on idle it ill fall to the opacity `0`. This is just example of usage!
## Whole Example
### `Branch two Message Box NUI with two button options yes or no`
### `index.html`
```html
```
### `myNuiApp.js`
```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 );
};
}
```
## Objective:
- web instance [priory]
- must work on chrome, opera, safari, firefox and all mobile versions.
- video stream basic movement motion detect
- make small canvas object drawer and create interface and logic for actions(some method call)
- must have a excellent input output logic to be reusable in many ways.
### nui-commander user in vuletube:
### Nui-commander used like submodules in
### https://github.com/zlatnaspirala/vue-typescript-starter
## LICENCE:
### Based on project:
### https://github.com/soundstep/magic-xylophone MIT