aframe-babia-components
Version:
A data visualization set of components for A-Frame.
453 lines (399 loc) • 18.9 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="argoumldata" babia-queryjson="url: ./data/jetuml_code_data.json;"></a-entity>
<a-entity id="jetumlcity" babia-treebuilder="field: file_path; split_by: /; from: argoumldata"></a-entity>
<!-- Enviroment -->
<a-sky src="#sky"></a-sky>
<!-- Information popup -->
<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 the supervisor acitvated the recording (voice and screen).
\n In the information panel close to the city you will see details of how to interact with it and the project and metrics that it shows.
\n If you want to reset the camera, you can hold the Oculus Button.
\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 by clicking on the 'i' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="presurvey" class=".surveys" position="7 0 -6" dialog-popup="
openIconImage: ../assets/0.png;
closeIconImage: ../assets/close.jpg;
title: Demographics survey;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 9;
body: Please, answer the questions talking the question and the answer clear and high
\n Contact email address (not required, for future experiments)
\n Age (for statistical purposes only)
\n Job position (i.e, developer, researcher, project manager, etc.)
\n Experience level in (None, Beginner, Knowledgeable, Advanced, Expert): Object-oriented programming, Procedural programming, Functional programming, Reverse engineering, Using a programming IDE (Pycharm, Eclipse, Visual Studio)
\n Number of years of (Less than 1, 1-3, 4-5, 7-10, 10+): Object-oriented programming, Procedural programming, Functional programming, Reverse engineering, Using a programming IDE (Pycharm, Eclipse, Visual Studio)
\n Are you familiar with JetUML?
\n Have you ever used a Virtual Reality headset (e.g., Oculus)?
\n Click on X button to close this survey and go to the 1 button when finished(you can reopen it by clicking on '0' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="onesurvey" position="8 0 -5.5" dialog-popup="
openIconImage: ../assets/1.png;
closeIconImage: ../assets/close.jpg;
title: Task 1;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: 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 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 2 button when finished (you can reopen it by clicking on '1' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="twosurvey" position="9 0 -5" dialog-popup="
openIconImage: ../assets/2.png;
closeIconImage: ../assets/close.jpg;
title: Task 2;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: Please, answer the questions talking the question and the answer clear and high
\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 Finding them 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 3 button when finished (you can reopen it by clicking on '2' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="threesurvey" position="10 0 -4.5" dialog-popup="
openIconImage: ../assets/3.png;
closeIconImage: ../assets/close.jpg;
title: Task 3;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: Please, answer the questions talking the question and the answer clear and high.
\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 Finding them 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 4 button when finished (you can reopen it by clicking on '3' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="foursurvey" position="11 0 -4" dialog-popup="
openIconImage: ../assets/4.png;
closeIconImage: ../assets/close.jpg;
title: Task 4;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.7;
body: Please, answer the questions talking the question and the answer clear and high.
\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 them 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 4 button when finished (you can reopen it by clicking on '3' button);
" babia-lookat="[camera]"></a-entity>
<a-entity id="fivesurvey" position="12 0 -3.5" dialog-popup="
openIconImage: ../assets/5.png;
closeIconImage: ../assets/close.jpg;
title: Task 5;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: Please, answer the questions talking the question and the answer clear and high
\n For answering this task, you have to go here (ask your supervisor if you have any problem):
\n https://tinyurl.com/jetuml2018
\n The scene shows the same city but in an older snapshot and start and click on the button '5'.
" babia-lookat="[camera]">
<a-plane id="redirectscene" scale="1.2 1.2 1.2" visible="false" babia-lookat="[camera]"
class="babiaxraycasterclass" position="0 -1.5 1.5" geometry="primitive: plane; width: 1.8; height: 0.5"
color="#611d00"
text="value: Click here to go!; color: white; align: center; wrapCount: 30; width: 3.6;"></a-plane>
</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="-1 0 3.9" lounge-plinth="width: 6.2; depth: 3.5" lounge-staydown>
<a-entity></a-entity>
</a-entity>
</a-entity>
<a-entity position="2.2 -5 3.8" 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 Mar 25 - 2021</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);
}
}
let redirectButton = document.getElementById("redirectscene");
document.getElementById("fivesurvey").addEventListener('click', function (event) {
console.log(event)
if (event.target.id === "fivesurvey--close-icon") {
redirectButton.setAttribute("visible", "false")
} else if (event.target.id === "fivesurvey") {
redirectButton.setAttribute("visible", "true")
}
}, false);
redirectButton.addEventListener('click', function (event) {
if (redirectButton.getAttribute("visible")) {
window.location.replace("https://tinyurl.com/jetuml2018")
}
}, false);
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>