aframe-gui
Version:
A-Frame GUI components
867 lines (767 loc) • 438 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 23);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* global AFRAME */
if (typeof AFRAME === 'undefined') {
throw new Error('Component attempted to register before AFRAME was available.');
}
AFRAME.registerComponent('bevelbox', {
schema: {
width: { type: 'number', default: 1 },
height: { type: 'number', default: 1 },
depth: { type: 'number', default: 1 },
topLeftRadius: { type: 'number', default: 0.00001 },
topRightRadius: { type: 'number', default: 0.00001 },
bottomLeftRadius: { type: 'number', default: 0.00001 },
bottomRightRadius: { type: 'number', default: 0.00001 },
bevelEnabled: { type: 'boolean', default: true },
bevelSegments: { type: 'number', default: 2 },
steps: { type: 'number', default: 1 },
bevelSize: { type: 'number', default: 0.1 },
bevelOffset: { type: 'number', default: 0 },
bevelThickness: { type: 'number', default: 0.1 }
},
multiple: false,
init: function init() {
var el = this.el;
var data = this.data;
var _w = data.width;
var _h = data.height;
var _x = -data.width / 2;
var _y = -data.height / 2;
var shape = new THREE.Shape();
shape.moveTo(_x, _y + data.topLeftRadius);
shape.lineTo(_x, _y + _h - data.topLeftRadius);
shape.quadraticCurveTo(_x, _y + _h, _x + data.topLeftRadius, _y + _h);
shape.lineTo(_x + _w - data.topRightRadius, _y + _h);
shape.quadraticCurveTo(_x + _w, _y + _h, _x + _w, _y + _h - data.topRightRadius);
shape.lineTo(_x + _w, _y + data.bottomRightRadius);
shape.quadraticCurveTo(_x + _w, _y, _x + _w - data.bottomRightRadius, _y);
shape.lineTo(_x + data.bottomLeftRadius, _y);
shape.quadraticCurveTo(_x, _y, _x, _y + data.bottomLeftRadius);
var extrudedShape = this.extrude(shape);
el.setObject3D('mesh', extrudedShape);
},
extrude: function extrude(roundedBase) {
var el = this.el;
var data = this.data;
var extrudeSettings = {
steps: data.steps,
depth: data.depth,
bevelEnabled: data.bevelEnabled,
bevelThickness: data.bevelThickness,
bevelSize: data.bevelSize,
bevelOffset: data.bevelOffset,
bevelSegments: data.bevelSegments
};
var extrudedGeometry = new THREE.ExtrudeGeometry(roundedBase, extrudeSettings);
return new THREE.Mesh(extrudedGeometry, new THREE.MeshStandardMaterial({
side: THREE.DoubleSide
}));
},
/**
* Called when component is attached and when component data changes.
* Generally modifies the entity based on the data.
*/
update: function update(oldData) {},
/**
* Called when a component is removed (e.g., via removeAttribute).
* Generally undoes all modifications to the entity.
*/
remove: function remove() {},
/**
* Called on each scene tick.
*/
// tick: function (t) { },
/**
* Called when entity pauses.
* Use to stop or remove any dynamic or background behavior such as events.
*/
pause: function pause() {},
/**
* Called when entity resumes.
* Use to continue or add any dynamic or background behavior such as events.
*/
play: function play() {}
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
AFRAME.registerComponent('gui-button', {
schema: {
on: { default: 'click' },
value: { type: 'string', default: '' },
fontSize: { type: 'number', default: 0.2 },
fontFamily: { type: 'string', default: '' },
fontColor: { type: 'string', default: key_offwhite },
borderColor: { type: 'string', default: key_offwhite },
focusColor: { type: 'string', default: key_orange_light },
backgroundColor: { type: 'string', default: key_grey },
hoverColor: { type: 'string', default: key_grey_dark },
activeColor: { type: 'string', default: key_orange },
toggle: { type: 'boolean', default: false },
toggleState: { type: 'boolean', default: false }
},
dependencies: ['aframe-troika-text'],
init: function init() {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
this.guiItem = guiItem;
/* gui item parameters
type: {type: 'string'},
width: {type: 'number', default: 1},
height: {type: 'number', default: 1},
baseDepth: {type: 'number', default: 0.01},
depth: {type: 'number', default: 0.02},
gap: {type: 'number', default: 0.025},
radius: {type: 'number', default: 0},
margin: { type: 'vec4', default: {x: 0, y: 0, z: 0, w: 0}},
bevelEnabled: {type: 'boolean', default: true},
bevelSegments: {type: 'number', default: 5},
steps: {type: 'number', default: 2},
bevelSize: {type: 'number', default: 4},
bevelThickness: {type: 'number', default: 2}
*/
//fallback for old font-sizing
if (data.fontSize > 20) {
// 150/1000
var newSize = data.fontSize / 750;
data.fontSize = newSize;
}
var guiInteractable = el.getAttribute("gui-interactable");
this.guiInteractable = guiInteractable;
/* gui interactable parameters
clickAction: {type: 'string'},
hoverAction: {type: 'string'},
keyCode: {type: 'number', default: -1},
key: {type: 'string'},
*/
el.setAttribute('geometry', 'primitive: plane; \n height: ' + guiItem.height + '; \n width: ' + guiItem.width + ';\n ');
el.setAttribute('material', 'shader: flat; \n transparent: true; \n opacity: 0.5; \n side:double; \n color:' + data.backgroundColor + ';\n ');
var buttonContainer = document.createElement("a-entity");
if (guiItem.bevel) {
var bevelsize_adjust = guiItem.bevelSize * 1;
var bevelthickness_adjust = guiItem.bevelThickness;
buttonContainer.setAttribute('bevelbox', 'width: ' + (guiItem.width - guiItem.width * bevelsize_adjust) + '; \n height: ' + (guiItem.height - guiItem.height * bevelsize_adjust) + '; \n depth: ' + (guiItem.baseDepth - guiItem.baseDepth * bevelthickness_adjust) + ';\n bevelThickness: 0;\n bevelSize: ' + guiItem.bevelSize + ';\n ');
buttonContainer.setAttribute('position', '0 0 0');
} else {
buttonContainer.setAttribute('geometry', 'primitive: box; \n width: ' + guiItem.width + '; \n height: ' + guiItem.height + '; \n depth: ' + guiItem.baseDepth + ';\n ');
buttonContainer.setAttribute('position', '0 0 ' + guiItem.baseDepth / 2);
}
buttonContainer.setAttribute('rotation', '0 0 0');
buttonContainer.setAttribute('material', 'shader: flat; \n opacity: 1; \n side:double; \n color: ' + data.borderColor + '\n ');
el.appendChild(buttonContainer);
this.buttonContainer = buttonContainer;
var buttonEntity = document.createElement("a-entity");
if (guiItem.bevel) {
var bevelsize_adjust = guiItem.bevelSize * 1;
var bevelthickness_adjust = guiItem.bevelThickness;
buttonEntity.setAttribute('bevelbox', 'width: ' + (guiItem.width - guiItem.gap - (guiItem.width - guiItem.gap) * bevelsize_adjust) + '; \n height: ' + (guiItem.height - guiItem.gap - (guiItem.height - guiItem.gap) * bevelsize_adjust) + '; \n depth: ' + (guiItem.depth - guiItem.depth * bevelthickness_adjust) + ';\n bevelThickness: ' + guiItem.bevelThickness + ';\n bevelSize: ' + guiItem.bevelSize + ';\n ');
buttonEntity.setAttribute('position', '0 0 0');
} else {
buttonEntity.setAttribute('geometry', 'primitive: box; \n width: ' + (guiItem.width - guiItem.gap) + '; \n height: ' + (guiItem.height - guiItem.gap) + '; \n depth: ' + guiItem.depth + ';');
buttonEntity.setAttribute('position', '0 0 ' + guiItem.depth / 2);
}
buttonEntity.setAttribute('material', 'shader: flat; \n opacity: 1; \n side:double; \n color: ' + (data.toggleState ? data.activeColor : data.backgroundColor) + '\n ');
buttonEntity.setAttribute('rotation', '0 0 0');
el.appendChild(buttonEntity);
this.buttonEntity = buttonEntity;
this.setText(data.value);
el.addEventListener('mouseenter', function (event) {
buttonEntity.removeAttribute('animation__leave');
if (!data.toggle) {
buttonEntity.setAttribute('animation__enter', 'property: material.color; from: ' + data.backgroundColor + '; to:' + data.hoverColor + '; dur:200;');
}
});
el.addEventListener('mouseleave', function (event) {
if (!data.toggle) {
buttonEntity.removeAttribute('animation__click');
buttonEntity.setAttribute('animation__leave', 'property: material.color; from: ' + data.hoverColor + '; to:' + data.backgroundColor + '; dur:200; easing: easeOutQuad;');
}
buttonEntity.removeAttribute('animation__enter');
});
el.addEventListener('focus', function (event) {
buttonContainer.setAttribute('material', 'color', '' + data.focusColor);
});
el.addEventListener('blur', function (event) {
buttonContainer.setAttribute('material', 'color', '' + data.borderColor);
if (!data.toggle) {
buttonEntity.removeAttribute('animation__click');
buttonEntity.setAttribute('animation__leave', 'property: material.color; from: ' + data.hoverColor + '; to:' + data.backgroundColor + '; dur:200; easing: easeOutQuad;');
}
buttonEntity.removeAttribute('animation__enter');
});
el.addEventListener(data.on, function (event) {
if (!data.toggle) {
// if not toggling flashing active state
buttonEntity.setAttribute('animation__click', 'property: material.color; from: ' + data.activeColor + '; to:' + data.backgroundColor + '; dur:400; easing: easeOutQuad;');
} else {
var guiButton = el.components['gui-button'];
// console.log("about to toggle, current state: " + guiButton.data.toggleState);
guiButton.setActiveState(!guiButton.data.toggleState);
// buttonEntity.setAttribute('material', 'color', data.activeColor);
}
var clickActionFunctionName = guiInteractable.clickAction;
// console.log("in button, clickActionFunctionName: "+clickActionFunctionName);
// find object
var clickActionFunction = window[clickActionFunctionName];
//console.log("clickActionFunction: "+clickActionFunction);
// is object a function?
if (typeof clickActionFunction === "function") clickActionFunction(event);
});
el.addEventListener("keyup", function (event) {
if (event.isComposing || event.keyCode === 229) {
return;
}
if (event.keyCode == 13 || event.keyCode == 32) {
el.emit(data.on);
}
event.preventDefault();
});
////WAI ARIA Support
el.setAttribute('role', 'button');
el.setAttribute('tabindex', '0');
el.setAttribute('aria-label', data.value);
},
play: function play() {},
update: function update(oldData) {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
this.guiItem = guiItem;
el.setAttribute('geometry', 'primitive: plane; \n height: ' + guiItem.height + '; \n width: ' + guiItem.width + ';\n ');
el.setAttribute('material', 'shader: flat; \n transparent: true; \n opacity: 0.5; \n side:double; \n color:' + data.backgroundColor + ';\n ');
if (guiItem.bevel) {
var bevelsize_adjust = guiItem.bevelSize * 1;
var bevelthickness_adjust = guiItem.bevelThickness;
this.buttonContainer.setAttribute('bevelbox', 'width: ' + (guiItem.width - guiItem.width * bevelsize_adjust) + '; \n height: ' + (guiItem.height - guiItem.height * bevelsize_adjust) + '; \n depth: ' + (guiItem.baseDepth - guiItem.baseDepth * bevelthickness_adjust) + ';\n bevelThickness: 0;\n bevelSize: ' + guiItem.bevelSize + ';\n ');
this.buttonContainer.setAttribute('position', '0 0 0');
} else {
this.buttonContainer.setAttribute('geometry', 'primitive: box; \n width: ' + guiItem.width + '; \n height: ' + guiItem.height + '; \n depth: ' + guiItem.baseDepth + ';\n ');
this.buttonContainer.setAttribute('position', '0 0 ' + guiItem.baseDepth / 2);
}
this.buttonContainer.setAttribute('material', 'shader: flat; \n opacity: 1; \n side:double; \n color: ' + data.borderColor + '\n ');
if (guiItem.bevel) {
var bevelsize_adjust = guiItem.bevelSize * 1;
var bevelthickness_adjust = guiItem.bevelThickness;
this.buttonEntity.setAttribute('bevelbox', 'width: ' + (guiItem.width - guiItem.gap - (guiItem.width - guiItem.gap) * bevelsize_adjust) + '; \n height: ' + (guiItem.height - guiItem.gap - (guiItem.height - guiItem.gap) * bevelsize_adjust) + '; \n depth: ' + (guiItem.depth - guiItem.depth * bevelthickness_adjust) + ';\n bevelThickness: ' + guiItem.bevelThickness + ';\n bevelSize: ' + guiItem.bevelSize + ';\n ');
this.buttonEntity.setAttribute('position', '0 0 0');
} else {
this.buttonEntity.setAttribute('geometry', 'primitive: box; \n width: ' + (guiItem.width - guiItem.gap) + '; \n height: ' + (guiItem.height - guiItem.gap) + '; \n depth: ' + guiItem.depth + ';\n ');
this.buttonEntity.setAttribute('position', '0 0 ' + guiItem.depth / 2);
}
this.buttonEntity.setAttribute('material', 'shader: flat; \n opacity: 1; \n side:double; \n color: ' + (data.toggleState ? data.activeColor : data.backgroundColor) + '\n ');
if (this.textEntity) {
console.log("has textEntity: " + this.textEntity);
var oldEntity = this.textEntity;
oldEntity.parentNode.removeChild(oldEntity);
this.setText(this.data.value);
} else {
console.log("no textEntity!");
}
},
setActiveState: function setActiveState(activeState) {
// console.log("in setActiveState function, new state: " + activeState);
this.data.toggleState = activeState;
if (!activeState) {
console.log('not active, about to set background color');
this.buttonEntity.setAttribute('material', 'color', this.data.backgroundColor);
} else {
console.log('active, about to set active color');
this.buttonEntity.setAttribute('material', 'color', this.data.activeColor);
}
},
setText: function setText(newText) {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
var textEntity = document.createElement("a-entity");
this.textEntity = textEntity;
textEntity.setAttribute('troika-text', 'value: ' + newText + '; \n align:center; \n anchor:center; \n baseline:center;\n letterSpacing:0;\n color:' + data.fontColor + '; \n font:' + data.fontFamily + ';\n fontSize:' + data.fontSize + ';\n depthOffset:1;\n maxWidth:' + guiItem.width / 1.05 + ';\n ');
textEntity.setAttribute('troika-text-material', 'shader: flat;');
if (guiItem.bevel) {
textEntity.setAttribute('position', '0 0 ' + (guiItem.depth + guiItem.bevelThickness / 2 + 0.05));
} else {
textEntity.setAttribute('position', '0 0 ' + (guiItem.depth / 2 + 0.05));
}
// textEntity.setAttribute('troika-text-material', `shader: flat;`);
this.buttonEntity.appendChild(textEntity);
}
});
AFRAME.registerPrimitive('a-gui-button', {
defaultComponents: {
'gui-interactable': {},
'gui-item': { type: 'button' },
'gui-button': {}
},
mappings: {
//gui interactable general
'onclick': 'gui-interactable.clickAction',
'onhover': 'gui-interactable.hoverAction',
'key-code': 'gui-interactable.keyCode',
//gui item general
'width': 'gui-item.width',
'height': 'gui-item.height',
'depth': 'gui-item.depth',
'base-depth': 'gui-item.baseDepth',
'gap': 'gui-item.gap',
'radius': 'gui-item.radius',
'margin': 'gui-item.margin',
//gui item bevelbox
'bevel': 'gui-item.bevel',
'bevel-segments': 'gui-item.bevelSegments',
'steps': 'gui-item.steps',
'bevel-size': 'gui-item.bevelSize',
'bevel-offset': 'gui-item.bevelOffset',
'bevel-thickness': 'gui-item.bevelThickness',
//gui button specific
'on': 'gui-button.on',
'value': 'gui-button.value',
'font-size': 'gui-button.fontSize',
'font-family': 'gui-button.fontFamily',
'font-color': 'gui-button.fontColor',
'border-color': 'gui-button.borderColor',
'focus-color': 'gui-button.focusColor',
'background-color': 'gui-button.backgroundColor',
'hover-color': 'gui-button.hoverColor',
'active-color': 'gui-button.activeColor',
'toggle': 'gui-button.toggle',
'toggle-state': 'gui-button.toggleState'
}
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
AFRAME.registerComponent('gui-circle-loader', {
schema: {
loaded: { type: 'number', default: 0.5 },
fontSize: { type: 'number', default: 0.2 },
fontFamily: { type: 'string', default: '' },
fontColor: { type: 'string', default: key_grey },
backgroundColor: { type: 'string', default: key_offwhite },
activeColor: { type: 'string', default: key_orange }
},
init: function init() {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
this.guiItem = guiItem;
//fallback for old font-sizing
if (data.fontSize > 20) {
// 150/1000
var newSize = data.fontSize / 750;
data.fontSize = newSize;
}
el.setAttribute('geometry', 'primitive: plane; height: ' + guiItem.height + '; width: ' + guiItem.height + ';');
el.setAttribute('material', 'shader: flat; transparent: true; opacity: 1; side:back; color:' + data.backgroundColor + ';');
var loaderContainer = document.createElement("a-entity");
loaderContainer.setAttribute('geometry', 'primitive: cylinder; radius: ' + guiItem.height / 2 + '; height: 0.02;');
loaderContainer.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.backgroundColor);
loaderContainer.setAttribute('rotation', '90 0 0');
loaderContainer.setAttribute('position', '0 0 0.01');
el.appendChild(loaderContainer);
// var countLoaded = document.createElement("a-entity");
// countLoaded.setAttribute('geometry', `primitive: plane; width: ${guiItem.height/1.5}; height: ${guiItem.height/1.5};`);
// countLoaded.setAttribute('material', `shader: flat; transparent: true; opacity: 1; side:front;`);
// countLoaded.setAttribute('position', '0 0 0.022');
// countLoaded.id = "loader_ring_count";
// el.appendChild(countLoaded);
var loaderRing = document.createElement("a-ring");
loaderRing.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.activeColor);
loaderRing.setAttribute('radius-inner', '' + guiItem.height / 3);
loaderRing.setAttribute('radius-outer', '' + guiItem.height / 2);
loaderRing.setAttribute('theta-start', '90');
loaderRing.setAttribute('theta-length', '' + data.loaded * -360);
loaderRing.setAttribute('rotation', '0 0 0');
loaderRing.setAttribute('position', '0 0 0.04');
loaderRing.id = "loader_ring";
el.appendChild(loaderRing);
this.setText(data.loaded);
},
play: function play() {},
update: function update(oldData) {
var data = this.data;
var el = this.el;
if (this.textEntity) {
console.log("has textEntity: " + this.textEntity);
var oldEntity = this.textEntity;
oldEntity.parentNode.removeChild(oldEntity);
this.setText(this.data.loaded);
} else {
console.log("no textEntity!");
}
},
setText: function setText(newLoaded) {
var textEntity = document.createElement("a-entity");
this.textEntity = textEntity;
textEntity.setAttribute('troika-text', 'value: ' + Math.round(newLoaded * 100) + '; \n align:center; \n anchor:center; \n baseline:center;\n letterSpacing:0;\n color:' + this.data.fontColor + ';\n font:' + this.data.fontFamily + ';\n fontSize:' + this.data.fontSize + ';\n depthOffset:1;\n maxWidth:' + this.guiItem.width / 1.05 + ';\n ');
textEntity.setAttribute('position', '0 0 0.05');
// textEntity.setAttribute('troika-text-material', `shader: flat;`);
this.el.appendChild(textEntity);
}
});
AFRAME.registerPrimitive('a-gui-circle-loader', {
defaultComponents: {
'gui-item': { type: 'circle-loader' },
'gui-circle-loader': {}
},
mappings: {
//gui item general
'width': 'gui-item.width',
'height': 'gui-item.height',
'margin': 'gui-item.margin',
//gui loader specific
'loaded': 'gui-circle-loader.loaded',
'font-size': 'gui-circle-loader.fontSize',
'font-family': 'gui-circle-loader.fontFamily',
'font-color': 'gui-circle-loader.fontColor',
'background-color': 'gui-circle-loader.backgroundColor',
'active-color': 'gui-circle-loader.activeColor'
}
});
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
AFRAME.registerComponent('gui-circle-timer', {
schema: {
countDown: { type: 'number', default: 10 },
fontSize: { type: 'number', default: 0.2 },
fontFamily: { type: 'string', default: '' },
fontColor: { type: 'string', default: key_grey },
borderColor: { type: 'string', default: key_grey },
backgroundColor: { type: 'string', default: key_offwhite },
activeColor: { type: 'string', default: key_orange }
},
init: function init() {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
this.guiItem = guiItem;
var guiInteractable = el.getAttribute("gui-interactable");
console.log("in timer callback, guiInteractable: " + JSON.stringify(guiInteractable));
//fallback for old font-sizing
if (data.fontSize > 20) {
// 150/750
var newSize = data.fontSize / 750;
data.fontSize = newSize;
}
el.setAttribute('geometry', 'primitive: plane; height: ' + guiItem.height + '; width: ' + guiItem.height + ';');
el.setAttribute('material', 'shader: flat; transparent: true; opacity: 1; side:back; color:' + data.backgroundColor + ';');
var timerContainer = document.createElement("a-entity");
timerContainer.setAttribute('geometry', 'primitive: cylinder; radius: ' + guiItem.height / 2 + '; height: 0.02;');
timerContainer.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.backgroundColor);
timerContainer.setAttribute('rotation', '90 0 0');
timerContainer.setAttribute('position', '0 0 0.01');
el.appendChild(timerContainer);
var timerIndicator1 = document.createElement("a-ring");
timerIndicator1.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.borderColor);
timerIndicator1.setAttribute('radius-inner', '' + guiItem.height / 3);
timerIndicator1.setAttribute('radius-outer', '' + guiItem.height / 2);
timerIndicator1.setAttribute('theta-start', '-1');
timerIndicator1.setAttribute('theta-length', '3');
timerIndicator1.setAttribute('position', '0 0 0.04');
el.appendChild(timerIndicator1);
var timerIndicator2 = document.createElement("a-ring");
timerIndicator2.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.borderColor);
timerIndicator2.setAttribute('radius-inner', '' + guiItem.height / 3);
timerIndicator2.setAttribute('radius-outer', '' + guiItem.height / 2);
timerIndicator2.setAttribute('theta-start', '89');
timerIndicator2.setAttribute('theta-length', '3');
timerIndicator2.setAttribute('position', '0 0 0.04');
el.appendChild(timerIndicator2);
var timerIndicator3 = document.createElement("a-ring");
timerIndicator3.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.borderColor);
timerIndicator3.setAttribute('radius-inner', '' + guiItem.height / 3);
timerIndicator3.setAttribute('radius-outer', '' + guiItem.height / 2);
timerIndicator3.setAttribute('theta-start', '179');
timerIndicator3.setAttribute('theta-length', '3');
timerIndicator3.setAttribute('position', '0 0 0.04');
el.appendChild(timerIndicator3);
var timerIndicator4 = document.createElement("a-ring");
timerIndicator4.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.borderColor);
timerIndicator4.setAttribute('radius-inner', '' + guiItem.height / 3);
timerIndicator4.setAttribute('radius-outer', '' + guiItem.height / 2);
timerIndicator4.setAttribute('theta-start', '269');
timerIndicator4.setAttribute('theta-length', '3');
timerIndicator4.setAttribute('position', '0 0 0.04');
el.appendChild(timerIndicator4);
var timerRing = document.createElement("a-ring");
timerRing.setAttribute('material', 'shader: flat; opacity: 1; side:double; color: ' + data.activeColor);
timerRing.setAttribute('radius-inner', '' + guiItem.height / 3);
timerRing.setAttribute('radius-outer', '' + guiItem.height / 2);
timerRing.setAttribute('theta-start', '0');
timerRing.setAttribute('theta-length', '0'); // this has to increase 0 to 360 when running the countdown
timerRing.setAttribute('rotation', '0 180 90');
timerRing.setAttribute('position', '0 0 0.03');
el.appendChild(timerRing);
this.timerRing = timerRing;
var initCount = this.initCount = data.countDown;
this.setText(data.countDown);
},
update: function update(oldData) {
var data = this.data;
var el = this.el;
if (Object.keys(oldData).length === 0) {
return;
}
if (data.countDown !== oldData.countDown) {
el.getObject3D('mesh').material.color = data.color;
var left = data.countDown,
count_down = this.initCount;
var elapsed = Math.round((count_down - left) * 100 / count_down) / 100 * 360;
this.timerRing.setAttribute('theta-length', elapsed); // this has to increase 0 to 360 when running the count_down
this.textEntity.setAttribute('troika-text', 'value: ' + data.countDown + ';');
if (left == 1) {
console.log('fire callback on the last second');
}
}
},
setText: function setText(newTime) {
// if (this.textEntity) {
// el.removeChild(this.textEntity);
// }//clear old text
var textEntity = document.createElement("a-entity");
this.textEntity = textEntity;
textEntity.setAttribute('troika-text', 'value: ' + newTime + '; \n align:center; \n anchor:center; \n baseline:center;\n letterSpacing:0;\n color:' + this.data.fontColor + ';\n font:' + this.data.fontFamily + ';\n fontSize:' + this.data.fontSize + ';\n depthOffset:1;\n maxWidth:' + this.guiItem.width / 1.05 + ';\n ');
textEntity.setAttribute('position', '0 0 0.05');
// textEntity.setAttribute('troika-text-material', `shader: flat;`);
this.el.appendChild(textEntity);
},
callback: function callback() {
var guiInteractable = this.el.getAttribute("gui-interactable");
var clickActionFunctionName = guiInteractable.clickAction;
console.log("in timer callback, guiInteractable: " + JSON.stringify(guiInteractable));
console.log("in button, clickActionFunctionName: " + clickActionFunctionName);
// find object
var clickActionFunction = window[clickActionFunctionName];
//console.log("clickActionFunction: "+clickActionFunction);
// is object a function?
if (typeof clickActionFunction === "function") clickActionFunction();
}
});
AFRAME.registerPrimitive('a-gui-circle-timer', {
defaultComponents: {
'gui-item': { type: 'circle-timer' },
'gui-circle-timer': {}
},
mappings: {
//gui item general
'width': 'gui-item.width',
'height': 'gui-item.height',
'margin': 'gui-item.margin',
//gui timer specific
'count-down': 'gui-circle-timer.countDown',
'font-size': 'gui-circle-timer.fontSize',
'font-family': 'gui-circle-timer.fontFamily',
'font-color': 'gui-circle-timer.fontColor',
'border-color': 'gui-circle-timer.borderColor',
'background-color': 'gui-circle-timer.backgroundColor',
'active-color': 'gui-circle-timer.activeColor',
'callback': 'gui-interactable.clickAction'
}
});
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
AFRAME.registerComponent('gui-cursor', {
schema: {
color: { type: 'string', default: key_white },
hoverColor: { type: 'string', default: key_white },
activeColor: { type: 'string', default: key_orange },
distance: { type: 'number', default: -1 },
design: { type: 'string', default: 'dot' }
},
init: function init() {
var cursor = this.cursor = this.el.getAttribute('cursor');
var fuse = this.fuse = cursor.fuse; // true if cursor fuse is enabled.
var fuseTimeout = cursor.fuseTimeout; // animation lenght should be based on this value
var el = this.el;
var data = this.data;
var defaultHoverAnimationDuration = 200;
var fuseAnimationDuration = fuseTimeout - defaultHoverAnimationDuration;
AFRAME.utils.entity.setComponentProperty(el, 'raycaster.interval', '500');
console.log("fuse: " + fuse + ", fuseTimeout: " + fuseTimeout);
if (data.design == 'dot') {
el.setAttribute('geometry', 'primitive: ring; radiusInner:0.000001; radiusOuter:0.025');
el.setAttribute('material', 'color: ' + data.color + '; shader: flat; opacity:1;');
el.setAttribute('position', '0 0 ' + data.distance);
el.setAttribute('animation__radiusInnerIn', 'property: geometry.radiusInner; from: 0.000001; to:0.0225; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__radiusOuterIn', 'property: geometry.radiusOuter; from: 0.025; to:0.0275; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__colorIn', 'property: material.color; from: ' + data.color + '; to:' + data.hoverColor + '; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__radiusInnerOut', 'property: geometry.radiusInner; from: 0.0225; to:0.000001; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__radiusOuterOut', 'property: geometry.radiusOuter; from: 0.0275; to:0.025; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__colorOut', 'property: material.color; from: ' + data.hoverColor + '; to:' + data.color + '; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__scale', 'property: scale; from: 1 1 1; to:1.25 1.25 1.25; dur:200; easing:easeInQuad; startEvents: click');
var cursorShadow = document.createElement("a-entity");
cursorShadow.setAttribute('geometry', 'primitive: ring; radiusInner:0.0275; radiusOuter:0.03; thetaLength:360');
cursorShadow.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadow.setAttribute('position', '0 0 0');
cursorShadow.setAttribute('animation__radiusInnerIn', 'property: geometry.radiusInner; from: 0.0275; to:0.03; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__radiusOuterIn', 'property: geometry.radiusOuter; from: 0.03; to:0.0325; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__radiusInnerOut', 'property: geometry.radiusInner; from: 0.03; to:0.0275; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
cursorShadow.setAttribute('animation__radiusOuterOut', 'property: geometry.radiusOuter; from: 0.0325; to:0.03; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.appendChild(cursorShadow);
this.cursorShadow = cursorShadow;
if (fuse) {
var fuseLoader = document.createElement("a-entity");
fuseLoader.setAttribute('geometry', 'primitive: ring; radiusInner:0.03; radiusOuter:0.0375; thetaLength:0');
fuseLoader.setAttribute('material', 'color: ' + data.activeColor + '; shader: flat; opacity:1;');
fuseLoader.setAttribute('position', '0 0 0');
fuseLoader.setAttribute('animation', 'property: geometry.thetaLength; from: 0; to:360; dur:' + fuseAnimationDuration + '; delay: ' + defaultHoverAnimationDuration + '; easing:linear; autoplay:false;');
el.appendChild(fuseLoader);
this.fuseLoader = fuseLoader;
}
//end dot design
} else if (data.design == 'ring') {
el.setAttribute('geometry', 'primitive: ring; radiusInner:0.0225; radiusOuter:0.0275');
el.setAttribute('material', 'color: ' + data.color + '; shader: flat; opacity:1;');
el.setAttribute('position', '0 0 ' + data.distance);
el.setAttribute('animation__radiusInnerIn', 'property: geometry.radiusInner; from: 0.0225; to:0.025; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__radiusOuterIn', 'property: geometry.radiusOuter; from: 0.0275; to:0.0325; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__colorIn', 'property: material.color; from: ' + data.color + '; to:' + data.hoverColor + '; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__radiusInnerOut', 'property: geometry.radiusInner; from: 0.025; to:0.0225; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__radiusOuterOut', 'property: geometry.radiusOuter; from: 0.0325; to:0.0275; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__colorOut', 'property: material.color; from: ' + data.hoverColor + '; to:' + data.color + '; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.setAttribute('animation__scale', 'property: scale; from: 1 1 1; to:1.25 1.25 1.25; dur:200; easing:easeInQuad; startEvents: click');
var cursorShadow = document.createElement("a-entity");
cursorShadow.setAttribute('geometry', 'primitive: ring; radiusInner:0.03; radiusOuter:0.0325; thetaLength:360');
cursorShadow.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadow.setAttribute('position', '0 0 0');
cursorShadow.setAttribute('animation__radiusInnerIn', 'property: geometry.radiusInner; from: 0.03; to:0.0325; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__radiusOuterIn', 'property: geometry.radiusOuter; from: 0.0325; to:0.0375; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__radiusInnerOut', 'property: geometry.radiusInner; from: 0.0325; to:0.03; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
cursorShadow.setAttribute('animation__radiusOuterOut', 'property: geometry.radiusOuter; from: 0.0375; to:0.0325; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.appendChild(cursorShadow);
this.cursorShadow = cursorShadow;
if (fuse) {
var fuseLoader = document.createElement("a-entity");
fuseLoader.setAttribute('geometry', 'primitive: ring; radiusInner:0.035; radiusOuter:0.0425; thetaLength:0');
fuseLoader.setAttribute('material', 'color: ' + data.activeColor + '; shader: flat; opacity:1;');
fuseLoader.setAttribute('position', '0 0 0');
fuseLoader.setAttribute('animation', 'property: geometry.thetaLength; from: 0; to:360; dur:' + fuseAnimationDuration + '; delay: ' + defaultHoverAnimationDuration + '; easing:linear; autoplay:false;');
el.appendChild(fuseLoader);
this.fuseLoader = fuseLoader;
}
//end ring design
} else if (data.design == 'reticle') {
el.setAttribute('geometry', 'primitive: ring; radiusInner:0.000001; radiusOuter:0.0125; thetaLength:180;');
el.setAttribute('material', 'color: ' + data.color + '; shader: flat; opacity:1;');
el.setAttribute('position', '0 0 ' + data.distance);
el.setAttribute('animation__opacityIn', 'property: material.opacity; from: 1; to: 0; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
el.setAttribute('animation__opacityOut', 'property: material.opacity; from: 0; to: 1; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
var cursorCenter = document.createElement("a-entity");
cursorCenter.setAttribute('geometry', 'primitive: ring; radiusInner:0.000001; radiusOuter:0.0125; thetaLength:180; thetaStart:180;');
cursorCenter.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorCenter.setAttribute('position', '0 0 0');
cursorCenter.setAttribute('animation__opacityIn', 'property: material.opacity; from: 0.25; to: 0; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorCenter.setAttribute('animation__opacityOut', 'property: material.opacity; from: 0; to: 0.25; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.appendChild(cursorCenter);
this.cursorCenter = cursorCenter;
var cursorShadow = document.createElement("a-entity");
cursorShadow.setAttribute('geometry', 'primitive: ring; radiusInner:0.0125; radiusOuter:0.0145');
cursorShadow.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadow.setAttribute('position', '0 0 0');
cursorShadow.setAttribute('animation__colorIn', 'property: material.color; from: #000000; to: ' + data.color + '; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__opacityIn', 'property: material.opacity; from: 0.25; to: 1; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: hovergui');
cursorShadow.setAttribute('animation__colorOut', 'property: material.color; from: ' + data.color + '; to: #000000; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
cursorShadow.setAttribute('animation__opacityOut', 'property: material.opacity; from: 1; to: 0.25; dur:' + defaultHoverAnimationDuration + '; easing:linear; startEvents: leavegui');
el.appendChild(cursorShadow);
this.cursorShadow = cursorShadow;
var cursorShadowTL = document.createElement("a-entity");
cursorShadowTL.setAttribute('geometry', 'primitive: plane; width:0.005; height:0.005;');
cursorShadowTL.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadowTL.setAttribute('position', '-0.0325 0.0325 0');
el.appendChild(cursorShadowTL);
this.cursorShadowTL = cursorShadowTL;
var cursorShadowBL = document.createElement("a-entity");
cursorShadowBL.setAttribute('geometry', 'primitive: plane; width:0.005; height:0.005;');
cursorShadowBL.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadowBL.setAttribute('position', '-0.0325 -0.0325 0');
el.appendChild(cursorShadowBL);
this.cursorShadowBL = cursorShadowBL;
var cursorShadowTR = document.createElement("a-entity");
cursorShadowTR.setAttribute('geometry', 'primitive: plane; width:0.005; height:0.005;');
cursorShadowTR.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadowTR.setAttribute('position', '0.0325 0.0325 0');
el.appendChild(cursorShadowTR);
this.cursorShadowTR = cursorShadowTR;
var cursorShadowBR = document.createElement("a-entity");
cursorShadowBR.setAttribute('geometry', 'primitive: plane; width:0.005; height:0.005;');
cursorShadowBR.setAttribute('material', 'color: #000000; shader: flat; opacity:0.25;');
cursorShadowBR.setAttribute('position', '0.0325 -0.0325 0');
el.appendChild(cursorShadowBR);
this.cursorShadowBR