Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building CMS Backed Augmented Reality Apps With Crafter CMS, Part 2

DZone's Guide to

Building CMS Backed Augmented Reality Apps With Crafter CMS, Part 2

In this article, we continue building our Pokemon Augmented Reality web application, by updating a few of the controls and models in our CMS.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Welcome back! Let's pick up where we left off in our last article

Step 5: Configure the AR Page Controller to Show a Pokemon Loaded From the CMS

Now that you have content objects in the system it’s time to provide the CMS with the logic to determine which items to show. To start, we’ll keep things simple. We’ll provide the template with a static list of models to display.

5.1 Update the Controller

The controller contains the business logic. In our case, the controller is for a “Page.” In Crafter CMS, you can have controllers for pages, components, services, jobs, and other kinds of objects as well. To get to the page controller:

  • Locate the Wrench in the upper right-hand corner on the toolbar. Click the Wrench. This will open the Preview Tools panel on the right-hand side of the screen.
  • Now click In-Context Editing to open the In-Context Editing tools.
  • Now click EditController.
  • Now add the following code:
def pokemonModelIds = [ “/site/components/pokemon/snorlax.xml”]

templateModel.pokemonInstances = []

pokemonModelIds.each { id ->
def pokemonInstance = [:]
def modelItemId = id

pokemonInstance.model = siteItemService.getSiteItem(modelItemId)
pokemonInstance.xPosition = -2
pokemonInstance.yPosition = -2
pokemonInstance.zPosition = -2
pokemonInstance.scaleMultiplier = 1

templateModel.pokemonInstances.add(pokemonInstance)
}


  • Now click update to save the controller.
  • The changes we made to the controller have added a new variable called pokemonInstances to our template model.

    5.2 Update the Template

    Now that our template has pokemonInstances available to it, we have to update it to take advantage of the values in that data structure. We’re going to iterate over the items in the array and call the addModelToScene function for each item.

    • Locate the Wrench in the upper right-hand corner on the toolbar. Click the Wrench. This will open the Preview Tools panel on the right-hand side of the screen.
    • Now click In-Context Editing to open the In-Context Editing tools.
    • Now click EditTemplate.
    • Find line 99 and make the following updates:
    <#list pokemonInstances as pokemonInstance>
    
    <#assign texturePath = pokemonInstance.model.textureFile.item[0].key />
    <#assign objectPath = pokemonInstance.model.objectFile.item[0].key />
    
    loadModelIntoScene({
    basePath: “${texturePath?substring(0, texturePath?last_index_of(‘/’)+1)}”,
    mtlPath: “${texturePath?substring(texturePath?last_index_of(‘/’) + 1)}”,
    objPath: “${objectPath}”,
    scaleMultiplier: ${pokemonInstance.scaleMultiplier},
    xPosition: ${pokemonInstance.xPosition},
    yPosition: ${pokemonInstance.yPosition},
    xRotation: ${pokemonInstance.model.xRotation}, scene);
    </#list>


  • Now click update to save the controller.
  • AWESOME! Our template now renders models that we add through the CMS.

    The only issue is, adding a new model to the scene requires us to edit the controller. This is the job of a developer. In essence, we’ve moved the responsibility of deciding what models to render from the JavaScript to the Groovy code, but we haven’t put the power of deciding what to show in the hands of the authors yet. So let’s do that.

    Step 6. Give the Author the Ability to Add Models to the Scene

    6.1 Update the Scene Content Model

    To give the author, a non-technical user, the ability to update the scene, we have to first update our content model. In this project, the content model that controls the scene is called Entry. To edit the Entry Content Model:

    • Open the Site Content panel.
    • Locate and click the menu item for Admin Console. This will take you to the power user area in the CMS, which is used to manage and perform various site administration tasks.
    • On the left panel in the Admin Console, locate and click the menu option for Content Types.
    • Now click Open Existing Types and select Entry.

    • Click the Body Content Field.
    • Now click the dark X in the upper right-hand corner to remove the Body Content field. It’s not used.

    • Drag Repeat Group object on to the Page Settings section.
    • Configure the Repeat Group with a title of Models.
    • Then Drag a Node Selector control into the repeat group.
    • Configure the node selector with the title Model.
    • Drag a Child Content data source onto the Data Sources area and configure it as shown below.
    • Wire/Configure the Models Node Selector control to use the Models data source by clicking on the Model control and configuring the Item Manager property in the property sheet on the right.

    • Add additional fields for X Position, Y Position, Z Position, and Scale Multiplier as shown below.

    • Note the use of the input control and the configuration in the properties panel on the right.

    Once you have completed this, you can click edit on the main toolbar whenever you are looking at the Home scee in Preview, and you will be able to, through a simple user interface, add models to the scene.

    • Click the Crafter Logo in the upper left corner.
    • Click on Site Content in the menu at the top of the screen. This will open a panel on the left.
    • Open Pages and then clickHome to load the Preview
    • Now click Edit in the toolbar at the top.

    • Click Add on Models to add your first model.
    • Now click Add on the Model element and choose “Browse for Existing.”

    This will open a browser to the Pokemon folder where you have been creating Pokemon content objects. You can click Add & Close to select an item and add it to a model in the scene.

    Repeat this process as many times as you need to add the items you want in your scene.

    Note that you want to alter the X Position for each model that you add so that they do not overlap when they render.

    6.2 Update the Scene Controller to Use the Scene Content Model

    Now that we’ve modified the Scene content model and we’ve updated our content accordingly, we need to tell our controller to look at it and populate the template variables accordingly.

    • Locate the Wrench in the upper right-hand corner on the toolbar. Click the Wrench. This will open the Preview Tools panel on the right-hand side of the screen.
    • Now click In-Context Editing to open the In-Context Editing tools.
    • Now click EditController.
    • Now Update the code with following:
    def pokemonModelIds = contentModel.get(“models/item”)
    templateModel.pokemonInstances = []
    pokemonModelIds.each { item ->
    def pokemonInstance = [:]
    def modelItemId = item.get(“model/item/key”).text
    
    pokemonInstance.model = siteItemService.getSiteItem(modelItemId)
    pokemonInstance.xPosition = item.get(“xPosition”).text
    pokemonInstance.yPosition = item.get(“yPosition”).text
    pokemonInstance.zPosition = item.get(“zPosition”).text
    pokemonInstance.scaleMultiplier = item.get(“scaleMultiplier”).text
    
    templateModel.pokemonInstances.add(pokemonInstance)
    }


  • Click Update to save your work.
  • 6.3 Update the Scene Template to Use the Scene Content Model

    Now that our template has pokemonInstances updated to include the values updated by the author via the content model, we have to update the template to use the new values.

    • Locate the Wrench in the upper right-hand corner on the toolbar. Click the Wrench. This will open the Preview Tools panel on the right-hand side of the screen.
    • Now click In-Context Editing to open the In-Context Editing tools.
    • Now click EditTemplate.
    • Find line 99 and make the following updates:
    loadModelIntoScene({
    basePath: “${texturePath?substring(0, texturePath?last_index_of(‘/’)+1)}”,
    mtlPath: “${texturePath?substring(texturePath?last_index_of(‘/’) + 1)}”,
    objPath: “${objectPath}”,
    scaleMultiplier: ${pokemonInstance.scaleMultiplier},
    xPosition: ${pokemonInstance.xPosition},
    yPosition: ${pokemonInstance.yPosition},
    xRotation: ${pokemonInstance.model.xRotation}}, scene);


  • Click Update to save your work.
  • Step: 7 Play Around!

    Congratulations! Now anyone with access to the CMS can quickly and easily add new models and configure it into the scene. Download additional 3D models and play around with them!

    Taking It Further

    Our example is very basic. We’re simply adding user configured 3D Models on top of a live video feed. This is just the start!

    Real world AR use cases typically include animation, interaction, and use visual triggers like QR codes, GEO Location, or pure play vision to place the augmentation into the scene. We excluded these additional capabilities from the article because they obscure the main point of the article which is making the scene configurable by non-technical users. That said, adding triggers is very easy to do. In fact, the CMS makes triggers even more powerful by giving you the tools to understand what device the user is using, where they are (geolocation) along with other contextual information. Further, you have the full personalization capability of the CMS to help you make your AR experiences dynamic and personalized. How awesome is that?!

    Conclusion

    Web-based augmented reality frameworks that help developers build AR experiences are making it easier than ever for companies to leverage AR as a way to communicate, educate, entertain, and assist users in a rich fashion not previously achievable without huge investments.

    Today most AR work is done exclusively by technical users, and the experiences are statically designed and deployed. This is extremely limiting. It significantly reduces the value of the development, makes it challenging and costly to update, and significantly reduces the ROI on the effort. Smart developers will separate code from content so that non-technical users can quickly and easily update the application’s content without involvement from technical resources for code updates or deployments.

    Integrating your CMS with your AR is a strong pattern for solving this problem — but architects beware, not all CMS platforms are the same. The wrong CMS will interfere with the development process and force interface and implementation details. Crafter CMS, a modern, open-source, Java-based CMS, offers the right architecture, technology, and flexibility for the job. Crafter CMS integrates with your development process and tools and puts your app in control of the interfaces and implementation code while providing content authors with the tools they need to update and publish the application independently. To learn more check out Crafter CMS at http://craftercms.org.

    Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

    Topics:
    web dev ,augmented reality ,web application development

    Published at DZone with permission of Russ Danner, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}