aframe-babia-components
Version:
A data visualization set of components for A-Frame.
535 lines (467 loc) • 24.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JetUML 2021 | BabiaXR Experiment</title>
<meta name="description" content="BabiaXR Components Gallery using covid-19 data">
</meta>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.1.0/dist/aframe-extras.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="./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/textures/360-panorama.jpg">
<img id="floor" src="../../assets/textures/floor-texture.jpg">
<img id="metalic" src="../../assets/textures/metalic-texture.jpg">
</a-assets>
<!-- Querier Components -->
<a-entity id="argoumldata" babia-queryjson="url: ./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 rotation="0 -90 0" position="6 2.8 6.5" scale="0.2 0.2 0.2">
<a-entity id="navbarpopup" position="11 1 -5.5" babia-lookat="[laser-controls]"
dialog-popup="
openIconImage: ../../assets/popups/info.jpg;
closeIconImage: ../../assets/popups/close.jpg;
title: Welcome!;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 8.5;
body: \n In this experiment we want to assess whether it is better to navigate 3D visualizations on-screen or using Virtual Reality (VR) headsets. \n Below on your left you see a 3D representation of JetUML using the City metaphor. If you want to know more, please read the legend on the right of the city. \n
= CONTROLS AND INTERACTIONS \n Look around with your Virtual Reality (VR) headset and walk in the room to explore the city. \n To show a tooltip with additional information on a building, point on it with the cursor. If you press the trigger after pointing on a building, the tooltip will remain open. To show information on a quarter, you need to point on it and press the trigger. To close all tooltips, you can press the dedicated button above the legend on the right. \n To reset the view, please press and hold the Oculus Button. \n
= START THE EXPERIMENT \n Please make sure that your supervisor acitvated both voice and screen recording. When you are ready, close this information dialog by hitting the (X) and press the trigger on the button labeled with (0). Remember that the city is on your left; ">
</a-entity>
<!-- \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) -->
<a-entity id="presurvey" position="7 0 -6" dialog-popup="
openIconImage: ../../assets/popups/0.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 0 - Demographics;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 9.2;
body: From now on, for the whole duration of the experiment, you are kindly requested to speak aloud. Please read aloud all the questions and provide all the answers loud and clear.\n
- How old are you? \n
- What's your current position? (e.g., student, developer, researcher, project manager) \n
- Please provide your experience level (i.e., None, Beginner, Knowledgeable, Advanced, Expert) in... \n 1) Programming \n 2) Using an IDE (e.g., Pycharm, Eclipse, Visual Studio) \n
- How many years of experience (i.e., Less than 1, 1-3, 4-5, 7-10, 10+) do you have in... \n 1) Programming \n 2) Using an IDE (e.g., Pycharm, Eclipse, Visual Studio) \n
- Are you familiar with JetUML? (i.e., None, Beginner, Knowledgeable, Advanced, Expert) \n
- Experience with Software Visualization? (i.e., None, Beginner, Knowledgeable, Advanced, Expert) \n
- Do you have experience with Virtual Reality (VR) Headsets (e.g., Oculus)? (i.e., None, Beginner, Knowledgeable, Advanced, Expert) \n
Close this Task by pressing the (X) button and go to Task (1);
" babia-lookat="[laser-controls]"></a-entity>
<a-entity id="onesurvey" position="8.5 0 -6" dialog-popup="
openIconImage: ../../assets/popups/1.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 1;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud.
\n Explore the city to locate all the test code (i.e., files and directories) of the system. \n
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (2);
" babia-lookat="[laser-controls]"></a-entity>
<a-entity id="twosurvey" position="10 0 -6" dialog-popup="
openIconImage: ../../assets/popups/2.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 2;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 5;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud. \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
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (3);
" babia-lookat="[laser-controls]"></a-entity>
<a-entity id="threesurvey" class="babiapopups" rotation="25 25 0" position="11.5 0 -6" dialog-popup="
openIconImage: ../../assets/popups/3.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 3;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 5;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud. \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
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (4);
" babia-lookat="[laser-controls]"></a-entity>
<a-entity id="foursurvey" position="13 0 -5.5" dialog-popup="
openIconImage: ../../assets/popups/4.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 4;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 7;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud. \n
The base/area of the buildings represents the number of functions in the code file (num_funs), the height represents the lines of code per function in the code file. Therefore, the volume (base x height) corresponds to the total number of lines of code. \n
Find the three source code files (not testing files) with the highest lines of code in the system. Say their names in order. \n
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (5);
" babia-lookat="[laser-controls]"></a-entity>
<a-entity id="fivesurvey" position="14.5 0 -5" dialog-popup="
openIconImage: ../../assets/popups/5.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 5;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 5;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud. \n
Find the three source code files (not testing files) with the highest Cyclomatic Complexity Number (ccn) in the system. Say their names in order. \n
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (6);
" babia-lookat="[laser-controls]">
</a-entity>
<a-entity id="sixsurvey" position="16 0 -4.5" dialog-popup="
openIconImage: ../../assets/popups/6.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 6;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 5.5;
body:
Please, notify the supervisor that homework is about to begin and remember to talk aloud. \n
Find the source code file (not testing files) with the highest lines of code per function (highest loc_per_function) inside the src/ca/mcgill/cs/jetuml/diagram/nodes folder. Say the name of the file. \n
When you are done, please comment on the following sentence: The task was difficult (choose one: strongly agree, agree, don’t know, disagree, strongly disagree). \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (7);
" babia-lookat="[laser-controls]">
</a-entity>
<a-entity id="sevensurvey" position="17.5 0 -3.8" dialog-popup="
openIconImage: ../../assets/popups/7.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Task 7;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4.5;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud. \n
Can you locate the core part of the system, i.e., the most important classes or packages? Please explain briefly why do you think that this is the core. \n Please notify the supervisor that the task has been completed. \n
Close this Task by pressing the (X) button and go to Task (8);
" babia-lookat="[laser-controls]">
</a-entity>
<a-entity id="eightsurvey" position="19 0 -2.5" dialog-popup="
openIconImage: ../../assets/popups/8.png;
closeIconImage: ../../assets/popups/close.jpg;
title: Feedback Task;
titleWrapCount: 30;
titleColor: black;
bodyColor: black;
dialogBoxColor: white;
bodyFont: roboto;
dialogBoxHeight: 4;
body: Please, notify the supervisor that homework is about to begin and remember to talk aloud.
\n Overall, did you find the experiment difficult? (choose one: strongly agree, agree, don’t know, disagree, strongly disagree) Please explain.
\n Do you have any suggestion or comment?
\n When you are done, please click the button below.
" babia-lookat="[laser-controls]">
<a-plane id="exitscene" scale="1.2 1.2 1.2" visible="false" babia-lookat="[laser-controls]"
class="babiaxraycasterclass" position="0 -1.8 2"
geometry="primitive: plane; width: 1.8; height: 0.5" color="#004d00"
text="value: Finish!; color: white; align: center; wrapCount: 30; width: 3.6;">
</a-plane>
</a-entity>
</a-entity>
<!-- Aframe Lounge -->
<a-entity id="lounge" position="5 5.6 2" lounge="width: 20; depth: 25; height: 11;
north: barrier;
floorTexture: ../../assets/textures/floor-texture.jpg">
<a-entity position="0.2 0 5" lounge-plinth="width: 2.5; depth: 1.25" lounge-staydown>
<a-entity></a-entity>
</a-entity>
</a-entity>
<a-entity position="4.5 0.6 7" scale="0.01 0.5 0.01" id="city"
babia-boats="height_building_legend: -0.5; legend_scale: 0.25; legend_lookat: [laser-controls]; extra: 1; zone_elevation: 0.01; from: jetumlcity; area: num_funs; height: loc_per_function; color: ccn; height_quarter_legend_box: 0.01; height_quarter_legend_title: -3.5">
</a-entity>
<a-entity id="bardescription" position="7.4 0.5 5.5" rotation="-30 180 0" scale="0.8 0.8 0.8">
<!-- Close tooltips -->
<a-plane id="closelegends" babia-lookat="[laser-controls]" class="babiaxraycasterclass" scale="0.8 0.8 0.8"
position="0 1.5 0" geometry="primitive: plane; width: 2; height: 0.5" color="#012752"
text="value: Close All Tooltips; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 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 file in the source code of the system. Each quarter represents a folder.
Quarters can be nested to represent nested folders. On each building, we mapped the values of three
software metrics:</p>
<p>
Area: Number of functions <br />
Height: LOC per function<br />
Color: Cyclomatic Complexity (CCN)<br />
</p>
<p>Interactions: Click (or hover) on a building or click on a quarter to discover more.
</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 rotation="0 -90 0">
<a-entity id="cameraRig" position="4 1.6 -5" movement-controls>
<a-entity id="head" camera look-controls></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,
#sevensurvey, #sevensurvey--close-icon,
#eightsurvey, #eightsurvey--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,
#sevensurvey, #sevensurvey--close-icon,
#eightsurvey, #eightsurvey--close-icon,
#fivesurveyother, #fivesurveyother--close-icon,
#iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
</a-entity>
</a-entity>
</a-scene>
<!-- Remove legends when clicking on close legends -->
<script>
document.querySelector('a-scene').addEventListener('loaded', function () {
let infoPanel = document.getElementById(`navbarpopup--dialog-plane`);
infoPanel.setAttribute("visible", "true")
// rotate popups to the camera
let popups = document.querySelectorAll('[dialog-popup]');
Array.from(popups).forEach(function (popup) {
popup.addEventListener('click', function (event) {
let plane = document.getElementById(`${event.target.id}--dialog-plane`);
plane.setAttribute("babia-lookat", "[laser-controls]")
}, false);
});
})
let exitScene = document.getElementById("exitscene");
document.getElementById("eightsurvey").addEventListener('click', function (event) {
console.log(event)
if (event.target.id === "eightsurvey--close-icon") {
exitScene.setAttribute("visible", "false")
} else if (event.target.id === "eightsurvey") {
exitScene.setAttribute("visible", "true")
}
}, false);
exitScene.addEventListener('click', function (event) {
if (exitScene.getAttribute("visible")) {
window.location.replace("https://thesis-dlumbrer.gitlab.io/ist21-experiment/other/end.html")
}
}, 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>