Generic View
Configuration
Mapping view objects from SVG to PLC variables. JSON definition must be located at plc-definition/generic-view folder and declared inside UP at serviceUi/GenericView. Use bottomSheet to show additional information from an object. It is opened with onHover or onClick event. Consider that closing of bottomSheet with onHover out event does not work, since SVG object stays at background only while bottomSheet is open. OnHover out is fired immediately while bottomSheet opens. Use timeout property to close bottomSheet automatically.
Copy Generic view configuration file
Local plc definition
- Add a new build config
- Use existing UPbuild__ServiceUiBackend build
- add CopyNewResourceTask to copy generic view configuration files
- Replace existing target folder definition at ServiceUiBackend folder
Plc definition at PLC (B&R only)
- Add a new build config
- Use existing UPbuild__BR build
- add CopyNewResourceTask to copy generic view configuration files
- Replace existing target folder definition at BR PLC folder
Generic view configuration file
Configuration file (JSON) defines mapping between PLC items and generic view. SVG graph is completely defined at configuration. Each property can declared static as value or dynamic as link (mapping to PLC item).
Config
Defines common properties for SVG representation.
| Property | Description |
|---|---|
| type | Actual implementation supports "static" only. |
| width | Width of SVG graph. Consider that SVG anyway scaled to available size of screen. Use a comfortable width, height value for an easy binding from PLC. As example mm for an easy representation of machine parts. |
| height | Height of SVG graph. |
| activate | Since physical representation probably requires any calculations at PLC. activate is set while Service Ui frontend navigates to generic view. And set to false while navigate to another page. Consider that item is also written to false, while another frontend instance is still at generic view site. |
| animationTime | Plc items updated by UPconnect cyclic, by default every 300ms. Calculation of physical representation at PLC probably also called in a slow task. Since an animation with less than 30 frames per second looks choppy. Animation time could cover slow refresh rate of PLC items. |
"config": {
"type": "static",
"links": [{
"name": "width",
"itemId": "PFC_20.Cur.view!maxPosX"
},
{
"name": "height",
"itemId": "PFC_20.Cur.view!maxPosY"
},
{
"name": "activate",
"itemId": "PFC_20.Rec.viewActive"
},
{
"name": "animationTime",
"value": "800"
}
]
},
Classes
Class defines a graphical form, which can be instantiated at instance.
| Properties | Description |
|---|---|
| id | Use id to link class at instance. |
| properties | Common properties for all class paths: x, y: defines coordinate for all paths. widthFactor, heightFactor: Scale of paths (rect, poly) |
| paths | Definition of paths grouped as one class. |
| paths / type | Type of path: rect: Defines a SVG rectangular. poly: Defines a SVG polygon. * text: Defines at SVG text. |
| paths / properties | Defines path type specific properties. Consider that x, y is relatively to common properties x, y. |
Example class with a rectangular and a text to create a legend:
{
"id": "legend",
"properties": [{
"id": "x",
"link": "x"
},
{
"id": "y",
"link": "y"
},
{
"id": "widthFactor",
"value": "1"
},
{
"id": "heightFactor",
"value": "1"
}
],
"paths": [{
"type": "rect",
"properties": [{
"id": "x",
"value": "0"
},
{
"id": "y",
"value": "0"
},
{
"id": "width",
"value": "4000"
},
{
"id": "height",
"value": "4000"
},
{
"id": "fill",
"link": "color"
},
{
"id": "rx",
"value": "0"
},
{
"id": "ry",
"value": "0"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "400"
}
]
},
{
"type": "text",
"properties": [{
"id": "text",
"link": "text"
},
{
"id": "font-size",
"value": "4000"
},
{
"id": "x",
"value": "6000"
},
{
"id": "y",
"value": "4000"
},
{
"id": "width",
"value": "2000"
},
{
"id": "height",
"value": "2000"
},
{
"id": "fill",
"value": "#000000"
},
{
"id": "rx",
"value": "1500"
},
{
"id": "ry",
"value": "1500"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "0"
}
]
}
]
}
Rectangular
| Property | Description |
|---|---|
| width | Defines width of rectangular. |
| height | Defines height of rectangular. |
| fill | Fill color definition. |
| rx | Defines the radius of the x-axis (rounded corner). |
| ry | Defines the radius of the y-axis. |
| stroke | Stroke color. |
| strokeWidth | Stroke width. |
{
"type": "rect",
"properties": [{
"id": "x",
"value": "0"
},
{
"id": "y",
"value": "0"
},
{
"id": "width",
"value": "4000"
},
{
"id": "height",
"value": "4000"
},
{
"id": "fill",
"link": "color"
},
{
"id": "rx",
"value": "0"
},
{
"id": "ry",
"value": "0"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "400"
}
]
}
Polygon
| Property | Description |
|---|---|
| polyline_x | Array of points of polygon at x-axis. |
| polyline_y | Array of points of polygon at y-axis. |
| fill | Fill color definition. |
| rx | Defines the radius of the x-axis (rounded corner). |
| ry | Defines the radius of the y-axis. |
| rotateAngle | Angle to rotate Polygon, [] = °. |
| rotateCenter_x, rotateCenter_y | Defines center point for rotation. Consider that point is also relative to common x, y properties of class. |
| stroke | Stroke color. |
| strokeWidth | Stroke width. |
{
"type": "poly",
"properties": [{
"id": "x",
"value": "0"
},
{
"id": "y",
"value": "0"
},
{
"id": "polyline_x",
"value": ["-0.5", "0.5", "0.5", "0", "-0.5"]
},
{
"id": "polyline_y",
"value": ["-3", "-3", "-1", "0", "-1"]
},
{
"id": "fill",
"link": "fill"
},
{
"id": "rx",
"value": "300"
},
{
"id": "ry",
"value": "300"
},
{
"id": "rotateAngle",
"value": "-30"
},
{
"id": "rotateCenter_x",
"value": "0"
},
{
"id": "rotateCenter_y",
"value": "-1.5"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "400"
}
]
}
Text
{
"type": "text",
"properties": [{
"id": "text",
"link": "text"
},
{
"id": "font-size",
"value": "4000"
},
{
"id": "x",
"value": "6000"
},
{
"id": "y",
"value": "4000"
},
{
"id": "width",
"value": "2000"
},
{
"id": "height",
"value": "2000"
},
{
"id": "fill",
"value": "#000000"
},
{
"id": "rx",
"value": "1500"
},
{
"id": "ry",
"value": "1500"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "0"
}
]
}
Bottom sheet
A cell definition acts like a template, use {} to map a property. Declare all template properties at property list.
| Property | Description |
|---|---|
| event | Use click or hover event to open bottom sheet. |
| timeout | Bottom sheet closed after defined timeout. |
"bottomSheet": {
"event": "click",
"timeout": 60000,
"properties": [{
"id": "id",
"link": "id"
},
{
"id": "position",
"link": "position"
},
{
"id": "weight",
"link": "weight"
},
{
"id": "positionOffset",
"link": "positionOffset"
}
],
"rows": [{
"columns": ["Item ID", "{id}"]
},
{
"columns": ["Position", "{position} mm"]
},
{
"columns": ["Weight", "{weight}"]
},
{
"columns": ["Position offset to front item", "{positionOffset} mm"]
}
]
}
Instance
Instances defines instantiation of a class. Mapping to real PLC items defined here too.
"instances": [{
"objectId": "conveyors",
"classId": "conveyor",
"array": [1, 50],
"existItemId": "PFC_20.Cur.view!conveyors[]!show",
"links": [{
"name": "x",
"itemId": "PFC_20.Cur.view!conveyors[]!posX"
},
{
"name": "y",
"itemId": "PFC_20.Cur.view!conveyors[]!posY"
},
{
"name": "length",
"itemId": "PFC_20.Cur.view!conveyors[]!length"
},
{
"name": "fill",
"itemId": "PFC_20.Cur.view!conveyors[]!color"
},
{
"name": "stopPosition",
"itemId": "PFC_20.Cur.view!conveyors[]!stopPosition"
},
{
"name": "notificationPosition",
"itemId": "PFC_20.Cur.view!conveyors[]!notificationPosition"
}
]
}]
PLC Variable id (item id)
Consider that item id path distinguish between browsing inside an OPC-UA structure and flat item id.
Array
- Flat array item: "{}"
- Record array item: "[]" (Structure)
Structure child separator
- Flat path separator: "."
- Record path separator "!"
Example
{
"config": {
"type": "static",
"links": [
{
"name": "width",
"itemId": "PFC_20.Cur.view.maxPosX"
},
{
"name": "height",
"itemId": "PFC_20.Cur.view.maxPosY"
},
{
"name": "activate",
"itemId": "PFC_20.Rec.bol_viewActive"
},
{
"name": "animationTime",
"value": "800"
}
]
},
{
"id": "item",
"properties": [{
"id": "x",
"link": "x"
},
{
"id": "y",
"link": "y"
},
{
"id": "widthFactor",
"link": "length"
},
{
"id": "heightFactor",
"value": "1"
}
],
"paths": [{
"type": "rect",
"properties": [{
"id": "x",
"value": "0"
},
{
"id": "y",
"value": "0"
},
{
"id": "width",
"value": "1"
},
{
"id": "height",
"value": "1000"
},
{
"id": "fill",
"link": "fill"
},
{
"id": "rx",
"value": "300"
},
{
"id": "ry",
"value": "300"
},
{
"id": "stroke",
"value": "#000"
},
{
"id": "strokeWidth",
"value": "400"
}
]
}],
"bottomSheet": {
"event": "click",
"timeout": 10000,
"properties": [{
"id": "id",
"link": "id"
},
{
"id": "position",
"link": "position"
}
],
"rows": [{
"columns": ["Item ID", "{id}"]
},
{
"columns": ["Position", "{position} mm"]
}
]
}
}
],
"instances": [{
"objectId": "items",
"classId": "item",
"array": [1, 100],
"existItemId": "PFC_20.Cur.view.items[].show",
"links": [
{
"name": "x",
"itemId": "PFC_20.Cur.view!items[]!posX"
},
{
"name": "y",
"itemId": "PFC_20.Cur.view!items[]!posY"
},
{
"name": "length",
"itemId": "PFC_20.Cur.view!items[]!length"
},
{
"name": "fill",
"itemId": "PFC_20.Cur.view!items[]!color"
},
{
"name": "id",
"itemId": "PFC_20.Cur.view!items[]!id"
},
{
"name": "position",
"itemId": "PFC_20.Cur.view!items[]!naturalPosition"
}
]
}
]
}