aframe-babia-components
Version:
A data visualization set of components for A-Frame.
277 lines (246 loc) • 17.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Babia Template - Visualize your Data </title>
<meta name="description" content="Museum build aframe and babia">
</meta>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script
src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/aframe-tooltip-component/dist/aframe-tooltip-component.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
<link rel="stylesheet" href="../../../assets/gitlab-corner.css">
</head>
<body>
<a-scene id="scene" renderer="sortObjects: true" stats>
<!-- 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">
<img id="wall" src="../../assets/textures/white-wall-texture.jpg">
<img id="colorlegend" src="../../assets/palettes/bluetored.jpg">
<a-asset-item id="door-obj" src="../../assets/door/door.obj"></a-asset-item>
<a-asset-item id="door-mtl" src="../../assets/door/door.mtl"></a-asset-item>
</a-assets>
<!-- Enviroment -->
<a-sky src="#sky"></a-sky>
<!-- Room -->
<a-entity id="Room">
<a-entity id="floorRoom" material="shader: flat; src: #floor"
geometry="primitive: box; width: 7; depth: 9; height: 0.1"></a-entity>
<!-- <a-entity id="ceiling" geometry="primitive: box; width: 7; depth: 9; height: 0.1"
position="0 3 0" material="shader: flat; src: #wall"></a-entity> -->
<a-entity id="door" obj-model="obj: #door-obj; mtl: #door-mtl" position="3.4 1.2 -2.7" rotation="-90 -90 0"
scale="0.013 0.013 0.011"></a-entity>
<a-entity id="wall1" position="3.65 1.5 0">
<a-entity id="wall1-1" geometry="primitive: box; width: 0.5; depth: 8.7; height: 3"
material="shader: flat; src: #wall"></a-entity>
</a-entity>
<a-entity id="wall2" position="-3.5 1.5 0">
<a-entity id="wall2-1" geometry="primitive: box; width: 0.3; depth: 8.7; height: 1"
material="shader: flat; src: #wall; repeat: 5 1" position="0 -1 0"></a-entity>
<a-entity id="wall2-2" geometry="primitive: box; width: 0.3; depth: 8.7; height: 0.3"
material="shader: flat; src: #wall; repeat: 5 1" position="0 1.35 0"></a-entity>
<a-entity id="wall2-3" geometry="primitive: box; width: 0.3; depth: 0.5; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 0"></a-entity>
<a-entity id="wall2-4" geometry="primitive: box; width: 0.3; depth: 0.6; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 4.35">
</a-entity>
<a-entity id="wall2-5" geometry="primitive: box; width: 0.3; depth: 0.6; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 -4.35">
</a-entity>
</a-entity>
<a-entity id="wall3" position="0 1.5 -4.5">
<a-entity id="wall3-1" geometry="primitive: box; width: 7; depth: 0.3; height: 3"
material="shader: flat; src: #wall"></a-entity>
<a-entity id="column3" geometry="primitive: box; width: 0.3; depth: 0.3; height: 3"
material="shader: flat; src: #wall; repeat: 1 5" position="0 0 0.15"></a-entity>
</a-entity>
<a-entity id="wall4" position="0 1.5 4.5">
<a-entity id="wall4-1" geometry="primitive: box; width: 7.3; depth: 0.3; height: 1"
material="shader: flat; src: #wall; repeat: 5 1" position="0 -1 0"></a-entity>
<a-entity id="wall4-2" geometry="primitive: box; width: 7.3; depth: 0.3; height: 0.3"
material="shader: flat; src: #wall; repeat: 5 1" position="0 1.35 0"></a-entity>
<a-entity id="wall4-3" geometry="primitive: box; width: 0.5; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="0 0.35 0"></a-entity>
<a-entity id="wall4-4" geometry="primitive: box; width: 0.3; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="-3.2 0.35 0">
</a-entity>
<a-entity id="wall4-5" geometry="primitive: box; width: 0.6; depth: 0.3; height: 1.7"
material="shader: flat; src: #wall; repeat: 1 3" position="3.4 0.35 0">
</a-entity>
<a-entity id="column4" geometry="primitive: box; width: 0.3; depth: 0.3; height: 3"
material="shader: flat; src: #wall; repeat: 1 5" position="0 0 -0.15">
</a-entity>
</a-entity>
</a-entity>
<!-- Querier Components -->
<!-- Slider -->
<!-- Querier -->
<a-entity id="portainerquerier" babia-queryjson="url:./dependencieslist_portainer.json;"></a-entity>
<a-entity id="cloudinaryquerier" babia-queryjson="url:./dependencieslist_cloudinary.json;"></a-entity>
<a-entity id="aframequerier" babia-queryjson="url:./dependencieslist_sh.json;"></a-entity>
<a-entity id="expressquerier" babia-queryjson="url:./dependencieslist_express.json;"></a-entity>
<a-entity id="karmaquerier" babia-queryjson="url:./dependencieslist_karma.json;"></a-entity>
<a-entity id="pm2querier" babia-queryjson="url:./dependencieslist_pm2.json;"></a-entity>
<a-entity id="filestashquerier" babia-queryjson="url:./dependencieslist_filestash.json;"></a-entity>
<a-entity id="ghquerier" babia-queryjson="url:./dependencieslist_ghdesktop.json;"></a-entity>
<!-- Treebuilder -->
<a-entity id="ghdesktop" babia-treebuilder="field: parentsPath; split_by: /; from: ghquerier">
</a-entity>
<!-- <a-entity id="filestash" babia-treebuilder="field: parentsPath; split_by: /; from: filestashquerier">
</a-entity> -->
<a-entity id="portainer" babia-treebuilder="field: parentsPath; split_by: /; from: portainerquerier">
</a-entity>
<!-- <a-entity id="cloudinary" babia-treebuilder="field: parentsPath; split_by: /; from: cloudinaryquerier">
</a-entity>
<a-entity id="express" babia-treebuilder="field: parentsPath; split_by: /; from: expressquerier">
</a-entity> -->
<a-entity id="pm2" babia-treebuilder="field: parentsPath; split_by: /; from: pm2querier"></a-entity>
<a-entity id="sortinghat" babia-treebuilder="field: parentsPath; split_by: /; from: aframequerier">
</a-entity>
<!-- <a-entity id="karma" babia-treebuilder="field: parentsPath; split_by: /; from: karmaquerier"></a-entity> -->
<!-- Visualizer Components -->
<a-entity id="boats"
babia-boats="from: sortinghat; area: loc/age; height: age_days; color: license; height_building_legend: -0.5; extra: 0.01; treeQuartersLevelHeight: 0.1;
highlightQuarter: false; treeLayout: true; gradientBaseColor: true; metricsInfoId: boatsmetricsinfo; treeFixQuarterHeight: true; treeHideOneSonQuarters: true;
legend_scale: 0.25; height_quarter_legend_box: 3; height_quarter_legend_title: 1.5; legend_lookat: [laser-controls]; zone_elevation: 0.01; maxBuildingHeight: 0.4; minBuildingHeight: 0.0025; building_separation: 0.2; autoscale: true; baseAlpha: 0.6; highlightBuildingByField: depName; transparent20ByRepeatedField: depName; numericColorLegendId: babianumericcolorlegend"
position="0 0.5 -1" scale="1 1 1" rotation="0 180 0"></a-entity>
<a-entity id="interface"
babia-ui="target: boats; showOnly: height:age_days, area:loc/age, area:size/age, area:ncommits/age, color:license, color:timesInstalled, color:timesAppears, color:last_act_days, color:ncommits_ly, color:ncommiters_ly, color:nvuln, color:nissues_ratio; hideRows: depth, width; hideFields: noMetric, level, timesAppearsSameId, nvuln, nvuln_critic, nvuln_high, nvuln_mod, nvuln_low, nvuln_info; customQuerierLabel: Project; customAttributeSwitch: transparent20ByRepeatedField:depName, wireframeByRepeatedField:depName; customAttributeLabel: transparent20ByRepeatedField:Transparency, wireframeByRepeatedField:Wireframe"
position="-3 1.5 0" rotation="0 90 0" scale="0.1 0.1 0.1">
</a-entity>
<!-- <a-entity id="slider" babia-slider="min: 0; max: 20; value: 10; size: 2"
position="-3 2.1 1" rotation="0 90 0" scale="1 1 1"></a-entity> -->
<a-entity id="bardescription" position="2.5 0.6 0.6" rotation="-30 -90 0" scale="0.6 0.6 0.6">
<!-- Close tooltips -->
<a-plane id="rotatecity" visible="false" babia-lookat="[laser-controls]" class="babiaxraycasterclass"
scale="0.8 0.8 0.8" position="0 3 0" geometry="primitive: plane; width: 2; height: 0.5" color="#012752"
text="value: Rotate City; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 6">
</a-plane>
<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-plane id="wireframe" visible="false" babia-lookat="[laser-controls]" class="babiaxraycasterclass"
scale="0.8 0.8 0.8" position="0 2.5 0" geometry="primitive: plane; width: 2; height: 0.5"
color="#012752"
text="value: Wireframe; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 6">
</a-plane>
<!-- <a-plane id="transparencies80" babia-lookat="[laser-controls]" class="babiaxraycasterclass"
scale="0.8 0.8 0.8" position="0 2 0" geometry="primitive: plane; width: 2; height: 0.5" color="#012752"
text="value: Transparencies 80%; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 6">
</a-plane> -->
<a-plane id="transparencies20" visible="false" 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: Transparencies; color: white; align: center; wrapCount: 30; width: 3.6; transparent: false; alphaTest: 6; opacity: 6">
</a-plane>
<a-plane id="babianumericcolorlegend" src="#colorlegend" height="0.5" width="1" position="0 -0.7 0.1">
</a-plane>
<a-box src="#floor" height="2.2" width="3.2" depth="0.1" position="0 0 0"></a-box>
<a-box src="#metalic" height="2" width="3" depth="0.05" position="0 0 0.05"></a-box>
<a-entity position="0 0.1 0.1" id="boatsmetricsinfo"></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 id="cameraRig" position="0 1.6 3">
<a-entity id="head" camera babia-camera="raycasterMouse: .babiaxraycasterclass;
raycasterHand: .babiaxraycasterclass; teleportCollision: #floorRoom" look-controls
wasd-controls="fly: true; acceleration: 10">
<a-entity></a-entity>
</a-entity>
</a-entity>
</a-scene>
<div class="gitlab-corner-wrapper"><a
href="https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/examples/" 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>
<script>
document.getElementById("rotatecity").addEventListener('click', function (event) {
let ewl = document.getElementById("boats")
let currentRotation = ewl.getAttribute("rotation") || { x: 0, y: 0, z: 0 }
let currentPosition = ewl.getAttribute("position")
let newZrotation = currentRotation.z + 90
ewl.setAttribute("rotation", { x: currentRotation.x, y: currentRotation.y, z: newZrotation })
if (newZrotation === 180) {
ewl.setAttribute("position", { x: currentPosition.x + 1.5, y: currentPosition.y + 1.3, z: currentPosition.z })
} else if (newZrotation === 360) {
ewl.setAttribute("rotation", { x: currentRotation.x, y: currentRotation.y, z: 0 })
ewl.setAttribute("position", { x: currentPosition.x - 1.5, y: currentPosition.y - 1.3, z: currentPosition.z })
} else if (newZrotation === 90) {
ewl.setAttribute("position", { x: currentPosition.x - 1.5, y: currentPosition.y + 1.2, z: currentPosition.z })
} else if (newZrotation === 270) {
ewl.setAttribute("position", { x: currentPosition.x + 1.5, y: currentPosition.y - 1.2, z: currentPosition.z })
}
}, false);
document.getElementById("closelegends").addEventListener('click', function (event) {
let ewl = document.getElementById("boats").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].entity.click()
}
}, false);
</script>
<script>
// Get Query string values
function getValueFromQueryString(string) {
string = string.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + string + '(=([^&#]*)|&|#|$)'),
results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
/* Set username and password for ElasticSearch queriers*/
let buildingsep = getValueFromQueryString('buildingsep');
let quarterheight = getValueFromQueryString('quarterheight');
let extra = getValueFromQueryString('extra');
if (buildingsep) {
document.getElementById("boats").setAttribute('babia-boats', 'building_separation', parseFloat(buildingsep))
}
if (quarterheight) {
document.getElementById("boats").setAttribute('babia-boats', 'treeQuartersLevelHeight', parseFloat(quarterheight))
}
if (extra) {
document.getElementById("boats").setAttribute('babia-boats', 'extra', parseFloat(extra))
}
</script>
</body>
</html>