aframe-gui

A graphical User Interface framework for A-Frame.

The aframe-gui components provide layout and gui widgets that can be used to create a user interface in an A-Frame scene.

The dist/aframe-gui.js file defines the following components:

Component Primitive Description
gui-flex-container a-gui-flex-container Layout container with flexbox-inspired
gui-item Used by other components for common properties like height and width
gui-interactable Used by other components to define onclick behavior
gui-cursor a-gui-cursor Cursor used to interact with GUI elements.
gui-button a-gui-button Standard button component with text label
gui-icon-button a-gui-icon-button Button with icon label instead of text
gui-icon-label-button a-gui-icon-label-button Button with both icon and text labels
gui-radio a-gui-radio Radio button
gui-toggle a-gui-toggle Toggle button
gui-slider a-gui-slider Slider component
gui-input a-gui-input Text input field
gui-label a-gui-label Text label
gui-progress-bar a-gui-progress-bar Progress bar
gui-circle-loader a-gui-circle-loader Circular progress meter
gui-circle-timer a-gui-circle-timer Circular progress meter with timer

Examples

Examples are available at:

https://rdub80.github.io/aframe-gui/examples/index.html

Use in your AFrame project

Include the following Javascript in the head of the page containing your AFrame scene:

https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js

Building

Run the following to build to the examples/js folder:

npm run dist-example

npm run dist-example-min

Run locally

Run the following start the webpack-dev-server:

npm start

The webpack-dev-server should now be running at http://localhost:8080

Components

a-gui-flex-container Component

Properties

Property Description Default Value
flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction ‘row’
justify-content property defines distributed space between and around content items along the main axis of their container ‘flexStart’
align-items roperty defines distributed space between and around flex items along the cross-axis of their container. Like justify-content but in the perpendicular direction. ‘flexStart’
item-padding Padding between items 0.0
opacity Transparency of the flex-conntainer 0.0
is-top-container Setting background of the flex-container false
panel-color Background color of the flex-container #22252a
<a-gui-flex-container 
	flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1" opacity="0.7" width="3.5" height="4.5"
	position="2 2.5 -4" rotation="0 0 0"
>
... gui items here...
</a-gui-flex-container>

a-gui-cursor Component

Properties

Property Description Default Value
color Cursor initial color #ffffff
hover-color Cursor hover color #ffffff
active-color Cursor selection/active color #ed5b21
distance distance of the pointer from the camera -1
design choose a design: ‘dot’, ‘ring’, ‘cross’ or ‘reticle’ ‘dot’
		<!-- Camera + cursor. -->
		<a-entity camera>
			<a-entity raycaster="interval: 1000; objects: [gui-interactable]"
					  cursor="fuse: true; fuseTimeout: 2000"
					  gui-cursor="design:reticle;" >
			</a-entity> <!-- /cursor -->
		</a-entity> <!-- /camera -->

a-gui-button Component

Properties

Property Description Default Value
active-color Background color when button is pressed down #ed5b21
background-color Background color of button #22252a
border-color Border color of button #d3d3d4
font-color Text color for button label #d3d3d4
font-family Font family for button ‘Helvetica’
height Height of item 1
hover-color Background color when button is in hover state #2c3037
key-code Key shortcut to trigger onclick action  
on Event that triggers onclick action click
onclick Javascript function to execute on click  
onhover Javascript function to execute on click  
toggle If true, button acts as toggle button with on/off state false
value Text of button label  
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
	<a-gui-button 
		width="2.5" height="0.75"
		onclick="buttonActionFunction" key-code="32"
		value="test button"
		font-family="Helvetica"
		margin="0 0 0.05 0"
	>
	</a-gui-button>

a-gui-circle-loader Component

Properties

Property Description Default Value
active-color Color of ring that indicates loading progress #ed5b21
background-color Background color of item #22252a
count Initial percentage progress value #22252a
font-color Text color for progress percentage text #d3d3d4
font-family Font family for progress percentage text ‘Helvetica’
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
	<a-gui-circle-loader
		height="0.75"
		font-family="Arial"
	>
	</a-gui-circle-loader>

a-gui-circle-timer Component

Properties

Property Description Default Value
active-color Color of ring that indicates countdown progress #ed5b21
background-color Background color of item #22252a
border-color Color of indicators that show 25/50/75/100 progress #22252a
count-down Initial countdown value in seconds #22252a
font-color Text color for progress countdown text #d3d3d4
font-family Font family for progress countdown text ‘Helvetica’
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-circle-timer 
	height="0.75"
	count-down="5"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-circle-timer>

