web/gui/src/main/webapp/data/sprites/layout.json

{
  "defn_name": "layout",
  "defn_desc": "Sample Layout Sprite Data",

  "_comment": [
    "Sample sprite layout file, demonstrating user-defined paths",
    "(1) Register on the server with ...",
    "    onos-upload-sprites localhost layout.json",
    "(2) Load into topology view with ...",
    "    http://localhost:8181/onos/ui/index.html#/topo?sprites=layout"
  ],

  "_comment_paths": [
    "The 'paths' array contains custom path data.",
    "Note that viewbox defaults to [0 0 1000 1000], which is the logical",
    "coordinate space of the topology view."
  ],
  "paths": [
    {
      "tag": "border",
      "d": "M0,0h1000v1000h-1000z",
      "_comment": "bounds of viewbox 0 0 1000 1000"
    },
    {
      "tag": "multi",
      "d": [
        "M500,500l-50,50v-200h100v200z",
        "M600,400h200v50h-200z"
      ],
      "_comment": "shows path constructed from multiple strings"
    },
    {
      "tag": "triangle",
      "viewbox": "0 0 1 1",
      "d": "M.5,.2l.3,.6,h-.6z",
      "_comment": "defines its own viewbox"
    },
    {
      "tag": "diamond",
      "viewbox": "0 0 1 1",
      "d": "M.2,.5l.3,-.3l.3,.3l-.3,.3z"
    }
  ],

  "_comment_defn": [
    "The 'defn' array contains sprite definitions that combine",
    "path, dimensions, and label-offset into 'sprites' that can be",
    "replicated (stamped) in different positions in the view.",
    "",
    "The 'glyph' property refers to glyphs registered with the UI.",
    "Alternatively, the 'path' property refers to a custom path defined in",
    "the path array above. The 'dim' property provides the [width,height]",
    "bounds within which the glyph/path is drawn. The 'labelyoff' property",
    "defines the Y-offset of the label as a percentage from the top of the",
    "sprite; for example, 0.4 = 40%. The label is centered horizontally.",
    "",
    "Note that dimension (dim) defaults to [40,40] which is the",
    "approximate size of a device icon."
  ],
  "defn": [
    {
      "id": "border",
      "path": "border"
    },
    {
      "id": "multi",
      "path": "multi"
    },
    {
      "id": "small_tri",
      "path": "triangle",
      "scale":4
    },
    {
      "id": "big_tri",
      "path": "triangle",
      "scale":12
    },
    {
      "id": "subnet",
      "glyph": "cloud",
      "scale":8,
      "labelyoff": 0.4
    },
    {
      "id": "subnet2",
      "glyph": "cloud",
      "dim":[200,200],
      "labelyoff": 0.4
    }
  ],

  "_comment_load": [
    "The 'load' object contains sprites and labels to load into the view.",
    "",
    "Items in the sprite list associate sprites with a position,",
    "style class, and optional label. Note that the coordinates of",
    "the position define the top-left corner of the sprite.",
    "Default 'pos' is [0,0]. Default 'class' is 'gray1'.",
    "",
    "Items in the label list associate labels with a position and",
    "style class. Note that the text is centered on the x-coordinate."
  ],
  "load": {
    "sprites": [
      { "id": "subnet", "pos":[-40,20], "label":"apples", "class": "blue1" },
      { "id": "subnet", "pos":[400,40], "label":"bananas", "class": "blue1" },
      { "id": "subnet", "pos":[840,60], "label":"cherries", "class": "blue1" },
      { "id": "subnet2", "pos":[300,400], "class": "gray1" }
    ],
    "labels": [
      { "pos":[500,850], "text":"Sample Layout", "class":"blue1", "size":1.6 },
      { "pos":[500,900], "text":"Illustrating Sprites", "class":"gray1" }
    ]
  },
  "junk":[
    { "id": "border" },
    { "id": "multi", "class": "gray1" },
    { "id": "small_tri", "pos":[10, 20] },
    { "id": "small_tri", "pos":[110, 20] },
    { "id": "small_tri", "pos":[210, 20] },
    { "id": "small_tri", "pos":[310, 20] }
  ]
}