Blog Post for Week 5 (4/27-5/3)

Posted by VR Capstone Team 1 on 5/3/19

Update on code, links to relevant code added this week

There are three key components of our project.

  1. Server
  2. Webpage on the computer
  3. Magic Leap page

Server (app.js)

The server we completed the following components:

  • Retain state of drawn shapes with map. We have unique id's for each shape drawn.
  • We can send to the magic leap the command to delete a specific shape using an id.
  • We added the ability to create shapes in different colors.
  • For the sphere, we calculated the offsets and sizing and use this information to update the html which is used to plot the sphere in the magic leap helios browser. We create a consistent mapping between the units on the computer webpage and on the magic leap. We do this by scaling the units on the computer webpage by 100 (we multiply by 100). This took the majority of the time for the server changes.

Webpage on the computer (index.html and index.js)

We made the following changes to the web interface:

  • Added position input boxes to position the cylinder and sphere
  • We added did a significant amount of parameter checking. For example, checking all the coefficients on the sphere are equal.
  • We added the ability to add or delete a shape from the web interface. This makes it clear how many equations should be plotted on the magic leap. We allow them to create more equations on the web interface with an add sphere and add cylinder button.
  • We make sure that we are sending a consistent format json object to the server so the server knows what to plot.
  • From the code formatting perspective, we split the index.html file into index.html and index.js to make the code more readable for future development.

Magic Leap page (magicleap.html)

We made the following changes to the magic leap page:

  • We added the axes for x, y, and z which are 3 fbx files for arrows that we rotated.
  • We spent 4+ hours working on understanding the dynamics of rotation, position, and rescaling of shapes in the web page. We now know that css puts a box of size height and width based on css properties. We also learned that the css uses the top left corner of the box that surrounds the shape to position. The shape with this box can be adjusted using the model-scale attribute of ml-model. We also learned how the z-axis acts very differently as it uses the z-offset attribute of ml-model instead of css to position it.
  • We added the slider to resize the sphere. We make sure the magic leap page can communicate with the server in real-time to send json-objects of a defined form so that we can resize sphere in the magic leap in real-time.
  • We also make sure that the slider and the sphere are the same color so that the user knows what slider corresponds to what sphere. This makes rescaling intuitive.

Update on ideas (media)

We learned that it will not be possible to move the cursor in the helios browser to the z axis therefore we will use a series of buttons and sliders to do the interactions with the shapes. Below is the video of our current progress.

Plan for next week

Our plan week is to finish:

  1. Interactions to move the sphere.
  2. Finish the interactions with cylinder which means understanding how to resize and position it.
  3. If we change on the magic leap the size of the shape it will update the equation on the web interface in real-time.
  4. We need to add lighting to the shapes so we can tell it is 3D.
  5. We are going to add a lesson plan. It will be initiated on the web interface. It will first walk the user through what a sphere look like (radius and position). Then we will give a mini test where we give them a basic sphere and then must resize and position until meets the desired formula.

What every member did this week and will do next week

Our team believes we work more efficiently in pairs. Therefore, we paired into the following pairs:

  1. Matthew and Simon
  2. Esteban and Tanuj

Since we are in pairs each person completed the work together. Matthew wrote blog and the team members provided the screenshots and help on content in the blog.

The first team (Matthew and Simon) worked on the changes to the server as described in the previous sections and within the Magic Leap changes added the axes. This next week, team 1 will implement the first three next week's tasks.

The second team (Esteban and Tanuj) worked on the changes to the index.html and index.js as described above. The second team will complete the last two tasks from the next week section above.

For the last three tasks within the Magic Leap changes we all worked in one large team to get it to work. The reason being at this point we needed to integrate a number of parts together to get it to work. Therefore, everyone needed to be there.

Blocking Issues

We have no immediate blocking issues. However, some progress was delayed throughout the week due to our inability to turn on the Magic Leaps. The magic leaps were in a weird state where they didn't seem like they were charged even though they were plugged in over night. We seem to have addressed this issue.