a-gui-icon-button Component

Properties

Property Description Default Value
on Event that triggers onclick action click
icon   ’’
icon-active   ’’
toggle Toggle status false
font-family Font family for button ‘Helvetica’
font-color Text color for button label #d3d3d4
border-color Border color of button #d3d3d4
background-color Background color of item #22252a
hover-color Background color when button is in hover state #2c3037
active-color Background color when button is pressed down #ed5b21
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-icon-button
	height="0.75"
	onclick="buttonActionFunction"
	icon="social-twitter"
	margin="0 0 0.05 0"
>
</a-gui-icon-button>

a-gui-icon-label-button Component

Properties

Property Description Default Value
on Event that triggers onclick action click
icon   ’’
icon-active   ’’
text   ’’
toggle Toggle status false
font-family Font family for button ‘Helvetica’
font-color Text color for button label #d3d3d4
border-color Border color of button #d3d3d4
background-color Background color of button #22252a
hover-color Background color when button is in hover state #2c3037
active-color Background color when button is pressed down #ed5b21
height Height of button 1
width Width of button 1
margin Margin around button 0 0 0 0
<a-gui-icon-label-button
	width="2.5" height="0.75"
	onclick="buttonActionFunction"
	icon="social-github"
	value="label button"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-icon-label-button>

a-gui-input Component

Properties

Property Description Default Value
on Event that triggers onclick action click
input-text Input value ‘Placeholder’
toggle Toggle status false
font-family Font family for input ‘Helvetica’
font-color Text input color #2c3037
border-color Border color of input #2c3037
border-hover-color Border color when input is in hover state #22252a
background-color Background color of input #22252a
hover-color Background color when input is in hover state #2c3037
active-color Background color when input is pressed down #ed5b21
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-icon-label-button
	width="2.5" height="0.75"
	onclick="buttonActionFunction"
	icon="social-github"
	value="label button"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-icon-label-button>

a-gui-label Component

Properties

Property Description Default Value
text   ‘label text’
label-for   null
font-family Font family for input ‘Helvetica’
font-color Text input color #2c3037
background-color Background color of label #d3d3d4
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-label 
	width="2.5" height="0.75"
	value="label text"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-label>

a-gui-progress-bar Component

Properties

Property Description Default Value
background-color Background color of progress bar #22252a
active-color Color for indicating progress level #ed5b21
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-progressbar 
	width="2.5" height="0.25"
	margin="0 0 0.05 0"
>
</a-gui-progressbar>

a-gui-radio Component

Properties

Property Description Default Value
on Event that triggers onclick action click
text   ‘text’
active   true
checked   false
font-family Font family for radio ‘Helvetica’
font-color Text radio color #2c3037
border-color Border color of input #ffffff
background-color Background color of radio #d3d3d4
hover-color   #606876
active-color   #ed5b21
handle-color   #22252a
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-radio 
	width="2.5" height="0.75"
	onclick="toggleActionFunction"
	value="label radio"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-radio>

a-gui-slider Component

Properties

Property Description Default Value
percent   ‘0.5’
handle-outer-radius   ‘0.17’
handle-inner-radius   ‘0.13’
handle-outer-depth   ‘0.04’
handle-inner-depth   ‘0.02’
slider-bar-height   ‘0.05’
slider-bar-depth   ‘0.03’
left-right-padding   ‘0.25’
top-bottom-padding   ‘0.125’
border-color   #22252a
background-color   #d3d3d4
hover-color   #606876
active-color   #ed5b21
handle-color   #ffffff
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-slider 	
	width="2.5" height="0.75"
	onclick="slideActionFunction"
	percent="0.29"
	margin="0 0 0.05 0"
>
</a-gui-slider>

a-gui-toggle Component

Properties

Property Description Default Value
on Event that triggers onclick action click
text   ‘text’
active   true
checked   false
border-width   1
font-family   ‘Helvetica’
font-color   #2c3037
border-color   #22252a
background-color   #d3d3d4
hover-color   #606876
active-color   #ed5b21
handle-color   #d3d3d4
height Height of item 1
width Width of item 1
margin Margin around item 0 0 0 0
<a-gui-toggle
	width="2.5" height="0.75"
	onclick="testToggleAction"
	value="label toggle"
	font-family="Arial"
	margin="0 0 0.05 0"
>
</a-gui-toggle>