Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

slider width/percent issues #53

Open
kylebakerio opened this issue Jan 18, 2021 · 1 comment
Open

slider width/percent issues #53

kylebakerio opened this issue Jan 18, 2021 · 1 comment

Comments

@kylebakerio
Copy link
Collaborator

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
Copy link
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant