aframe-gui icon indicating copy to clipboard operation
aframe-gui copied to clipboard

slider width/percent issues

Open kylebakerio opened this issue 4 years ago • 1 comments

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:

command-menu after-click

kylebakerio avatar Jan 18 '21 13:01 kylebakerio

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

kylebakerio avatar Jan 18 '21 13:01 kylebakerio