aframe-gui
Version:
A-Frame GUI components
194 lines (175 loc) • 5.52 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI Eye Test</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<style type="text/css">
@font-face{
font-family:"Ionicons";
src:url("assets/fonts/ionicons.eot?v=2.0.1");
src:url("assets/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("assets/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("assets/fonts/ionicons.woff?v=2.0.1") format("woff"),url("assets/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
font-weight:normal;
font-style:normal
}
body{font-family:Ionicons;}
.visuallyhidden {
position: absolute;
display: block;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
}
</style>
<script src="js/aframe-gui.js"></script>
<script src="js/gui-env.js"></script>
</head>
<body>
<a-scene gui-env>
<a-assets>
<img id="snellen_chart" src="assets/snellen_chart.png">
<a-asset-item id="iconfont" src="assets/fonts/ionicons.ttf"></a-asset-item>
<a-asset-item id="fontfamily" src="https://fonts.googleapis.com/css?family=Fira+Sans"></a-asset-item>
</a-assets>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="1" height="2.25"
position="2 1.6 -4" rotation="0 0 0"
>
<a-gui-label width="1" height="0.5"
value="Size"
font-family="Arial"
>
</a-gui-label>
<a-gui-icon-button
width="0.5" height="0.5"
onclick="sizeUp" key-code="87"
icon="android-arrow-up"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.5" height="0.5"
onclick="sizeDown" key-code="88"
icon="android-arrow-down"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.5" height="0.5"
onclick="sizeSubmit" key-code="76"
icon="checkmark"
>
</a-gui-icon-button>
</a-gui-flex-container>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="1" height="1.75"
position="-2 0.75 -4" rotation="-45 0 0"
>
<a-gui-label width="1" height="0.5"
value="Dist."
font-family="Arial"
>
</a-gui-label>
<a-gui-icon-button
width="0.5" height="0.5"
onclick="backDown" key-code="68"
icon="android-arrow-up"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.5" height="0.5"
onclick="closeUp" key-code="65"
icon="android-arrow-down"
>
</a-gui-icon-button>
</a-gui-flex-container>
<a-entity id="chart"
geometry="primitive:plane; height:1; width:1;"
material="src:#snellen_chart; transparent:true;"
position="0 1.6 -6"
rotation="0 0 0"
>
<a-box id="size"
width="0.55" height="0.01" depth="0.001" color="#DC2531" position="0 -0.01 -0.01">
<a-box width="0.04" height="0.04" depth="0.04" color="#DC2531" rotation="0 0 45" position="-0.275 0 0"></a-box>
<a-box width="0.04" height="0.04" depth="0.04" color="#DC2531" rotation="0 0 45" position="0.275 0 0"></a-box>
<a-box width="0.1" height="0.01" depth="0.04" color="#DC2531" rotation="0 0 0" position="-0.225 0 0"></a-box>
</a-box>
</a-entity>
<!-- Camera + cursor. -->
<a-entity id="cameraRig" position="0 1.6 0">
<a-camera look-controls="pointerLockEnabled:true" wasd-controls="enabled:false"position="0 0 0">
<a-gui-cursor id="cursor"
raycaster="objects: [gui-interactable]"
fuse="false"
design="ring"
>
</a-gui-cursor> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
</a-scene>
<script>
window.value = -6;
window.closest = -1;
window.farthest = -6;
window.increment = 0.2;
window.position = '0 1.6 -1';
var i = 4; // init size center
window.sizeState = {
1:"0 0.192 -0.01",
2:"0 0.1 -0.01",
3:"0 0.04 -0.01",
4:"0 -0.01 -0.01",
5:"0 -0.045 -0.01",
6:"0 -0.07 -0.01",
7:"0 -0.116 -0.01",
8:"0 -0.148 -0.01",
9:"0 -0.185 -0.01",
10:"0 -0.212 -0.01",
11:"0 -0.237 -0.01",
}
console.log('Object.keys(window.sizeState).length ' + Object.keys(window.sizeState).length);
window.sizeDown = function() { // mobile keycode 87
if(i < Object.keys(window.sizeState).length){
i++;
var size = document.getElementById("size");
size.setAttribute('position', window.sizeState[i]);
}
console.log('pressed sizeDown ' + i);
}
window.sizeUp = function() { // mobile keycode 88
if(i > 1){
i--;
var size = document.getElementById("size");
size.setAttribute('position', window.sizeState[i]);
}
console.log('pressed sizeUp' + i);
}
window.sizeSubmit = function() { // mobile keycode 76
console.log('pressed sizeSubmit');
}
window.closeUp = function() { // mobile keycode 68
if (value <= -1){
value += increment;
window.position = '0 1.6 '+value;
var chart = document.getElementById("chart");
chart.setAttribute('position', window.position );
}
console.log('pressed closeUp '+window.position);
}
window.backDown = function() { // mobile keycode 65
if (value >= -6){
value -= increment;
window.position = '0 1.6 '+value;
var chart = document.getElementById("chart");
chart.setAttribute('position', window.position );
}
console.log('pressed backDown '+window.position);
}
</script>
</body>
</html>