aframe-babia-components
Version:
A data visualization set of components for A-Frame.
265 lines (227 loc) • 8.57 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame CodeCity Component - Time evolution</title>
<meta name="description" content="Basic example for CodeCity component.">
</meta>
<script src="https://aframe.io/releases/1.0.4/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="../../../dist/aframe-babia-components.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-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="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
<script
src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
</head>
<body>
<a-scene id="scene" renderer="antialias: true">
<a-entity environment="playArea: 2"></a-entity>
<a-entity
id="navbarpopup"
position="-12 10 1"
dialog-popup="
openIconImage: ../assets/info.jpg;
closeIconImage: ../assets/close.jpg;
title: How to use the navigation bar;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 5;
body: \n Click on the red dots to move between time snapshots, a legend on top of the dot will show the current snapshot and commit
\n Click on the pause/play button to pause or resume the time evolution \n\n Click on the Next/Previous button to move one time snapshot forward/backward, this will stop the time evolution
\n Click on the Go Forward/Go Backward button to change the direction of the time evolution;
"></a-entity>
<a-entity
id="iteractionpopup"
position="11 3 1"
dialog-popup="
openIconImage: ../assets/info.jpg;
closeIconImage: ../assets/close.jpg;
title: Interaction with the City;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 5;
body: \n The city is evolving automatically along the time, so the buildings may change their area/height en each time snapshot
\n Move the cursor above a building to show a legend with what it represents on top of it, leave the cursor and the title will disappear
\n Click on a building to fix the legend, click again to remove it
\n Click on a quarter base to show a transparent box with a legend showing what it represents on top of it, click again to remove the legend and the transparent box;
"></a-entity>
<a-entity
id="cityinformation"
position="0 12 3"
dialog-popup="
openIconImage: ../assets/info.jpg;
closeIconImage: ../assets/close.jpg;
title: What is this city about? ;
titleWrapCount: 30;
titleColor: white;
bodyColor: white;
dialogBoxColor: black;
bodyFont: roboto;
dialogBoxHeight: 9;
dialogBoxWidth: 6;
body: \n This city represents the code of the project Sortinghat, it will evolve changing the area/height of the buildings following the time snapshos of the navigation bar. NOTE that buildings may appear/dissapear.
\n Each building represents a file of the code, each quarter and the quarter level represents the folder tree that file belongs to
\n The height of each building represents the number of functions that the file has, if the file does not have functions, it will have the minimun value, in this case 0.5 of area
\n The area of the base of each building represents the lines of code that the file has, the minimun is the value 1;
"></a-entity>
<a-entity position="0 0 -3" id="codecity" babiaxr-codecity='width: 20; depth: 20; streets: true; color: green;
extra: 1.5; base_thick: 0.3; split: pivot; titles: true; time_evolution_delta: 3000;
data: main_data.json; ui_navbar: navigationbar; building_color: #000066; time_evolution_color: true'>
</a-entity>
<a-entity id="navigationbar" babiaxr-navigation-bar= 'to: left; start_point: 312; points_by_line: 60; size: 8' position='-20 15 0' scale="3 3 3"></a-entity>
<a-entity movement-controls="fly: true" position="0 1.2 12">
<a-entity camera position="0 3 4" look-controls></a-entity>
<a-entity laser-controls
raycaster="objects: .babiaxraycasterclass, #navbarpopup, #navbarpopup--close-icon, #iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
<a-entity cursor="rayOrigin:mouse"
raycaster="objects: .babiaxraycasterclass, #navbarpopup, #navbarpopup--close-icon, #iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
<a-entity></a-entity>
</a-entity>
</a-scene>
<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>