Predix Design System - General Electric
Predix Design System
Contents Predix Design System Overview Create Modern Web Applications 1 About the Predix Design System 6 Application Development with the Predix Design System 7 Supported Browsers for Web Applications 9 Predix Design System Glossary 10 Use the Predix Design System 12 Using the Predix Design System 12 Setting Up the Predix Design System Developer Environment 13 Migrate to Predix Design System Cirrus 15 Migrating to Predix Design System Cirrus 15 New Predix UI Components for Predix Design System Cirrus 17 Deprecated Predix UI Components for Predix Design System Cirrus 18 Predix Design System Cirrus Design Changes 18 Predix Design System Cirrus API Changes 19 Get Started with Predix UI Components ii 1 26 About Predix UI Components 26 Getting Started with Predix UI Components 27 Using a Predix UI Component in a Web Application 27 Predix UI Basics 29 Predix UI Templates 30 Predix UI Components 31 Predix UI Datetime Components 33 Predix UI Mobile Components 33 Predix UI Data Visualization Components 34 Predix UI Vis Framework 35 Localize Predix UI Components 39 Localizing Predix UI Components 39 Localizing Text Strings 40 Localizing with the Moments.js Library 41 Localizing with the D3.js Library 44 Custom Locale Support 46 Predix Design System
Theme Web Applications 51 Theming Web Applications 51 Styling a Predix UI Component 51 Applying a Theme to a Web Application 53 CSS Custom Properties Overview 54 CSS Custom Properties Reference 55 Get Started with Predix UI CSS Modules 56 About Predix UI CSS Modules 56 Getting Started with Predix UI CSS Modules 56 Predix UI CSS Visual Library 59 Predix UI CSS Layout Library 60 Predix UI CSS Utilities Library 61 Predix UI CSS Module Overview 62 Predix Design System Release Notes Predix Design System Release Notes 66 66 iii
Predix Design System Overview Create Modern Web Applications Web applications have evolved to implement many coordinated user functions and tasks traditionally associated with desktop software (for example, Google Docs and Microsoft Office). In addition, modern browsers have built-in support for open-source standards such as JavaScript, HTML5, and Cascading Style Sheets (CSS) that reduce the dependency on proprietary browser plugins such as Adobe Flash or Microsoft Silverlight to run rich interactive content (such as streaming audio and video) . As a developer, you can create modern web applications that run across multiple browsers following the Model View Controller (MVC) architecture, which separates functions that are built and maintained as independent modules: Model – The Model function stores and retrieves information from a database or data service. It defines the data structure for the information that is passed to the controller for processing and to the view for displaying to the user. View – The View function is a visual summary of the information available in a web application. It is the user interface (implemented using HTML, CSS and JavaScript) that translates tasks and results to information that the user can understand and act on. Controller – The Controller function (implemented using JavaScript or other web technologies such as Java EE, Node.js, or Python) defines the business logic used to process commands, make logical decisions, and perform calculations. It also moves and processes data between the model and view modules. Figure 1: Model View Controller Architecture See the following resources for more information: Modern Web Application Architecture MVC Architecture 1
Single-Page Application Approach Modern web applications support rich interactions with multiple web components on a page. Each web component has many intermediate states (such as menu open, menu item X selected, menu item Y selected, menu item clicked). Server-side rendering is hard to implement for all the intermediate states because small view states do not map well to URLs. An alternative to server-side rendering is the single-page application approach that works inside a browser. A single-page application can update any part of the View function without requiring a server round trip to reload a page during use. This is achieved by separating the data from the presentation of data by having the Model function handle data and the View function read from the Model function (see Create Modern Web Applications on page 1 for more information). 2
Figure 2: Single-Page Application Approach 3
A single-page application still needs to make calls to the server back end to get its data, but that server can be built with a completely different technology: (like Node, Java or PHP). See the following resources for more information: Build Modern, Responsive Web Applications Scalable JavaScript Application Architecture Microapp Approach A single-page application uses Asynchronous JavaScript (AJAX) requests and HTML5 to create fluid and responsive user interactions without constant page reloads. However, much of this work running in a browser occurs as complex state transitions following the Model View Controller architecture (see Modern Web Application for more information): There are global state changes (such as going offline in a real time application) . There are delayed results from AJAX requests that get returned at some point from back end operations There are changes to the Model function as values change. There are Domain Object Model (DOM) events that cause small state changes in the View function. There are changes to the Controller function that cause state changes in the View function. The microapp approach implements a conventional single-page application as a suite of microservices. Microservices are atomic, self-contained services that typically perform a single operation on a back-end system, such as a retrieving a customer record. 4
Figure 3: Microapp Approach This means that microapps provide a range of capabilities that can be focused on specific tasks. For example, end users benefit from a View function that is tailored to their specific requirements. See the following resources for more information: Why Application Development is Going Micro Understanding the Micro Apps Trend in Application Development About Microapps and Predix Development 5
About the Predix Design System The Predix Design System gives developers and designers the ability to create and customize the user interface of a modern web application that runs on top of Predix data and services. Predix Design System Features The Predix Design System (https://www.predix-ui.com) includes these features to build and customize the user interface of an industrial web application: A set of web components based on the Polymer library that simplify the effort to build web applications that provide many of the characteristics of desktop software across supported web browsers (see Supported Browsers for Web Applications on page 9 for more information). A set of CSS modules to customize the base typography, layout, and content design in a web application. A gallery of available web components and CSS modules. A set of layout examples that combine branding, navigation, routing, asset selection, data visualization, and other Predix UI components for common views in a Predix application. A design starter kit that supports quick assembly of components in supported configurations of a web application. See the video Introduction to Predix UI for more information. Predix Design System Benefits As a developer or designer, the Predix Design System provides these benefits: Fundamental Capabilities The Predix Design System provides the following fundamental capabilities: Data-first visual design language that focuses on making information meaningful and useful for industrial users. Responsive web design that provides a consistent viewing and interaction experience across laptop, tablet, phone, or large-screen devices (see Supported Browsers for Web Applications on page 9 for more information). Charts The Predix Design System provides the data-driven Predix UI Viz charting framework that uses the D3.js JavaScript library and Polymer web components. You do not need to know D3.js to use the Predix UI Viz framework. If you have a knowledge of Polymer, you can build a new chart using the building blocks and charts that are provided with the Predix UI Viz framework. See Predix UI Vis Framework for more information. Maps The Predix Design System provides basic mapping functionality (such as markers, clusters, popups, locator, panning/zooming, and the ability to apply layers). The px-map component provides the following benefits: 6 Developers can provide users the ability to visualize the geographic location and other information about assets or asset groups on a map. Developers can integrate applications with a preferred mapping/GIS tile service.
Modular Architecture The Predix Design System provides a set of repositories in the PredixDev public GitHub organization that allows you to add only the features and functions that you need. The modular architecture takes advantage of defined variables and default variants that provide the flexibility to change and configure existing applications, rather than use a large, complex, single-component repository. Framework Agnostic Several JavaScript MVC frameworks exist (such as AngularJS and Vue.js) to encourage developers to write more structured code for client-side rendering of HTML pages. While each has its unique advantages, they all can use the Predix Design System repositories to quickly create web applications. See the following resources for more information: Predix Design System: Components that Workk in Your Framework Use Predix Design System with AngularJS Use Predix Design System with Vue.js Application Development with the Predix Design System As a designer or developer, you should review these technologies before using the Predix Design System to build and customize the user interface of a web application that runs on top of Predix data and services. Open-Source Standards As a designer or developer, you should review the conceptual, task, and reference information for the following open-source standards before using the Predix Design System (https://www.predix-ui.com/#/ home): HTML5 – See the following resources for more information: HTML5 Reference HTML5 Developer Guide HTML Code Guidelines CSS (Cascading Style Sheets) – See the following resources for more information: Cascading Style Sheets Reference CSS3 Developer Guide CSS Code Guidelines JavaScript – See the following resources for more information about commonly supported features: JavaScript Reference JavaScript Developer Guide JavaScript Code Guidelines Design Tools As a designer, you should review the conceptual, task, and reference information for the following design tools before using the Predix Design System: Design guidelines that describe best practices to assist designers make key decisions about building and extending the user interface of a web application. Color Materiality 7
Elevation and Layering Data Visualization Forms Navigation Mobile Page Layout Layout Examples Typography Iconography Writing Style for Components A set of example layouts that combine branding, navigation, routing, asset selection, data visualization, and other Predix UI components for common views in a Predix application. A design starter kit that supports quick assembly of Predix UI components in supported configurations of a web application. Developer Tools As a developer, you should review the conceptual, task, and reference information for the following opensource tools before using the Predix Design System : GitHub code repository Node.js runtime environment Bower package manager Gulp build system GitHub Code Repository As a developer, you use GitHub as a source code repository and version control system. The Predix Design System is modular by design, allowing you to add only the features and functions that you need from the individual repositories available in the PredixDev public GitHub organization. See the following resources for more information about the GitHub code repository: GitHub Overview GitHub Documentation Node.js Runtime Environment As a developer, you use Node.js as a cross- runtime environment to build web applications. Node.js includes the npm utility to manage node modules such as the Bower package manager and the Gulp build system. See the following resources for more information about the Node.js runtime environment: Node.js Overview Node.js Documentation Bower Package Manager As a developer, you use the Bower package manager to install the correct package versions needed to configure a web application (such as HTML, CSS, or JavaScript files) and their dependencies. Bower fetches and installs the required packages, then records the package dependencies in a bower.json manifest file. See the following resources for more information about the Bower package manager: 8 Bower Overview Bower Documentation
What You Nneed to Know about Predix UI, Bower, and SemVer Gulp Build System As a developer, you use the Gulp build system to start a web server that runs tasks and serves files to build a web application. This web server can be accessed by entering http://localhost:9000/ in a web browser . See the following resources for more information about the Gulp build tool: Gulp Overview Gulp Documentation Related Resources Create Modern Web Applications on page 1 About the Predix Design System on page 6 Using the Predix Design System on page 12 Developing with the Predix Design System Supported Browsers for Web Applications The Predix Design System has been tested to support these browsers. The following minimum versions of browser software have been fully tested to support all Predix Design System repositories that are available in the PredixDev public GitHub organization: MacOS: Last two versions of Safari, Chrome, and Firefox Windows: Last two versions of Edge, Firefox, Chrome (Wndows) Internet Explorer 11 Android: Last two versions of Chrome (Android) iOS: Last two versions of Safari Note: File a GitHub issue if you encounter a problem using a Predix Design System repository with a supported web browser. For more information on filing a GitHub issue, see https://guides.github.com/ features/issues/. Some Predix UI components use EcmaScript 2015 (aka ES6) JavaScript features supported by the following browsers: Chrome or Chromium version 49 or later Safari or Mobile Safari 10 or later Edge 15.15063 or later Firefox 51 or later See Transpile ES6 to ES5 for more information on browsers that require code transpilation to parse ES6 components. 9
Predix Design System Glossary As a developer, you should understand these Predix Design System terms and definitions. Component A component is a user interface element that enables a user to perform a function or access a service. It defines the fundamental interactions between presentation, interaction and behavior with context, data-binding and services. Components adhere to the following principles of workflow and data aggregation at a granular level: Definition of dependencies, behavior, styling and template using simple HTML syntax (for example, px-datepicker/ . Rendering of "sketch" (minimally-styled) and "Predix" (fully-styled) themes. Independent releases and versions. Ability to inherit functionality from other components by either extension or composition. Nesting as part of another component that can exercise its public API. Ability to expose an API used by an application framework such as AngularJS. This includes scope and bidirectional binding. Card A card is a component that can be shared across different display environments. A card acts as a container that resides within the content area of a web browser. It can contain embedded data for use when connectivity is limited or cut off. A developer can show and hide cards as needed. A card can receive and transmit events, and is both aware of and reactive to the context in which it resides. Components can interact within an individual card, and a card can interact with other cards. You can also create a deck from a collection of cards to create more intricate user interactions. See Getting Started with the Views Service Database for information about how cards and decks are used. Deck A deck is a component that uses a specified layout to determine the arrangement of cards. See Getting Started with the Views Service Database for information on how cards and decks are used. Module A CSS module is a CSS file in chich all class names and animations names are scoped locally by defaul. View A view is the visual summary of the information that is displayed in a web application. A view can have different decks (cards and other components arranged in a specified order) that a user can select at run time. Basics A basic component is a building block of user interface code. Simple, yet powerful, a basic component can be used in isolation or combined to create more complex components. Template A template component is a layout of an entire screen or region of a screen. A template component focuses on the content structure or layout, not the actual content itself. Context Context is the environment and manner in which the object or system is being used by the user or by other parts of the system. It is represented by its own current state and the state of the system around it. It can take into account intent and history. An object or entity can have context, be part of context, or be context itself by meeting these requirements. 10
A context-aware dashboard (contextual dashboard) can behave and look differently when you combine any of the following factors: User or persona. Base object which can be represented by the dashboard, or on which the dashboard may be acting. Time (such as weekday, AM/PM, year). Device. Roles and privileges. User group. State of the system, device, and user. Personal preferences. Sensory factors. Environment. Language. Locale. Writing system (such as phonetic, alphabetic, pictographic, or ideographic). Additional Information Front End Microservice Template Predix Web App Starter 11
Use the Predix Design System Using the Predix Design System As a developer or designer, use the Predix Design System to build and customize the user interface of an industrial web application that runs on top of Predix services and data. About This Task The following tasks show how to get started with the Predix Design System (https://www.predix-ui.com). Table 1: Getting Started with the Predix Design System # Task Information 1 As a designer or developer, explore the Predix Design System See Introducing GE’s data visualization framework for as a data visualization framework for industrial web applications. IoT. As a designer or developer, explore Predix UI components and See Predix Design System Gallery. 2 CSS modules that are available in the Predix Design System. 3 As a designer or developer, explore example layouts that See Predix Design System Layout Examples. combine branding, navigation, routing, asset selection, and data visualization for common views in a Predix application. 4 5 6 As a designer or developer, explore the features and See Migrating to Predix Design System Cirrus on page enhancements available in Predix Design System Cirrus. 15. As a developer, set up the Predix Design System developer See Setting Up the Predix Design System Developer environment. Environment on page 13. As a developer, use the Predix UI components in the See Getting Started with Predix UI Components on page PredixDev public GitHub organization for common user 27. interactions (such as application navigation and context browsing). 7 As a designer, use the design guidelines and starter kit that support quick assembly of Predix UI components in supported configurations of a web application. See Design Tools on page 7 After completing the getting started tasks, you can follow these optional developer tasks that describe how to use the Predix Design System in a web application: Table 2: Using the Predix Design System 12 # Description Information 1 Download the code of an application example to run in a local developer environment or Cloud Foundry. See Sample Application. 2 Localize a Predix UI component for a specific country or region See Localizing Predix UI Components on page 39. 3 Change the values of CSS custom properties defined for Predix See Theming Web Applications on page 51. UI components to apply a theme to a web application.
# Description Information 4 Use the Predix UI CSS modules in the PredixDev public GitHub organization to satisfy custom styling requirements. See Getting Started with Predix UI CSS Modules on page 56 5 Use the Predix UI Vis framework to create a custom chart. See Predix UI Vis Framework on page 35. 6 Build a custom Predix UI component to satisfy specific application requirements. . See Px Component Generator. Setting Up the Predix Design System Developer Environment The Predix Design System developer environment requires Node.js and Bower. Before You begin You should understand the conceptual, task, and reference information needed to use the Predix Design System to create web applications with the following open-source tools: GitHub code repository Node.js runtime environment Bower package manager Gulp build system For more information, see Developer Tools on page 8. Accounts You need to register for the following accounts to use the Predix Design System in a web application: A Predix.io account. Go to https://www.predix.io/registration/. When you register for a Predix.io account, an org and space is created for you in Cloud Foundry. A Github account to download the Predix Design System repositories in the PredixDev public GitHub organization. Go to https://github.com/join. Software You need to set up these common tools to use the Predix Design System in a web application: Table 3: Common Tools for Web Application Development Software Version Description Cloud Foundry CLI Latest stable binary version Use the Cloud Foundry CLI to deploy and manage applications and services. Download the latest stable binary from https://github.com/cloudfoundry/ cli#downloads. Git CLI Latest Use the Git CLI to download Predix Design System repositories in the PredixDev public GitHub organization. Download the latest stable binary from https://git-scm.com/ downloads. 13
Procedure 1. Install the latest version of the Node.js runtime environment for your operating system. See https:// nodejs.org/en/download/. 2. Modify the file permissions for the Node.js npm package-management utility. See https:// ons. 3. Install the gulp build system and bower package manager. npm install gulp gulp-cli bower -g 14
Migrate to Predix Design System Cirrus Migrating to Predix Design System Cirrus Predix Design System Cirrus updates the existing Predix Design System Classic GitHub repositories in the predixdesignsystem public organization to achieve the following goals: Establish a more visually sophisticated design language. Increase the diversity of design patterns. Involve the design community to improve quality and adoption. Provide better guidance about how to use the Predix Design System. As a developer, migrating from the Predix Design System Classic GitHub repositories to the Predix Design System Cirrus GitHub repositories involves the following global changes: Default Predix color values have been removed from all of the Predix UI component CSS variables. Without a theme, components will appear with a mostly monochromatic "generic" theme. Note: Default Predix color values have not been removed from the Predix Design System Cirrus CSS module repositories. You should include either the px-theme or px-dark-theme style modules in your application to style Predix UI components (or create and include your own theme). See Theming Web Applications on page 51 for more information. All of the Font Awesome icons have been replaced with custom Predix Design System icons in the pxicon-set repository. You should include both px-icon-set.html and px-icon.html in your web application. See Migrate to New Icons for more information. You should review the Vis Migration Guide to determine if there are any changes needed to upgrade any data visualization components. Use the Version Finder tool to determine which GitHub repository (Predix Design System Classic or Predix Design System Cirrus) applies to your web application depending on your needs: Predix developers maintaining an existing web application will need to research which Predix Design System Classic GitHub repositories are used before upgrading to the Predix Design System Cirrus GitHub repositories. Predix developers building a new web application should only use Predix Design System Cirrus GitHub repositories. Related reference New Predix UI Components for Predix Design System Cirrus on page 17 Deprecated Predix UI Components for Predix Design System Cirrus on page 18 Predix Design System Cirrus Design Changes on page 18 Predix Design System Cirrus API Changes on page 19 Using the Predix Design System Classic Repositories Before You Begin As a developer, you use the Bower package manager to install the correct package versions needed to configure a web application (such as HTML, CSS, or JavaScript files) and their dependencies. Bower 15
fetches and installs the required packages declared in the bower.json file. See Application Development with the Predix Design System on page 7 for more information. Using a Predix Design System Classic repository in an existing web application 1. Use the Version Finder tool to determine which Predix Design System Classic repository in the predixdesignsystem public organization is used in an existing web application. 2. List GitHub repositories as dependencies in the bower.json file of your web application. 3. Verify that bower.json file includes either Predix Design System Classic GitHub repositories or Predix Design System Cirrus GitHub repositories. Note: Predix Design System Classic GitHub repositories and Predix Design System Cirrus GitHub repositories should not be mixed. 4. Copy the version ranges of the GitHub repositories that are used from the Version Finder tool into your bower.json file to ensure your builds are consistent. Ugrading a Predix Design System Classic repository in an existing web application Predix developers who use the Predix Design System Classic repositories in the predixdesignsystem public GitHub organization in an existing web application will need to research the necessary changes to upgrade to the Predix Design System Cirrus GitHub repositories. New Predix UI Components for Predix Design System Cirrus on page 17 Deprecated Predix UI Components for Predix Design System Cirrus on page 18 Predix Design System Cirrus Design Changes on page 18 Predix Design System Cirrus API Changes on page 19 The necessary changes to upgrade all the Predix Design System Classic repositories in an existing web application should be made as soon as possible (see Using Predix Design System Cirrus Repositories on page 16 for more information). Using Predix Design System Cirrus Repositories As a developer, you should build a new web application with the Predix Design System Cirrus GitHub repositories in the predixdesignsystem public organization: To use the Predix Design System Cirrus GitHub repository for a Predix UI component in a new web application, see Using a Predix UI Component in a Web Application on page 27. To use the Predix Design System Cirrus repository for a Predix UI CSS module , see Using a Predix UI CSS Module in a Web Application on page 58. Note: Use the Version Finder tool to determine which Predix Design System Cirrus GitHub repository to use (depending on your needs). Predix Design System Cirrus FAQ Q: Can I take one of the Predix Design System Cirrus GitHub repository without upgrading all of my Predix Design System Classic GitHub repositories? A: No. There are dependencies between Predix Design System Cirrus GitHub repositories, so this is not recommended. You should upgrade your web application to use the Predix Design System Cirrus GitHub repositories in order to ensure a harmonious user experience. Q: I need the Predix UI team to make an enhancement to a Predix Design System Classic GitHub repository. Can you do this on the Predix Design System Classic GitHub repository? 16
A: No. the Predix UI team is only maintaining and enhancing Predix Design System Cirrus GitHub repositories going forward. Please contact the Predix UI team if there is an urgent business case for your requirements. Q: I’m using a Predix Design System Classic GitHub repository. Can I still use this version and make a fix or enhancement to it myself? A: Yes you can, but you should also make the fix or enhancement in the Predix Design System Cirrus GitHub repository. New Predix UI Components for Predix Design System Cirrus Predix Design System Cirrus includes new Predix UI component repositories in the predixdesignsystem public organization. To use a new Predix UI component, see Using a Predix UI Component in a Web Application on page 27. px-accordion A user interface component that provides expandable and collapsible subsection headers for a page. An optional "action" icon on the right side will fire an event when pressed. See Predix UI Components on page 31 for the component API reference that includes more details and code examples. px-app-header A user interface component that allows the px-branding-bar and px-app-nav components to work together. See Predix
Modular Architecture The Predix Design System provides a set of repositories in the PredixDev public GitHub organization that allows you to add only the features and functions that you need. The modular architecture takes advantage of defined variables and default variants that provide the flexibility to
Predix for Healthcare Concept Specialize Predix where necessary to create next-generation healthcare domain solutions Predix for Healthcare Predix GEHC App GEHC App GEHC App Predix Runtime Fabric (Servers, VMs, Devices, etc.) Built on Predix industrial internet platform Delivers healthcare-specific content, services and technologies
GE’s Industrial Internet software platform Predix Predix Predix Predix Predix One platform One architecture Modular, cloud- agnostic approach 1 2 3 Faster development, operation and management 4 5
transformation. GE's Predix combines cloud and edge computing into one powerful platform to drive industrial outcomes. Predix is a distributed applications and services platform for digital industrial companies. Predix includes an edge software stack and a cloud software stack, which work together to deliver a distributed technology environment
Predix Edge OS Architecture Predix Edge OS Architecture The Predix Edge Operating System is a baseline Yocto Linux distribution that can be extended and ported to many bare metal platforms or virtual environments. It is architected around the design goals of small footprint, security, mul
Predix Predix is GE’s software platform for the Industrial Internet. Predix enables asset and operations optimization by providing a standard way to run industrial-scale analytics and connect machines, data, and people. Deployed on machines, on-premise, or in the cloud,
Predix Industrial Cloud Platform - Architecture GE Non-GE Predix-ready MACHINES and industrial devices Application services predix.io Industrial Internet apps powered by Predix Cloud Infrastructure Scal
Predix Modbus TCP Connectivity for NI Linux RT toolkit is designed to allow users send and store sensors data to GE Predix or other cloud, using Modbus TCP protocol and GE Predix
Predix That's why GE built Predix - the Industrial Internet platform . By packaging its own capabilities and transformation experience, GE created Predix to guide industrial companies through this complex technology and business transition, putting them in charge of their IIoT journey . By using this comprehensive platform, businesses can .
