aframe-gui
Version:
A-Frame GUI components
849 lines (801 loc) • 37.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI Keyboard</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="js/aframe-gui.js"></script>
<script src="js/gui-env.js"></script>
<script>
window.kbAbcLow = true;
window.kbAbcHigh = false;
window.kbNum = false;
window.kbChar = false;
var old_timestamp = null;
function toggleKb(kb){
if(window.kbAbcLow == kb){
var navkbSwitch = document.getElementById("navkbSwitch");
navkbSwitch.components['gui-button'].setText('123');
// navkbSwitch.components['gui-interactable'].setClickAction('switchKbToNum');
switchKbToAbcLow();
}else if(window.kbAbcHigh == kb){
var navkbSwitch = document.getElementById("navkbSwitch");
navkbSwitch.components['gui-button'].setText('123');
// navkbSwitch.components['gui-interactable'].setClickAction('switchKbToNum');
switchKbToAbcHigh();
}else if(window.kbNum == kb){
var navkbSwitch = document.getElementById("navkbSwitch");
navkbSwitch.components['gui-button'].setText('Abc');
// navkbSwitch.components['gui-interactable'].setClickAction('switchKbToAbcLow');
switchKbToNum();
}else if(window.kbChar == kb){
var navkbSwitch = document.getElementById("navkbSwitch");
navkbSwitch.components['gui-button'].setText('Abc');
// navkbSwitch.components['gui-interactable'].setClickAction('switchKbToAbcLow');
switchKbToChar();
}
}
function switchKbToNum() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
console.log(" - switchKbToNum");
keyboardAbcLow.setAttribute('position','0 -10 -1');
keyboardAbcHigh.setAttribute('position','0 -10 -1');
keyboardChar.setAttribute('position','0 -10 -1');
keyboardNum.setAttribute('position','0 0 0');
keyboardAbcLow.setAttribute('visible',false);
keyboardAbcHigh.setAttribute('visible',false);
keyboardChar.setAttribute('visible',false);
keyboardNum.setAttribute('visible',true);
}
function switchKbToChar() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
console.log(" - switchKbToChar");
keyboardAbcLow.setAttribute('position','0 -10 -1');
keyboardAbcHigh.setAttribute('position','0 -10 -1');
keyboardNum.setAttribute('position','0 -10 -1');
keyboardChar.setAttribute('position','0 0 0');
keyboardAbcLow.setAttribute('visible',false);
keyboardAbcHigh.setAttribute('visible',false);
keyboardNum.setAttribute('visible',false);
keyboardChar.setAttribute('visible',true);
}
function switchKbToAbcHigh() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
console.log(" - switchKbToAbcHigh");
keyboardAbcLow.setAttribute('position','0 -10 -1');
keyboardNum.setAttribute('position','0 -10 -1');
keyboardChar.setAttribute('position','0 -10 -1');
keyboardAbcHigh.setAttribute('position','0 0 0');
keyboardAbcLow.setAttribute('visible',false);
keyboardNum.setAttribute('visible',false);
keyboardChar.setAttribute('visible',false);
keyboardAbcHigh.setAttribute('visible',true);
}
function switchKbToAbcLow() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
console.log(" - switchKbToAbcLow");
keyboardAbcHigh.setAttribute('position','0 -10 -1');
keyboardNum.setAttribute('position','0 -10 -1');
keyboardChar.setAttribute('position','0 -10 -1');
keyboardAbcLow.setAttribute('position','0 0 0');
keyboardNum.setAttribute('visible',false);
keyboardChar.setAttribute('visible',false);
keyboardAbcHigh.setAttribute('visible',false);
keyboardAbcLow.setAttribute('visible',true);
}
</script>
</head>
<body>
<a-scene gui-env>
<a-assets>
<a-asset-item id="iconfontsolid" src="assets/fonts/fa-solid-900.ttf"></a-asset-item>
<a-asset-item id="iconfontbrand" src="assets/fonts/fa-brands-400.ttf"></a-asset-item>
<a-asset-item id="textfont1" src="assets/fonts/PermanentMarker-Regular.ttf"></a-asset-item>
<a-asset-item id="textfont2" src="assets/fonts/PressStart2P-Regular.ttf"></a-asset-item>
<a-asset-item id="textfont3" src="assets/fonts/Plaster-Regular.ttf"></a-asset-item>
<a-asset-item id="textfont4" src="assets/fonts/DiplomataSC-Regular.ttf"></a-asset-item>
</a-assets>
<!-- <a-entity geometry="primitive: box; width:5; height:2; depth:0.01;" position="0 3 -4" material="shader: html; target: #htmlElement; fps:1;"></a-entity> -->
<a-gui-flex-container
id="flex"
flex-direction="column" justify-content="center" align-items="middle" component-padding="0.1"
opacity="0.7" width="4.5" height="1.8"
position="0 3 -4" rotation="0 0 0"
> <a-gui-input id="test_input"
width="4" height="0.7"
onclick="testInputAction"
value=""
font-color="#212121"
border-color="#212121"
border-hover-color="#424242"
background-color="#FAFAFA"
hover-color="#F5F5F5"
active-color="#FFEB3B"
>
</a-gui-input>
</a-gui-flex-container>
<a-entity position="0 0.75 -4" rotation="-15 0 0">
<a-entity id="keyboardNum" visible="false" position="0 -10 -1">
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0.5 0"
>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:1;"
gui-button=" text:1; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:2;"
gui-button=" text:2; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:3;"
gui-button=" text:3; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:4;"
gui-button=" text:4; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:5;"
gui-button=" text:5; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:6;"
gui-button=" text:6; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:7;"
gui-button=" text:7; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:8;"
gui-button=" text:8; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:9;"
gui-button=" text:9; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; key:0;"
gui-button=" text:0; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="-"
value="-" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="/"
value="/" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=":"
value=":" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=";"
value=";" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="("
value="(" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=")"
value=")" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="$"
value="$" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="&"
value="&" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="@"
value="@" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key='"'
value='"' font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 -0.5 0"
>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: switchKb2; keyCode:17;"
gui-button=" text:#+=; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="."
value="." font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=","
value="," font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="?"
value="?" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="!"
value="!" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="'"
value="'" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: keypress; key:Backspace;"
gui-icon-label-button="icon:f55a; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
</a-entity>
<a-entity id="keyboardChar" visible="false" position="0 -10 -1">
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0.5 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="["
value="[" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="]"
value="]" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="{"
value="{" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="}"
value="}" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="#"
value="#" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="%"
value="%" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="^"
value="^" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="*"
value="*" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="+"
value="+" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="="
value="=" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="_"
value="_" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="\"
value="\" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="|"
value="|" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="~"
value="~" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="<"
value="<" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=">"
value=">" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; keyCode:69;" euro
gui-button=" text:€; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; keyCode:76;" pound_sterling
gui-button=" text:char#163; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; keyCode:89;" yen_sign
gui-button=" text:char#165; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: keypress; keyCode:8226;" bullet
gui-button="text:char#8226; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 -0.5 0"
>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: switchKb2; keyCode:17;"
gui-button="text:123; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="."
value="." font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key=","
value="," font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="?"
value="?" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="!"
value="!" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="*"
value="(" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: keypress; key:Backspace;"
gui-icon-label-button="icon:f55a; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
</a-entity>
<a-entity id="keyboardAbcHigh" visible="false" position="0 -10 -1">
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0.5 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="Q"
value="Q" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="W"
value="W" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="E"
value="E" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="R"
value="R" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="T"
value="T" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="Y"
value="Y" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="U"
value="U" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="I"
value="I" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="O"
value="O" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="P"
value="P" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="A"
value="A" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="S"
value="S" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="D"
value="D" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="F"
value="F" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="G"
value="G" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="H"
value="H" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="J"
value="J" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="K"
value="K" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="L"
value="L" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 -0.5 0"
>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: switchKbToAbcLow; keyCode:16;" id="shiftDown"
gui-icon-label-button="icon:f063; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="Z"
value="Z" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="X"
value="X" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="C"
value="C" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="V"
value="V" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="B"
value="B" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="N"
value="N" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="M"
value="M" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: keypress; key:Backspace;"
gui-icon-label-button="icon:f55a; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
</a-entity>
<a-entity id="keyboardAbcLow" visible="true" position="0 0 0">
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0.5 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="q"
value="q" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="w"
value="w" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="e"
value="e" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="r"
value="r" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="t"
value="t" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="y"
value="y" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="u"
value="u" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="i"
value="i" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="o"
value="o" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="p"
value="p" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 0 0"
>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="a"
value="a" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="s"
value="s" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="d"
value="d" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="f"
value="f" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="g"
value="g" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="h"
value="h" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="j"
value="j" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="k"
value="k" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="l"
value="l" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
</a-entity>
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 -0.5 0"
>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: switchKbToAbcHigh; keyCode:16;" id="shiftUp"
gui-icon-label-button="icon:f062; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="z"
value="z" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="x"
value="x" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="c"
value="c" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="v"
value="v" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="b"
value="b" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="n"
value="n" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-gui-button width="0.5" height="0.5"
onclick="keypress" key="m"
value="m" font-family="assets/fonts/PressStart2P-Regular.ttf"
></a-gui-button>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: keypress; key:Backspace;"
gui-icon-label-button="icon:f55a; iconFont:assets/fonts/fa-solid-900.ttf; text:; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
</a-entity>
<a-entity id="keyboardNav">
<a-entity gui-item="type: flex-container; width: 5.25; height: 0.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: normal; componentPadding: 0.1; opacity: 0.7"
position="0 -1 0"
>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;" id="navkbSwitch"
gui-interactable="clickAction: switchKb; keyCode:9;"
gui-button=" text:123; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.5; height: 0.5;"
gui-interactable="clickAction: voicecontrol;"
gui-icon-label-button="icon:f130; iconFont:assets/fonts/fa-solid-900.ttf; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 3; height: 0.5;"
gui-interactable="clickAction: keypress; keyCode:32;" id="space"
gui-button=" text:space; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
<a-entity gui-item="type: button; width: 0.75; height: 0.5;"
gui-interactable="clickAction: enter; keyCode:13;" id="enter"
gui-button=" text:Go; fontFamily:assets/fonts/PressStart2P-Regular.ttf;"
></a-entity>
</a-entity>
</a-entity>
</a-entity>
<!-- 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"
design="ring"
>
</a-gui-cursor> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="htmlElement" style="background: #fff; color:#000; font-size: 60px; width:1500px; height: 600px;"></div>
</div>
</a-scene>
<script type="text/javascript">
window.switchKb = function() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
if( keyboardAbcLow.getAttribute('position').y == 0){
window.kbAbcLow = false;
window.kbAbcHigh = false;
window.kbNum = true;
window.kbChar = false;
toggleKb(window.kbNum);
}else{
window.kbAbcLow = true;
window.kbAbcHigh = false;
window.kbNum = false;
window.kbChar = false;
toggleKb(window.kbAbcLow);
}
}
window.switchKb2 = function() {
var keyboardAbcLow = document.getElementById("keyboardAbcLow");
var keyboardAbcHigh = document.getElementById("keyboardAbcHigh");
var keyboardNum = document.getElementById("keyboardNum");
var keyboardChar = document.getElementById("keyboardChar");
if(old_timestamp == null || old_timestamp + 100 < event.timeStamp){ //prevent multiple clicks when using keyboard
if( keyboardNum.getAttribute('position').y == 0){
window.kbAbcLow = false;
window.kbAbcHigh = false;
window.kbNum = false;
window.kbChar = true;
toggleKb(window.kbChar);
}else{
window.kbAbcLow = false;
window.kbAbcHigh = false;
window.kbNum = true;
window.kbChar = false;
toggleKb(window.kbNum);
}
old_timestamp = event.timeStamp;
}
}
window.addEventListener("keyup", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.keyCode) {
case 16: // shift
console.log("shift key release");
document.getElementById("shiftDown").emit('click');
break;
default:
return; // Quit when this doesn't handle the key event.
}
event.preventDefault();
}, true);
window.keyCodeToChar = {8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Ctrl",18:"Alt",19:"Pause/Break",20:"Caps Lock",27:"Esc",32:"Space",33:"Page Up",34:"Page Down",35:"End",36:"Home",37:"Left",38:"Up",39:"Right",40:"Down",45:"Insert",46:"Delete",48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",65:"A",66:"B",67:"C",68:"D",69:"E",70:"F",71:"G",72:"H",73:"I",74:"J",75:"K",76:"L",77:"M",78:"N",79:"O",80:"P",81:"Q",82:"R",83:"S",84:"T",85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",91:"Windows",93:"Right Click",96:"Numpad 0",97:"Numpad 1",98:"Numpad 2",99:"Numpad 3",100:"Numpad 4",101:"Numpad 5",102:"Numpad 6",103:"Numpad 7",104:"Numpad 8",105:"Numpad 9",106:"Numpad *",107:"Numpad +",109:"Numpad -",110:"Numpad .",111:"Numpad /",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"Num Lock",145:"Scroll Lock",182:"My Computer",183:"My Calculator",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"};
window.keypress = function(event) {
console.log('in window.keypress');
if(window.old_timestamp == null || window.old_timestamp + 100 < event.timeStamp){ //prevent multiple clicks when using keyboard
var keyCode = 222;
var key = null;
var text = null;
if(event.target.parentEl.components['gui-interactable']){
console.log('using parent el: ' + event.target.parentEl.id);
keyCode = event.target.parentEl.components['gui-interactable']['data']['keyCode'];
key = event.target.parentEl.components['gui-interactable']['data']['key'];
var buttonComponent = event.target.parentEl.components['gui-button'];
var iconButtonComponent = event.target.parentEl.components['gui-icon-button'];
var iconLabelButtonComponent = event.target.parentEl.components['gui-icon-label-button'];
if (buttonComponent) {
text = buttonComponent['data']['text'];
} else if (iconButtonComponent) {
text = iconButtonComponent['data']['text'];
} else if (iconLabelButtonComponent) {
text = iconLabelButtonComponent['data']['text'];
}
console.log("keyCode: " + keyCode);
console.dir(event.target.parentEl.components['gui-interactable']['data']['keyCode']);
console.log("keypressed with button: " + keyCode);
} else {
console.log('using el: ' + event.target.parentEl.id);
keyCode = event.target.components['gui-interactable']['data']['keyCode'];
key = event.target.components['gui-interactable']['data']['key'];
var buttonComponent = event.target.components['gui-button'];
var iconButtonComponent = event.target.components['gui-icon-button'];
var iconLabelButtonComponent = event.target.components['gui-icon-label-button'];
if (buttonComponent) {
text = buttonComponent['data']['text'];
} else if (iconButtonComponent) {
text = iconButtonComponent['data']['text'];
} else if (iconLabelButtonComponent) {
text = iconLabelButtonComponent['data']['text'];
}
console.log("keypressed with keyboard: " + keyCode);
}
//var textField = document.getElementById("htmlElement");
//textField.textContent += window.keyCodeToChar[keyCode];
// var char = window.keyCodeToChar[keyCode];
if (!text) {
text = String.fromCharCode(keyCode);
if (keyCode >= 65 || keyCode <= 90) {
text = text.toLowerCase();
}
}
var textField = document.getElementById("test_input");
if (key === 'Backspace') {
textField.components['gui-input'].delete();
} else if (text === 'space') {
textField.components['gui-input'].appendText(' ');
} else {
textField.components['gui-input'].appendText(text);
}
window.old_timestamp = event.timeStamp;
}
}
window.voicecontrol = function() {
console.log("voicecontrol");
}
window.enter = function() {
console.log("enter");
}
</script>
</body>
</html>