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-vertical-slider	a-gui-slider	Vertical 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

Colors	Hexcodes
key_orange	`#ed5b21`
key_orange_light	`#ef8c60`
key_grey	`#22252a`
key_grey_dark	`#2c3037`
key_grey_light	`#606876`
key_offwhite	`#d3d3d4`
key_white	`#ffffff`

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', 'column'	'row'
justify-content	property defines distributed space between and around content items along the main axis of their container: 'flexStart','center','flexEnd'	'flexStart'
align-items	property 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
panel-rounded	flex-container panel rounding radius	0.05

<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" 
    panel-color="#072B73" 
    panel-rounded="0.2"
	position="0 2.5 -6" 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 id="cameraRig" position="0 1.6 0">
			<a-camera look-controls wasd-controls position="0 0 0">
				<a-gui-cursor id="cursor"
						  raycaster="objects: [gui-interactable]"
						  fuse="true" fuse-timeout="2000"
						  color="#ECEFF1"
						  hover-color="#CFD8DC"
						  active-color="#607D8B"
						  design="ring" > <!-- dot, ring, reticle, cross  -->
				</a-gui-cursor> <!-- /cursor -->
			</a-camera> <!-- /camera -->
		</a-entity>

Example without fuse/gaze trigger (click trigger):

		<!-- Camera + cursor. -->
		<a-entity id="cameraRig" position="0 1.6 0">
			<a-camera look-controls wasd-controls position="0 0 0">
				<a-gui-cursor id="cursor"
						  raycaster="objects: [gui-interactable]"
						  fuse="false"
				>
				</a-gui-cursor> <!-- /cursor -->
			</a-camera> <!-- /camera -->
		</a-entity>

a-gui-button Component

Properties

Property	Description	Default Value
on	Event that triggers onclick action	click
value	Text of button label
font-size	Font size for button	0.2
font-family	Font family for button	''
font-color	Text color for button label	#d3d3d4
border-color	Border color of button	#d3d3d4
focus-color	Focus color of button	#ef8c60
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
toggle	If true, button acts as toggle button with on/off state	false
toggle-state	Setting the toggle button on/off state	false

width	Width of button	1
height	Height of button	1
depth	Depth of button	0.02
base-depth	Depth of the base of the button	0.01
gap	Gap between button and base	0.025
margin	Margin around button	0 0 0 0

bevel	If true, button bevel is enabled	false
bevel-segments	Segments of the button bevel	5
steps	Steps of the button bevel	2
bevel-size	Size of the button bevel	0.1
bevel-offset	Offset of the button bevel	0
bevel-thickness	Thickness of the button bevel	0.1

	<a-gui-button
		width="2.5" 
		height="0.7" 
		base-depth="0.025" 
		depth="0.1"
		gap="0.1"

		onclick="buttonActionFunction" key-code="32"
		value="Sample Button"
		font-family="assets/fonts/PermanentMarker-Regular.ttf"	
		font-size="0.25"
		margin="0 0 0.05 0"

		font-color="black"
		active-color="red"
		hover-color="yellow"
		border-color="white"
		focus-color="black"
		background-color="orange"

		bevel="true"
	>
	</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
loaded	Initial percentage progress value	0.5
font-color	Text color for progress percentage text	#d3d3d4
font-family	Font family for progress percentage text	''
font-size	Font size for progress percentage text	0.2
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="assets/fonts/Plaster-Regular.ttf"					
		font-size="0.2"
		loaded="0.3456"		
		margin="0 0 0.1 0"
		background-color="#999"
	>
	</a-gui-circle-loader>

a-gui-circle-timer Component

Properties

Property	Description	Default Value
font-size	Font size for countdown text	0.2
font-family	Font family for progress countdown text	''
font-color	Text color for progress countdown text	#d3d3d4
border-color	Color of indicators that show 25/50/75/100 progress	#22252a
background-color	Background color of item	#22252a
active-color	Color of ring that indicates countdown progress	#ed5b21

count-down	Initial countdown value in seconds	0
callback	callback function that fires when countdown expires	''

width	Width of item	1
height	Height of item	1
margin	Margin around item	0 0 0 0

<a-gui-circle-timer
	height="0.75"
	count-down="60"
	callback="timedout"
	font-family="assets/fonts/PermanentMarker-Regular.ttf"				
	margin="0 0 0.1 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		''
icon-font	Icon font family	'assets/fonts/fa-regular-400.ttf'
icon-font-size	Icon Font size for button	0.4

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
toggle	Toggle status	false
toggle-state	Setting the toggle button on/off state	false

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" key-code="32"
	icon="f09b"
	icon-font="assets/fonts/fa-brands-400.ttf"
	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 char	''
icon-active	icon char for the active state	''
icon-font	Icon font family	'assets/fonts/fa-regular-400.ttf'
icon-font-size	Icon Font size for button	0.35

font-color	Text color for button label	#d3d3d4
value		''
font-family	Font family for button	''
font-size	Font size for button	0.2
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
toggle	Toggle status	false
toggle-state	Setting the toggle button on/off state	false

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="f2b9"
	icon-font="assets/fonts/fa-solid-900.ttf"
	value="icon label"
	font-family="assets/fonts/PressStart2P-Regular.ttf"
	font-size="0.16"
	margin="0 0 0.05 0"
>
</a-gui-icon-label-button>

a-gui-input Component

Properties

Property	Description	Default Value
onclick	Function to call on click event
onhover	Function to call on hover event
value	Input text value

font-size	Font size for input	0.2
font-family	Font family for input	''
font-color	Text input color	#2c3037
border-color	Border color of input	#2c3037
background-color	Background color of input	#22252a
border-hover-color	Border color when input is in hover state	#22252a
hover-color	Background color when input is in hover state	#2c3037

