aframe-babia-components
Version:
A data visualization set of components for A-Frame.
343 lines (297 loc) • 13.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JetUML table - BabiaXR Experiment </title>
<meta name="description" content="BabiaXR Components Gallery using covid-19 data">
</meta>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
<script
src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
<script src="https://rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
<script src="https://supereggbert.github.io/aframe-htmlembed-component/dist/build.js"></script>
<script src="dist/aframe-lounge-component.min.js"></script>
<script
src="https://unpkg.com/@editvr/aframe-dialog-popup-component@1.7.3/dist/aframe-dialog-popup-component.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
<style>
h1 {
color: #AAAAAA;
font-family: 'Archivo', sans-serif;
font-size: 45px;
text-align: center;
text-shadow: black 0.1em 0.1em 0.2em
}
p {
color: #444444;
font-family: 'Archivo', sans-serif;
font-size: 26px;
text-align: justify;
text-shadow: #AAAAAA 0.1em 0.1em 0.2em
}
</style>
</head>
<body>
<a-scene id="scene" light="defaultLightsEnabled: false">
<!-- Assets -->
<a-assets>
<img id="sky" src="assets/360-panorama.jpg">
<img id="floor" src="assets/floor-texture.jpg">
<img id="metalic" src="assets/metalic-texture.jpg">
</a-assets>
<!-- Querier Components -->
<a-entity id="jetumldata" babia-queryjson="url: ./data/jetuml_code_data_2.1_release.json;"></a-entity>
<a-entity id="jetumlcity" babia-treebuilder="field: file_path; split_by: /; from: jetumldata"></a-entity>
<!-- Enviroment -->
<a-sky src="#sky"></a-sky>
<!-- Information popup -->
<a-entity babia-lookat="[camera]" position="4.5 -1 -1.5" rotation="0 180 0"
geometry="primitive: plane; width: 4.2; height: 5.5" material="color: white">
<a-entity
text="value: Scene controls; color: black; font: mozillavr; wrapCount: 30; width: 3.6; baseline: top; anchor: left"
position="-1.8 2.6 0.01"></a-entity>
<a-entity
text="value: Use the WASD keys to move.
\n The fly mode is activated, so if you go forward (W) or backward (S) you will fly to the 'look' direction
\n To move the angle of the camera, click on the scene and move the mouse, following an orbital movement.
\n There are no limits outside the lounge, so please, don't fly far away from the city.
\n To interact with the city, just click/hover on the buildings/quarters (more information in the below panel)
\n If you wan to reset the view, just refresh (F5) the page.
; color: black; wrapCount: 30; width: 3.6; baseline: top; anchor: left"
position="-1.8 2 0.01"></a-entity>
</a-entity>
<!-- <a-entity id="navbarpopup" position="2 -1 -5" dialog-popup="
openIconImage: ../assets/info.jpg;
closeIconImage: ../assets/close.jpg;
title: Welcome to the experiment;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 5;
body: \n First of all, make sure that you have activated the recording for the survey (Oculus Menu -> Share -> Record)
\n Please, measure the time that it will take you to answer the tasks
\n When ready, please, go to the 0 circle and click it!
\n Click on X button to close this information (you can reopen it clicking on the 'i' button);
" babia-lookat="[camera]"></a-entity>-->
<!-- Aframe Lounge -->
<a-entity id="lounge" position="5 0 0" lounge="width: 20; depth: 25; height: 11;
north: barrier;
floorTexture: assets/floor-texture.jpg">
<a-entity position="-0.7 0 4.5" lounge-plinth="width: 5.6; depth: 2.5; color: #A0841B" lounge-staydown>
<a-entity></a-entity>
</a-entity>
</a-entity>
<a-entity position="2.61 -5 4.45" scale="0.03 0.01 0.03" id="city"
babia-boats="height_building_legend: -0.5; legend_scale: 0.25; extra: 1; zone_elevation: 0.01; from: jetumlcity; area: num_funs; height: loc_per_function; color: ccn; height_quarter_legend_box: 1; height_quarter_legend_title: -3">
</a-entity>
<a-entity id="bardescription" position="8.2 -4.5 4.5" rotation="-30 0 0">
<!-- Close legends -->
<a-plane id="closelegends" babia-lookat="[camera]" class="babiaxraycasterclass" scale="0.8 0.8 0.8"
position="0 1.5 0" geometry="primitive: plane; width: 1.5; height: 0.5" color="#012752"
text="value: Close legends; color: white; align: center; wrapCount: 30; width: 3.6;"></a-plane>
<a-box src="#floor" height="2.2" width="2.2" depth="0.1" position="0 0 0"></a-box>
<a-box src="#metalic" height="2" width="2" depth="0.05" position="0 0 0.05"></a-box>
<a-entity htmlembed position="0 0.1 0.1" style="width: 480px; height: 500px;">
<h1>JetUML 2.1 - 2018</h1>
<p>Each building represents a file of the code, each quarter and the quarter level represents the folder tree that file belongs to, each building has 3 metrics</p>
<p>Metrics: </br>Area: Number of functions. Height: LoC per function. Color: CCN</p>
<p>Interaction: </br>Click/Over on a building to see the metrics, click on a quarter to see the folder</p>
</p>
</a-entity>
</a-entity>
<!-- Lights -->
<a-entity position="5 50 0" light="type: hemisphere; color: #CEE4F0; intensity: 1; groundColor: #454545">
</a-entity>
<!-- Controls and Camera -->
<a-entity lounge-entry-point>
<a-entity camera position="0 2 2" rotation="0 90 0" look-controls wasd-controls="fly: true"></a-entity>
<a-entity laser-controls raycaster="objects: .babiaxraycasterclass, #navbarpopup, .surveys, .surveys--close-icon, #navbarpopup--close-icon, #presurvey, #presurvey--close-icon,
#onesurvey, #onesurvey--close-icon,
#twosurvey, #twosurvey--close-icon,
#threesurvey, #threesurvey--close-icon,
#foursurvey, #foursurvey--close-icon,
#fivesurvey, #fivesurvey--close-icon,
#sixsurvey, #sixsurvey--close-icon,
#fivesurveyother, #fivesurveyother--close-icon,
#iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
<a-entity cursor="rayOrigin:mouse" raycaster="objects: .babiaxraycasterclass, .surveys, .surveys--close-icon,
#navbarpopup, #navbarpopup--close-icon,
#presurvey, #presurvey--close-icon,
#onesurvey, #onesurvey--close-icon,
#twosurvey, #twosurvey--close-icon,
#threesurvey, #threesurvey--close-icon,
#foursurvey, #foursurvey--close-icon,
#fivesurvey, #fivesurvey--close-icon,
#sixsurvey, #sixsurvey--close-icon,
#fivesurveyother, #fivesurveyother--close-icon,
#iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
</a-entity>
</a-scene>
<!-- Remove legends when clicking on close legends -->
<script>
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
document.getElementById("closelegends").addEventListener('click', function (event) {
let ewl = document.getElementById("city").components['babia-boats'].entitiesWithLegend
let newEwl = []
for (let i = 0; i < ewl.length; i++) {
newEwl.push(ewl[i])
}
for (let v = 0; v < newEwl.length; v++) {
newEwl[v].click()
}
}, false);
</script>
<style>
.gitlab-corner-wrapper {
overflow: hidden;
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0
}
.gitlab-corner {
position: absolute;
top: -16px;
right: -50px;
transform: rotate(45deg);
background: #548;
border: 44px solid #548;
border-bottom: none;
border-top: #548 solid 16px
}
.gitlab-corner svg {
width: 60px;
height: 60px;
margin-bottom: -4px
}
.cls-1 {
fill: #fc6d26
}
.cls-2 {
fill: #e24329
}
.cls-3 {
fill: #fca326
}
.gitlab-corner:hover .cls-1 {
animation: cycle .6s
}
.gitlab-corner:hover .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner:hover .cls-3 {
animation: cycleEnd .6s
}
@keyframes cycle {
100%,
15%,
60% {
fill: #fc6d26
}
30%,
75% {
fill: #e24329
}
45%,
90% {
fill: #fca326
}
}
@keyframes cycleMid {
100%,
15%,
60% {
fill: #e24329
}
30%,
75% {
fill: #fca326
}
45%,
90% {
fill: #fc6d26
}
}
@keyframes cycleEnd {
100%,
15%,
60% {
fill: #fca326
}
30%,
75% {
fill: #fc6d26
}
45%,
90% {
fill: #e24329
}
}
@media (max-width:500px) {
.gitlab-corner:hover .cls-1,
.gitlab-corner:hover .cls-2,
.gitlab-corner:hover .cls-3 {
animation: none
}
.gitlab-corner .cls-1 {
animation: cycle .6s
}
.gitlab-corner .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner .cls-3 {
animation: cycleEnd .6s
}
}
</style>
<div class="gitlab-corner-wrapper"><a href="https://gitlab.com/babiaxr/aframe-babia-components"
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>
</body>
</html>