aframe-babia-components
Version:
A data visualization set of components for A-Frame.
127 lines (117 loc) • 6.72 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Babia components</title>
<meta name="description" content="Bubble example for A-Charts component." />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/aframe-tooltip-component/dist/aframe-tooltip-component.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
<link rel="stylesheet" href="../../assets/gitlab-corner.css">
</head>
<body>
<a-scene background="color: #A8F3FF" id="AframeScene">
<a-entity environment="playArea: 2"></a-entity>
<a-light type="point" intensity="1" position="-10 20 30"></a-light>
<!-- Queriers and filters -->
<a-entity id="data1" babia-queryjson="url: ./data.json;"></a-entity>
<a-entity id="data2" babia-queryjson="url: ./data2.json;"></a-entity>
<a-entity id="filter1" babia-filter="from: data1; filter: author=David" ></a-entity>
<!-- Visualizer -->
<a-entity id="graph"
babia-filter="from: data1; filter: date=19/02/2021"
babia-bars='legend: true; x_axis: author; height: contributions; heightMax: 10'
position="-3 0 0" rotation="0 0 0" scale="0.3 0.3 0.3"></a-entity>
<!-- Interface -->
<a-entity id="interface" babia-ui="target: graph"
position="3 0 2" scale="0.2 0.2 0.2" ></a-entity>
<!-- Camera -->
<a-entity id ="cameraRig" position="0 0.1 5">
<a-entity id="head" camera look-controls
wasd-controls="fly: false">
</a-entity>
<!-- Hand Controls -->
<a-entity id="leftHand" teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; collisionEntities: .environmentGround;
hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; button: trigger"
oculus-touch-controls="hand: left">
<a-entity id="tooltip_trigger_L" class="tips" tooltip="text: Teleport; width: 0.07; height: 0.03; targetPosition: 0.002 -0.02 -0.014; lineHorizontalAlign: right; rotation: -90 0 0; src:assets/tooltip.png"
position="-0.09 -0.04 -0.08"></a-entity>
<a-entity id="tooltip_grip_L" class="tips" tooltip="text: Open/Close \nMenu; width: 0.08; height: 0.04; targetPosition: 0.006 -0.008 0.033; rotation: -90 0 0; src:assets/tooltip.png"
position="0.085 -0.01 0.07"></a-entity>
</a-entity>
<a-entity id="rightHand"
oculus-touch-controls="hand: right" laser-controls="hand: right" raycaster="objects: .babiaxraycasterclass">
<a-entity id="tooltip_trigger_R" class="tips" tooltip="text: Click; width: 0.07; height: 0.03; targetPosition: 0.005 -0.02 -0.014; lineHorizontalAlign: left; rotation: -90 0 0; src:assets/tooltip.png"
position="0.09 -0.04 -0.08"></a-entity>
<a-entity id="tooltip_grip_R" class="tips" tooltip="text: Open/Close \nTips; width: 0.08; height: 0.04; targetPosition: -0.006 -0.008 0.033; rotation: -90 0 0; lineHorizontalAlign: right; src:assets/tooltip.png"
position="-0.085 -0.01 0.07"></a-entity>
</a-entity>
<a-entity id ="cursor" cursor="rayOrigin:mouse" raycaster="objects: .babiaxraycasterclass"></a-entity>
</a-entity>
</a-scene>
<!-- GITLAB CORNER-->
<div class="gitlab-corner-wrapper"><a href="https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/examples/ui/oculus/index.html" class="gitlab-corner"
aria-label="View source on GitLab"><svg id="logo_art" data-name="logo art" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 586 559">
<g id="g44">
<path id="path46" class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39" />
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z" />
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z" />
</g>
<g id="g64">
<path id="path66" class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z" />
</g>
<g id="g72">
<path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z" />
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z" />
</g>
<g id="g80">
<path id="path82" class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z" />
</g>
<g id="g84">
<path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z" />
</g>
</svg></a></div>
<script>
let tips_opened = false;
let tooltips = document.querySelectorAll('.tips')
tooltips.forEach(tip => {
tip.setAttribute('visible', false)
});
let hand_right = document.getElementById('rightHand')
document.addEventListener('controllerconnected', (event) => {
tips_opened = true;
tooltips.forEach(tip => {
tip.setAttribute('visible', true)
});
});
// presionar boton para ocultar tips
hand_right.addEventListener('gripdown', function(evt){
if (tips_opened){
tips_opened = false
tooltips.forEach(tip => {
tip.setAttribute('visible', false)
});
} else {
tips_opened = true
tooltips.forEach(tip => {
tip.setAttribute('visible', true)
});
}
})
</script>
</body>
</html>