aframe-gui
aframe-gui copied to clipboard
slider width/percent issues
in this example, I've set the slider percent to 0.9. The bar is too wide. Once I click it to interact with it, it corrects itself, as in the following two images:

slider is instantiated like this:
vrgc.createEl('a-gui-slider', [
['id',"command-brightness-slider"],
['width',"3"],
['height',"0.75"],
['value', 'light'],
['onclick', `
console.log(this);
`],
// ['onclick',"() ',]), {console.warn('aframe a-gui button clicked']),}"],
// ['onhover',"(]), ',]), {console.warn('hovering']),}"],
['percent', (vrgc.getComponent('light','#main-light').data.intensity)],
// ['margin',"0 0 0.05 0"],
// ['toggle',"true"],
]),
within a parent instantiated like this:
this.container = vrgc.createEl('a-gui-flex-container', [
['id',"command-menu-container"],
['flex-direction',"column" ],
['justify-content',"center" ],
['align-items',"normal" ],
['component-padding',"0.1"],
['opacity',"0.7"],
['width',"8"],
['height',"9"],
['position',"0 0 0" ],
["look-at", inVR ? "#look-at-halo" : "#own-avatar"],
// ['rotation',"0 335 0"],
], this.el);
the createEl util works like this:
vrgc.createEl = function(type='a-entity', attributes, appendTo=null) {
// how to use:
//
// expects an array of "attributes",
// which are themselves arrays with two members,
// with the first member being the first argument to feed 'setAttribute()' method (e.g., `'geometry'`)
// and second member being the second argument to feed 'setAttribute()' method (e.g., `{primitive: "circle"}``)
// so, to create a translucent white circle, you might call this method like so:
// vrgc.createEl('a-entity', [
// ['geometry', {primitive: "circle"}],
// ['position', "0 2 0"],
// ["geometry", {radius: 2}],
// ["material", {color: "white", transparent: true, opacity: 0.05}],
// ], 'a-scene');
//
const newEl = document.createElement(type);
attributes.forEach(tuple => {
newEl.setAttribute(tuple[0], tuple[1])
});
if (typeof appendTo === "string") {
appendTo = vrgc.getElementSync(appendTo)
}
if (appendTo) {
appendTo.appendChild(newEl);
}
return newEl;
}