Recreating the Food Demo

Hi @valentin , congratulations on the launch of the new version. I wanted to build upon the food demo that was shown in the reality editor video. is the code for the food example available, and any additional instructions on how to build upon it?

Hi @iinvent. I work with @valentin and helped create the food demo.

Here is the actual source code from the demo in the video: source code for grocery spatial search interfaces.

Specifically, look at the index.html and search.js files. The search.js file is the same for each, while the index.html changes to include the criteria that this product matches.

I only included three of the cereal boxes there, but I have about 200 of them set up on my machine. If you want to test with more I can post more online, but I’m eager to see what else you think of to build on the example. You can create new objects that are compatible with the search by doing a few things:

  1. Set up the ingredients of the product.

    var ingredients = {
    milk: {text: “Milk”, state: false},
    wheat: {text: “Wheat”, state: false},
    nuts: {text: “Nuts”, state: false},
    fish: {text: “Fish”, state: false},
    pork: {text: “Pork”, state: false},
    beef: {text: “Beef”, state: false},
    vegetarian: {text: “Vegetarian”, state: true},
    cornSyrup: {text: “Corn Syrup”, state: false},
    organic: {text: “Organic”, state: false}
    These ingredient categories match the ingredients in the Reality Editor’s search menu (which can be opened by going into the settings menu → developer → Reality UI, and then tapping the search icon). If you want to use different categories we’d need to extend the search menu in the app to support flexible categories.

  2. Connect to the HybridObject API and add an interfaceListener subscription:

    var obj = new HybridObject();
    obj.addInterfaceListener(function(e, userList) {
    if (e === ‘realitySearch’) {
    var searchResult =, userList);
    This will be triggered when the search menu is open in the Reality Editor, and searchResult will be true or false depending on whether there is a match.

Let me know if it works for you! Please post any issues you run into and share what you end up building :slight_smile:

  • Ben