Canvatorium Recap Five

Covering Labs 021- 026 and the new User Locomotion Settings.

It’s been a while since my last Recap. I had a lot of free time to work on Canvatorium over the Winter, but at the beginning of March my consulting business started getting busy again. I’ve still been toiling away at labs, but on a more sporadic schedule.

Picking up from where I left off in Recap Four, I started a new project to build a VR client interface for ToDoist. I made a little progress before getting side tracked with some other labs dealing with locomotion.

Labs 021 – 023: Working on 2D and 3D GUI Cards

Labs 024 – 026 Movement & Teleportation Modules

Something that came out of Labs 024- 026 was a new Grid Menu concept. Babylon JS has a powerful grid control in their 2D GUI system. I used this feature to build the menus for these labs. I needed labels, check boxes, and sliders. After tinkering around with them a bit, I refactored them into their own file to be used across labs. The fun part was learning how to lay them out in the grid.

When you define a grid, you need to define the columns and rows to be used before you can add content.

var grid = new BABYLON.GUI.Grid();
grid.addColumnDefinition(0.5);
grid.addColumnDefinition(0.5);
grid.addRowDefinition(0.5);
grid.addRowDefinition(0.5);

// This rect will be on first row and first column
var rect = new BABYLON.GUI.Rectangle();
rect.background = "green";
rect.thickness = 0;
grid.addControl(rect, 0, 0);

// This rect will be on first row and second column
rect = new BABYLON.GUI.Rectangle();
rect.background = "red";
rect.thickness = 0;
grid.addControl(rect, 0, 1);

This can quickly get annoying when you want to rearrange your controls. You have to update the index values in every call to grid.addControl().

// Create content that will be used in the grid
var rect = new BABYLON.GUI.Rectangle();
rect.background = "green";
rect.thickness = 0;
rect = new BABYLON.GUI.Rectangle();
rect.background = "red";
rect.thickness = 0;

// Setup two static grid columns
var grid = new BABYLON.GUI.Grid();
grid.addColumnDefinition(0.5);
grid.addColumnDefinition(0.5);

// Create grid rows of fixed size in the order that they appear in code
// Place the green rect will be on first row and first column
grid.addRowDefinition(40, true)
    .grid.addControl(rect, grid.rowCount, 0);

// Place the red rect will be on second row and first column
grid.addRowDefinition(40, true)
    .grid.addControl(rect, grid.rowCount, 0);

Lab 026 has an example of using the grid to dynamically lay out contents.

I’m not sure when I’ll get back to the ToDoist project. There are several labs that I want to knock out first, including an idea for one more locomotion type that I want to try to build.

I’ve updated the project status board with my recent notes and issues. I’ve also pushed all recent labs and changes to the public development server. Go check out Lab 026 for yourself and customize your settings.