Chapter 2.3: Babylon JS Control Panel & User Favorites

Wrapping up the initial objective for this chapter, this post details a few bits of user interaction and data.

Control Panel

After posting the last update in chapter 2.2, I turned my attention to adding a bit of user interactivity. I started with a simple control panel that can house a few buttons that can drive page controls and data source selection.

Paging Controls were straightforward. I followed the same design pattern that I used for the Start Button in Chapter 2.2. I made a couple of functions in the Vue component that can modify the current page value and trigger an update, then I passed those functions as callbacks into the control panel buttons using a new method on the SceneWrapper. That method calls a function to create a control panel button with a text label and a callback for execution.

// SceneController.vue
    SceneWrapper.sendControlPanelButton("<", this.pageAPIData);
    SceneWrapper.sendControlPanelButton(">", this.pageNext);

// SceneWrapper.js
  sendControlPanelButton: function (label, callbackAction) {
    // Takes in a function from Vue to setup the scene when the start button is clicked
    const button = createControlPanelButton(label, callbackAction, SceneWrapper.scene);
    SceneWrapper.controlPanel.addControl(button);
  },

I also needed some buttons to control the data source. The user can view the latest data from the Extended Collection (default) or a list of records that they have marked as ‘favorite’ (more on favorites later). I added some new functions to the Vue component to handle this logic and passed them to the control panel, the same what I did for the paging controls.

User Favorites

I finally got around to making that favorite toggle button work. I had added it to the detail card a while back, but until now it didn’t do anything. When the user selects a compact card from the grid, the compact card populates the detail card with data. One of the things it populates is the event for when the toggle control is clicked. It does this by getting the Advanced Dynamic Texture from the scene graph, getting the toggle control from the texture, removing previous events, and adding a new one. It feels a little odd to define an event for the detail card in the compact card (in another event no less!) but it works, so I’m calling it good enough.

I also made a few minor changes to the compact cards. I added a text label to display the current favorite status for an item, just to make it easy to see at a glance which items a user has already favorited. I also started running into some performance issues with the way I was destroying and creating new cards each time the page controls loaded new data. I fixed this by refactoring the code to reuse the same twelve cards. They are all created when the app starts, and are only populated with data when the current data source has a valid object at their assigned index value.

I also added a plain text export option. This is available outside of VR. The user can export a text file containing the title and links to any items they marked as favorite. They can also generate this text in a textarea so they can copy it to their clipboard.

Check out the project on Glitch. You can try it out in VR and examine or remix the code.

You can watch a short demo of the current state of the prototype here.