Custom XML layouts

You can add an XML file to your folder to manually position items on the tab.

The following shows an example _layout.xml file which displays an enlarged video in the middle of the screen. In the XML, the Resource tag and its Attributes enable you to load a particular object on the tab, and control properties such as its path, scale, and whether it can be moved, pinch rotate-scaled, etc.

There is a large number of possible attributes that can be controlled, however the common options are listed in this guide. Please refer to the advanced XML guide for a more comprehensive list of available options.

<Resource
    type="video"
    x="0.0"
    y="0.25" >
    <Attribute 
        path="@filedir@/_video.mp4"
        scale="3.0"
        moveable="true" 
pinchable="true"
        closebutton="false"
    />
</Resource>

This creates a new Resource of type "video" near the middle of the screen (raised slightly with a Y attribute of 0.25, to account for the tab bar at the bottom of the screen. The Resource tag as a separate "Attribute" tag section for specifying additional options such as path, scale, whether the object is moveable, etc.

In the path attribute, the @filedir@ component will be replaced with the path of the folder that the XML file is located in. This is a simple way of simply specifying that the XML script should load a video in the same folder as the XML file. By naming the video file as _video.mp4, the underscore ensures that the file doesn't get loaded also by the default content layout mechanism.

The x and y position attributes (as well as scale) are specified in OpenGL coordinates, where the centre of the screen is (0,0). Please see the diagram below for a graphical depiction of the coordinate space. By default, all objects appear at scale 1.0. Specifying a smaller or larger value will change the relative scale of the object.

The following _layout.xml file positions two web browser windows, side-by-side, which can then be rotated, moved, resized etc.

<Resource
    type="webbrowser"
    x="-1.0"
    y="0.25" >
    <Attribute 
        url="http://www.subaru.com.au/"
        closebutton="false"

    />
</Resource>

<Resource
    type="webbrowser"
    x="1.0"
    y="0.25" >
    <Attribute 
        url="http://www.subaru.com.au/email-an-enquiry"
        closebutton="false"
    />
</Resource>

• image
• staticsprite (immovable and fixed image that can't be selected)
• document (PDF)
• textfield
• video
• fullscreenwebbrowser
• callback button
• carouselview
• contentgallery

These have a "path" attribute (except for the fullscreenwebbrowser and webbrowser which have "url" attributes), similar to the video example above.

Please note that despite having a _layout.xml file on a tab, any other documents/images etc in the folder (or in a layout sub-folder) without an underscore prefix will be loaded as per any other tab.

<Resource
    type="image" x="-1.27" y="0.21">

    <Attribute
        path="@filedir@/_location.jpg"
        closebutton="false"
        scale="3.5"
    />
</Resource>

<Resource
    type="webbrowser" x="2.34" y="1.03">

    <Attribute
        url="https://www.google.com.au/maps"
        closebutton="false"
        scale="1.51"
    />
</Resource>

<Resource
    type="video" x="2.34" y="-0.6">

    <Attribute
        path="@filedir@/_location_video.mov"
        closebutton="false"
        scale="1.51"
    />
</Resource>

<Resource
    type="document" x="-1.6" y="0.28">
    <Attribute
        path="@filedir@/_floorplate.pdf"
        closebutton="false"
        scale="2.7"
        showcommandbaroninside="false"
        visible="false"
    />
</Resource>

<!-- Floorplan container -->

<Resource type="staticsprite" x="2.2" y="-0.7" >
    <Attribute path="images/solids/grey.bmp" scale="1.5" aspect="2.0" alpha="0.6" />

    <Resource type="textfield" x="-0.8" y="0.4">

        <Attribute
            text="Floorplans"
            singleline_mode="expand"
            horizontal_alignment="left"
            vertical_alignment="center"
            leftmargin="0"
            fontsize="1"
            singleline="true"
            textcolour_r="1"
            textcolour_g="1"
            textcolour_b="1"
            textalpha="1.0"
            font="@appdir@/fonts/Montserrat-Regular.ttf"
            scale="0.05"
            alpha="0"
            fixed="true"
            selectable="false"
        />

    </Resource>

    <Resource type="carouselview" x="0.0" y="0.0" >
        <Attribute scale="0.95" aspect="2.0"
            folder="@filedir@/_floorplans" floatingfullscreen="true" fullrespreview="true" modal="false" labels="true"
        />
    </Resource>
</Resource>

If you need help with specific layout arrangements, and other types of content not covered in this guide, please get in touch with us for guidance.