Markup via manifest

Basics

You can use the manifest to mark up different pages using wildcards in the uri

for example /article/*

record format for the manifest

 {
    "uri": "/article/*",
    "page": {
        "width": 1366,
        "height": 768
    },
    "layout": {
        "width": 1366,
        "height": 768,
        "geometry": "curved"
    }
}

Where:

• page - parameters of the original HTML page
  • width - width in pixels
  • height - height in pixels
• layout - page parameters in VR mode
  • width - width in pixels
  • height - height in pixels
• geometry - layer geometry, curved/flat

Multiple viewports layout

Viewport markup on a web page

The HTML code of the example can be found at https://test-api1.gizmovr.com/demo1/

Description of the manifest can be found at https://test-api1.gizmovr.com/gizmovr.json

In this example, the manifest describes a rule for addresses of the type /demo. The page itself has two layers, to mark them in VR mode we add an array of viewports objects to the layout object

{
 "viewports": [
        {
            "id": "left_panel",
            "layout_coords": {
                "left": 0,
                "top": 80
            },
            "page_rect": {
                "left": 0,
                "top": 80,
                "width": 100,
                "height": 150
            },
            "geometry": "flat",
            "order": 0
        }
    ]
}

Fields:

• id - unique name for the viewport
• layout_coords - location of viewport in VR mode
  • left - position from the left edge of the layout in pixels
  • top - from the top edge of the layout in pixels
• page_rect - source location parameters in HTML markup
  • left - left in pixels
  • top - top in pixels
  • width - width in pixels
  • height - height in pixels

Diagram of the transition of blocks from page_rect to layout_coords

Description of the manifest format

The manifest structure

{
    "version": "1.0.0",
    "name": "ExampleSite",
    "icon": "images/touch/icon.png",
    "color_theme": {
        "name": "dark_navy"
    },
    "layouts": [
      ...
    ]
}

Fields:

• version - manifest version in 1.0.0 format
• name - name of the site
• icon - site icon adapted for the virtual browser
• color_theme - structure that describes the application's color scheme to use with this domain
  • name - name of the theme
• layouts - array of structures that describe the rules for configuring layouts for pages in this domain

Layout structure

{
    "uri": "*/demo*",
    "page": {
        "width": 512,
        "height": 512
    },
    "layout": {
        "width": 1100,
        "height": 768,
        "geometry": "curved",
        "fov_angle": 105
    },
    "viewports": []
}

Fields:

• uri - wildcard path of the page to which the markup is applied
• page - setting the parameters of the original HTML page
• width - width in pixels
• height - height in pixels
• layout - page parameters in VR mode
  • width - width in pixels
  • height - height in pixels
  • geometry - curved or flat geometry
  • fov-angle - viewing angle in degrees
• viewports - array of viewport structures

Viewports structure

{
    "id": "left_panel",
    "layout_coords": {
        "left": 0,
        "top": 80
    },
    "page_rect": {
        "left": 0,
        "top": 80,
        "width": 100,
        "height": 150
    },
    "geometry": "flat",
    "order": 0
}

Fields:

• id - the unique ID of the viewport
• layout_coords - coordinates of the viewport in VR mode
  • left - left in pixels
  • top - top in pixels
• page_rect - parameters of the source viewport on the HTML page
  • left - left in pixels
  • right - right in pixels
  • width - width in pixels
  • height - height in pixels
• geometry - curved, flat
• order - the order