![](https://s3.amazonaws.com/media-p.slid.es/imports/135463/zR4hsuO5/zR4hsuO5_002.png)
Text
Introducing Predix UI
build IIOT web/mobile applications
Shanghai Foundry Engineering Team
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3211698/Screen_Shot_2016-11-09_at_4.41.07_PM.png)
Garry Yao
garry.yao@ge.com
GE DIGITAL
FRONTEND UI ENGINEERING
![](https://i.ytimg.com/vi/LnVZaoiClUU/maxresdefault.jpg)
Industrial Applications
![](http://www.eceinc.com/images/real-time_software.jpg)
![](http://m.eet.com/media/1090167/Teradyne_Debug_Pro_Screen.gif)
![](http://www.oldi.com/lib/image/thumbs/emonitor_screen_1024_768_fill.png)
![](http://design.team.ge.com/predix/wp-content/uploads/sites/1/dashboard-view-05-800x600.png)
![](http://design.team.ge.com/predix/wp-content/uploads/sites/1/analysis-feature-01-800x546.png)
Predix Applications
![](http://design.team.ge.com/predix/wp-content/uploads/sites/1/asset-44-800x546.png)
Traditional
Client-Server Software
Today
Cloud Web Application
- monolithic
- complex installation
- manual update
- platform specific
- open-to-use, zero installation
- accessible anywhere
- reload to update
- cross-platform cross-devices
The Transition of Industrial Applications
Why Predix UI?
Predix APM Perspective
We've built wheels for you and update the platform every week!
Build your wheels MVPs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3527125/Screen_Shot_2017-02-24_at_4.04.36_PM.png)
Predix UI is a set of open-source components
built in 2016 following Web Standard with Google Polymer
Polymer is NOT a framework, it's a polyfill library let you program web components in today's web browser to better utilize the future web platform
![](https://i.stack.imgur.com/Ksn6s.png)
Predix
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3480908/browser-stats.png)
Predix UI is framework-agnostic
and compatible with any other web technology
![](http://www.sinhasoft.com/images/js-framework-services.jpg)
![](https://www.planet-source-code.com/vb/2010Redesign/images/LangugeHomePages/HTML5_CSS_JavaScript.png)
Easy to Learn
Predix component is simply an HTML element
with custom properties as input/output/config
<px-ui-element>
Example: <px-datetime-panel>
<body>
<template is='dom-bind'>
<p>
<strong>Start Time</strong>: [[from]]
<br />
<strong>End Time</strong>: [[to]]
</p>
<px-datetime-range-panel time-format="YY/m/D"
block-future-dates
from-moment="{{from}}"
to-moment="{{to}}" >
</px-datetime-range-panel>
</template>
</body>
Example: <px-datetime-panel>
Predix UI is Responsive
![](https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Content-is-like-water-1980.jpg/1024px-Content-is-like-water-1980.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3152361/2016-10-24_15.06.39.gif)
![](http://www.nrel.gov/news/features/images/20120627_csp_pix20337_large.jpg)
Industrial spaces can be loud, windy, wet,
or even potentially dangerous - connectivity is often an issue
Built with Industrial Environment in mind
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3224210/Screen_Shot_2016-11-13_at_3.41.59_PM.png)
Support offline caching
Built-in integration with Predix Cloud
- Asset service
- Time-series service
- View service
- UAA service
- Settings: Global variables, site-wide settings, config switches, etc.
- Tools: Site-wide mixins and functions.
- Generic: Low-specificity, far-reaching rulesets (e.g. normalize.css).
- Base: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
- Objects: Objects, abstractions, and design patterns (e.g. .media {}).
- Components: Discrete, complete chunks of UI (e.g. .carousel {}).
- Trumps: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .hidden {}).
Theming & co-branding
![](http://inuitcss.com/img/logo.png)
Predix UI in "dark theme"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3498928/dark1.png)
Predix UI in "dark theme"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3498948/dark4.png)
40+ components, 20+ style modules, 60+ design patterns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3498966/Screen_Shot_2017-02-16_at_3.35.42_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/135463/images/3498982/ge_monogram_primary_white_RGB.png)
Predix UI Overview
By Garry Yao
Predix UI Overview
- 2,736