Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 1 | { |
| 2 | "defn_name": "layout", |
| 3 | "defn_desc": "Sample Layout Sprite Data", |
| 4 | |
| 5 | "_comment": [ |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 6 | "Sample sprite layout file, demonstrating user-defined paths", |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 7 | "(1) Register on the server with ...", |
| 8 | " onos-upload-sprites localhost layout.json", |
| 9 | "(2) Load into topology view with ...", |
| 10 | " http://localhost:8181/onos/ui/index.html#/topo?sprites=layout" |
| 11 | ], |
| 12 | |
| 13 | "_comment_paths": [ |
| 14 | "The 'paths' array contains custom path data.", |
| 15 | "Note that viewbox defaults to [0 0 1000 1000], which is the logical", |
| 16 | "coordinate space of the topology view." |
| 17 | ], |
| 18 | "paths": [ |
| 19 | { |
| 20 | "tag": "border", |
| 21 | "d": "M0,0h1000v1000h-1000z", |
| 22 | "_comment": "bounds of viewbox 0 0 1000 1000" |
| 23 | }, |
| 24 | { |
| 25 | "tag": "multi", |
| 26 | "d": [ |
| 27 | "M500,500l-50,50v-200h100v200z", |
| 28 | "M600,400h200v50h-200z" |
| 29 | ], |
| 30 | "_comment": "shows path constructed from multiple strings" |
| 31 | }, |
| 32 | { |
| 33 | "tag": "triangle", |
| 34 | "viewbox": "0 0 1 1", |
| 35 | "d": "M.5,.2l.3,.6,h-.6z", |
| 36 | "_comment": "defines its own viewbox" |
| 37 | }, |
| 38 | { |
| 39 | "tag": "diamond", |
| 40 | "viewbox": "0 0 1 1", |
| 41 | "d": "M.2,.5l.3,-.3l.3,.3l-.3,.3z" |
| 42 | } |
| 43 | ], |
| 44 | |
| 45 | "_comment_defn": [ |
| 46 | "The 'defn' array contains sprite definitions that combine", |
| 47 | "path, dimensions, and label-offset into 'sprites' that can be", |
| 48 | "replicated (stamped) in different positions in the view.", |
| 49 | "", |
| 50 | "The 'glyph' property refers to glyphs registered with the UI.", |
| 51 | "Alternatively, the 'path' property refers to a custom path defined in", |
| 52 | "the path array above. The 'dim' property provides the [width,height]", |
| 53 | "bounds within which the glyph/path is drawn. The 'labelyoff' property", |
| 54 | "defines the Y-offset of the label as a percentage from the top of the", |
| 55 | "sprite; for example, 0.4 = 40%. The label is centered horizontally.", |
| 56 | "", |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 57 | "Note that dimension (dim) defaults to [40,40] which is the", |
| 58 | "approximate size of a device icon." |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 59 | ], |
| 60 | "defn": [ |
| 61 | { |
| 62 | "id": "border", |
| 63 | "path": "border" |
| 64 | }, |
| 65 | { |
| 66 | "id": "multi", |
| 67 | "path": "multi" |
| 68 | }, |
| 69 | { |
| 70 | "id": "small_tri", |
| 71 | "path": "triangle", |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 72 | "scale":4 |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 73 | }, |
| 74 | { |
| 75 | "id": "big_tri", |
| 76 | "path": "triangle", |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 77 | "scale":12 |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 78 | }, |
| 79 | { |
| 80 | "id": "subnet", |
| 81 | "glyph": "cloud", |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 82 | "scale":8, |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 83 | "labelyoff": 0.4 |
| 84 | }, |
| 85 | { |
| 86 | "id": "subnet2", |
| 87 | "glyph": "cloud", |
| 88 | "dim":[200,200], |
| 89 | "labelyoff": 0.4 |
| 90 | } |
| 91 | ], |
| 92 | |
| 93 | "_comment_load": [ |
| 94 | "The 'load' object contains sprites and labels to load into the view.", |
| 95 | "", |
| 96 | "Items in the sprite list associate sprites with a position,", |
| 97 | "style class, and optional label. Note that the coordinates of", |
| 98 | "the position define the top-left corner of the sprite.", |
| 99 | "Default 'pos' is [0,0]. Default 'class' is 'gray1'.", |
| 100 | "", |
| 101 | "Items in the label list associate labels with a position and", |
| 102 | "style class. Note that the text is centered on the x-coordinate." |
| 103 | ], |
| 104 | "load": { |
| 105 | "sprites": [ |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 106 | { "id": "subnet", "pos":[-40,20], "label":"apples", "class": "blue1" }, |
| 107 | { "id": "subnet", "pos":[400,40], "label":"bananas", "class": "blue1" }, |
| 108 | { "id": "subnet", "pos":[840,60], "label":"cherries", "class": "blue1" }, |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 109 | { "id": "subnet2", "pos":[300,400], "class": "gray1" } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 110 | ], |
| 111 | "labels": [ |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 112 | { "pos":[500,850], "text":"Sample Layout", "class":"blue1", "size":1.6 }, |
| 113 | { "pos":[500,900], "text":"Illustrating Sprites", "class":"gray1" } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 114 | ] |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame^] | 115 | }, |
| 116 | "junk":[ |
| 117 | { "id": "border" }, |
| 118 | { "id": "multi", "class": "gray1" }, |
| 119 | { "id": "small_tri", "pos":[10, 20] }, |
| 120 | { "id": "small_tri", "pos":[110, 20] }, |
| 121 | { "id": "small_tri", "pos":[210, 20] }, |
| 122 | { "id": "small_tri", "pos":[310, 20] } |
| 123 | ] |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 124 | } |