margin	Margin around item	0 0 0 0
height	Height of item	1
width	Width of item	1

<a-gui-input
	width="2.5" height="0.75"
	onclick="inputActionFunction"
	font-family="assets/fonts/PermanentMarker-Regular.ttf"	
	font-size="0.2"
	value="Hello Wor_"
	margin="0 0 0.05 0"
>
</a-gui-input>

a-gui-label Component

Properties

Property	Description	Default Value
value		''
align	text-align: 'left','center','right'	'center'
anchor	text anchor position: 'left','center','right'	'center'
lineHeight	line-height of the label	0.2
font-size	Font size for input	0.2
font-family	Font family for input	''
font-color	Text input color	#2c3037
background-color	Background color of label	#d3d3d4

text-depth	distance from the text to label background	0.01
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="test label"
	font-family="assets/fonts/DiplomataSC-Regular.ttf"
	font-size="0.35"
	line-height="0.8"
	letter-spacing="0"
	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
checked		false
active		true
toggle	Toggle status	false
toggle-state	Setting the radio button on/off state	false

value		''
font-family	Font family for radio button	''
font-size	Font size for radio button	0.2
font-color	Text color for radio button label	#2c3037
border-width		1
border-color	Border color of radio button	#ffffff
background-color	Background color of radio button	#d3d3d4
hover-color	Background color when radio button is in hover state	#606876
handle-color		#22252a
active-color	Background color when radio button is pressed down	#ed5b21

height	Height of radio button	1
width	Width of radio button	1
margin	Margin around radio button	0 0 0 0

<a-gui-radio
	width="2.5" height="0.75"
	onclick="toggleActionFunction"
	value="radio label"
	font-size="0.3"
	margin="0 0 0.05 0"
>
</a-gui-radio>

a-gui-slider Component

Properties

Property	Description	Default Value
active-color		#ed5b21
background-color		#d3d3d4
border-color		#22252a
handle-color		#ffffff
handle-outer-radius		'0.17'
handle-inner-radius		'0.13'
handle-outer-depth		'0.04'
handle-inner-depth		'0.02'
height	Height of item	1
hover-color		#606876
left-right-padding		'0.25'
margin	Margin around item	0 0 0 0
onclick	Javascript function to execute on click
onhover	Javascript function to execute on click
percent		'0.5'
slider-bar-depth		'0.03'
slider-bar-height		'0.05'
top-bottom-padding		'0.125'
width	Width of item	1

<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
checked		false
active		false
toggle	Toggle status	false
toggle-state	Setting the toggle toggle button on/off state	false

value		''
font-family	Font family for toggle button	''
font-size	Font size for toggle button	0.2
font-color	Text color for toggle button label	#d3d3d4
border-width		1
border-color	Border color of toggle button	#d3d3d4
background-color	Background color of toggle button	#22252a
hover-color	Background color when toggle button is in hover state	#2c3037
handle-color		#d3d3d4
active-color	Background color when toggle button is pressed down	#ed5b21

height	Height of toggle button	1
width	Width of toggle button	1
margin	Margin around toggle button	0 0 0 0

<a-gui-toggle
	width="2.5" height="0.75"
	onclick="testToggleAction"
	value="toggle label"
	font-family="assets/fonts/Plaster-Regular.ttf"
	font-size="0.2"
	margin="0 0 0.05 0"
>
</a-gui-toggle>

a-gui-vertical-slider Component

Properties

Property	Description	Default Value
active-color		#ed5b21
background-color		#d3d3d4
border-color		#22252a
handle-color		#ffffff
handle-outer-radius		0.17
handle-inner-radius		0.13
handle-outer-depth		0.04
handle-inner-depth		0.02
hover-color		#606876
hover-font-size	Font size of label indicating where user is hovering	0.2
hover-height	Height of label indicating where user is hovering	1.0
hover-margin	Margin of label indicating where user is hovering	1.0
hover-percent	Current percentage where user is hovering
hover-width	Width of label indicating where user is hovering	1.0
left-right-padding		0.25
margin	Margin around item	'0 0 0 0'
onclick	Javascript function to execute on click
onhover	Javascript function to execute on click
opacity	Transparency of the vertical slider background	1.0
output-font-size	Font size of label indicating output value	0.2
output-function	Name of function to calculate output value from percent
output-height	Height of label indicating output value	1.0
output-margin	Margin of label indicating output value	'0 0 0 0'
output-width	Width of label indicating output value	1.0
percent	Current selected slider value, from 0.0 to 1.0	0.5
slider-bar-depth		0.03
slider-bar-height		0.05
top-bottom-padding		0.125
height	Height of item	1
width	Width of item	1

<a-gui-slider 	
	width="2.5" height="0.75"
	onclick="slideActionFunction"
	percent="0.29"
	margin="0 0 0.05 0"
>
</a-gui-slider>

c-frame/aframe-gui

aframe-gui

Examples

Use in your AFrame project

Building

Run locally

Components

a-gui-flex-container Component

Properties

a-gui-cursor Component

Properties

Example without fuse/gaze trigger (click trigger):

a-gui-button Component

Properties

a-gui-circle-loader Component

Properties

a-gui-circle-timer Component

Properties

a-gui-icon-button Component

Properties

a-gui-icon-label-button Component

Properties

a-gui-input Component

Properties

a-gui-label Component

Properties

a-gui-progress-bar Component

Properties

a-gui-radio Component

Properties

a-gui-slider Component

Properties

a-gui-toggle Component

Properties

a-gui-vertical-slider Component

Properties