Intermediate Tutorial


Positioning Static HTML


15 minutes

Posted on: March 12, 2018

Learn Sumerian
Positioning Static HTML

Tags

HTML
HTML positioning

In this tutorial you will learn about:

Positioning HTML components

In this tutorial, you learn how to place static HTML elements within an Amazon Sumerian scene. We’ll place the HTML elements, which are clickable buttons, at the edge of the frame view, displaying “top, left, right, bottom”, and so on.

You’ll learn about positioning HTML components.

This is the scene we will build in this tutorial. For best results, be sure you are using the latest version of your browser.

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Step 1: Create a New Scene

From the Dashboard, create a scene from the Default Lighting template.

Step 2: Add and Edit the Script

  1. From the Create Entity menu, create a new HTML entity, and then select it.

    An HTML entity is inserted into the scene. By default, the HTML entity is positioned specified by its Transform values, which at first are (0, 0, 0). For this exercise, we want to position items relative to the screen.

  2. Uncheck the Move with Transform check box.

  3. To have our buttons align with the sides of the screen, inside the HTML entity code, we need to set the CSS style and positioning for each button.

  4. Click Open in Editor. In the HTML editor, replace the existing code with the following.

<style type="text/css">
  /* Turn off pointer events for the parent and #myContainer */
  .sumerian-entity {
    pointer-events: none
  }
  /* Set default pointer events for everything inside myContainer */
  #myContainer * {
    pointer-events: auto
  }
  /* myContainer should cover the whole screen */
  #myContainer {
    width: 100vw;
    height: 100vh;
  }
  .alignTop {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 80px;
    margin-left: -40px;
  }
  .alignRight {
    position: absolute;
    right: 10px;
    top: 50%;
    height: 20px;
    margin-top: -10px;
  }
  .alignBottom {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 80px;
    margin-left: -40px;
  }
  .alignLeft {
    position: absolute;
    left: 10px;
    top: 50%;
    height: 20px;
    margin-top: -10px;
  }
  .alignBottomRight {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .alignBottomLeft {
    position: absolute;
    left: 10px;
    bottom: 10px;
  }
  .alignTopLeft {
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .alignTopRight {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .alignCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width:80px;
    margin-top: -10px;
    margin-left: -40px;
  }
</style>
<div id="myContainer">
  <button class='alignTop'>Top</button>
  <button class='alignRight'>Right</button>
  <button class='alignBottom'>Bottom</button>
  <button class='alignLeft'>Left</button>
  <button class='alignBottomRight'>Bottom right</button>
  <button class='alignBottomLeft'>Bottom left</button>
  <button class='alignTopLeft'>Top left</button>
  <button class='alignTopRight'>Top Right</button>
  <button class='alignCenter'>Center</button>
</div>

This gives us nine buttons with different alignments. Experiment with the buttons and classes to see how you can customize their titles and position on the screen.

Now publish and share your scene!

You have now learned how to use a script to place HTML items within a scene. To learn more, view the following tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.