aframe-babia-components
Version:
A data visualization set of components for A-Frame.
348 lines (303 loc) • 13.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JetUML - 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 id="fivesurvey" position="2 0 -5" dialog-popup="
openIconImage: ../assets/5.png;
closeIconImage: ../assets/close.jpg;
title: Task 5;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: #806A18;
bodyFont: roboto;
dialogBoxHeight: 9;
body: \n Please, answer the questions talking the question and the answer clear and high
\n Locate all the test code (file and directory) of the system and identify their position in the city. Where is the location of the files/directories?. Select them and say where they are.
\n Find the three source code files (not testing files) with the highest number of functions (num_funs) in the system. Say their names in order.
\n Find the three source code files (not testing files) with the highest lines of code per function (loc_per_function) in the system. Say their names in order.
\n Find the three source code files (not testing files) with the highest cyclomatic complexity number (highest ccn). Say their names in order.
\n Finding it was difficult: 'strongly agree, agree, don’t know, disagree, strongly disagree'. Say your choice.
\n Click on X button to close this survey and go to the 6 button when finished (you can reopen it clicking on '5' button)
" babia-lookat="[camera]"></a-entity>
<a-entity id="sixsurvey" class=".surveys" position="7 0 -6" dialog-popup="
openIconImage: ../assets/6.png;
closeIconImage: ../assets/close.jpg;
title: Final Survey;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 5.7;
body: Please, answer the questions talking the question and the answer clear and high
\n After your experience with the cities and the metrics that it shows, identify what represents for you the core of the JetUML project. Select the location and say where it is.
\n Did you find it difficult to understand the experiment? (In that case, why?)
\n What device did you use for the experiment? (i.e. computer, Oculus, etc).
\n Any other suggestion/comment?
\n When finished, let the supervisor know.
\n Thank you very much!
" 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.5">
</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 code file of the project, 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 path</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: false"></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>