Web DIP Browser Web MOON Browser Eleni Mandilara

Web DIP Browser & Web MOON Browser Eleni Mandilara BE-ICS-CIC Section Meeting Prévessin, 19 April 2016

Outline o Polymer Web Components o Web DIP Browser § Web Components § Demonstration o Web MOON Browser § Publications Data Format § Web Components § Implementation Differences between Web DIP & MOON Browser § Demonstration BE-ICS-CIC 19 April 2016 2

Polymer Web Components Web DIP Browser Web MOON Browser Set of standards produced by Google as a W 3 C specification o Reusable widgets or components o Encapsulation & interoperability of individual HTML elements o 4 main elements: o § § o Custom Elements Shadow DOM HTML Imports HTML Templates For web components support, Polymer uses the Polyfills from webcomponents. js BE-ICS-CIC 19 April 2016 3

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser Web DIP Browser BE-ICS-CIC 19 April 2016 4

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser o Composition of four web components § Iron-ajax component Requests the names of all the available publications in DIP. § Impact tree component o Creates the impact tree with all the available publication names received from iron-ajax component. o Array of strings of publication names (http: //prod-bcast-ws-01. cern. ch: 8080/broadcast/rest/query/dip. *) § Broadcast component Subscribes to broadcast publications and forwards them as DOM events. Updates for: o o o new. Value: Array of objects {name, type, value} quality. Flag: String quality. String: String timestamp: String transient: String § Gridstack component Visualizes data updates received as events from broadcast subscriptions in Gridstack panels. BE-ICS-CIC 19 April 2016 5

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser <iron-ajax/> <broadcast-datasource/> JS functions <webc-impacttree/> <webc-gridstack/> index. html BE-ICS-CIC 19 April 2016 6

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser Impact Tree Web Component Gridstack Web Component http: //dashboard. web. cern. ch/dipbrowser/ BE-ICS-CIC 19 April 2016 7

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser Impact Tree external filtering support via web component o Filtering o Tooltips Gridstack Panels o Resizable o Relocatable o Material-Design-Lite Tables: § Filtering § Sorting http: //dashboard. web. cern. ch/dipbrowser/ BE-ICS-CIC 19 April 2016 8

Polymer Web Components Web DIP Browser Demonstration Web MOON Browser http: //dashboard. web. cern. ch/dipbrowser/ BE-ICS-CIC 19 April 2016 9

Polymer Web Components Web DIP Browser Web MOON Browser Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration Web MOON Browser BE-ICS-CIC 19 April 2016 10

Polymer Web Components Web DIP Browser Web MOON Browser Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration Request data from OPC-UA agent through the broadcastdatasource web component o Receive a single string for each of the following: o § § § Nodes Colors PLC Info PLC Data Host Info Host Data BE-ICS-CIC § § § System Integrities Info System Integrities Data FECs Info FECs Data Projects Info Projects Data 19 April 2016 11

Polymer Web Components Web DIP Browser Web MOON Browser o o Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration Nodes: “SBS#SBS|CIET|host 1#SBS|CIET|host 1|plc 1#. . . ” Colours: “red#green#green#. . . ” PLC Info: “##. . . #LAN DB Info: https: //network. cern. ch/sc/. . . |Manufacturer: SCHNEIDER|IP: 172. 18. 196. 211|PLC Time: PLC Current Time: 21/03/2016 14: 10: 42#. . . ” PLC Data: “##. . . #Memory Card Battery A: green|Battery: green|Memory Card Battery B: green|I/O Error: yellow|Date/Time defined: green|RUN Mode: green|Successfully connected to PLC: green|PLC successfully replied: green#. . . ” SBS CIET host 1 plc 1 proj 1 PLC Info “” “” “” “LAN DB Info: . . . ” “” PLC Data “” “” “” “Memory Card Battery. . . ” “” Hosts Info “” “” “” Hosts Data “” “” “” Sys. Integr. Info “” “” “” Sys. Integr. Data “” “” “” FECs Info “” “” “” FECs Data “” “” “” Projects Info “” “” “” Projects Data “” “” “” BE-ICS-CIC 19 April 2016 12

Polymer Web Components Web DIP Browser Web MOON Browser o Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration Composition of two web components § Broadcast Datasource component Subscribes to Broadcast publications of the OPC-UA and forwards them as DOM events § Impact tree component Creates the impact tree of the response with all the available publications BE-ICS-CIC 19 April 2016 13

Polymer Web Components Web DIP Browser Web MOON Browser Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration <broadcast-datasource/> <webc-impacttree/> nodes, colors Nodes, Colors, PLC info, PLC data, Host info, Host data, System Integrity Info, System Integrity Data, FECs Info, FECs Data, Projects Info, Projects Data Moon. JS Visualizations click on leaf event index. html BE-ICS-CIC 19 April 2016 14

Polymer Web Components Web DIP Browser Web MOON Browser Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration o Acquisition of publication names broadcast-datasource webcomponent o Publications data format Converting JS functions o Styles for Impact Tree o Visualizations Generic impact-tree web component by supporting styling callback functions that can be overridden BE-ICS-CIC 19 April 2016 15

Polymer Web Components Web DIP Browser Web MOON Browser BE-ICS-CIC Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration 19 April 2016 16

Polymer Web Components Web DIP Browser Web MOON Browser BE-ICS-CIC Publications Data Format Web Components Implementation Differences between Web DIP & MOON Browser Demonstration 19 April 2016 17

Thank you for your attention Questions ? BE-ICS-CIC 19 April 2016 18