NOTE: Adding Data to Objects in A-Frame — PART B
NOTE: 0012 — Tuesday 22 August 2017
PART 5
It’s awesome that we have a disparate element that stays on the canvas whilst we roam around the A-Frame scene! It would be even better to create a link between the interacted object and the sidebar that we’ve created!
What we need to first create is another JavaScript file in our js folder to store the JSON data.
Why JSON?
JSON is short for JavaScript Object Notation and it is a lightweight data-interchange format that makes it easy for machines to parse and generate. It’s also quite useful for creating and adjusting ‘open-format’ data as well.
The structure of JSON is one that is written logically, where the data name is referenced by a KEY and the property is written as the VALUE. Another feature is its ability to nest JSON data within a variable so that arrays can be combined and still be accessible. Finally, the data within a JSON file can be loaded much more quickly and asynchronously in the background without delaying page rendering.
PROCESS OF ADDING DATA TO THE SCENE:
STEP 1 — Create a data.js file
The reason as to why we create a .js file with the JSON data stored within a variable is to remove the need to load data from an external file.
So, to begin, let’s call the array of objects ‘objInfo’ and each individual .obj file the object’s id when identifying the string (I’ll explain more later). This allows us to interconnect the object we’ve clicked with the data associated in the JSON array of objects.
In our data.js file:
var objInfo = {
"obj-1": {
"name": "Topography",
"cost": 12,
"material": "Grass",
"dimensions": "500 x 500"
},... // MAKE SURE TO SPACE THE OBJECTS OUT WITH A COMMA"obj-25": {
"name": "Furniture",
"cost": 125,
"material": "Miscellaneous",
"dimensions": "unknown"
},
};
What we’ve essentially done is stored a JSON array of objects into a JavaScript variable in which we will use as reference to call specific data.
“Make sure to reference the JSON data in the head of the HTML document BEFORE referencing the component’s script.”
The data file should live with your other scripts in the same folder:
<script src="js/data.js"></script>STEP 2 — Understanding how JSON works in JavaScript
There are many functions that can do various tasks in relation to data, but in this scenario we will focus on understanding how to obtain values from an array of objects within Javascript. The first thing when working with JSON in this project, is we need to understand is the concept of the .map function!
The .map function relies on two parts:
- an Array of objects
- the Function that will be used on the array
The line of code looks something like this:
myArray.map(myFunction);Here’s an example of how you would implement a .map function on an array. This was referenced from https://www.discovermeteor.com/blog/understanding-javascript-map/
incrementByOne = function(element) {
return element + 1;
}myArray = [1,2,3,4];myArray.map(incrementByOne); // returns [2,3,4,5]
So what it’s essentially doing is inputting each integer in the array into the function and returning the integer with an addition of 1. Therefore the new array is [2,3,4,5].
Now you must be asking: How does this work in our case?
If we look at our HTML document, we’ve already loaded in our objects within the scene and displayed them as entities. Each <a-obj-model> has its own src property, so why can’t we obtain that data and reference its string to our JSON array?
Well, let’s test it out!
Firstly, just to reiterate what I mean, here is one of our OBJ models we’ve placed in the scene:
<a-obj-model
src="#obj-1"
position="5 0 -15"
scale="0.001 0.001 0.001"
rotation="-90 0 -360"
color="#424B54"
change-color-on-hover="color: #FFF00F">and here is our JSON data that we’ve stored in a variable:
var objInfo = {
"obj-1": {
"name": "Topography",
"cost": 12,
"material": "Grass",
"dimensions": "500 x 500"
},
...If we can obtain the same string value of “obj-1”, we can use JQuery to present the: name, cost, material and dimensions of the object!
STEP 2— Jump back into our A-Frame Component [Tricky Bit]
Because we want to achieve the display of information at the same time the object is clicked, we will build on top of the existing A-Frame component.
We can obtain the same id of the object by testing whether we can console.log( ) it. (This is evidently why console.log( ) is quite useful!!). So, within our ‘click’ function, just underneath setting the attribute of the new colour, let’s add:
console.log(el.getAttribute('src'));What this will achieve is when we open the webpage as well as the console log on the side, when we click the object, it will display the string: “#obj-1”
Nice! We have brought some data back and now have the ability to call on the JSON array!
HOWEVER, our objects aren’t labelled with “#” in front of it. Therefore, using a bit of basic string manipulation, we can remove that by adding two new variables before the ‘click’ function:
var OBJid = el.getAttribute('src');
// creates a variable to store stringvar OBJidString = OBJid.substr(1);
// we can now remove the "#" in the string
If we rewrite the console.log( ):
console.log(OBJidString);We should be able to obtain the string: “obj-1” in our console each time we click the object! Fantastic!!
STEP 3— Understanding How to Abstract JSON Data
Now that we’ve got a string to reference the object and it’s JSON data, it’s important to know how to get the specific data to display on the sidebar!
We can do this through:
variable[objectName][index]i.e.
objInfo[obj-1][0]; // returns the string "Topography"
But the reason why I’ve bolded “specific data” is because generally when working with arrays, it’s easy to use the index of an array. HOWEVER if each object in the array does not have the same structure / naming convention for each data key, then the process is rendered useless!
var objInfo = {
"obj-1": {
"name": "Topography",
"cost": 12,
"material": "Grass",
"dimensions": "500 x 500"
},
"obj-2": {
"name": "External Walls",
"cost": 12,
"material": "Brick",
"manufacturer": "Boral",
"dimensions": "200 stud wall"
},
...An example. We can call out the manufacturer for all objects in the scene, you COULD call the [3] index each object, but if we did that:
objInfo[objIdString][3];//If obj-1 was selected = 500 x 500If obj-2 was selected = Boral
So, to be more specific, we will add: .name, .cost, .material and .dimensions at the end of our called data, and return it in the console, as such:
console.log(objInfo[OBJidString].name);STEP 4 — Creating Space for Data in our Sidebar
There are many ways in which we can display the data on our web-page, I’ve simply added it to the list of the sidebar we’ve already created by adding a break line <br> between the title of the property and added in a <div> inside a <div> to play around with the visual aspects in CSS:
<ul class="sidebar"> <li class="sidebar-brand"><a href="">PROJECT INFO</a></li>
<li><a href="#">NAME OF OBJECT</a></li>
<br>
<div class="popup_1">
<div class="text"></div>
</div> <li><a href="#">COST</a></li>
<br>
<div class="popup_2">
<div class="text"></div>
</div>
...
</ul>
Each “popup” class will display its own data, this is why each external div has “_number” attached to it.
STEP 5 — Make it look like part of the Sidebar
Now we can jump back into our CSS and play around with the visual side of things. Again, we will call each popup and apply the same visual properties (to save the amount of lines of code and time to write it out!)
.popup_1, .popup_2, .popup_3, .popup_4 {
position: relative;
top: 0;
right: 0;
padding: 0px, 0px;
color: #eee;
font-size: 10px;
background-color: rgba(0, 0, 0, .5);
text-align: left;
padding-left: 20px;
padding-right: 20px;
font-size: 12px;
}We should also touch base with the text class as well:
.text {
text-align: absolute;
}STEP 6— Display Data in our Sidebar using JQuery
Finally, we will jump right back into our custom component script once more to attach our JSON data onto the Sidebar via the means of JQuery.
Underneath our console.log( ) (which we can keep or remove, whatever floats your boat!), we will add in some JQuery. This will pick up our .popup divs and attach some strings— the data from our JSON. It’s THAT easy!
$(".popup_1").text(objInfo[OBJidString].name);
$(".popup_2").text(objInfo[OBJidString].cost);
$(".popup_3").text(objInfo[OBJidString].material);
$(".popup_4").text(objInfo[OBJidString].dimensions);Now, when we select an object in our A-Frame scene, not only will the colour change, the data will be called and it will be displayed instantaneously in our sidebar!
Next post will start looking into button creation in HTML and correlating that with the A-Frame scene!
© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.
Last modified on Wednesday 23 August 2017
