Text

Introducing Predix UI 

build IIOT web/mobile applications

Shanghai Foundry Engineering Team

Garry Yao

garry.yao@ge.com

GE DIGITAL

FRONTEND UI ENGINEERING 

Industrial Applications

Predix Applications

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

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

Predix

https://www.w3.org/standards/techs/components

Predix UI is framework-agnostic
and compatible with any other web technology

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 

Industrial spaces can be loud, windy, wet,
or even potentially dangerous - connectivity is often an issue

Built with Industrial Environment in mind

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

Predix UI in "dark theme"

Predix UI in "dark theme"

https://www.predix-ui.com/

40+ components, 20+ style modules, 60+ design patterns

Made with Slides.com