NOTE: Adding Data to Objects in A-Frame — PART A
NOTE: 0011 — Tuesday 22 August 2017
PART 4
Now that we have an interactive A-Frame scene on the web, it makes sense to add some data into the objects so that we could potentially connect it to a ‘CRUD’ database (idea at the time of development).
STEP 1— Creating a Sidebar in HTML
Even though majority of the work will be run by the scripts we create, it’s important to begin to make connections to your web interface. Specifically, adding visual elements to define what it is that they’re looking at. Whether it be a title block on the canvas, a display box illustrating the object’s information, or even adding buttons. For this reason, in the next few steps we’ll focus on HTML and CSS.
In terms of HTML, anything that isn’t within the A-Frame scene, will sit outside of the <a-scene> tags, but at the same time, inside the <body> tags.
What we’ll essentially be creating in HTML is a “list” to store our headings for the object’s information. So as you would in a HTML document:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>This of course is a basic setup. If you want to start to structure the visual aspect of the sidebar with CSS, start pulling together hierarchy with classes and anchor element:
<ul class="sidebar"> <li class="sidebar-brand"> <a href="">PROJECT INFO</a> </li> <li> <a href="#">NAME OF OBJECT</a> </li>
<li> <a href="#">COST</a> </li>
<li> <a href="#">MATERIAL</a> </li>
<li> <a href="#">DIMENSIONS</a> </li></ul>
You can definitely choose to add whatever type of information in the sidebar, you aren’t restricted to what I’ve written.
STEP 2—Editing the presentation of a Sidebar in CSS
Just like you would in a CSS file, or in a <style> tag situated in the head of the HTML document, you can start to pull together some visual properties for our list.
.sidebar {
list-style-type: none; // no bullet points
background-color: #000; // color of sidebar
width: 230px;
height: 100%; // takes up height of canvas
top: 0; // starts at the top of the canvas
bottom: 0; // finishes at the bottom of the canvas
left: 0; // starts at the left of the canvas
text-align: left; // text alignment on left
position: 0;
margin: 0; // starts on first pixel of left side of canvas
padding: 0;
list-style: none;
transition: 1s ease;
}We can dive into styling the individual elements we’ve created in our list as well by calling the “.sidebar” class and the associated element.
For the Anchor:
.sidebar a {
text-decoration: none;
color: white;
transition: 1s ease;
font-weight: bold;
}For the List item:
.sidebar li {
text-indent: 20px;
line-height: 40px;
transition: 0.5s ease;
}For the Sidebar-brand:
.sidebar>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}You should now have a sidebar in your HTML canvas to potentially display information. At the moment they are headings, but what a feat!
There are plenty of other ways in which we can display the information, the options are endless!!
In fact, here are some links to some awesome sidebar and CSS tutorials that I’ve used to bring mine to life!
- https://codeburst.io/tutorial-three-awesome-css-hover-transitions-animations-for-beginners-c14c08309091
- https://codepen.io/AndrewBaker/pen/lGgrw < Inspired by this one by Andrew M!
PART B of this post will cover how to interconnect data to our objects and displaying that in the sidebar!
© 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
