Challenge Overview
Welcome to Predix - GE TurboConnect - Asset and Model View Editor UI Demo Refinement Challenge. We are looking to continue the work from the previous challenge and add in the Asset and Template sections plus refine the overall "demo" flow.
The goal of this challenges is to continue updating the Predix UI Prototype using the GE Predix UI based on provided storyboards. The Asset and Model application will allow users the ability to define domains, build prototypes (high-level abstracts/templates) of assets & to create vendor specific definitions for those templates.
Read the challenge details and let us know if you have any questions!
https://drive.google.com/drive/folders/0BwfkY6SJxFPiMkZjcTQ5cTR0LWM?usp=sharing
General Tasks
- The focus of this UI Prototype challenge is to continue updating the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components. See storyboard screens required below.
- FYI: The base of the provided Predix UI Demo is using Predix UI Seed
- Click around and get familiar with the Predix UI CSS and Predix UI Components before you start adding/updating the demo. Check detail documentation here
- As with the existing Predix UI Seed, this application needs to support Responsive breakpoints
- For all icons use the Predix UI Iconography. If the icon does not exist, create them as SVG format.
Important:
- All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
- If there are elements that do not exist within the Predix UI, you can also use Google Polymer for this challenge:
-- https://beta.webcomponents.org/
-- https://elements.polymer-project.org/browse?package=google-web-components
Important:
- By default the Predix UI overrides the designers PSD creation.
- We do not want you to customize any of the pre-existing UI components.
- Let us know if you cannot find related Components and CSS.
- If you cannot find related Components you can use an open source library linked via Bower
- Do not just put raw JavaScript library inside your prototype
- You must use SASS/SCSS for CSS Pre-Processor
- If you use a custom styling/function it must be based on the existing library and put in separate file
- The data for each page will need to be loaded from JSON files.
- Create the documentation so we are able to setup and test your submission (this can be left for Final Fixes)
Base Submission
- Please fork this following Github: https://github.com/topcoderinc/turboconnect
- Send your GitHub username via challenge forum to get the access
- Challenge winner will need to submit a Merge Request to our GitHub
- Navigate to Predix UI folder via your Command Prompt or Terminal
- Install tool, you will need Node, Bower and Gulp to be installed globally on your machine.
-- Install Node (https://nodejs.org/en/download/). This includes npm - the node package manager.
-- Install Bower (https://bower.io/) globally `npm install bower -g`
-- Install Gulp (http://gulpjs.com/) globally `npm install gulp -g`
- Run the following commands via Terminal/Command Prompt from the extracted folder
-- npm install
-- bower install
-- gulp
- Navigate to http://localhost:5000/ to see your Predix UI GE
- Important: Your updated code needs to be running without error when we push to the cloud (example on Github: https://github.com/PredixDev/predix-seed)
TreeView Library
In this challenge, the Treeview should be available based on the first demo challenge.
- This is the Treeview library we want you to use for this challenge. https://dhtmlx.com/docs/products/dhtmlxTreeView/
- You can also use TreeGrid library for the missing functionality: https://dhtmlx.com/docs/products/dhtmlxTreeGrid/
GE - Turbo Connect Asset, Template and Demo Update Screen Requirements
General Update
- All table columns need fix to use full 100% height column on required browsers
- Update copyright year from 2015 to 2017
1). Templates Editor Flow and Interactions
Folder: Templates
Demo Features:
- The user is able to view existing Templates and Create new Templates
- The user is able to Filter on their Templates (Demo is filtering on Water)
- The user starts with a collapsed folder view and is then able to open their folders
- The user is able to save their favorite to their "Collection" - Demo is showing "Water Tank"
- The user is able to switch from Folder to List view
- The user is able to export their template to csv.
Template Demo Flow:
03_Predix-Update-01.jpg
- We should open the Template view in the Collapsed Folder View
- The user is able to open the Water Tanks Folder and add "Water Tank" to their "Collection" by click on the "Collection Toolbox" icon
03_Predix-Update-02.jpg
- The user clicks on "Filter" to open the Filter Column and they filter on "Water" (Clear will empty all values)
03_Predix-Update-03.jpg
- The user clicks on List View to see the templates in list view
03_Predix-Update-04.jpg
- Clicking on the Template Name will allow the user to edit the Template
03_Predix-Update-05.jpg:
The user is able to edit the Template attributes
They click on Properties to view/edit the properties (these sections should open and close)
03_Predix-Update-06.jpg:
- They click back on the Templates header and are taken back to the list view (with nothing checked)
03_Predix-Update-07.jpg
- The user decides they would like to export some templates and selects (Municipality, Municipality, Water Tank)
- They click on the Export button
03_Predix-Update-08.jpg
The user is taken to the export screen where they can export their templates
Screen Details:
- Reuse existing styles from the provided Demo files
- Update based on the provided screen designs.
2). Assets Editor Flow and Interactions
Folder: Assets
Demo Features:
- The user is able to View existing and Create new Assets (default should be closed Filter view = no image for this)
- Clicking on the Asset name will allow the user to see the Asset details and edit/update the Asset
- The user is able to click on Filter and Filter the assets (for the demo it is Water)
- The user can scroll to see all available assets
- If the user has a favorite Template they like to use they can drag and drop the Template from their "Collection" onto an Asset (ex: Acme Town)
- When the user drags the Template onto the Asset it asks the user to select the type of Template
- Once the user applies the Template it takes them to the edit view of the Asset where they can see their "Water Tank" Template has been applied
- The user is able to click on the "Properties" area and edit associated properties to add additional "Tags"
- The user is able to scroll and see other Attributes of the Asset
Demo Flow:
Screenshot: 03_Predix-Update-09.jpg
- This is the Asset sections of the application
- By default, we want to show the Filter closed
Screenshot: 03_Predix-Update-10.jpg
- User can drag the saved "Collection template" "Water Tank" to the Asset "Acme Town" to apply the Template to that Asset
Screenshot: 03_Predix-Update-11.jpg
- Assign template window
- Clicking Apply button will load the Asset Attributes
Screenshot: 03_Predix-Update-12.jpg/03_Predix-Update-16.jpg
- Asset Attribute view
- The different sections will open/close
- User is able to scroll to see all Attribute sections (and the demo has different sections opening and closing)
- Please include the "Asset Image" from 03_Predix-Update-16.jpg (as it is missing in 03_Predix-Update-12.jpg )
Client Request: Screenshot: 03_Predix-Update-20_ES.jpg
- Remove the Geolocation box
Screenshot: 03_Predix-Update-17.jpg
- The user will click the Properties Attribute to add additional tags
- Match data like storyboard
- Need able to select rows by clicking the radio boxes
Screenshot: 03_Predix-Update-18.jpg
- The user will click on "Add tag to selected" to add more Tags to the selected item.
- There are 3 columns for Tag Source modal window
- Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)
Client Request: Screenshot: 03_Predix-Update-18_ES.jpg
- Remove the Auto Grouping Algorithm field
Screenshot: 03_Predix-Update-19.jpg
- The user has now added the new tags (viewed in the default column)
Client Request: Screenshot: 03_Predix-Update-19_ES.jpg
- Update Default column title into Value
- On the table row, just need display single Tag value
Screenshot: 03_Predix-Update-21.jpg
- User is able to scroll and see the Keyword section and open to see Keywords
3). Create an Asset
Folder: Create an Asset
Demo Features:
- The user is able to Create an within the Asset section and the Models section. We will need you to create some of these flows based on the provided screens (from different references)
- You can re-use existing Create an Asset function
Create an Asset Flow 1
- The user is in the Asset area and they click on the "+Asset" icon in the top bar (01-Create-Asset.jpg)
- The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
- The user will see the New Asset in their Asset list
Create an Asset Flow 2
- The user is in the Models area and they click on the "+Asset" icon in the top bar (01-Create-Asset-From-Model.jpg)
- The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
- The user will see the New Asset in their Asset list
4). History
Folder: History and Import Screens
Demo Features:
- We would like you to add in the placeholder image for History Tab (Screenshot: history.jpg)
- Goal is to have the application not have any gaps/be able to show as part of a Demo
5). Import
Folder: History and Import Screens
Demo Features:
- We would like you to add in the placeholder image for Import Tab (Screenshot: import.jpg)
- Goal is to have the application not have any gaps/be able to show as part of a Demo
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient Predix UI web application that works in all the requested browsers.
- Matching the storyboard flow and experience across the required browsers.
- Best Practice Predix UI web application
- Documentation to set up your submission
CODE REQUIREMENTS:
HTML/HTML5
- Comment your code. The goal is to help future developers understand the code.
- Use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS/SCSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- Basic Javascript should coming from Predix UI components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
SVG
- Use SVG for icons that not exists on Predix UI Iconography
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari and Chrome Mobile on iPad
The goal of this challenges is to continue updating the Predix UI Prototype using the GE Predix UI based on provided storyboards. The Asset and Model application will allow users the ability to define domains, build prototypes (high-level abstracts/templates) of assets & to create vendor specific definitions for those templates.
Read the challenge details and let us know if you have any questions!
Final Submission Guidelines
Challenge Downloadablehttps://drive.google.com/drive/folders/0BwfkY6SJxFPiMkZjcTQ5cTR0LWM?usp=sharing
General Tasks
- The focus of this UI Prototype challenge is to continue updating the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components. See storyboard screens required below.
- FYI: The base of the provided Predix UI Demo is using Predix UI Seed
- Click around and get familiar with the Predix UI CSS and Predix UI Components before you start adding/updating the demo. Check detail documentation here
- As with the existing Predix UI Seed, this application needs to support Responsive breakpoints
- For all icons use the Predix UI Iconography. If the icon does not exist, create them as SVG format.
Important:
- All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
- If there are elements that do not exist within the Predix UI, you can also use Google Polymer for this challenge:
-- https://beta.webcomponents.org/
-- https://elements.polymer-project.org/browse?package=google-web-components
Important:
- By default the Predix UI overrides the designers PSD creation.
- We do not want you to customize any of the pre-existing UI components.
- Let us know if you cannot find related Components and CSS.
- If you cannot find related Components you can use an open source library linked via Bower
- Do not just put raw JavaScript library inside your prototype
- You must use SASS/SCSS for CSS Pre-Processor
- If you use a custom styling/function it must be based on the existing library and put in separate file
- The data for each page will need to be loaded from JSON files.
- Create the documentation so we are able to setup and test your submission (this can be left for Final Fixes)
Base Submission
- Please fork this following Github: https://github.com/topcoderinc/turboconnect
- Send your GitHub username via challenge forum to get the access
- Challenge winner will need to submit a Merge Request to our GitHub
- Navigate to Predix UI folder via your Command Prompt or Terminal
- Install tool, you will need Node, Bower and Gulp to be installed globally on your machine.
-- Install Node (https://nodejs.org/en/download/). This includes npm - the node package manager.
-- Install Bower (https://bower.io/) globally `npm install bower -g`
-- Install Gulp (http://gulpjs.com/) globally `npm install gulp -g`
- Run the following commands via Terminal/Command Prompt from the extracted folder
-- npm install
-- bower install
-- gulp
- Navigate to http://localhost:5000/ to see your Predix UI GE
- Important: Your updated code needs to be running without error when we push to the cloud (example on Github: https://github.com/PredixDev/predix-seed)
TreeView Library
In this challenge, the Treeview should be available based on the first demo challenge.
- This is the Treeview library we want you to use for this challenge. https://dhtmlx.com/docs/products/dhtmlxTreeView/
- You can also use TreeGrid library for the missing functionality: https://dhtmlx.com/docs/products/dhtmlxTreeGrid/
GE - Turbo Connect Asset, Template and Demo Update Screen Requirements
General Update
- All table columns need fix to use full 100% height column on required browsers
- Update copyright year from 2015 to 2017
1). Templates Editor Flow and Interactions
Folder: Templates
Demo Features:
- The user is able to view existing Templates and Create new Templates
- The user is able to Filter on their Templates (Demo is filtering on Water)
- The user starts with a collapsed folder view and is then able to open their folders
- The user is able to save their favorite to their "Collection" - Demo is showing "Water Tank"
- The user is able to switch from Folder to List view
- The user is able to export their template to csv.
Template Demo Flow:
03_Predix-Update-01.jpg
- We should open the Template view in the Collapsed Folder View
- The user is able to open the Water Tanks Folder and add "Water Tank" to their "Collection" by click on the "Collection Toolbox" icon
03_Predix-Update-02.jpg
- The user clicks on "Filter" to open the Filter Column and they filter on "Water" (Clear will empty all values)
03_Predix-Update-03.jpg
- The user clicks on List View to see the templates in list view
03_Predix-Update-04.jpg
- Clicking on the Template Name will allow the user to edit the Template
03_Predix-Update-05.jpg:
The user is able to edit the Template attributes
They click on Properties to view/edit the properties (these sections should open and close)
03_Predix-Update-06.jpg:
- They click back on the Templates header and are taken back to the list view (with nothing checked)
03_Predix-Update-07.jpg
- The user decides they would like to export some templates and selects (Municipality, Municipality, Water Tank)
- They click on the Export button
03_Predix-Update-08.jpg
The user is taken to the export screen where they can export their templates
Screen Details:
- Reuse existing styles from the provided Demo files
- Update based on the provided screen designs.
2). Assets Editor Flow and Interactions
Folder: Assets
Demo Features:
- The user is able to View existing and Create new Assets (default should be closed Filter view = no image for this)
- Clicking on the Asset name will allow the user to see the Asset details and edit/update the Asset
- The user is able to click on Filter and Filter the assets (for the demo it is Water)
- The user can scroll to see all available assets
- If the user has a favorite Template they like to use they can drag and drop the Template from their "Collection" onto an Asset (ex: Acme Town)
- When the user drags the Template onto the Asset it asks the user to select the type of Template
- Once the user applies the Template it takes them to the edit view of the Asset where they can see their "Water Tank" Template has been applied
- The user is able to click on the "Properties" area and edit associated properties to add additional "Tags"
- The user is able to scroll and see other Attributes of the Asset
Demo Flow:
Screenshot: 03_Predix-Update-09.jpg
- This is the Asset sections of the application
- By default, we want to show the Filter closed
Screenshot: 03_Predix-Update-10.jpg
- User can drag the saved "Collection template" "Water Tank" to the Asset "Acme Town" to apply the Template to that Asset
Screenshot: 03_Predix-Update-11.jpg
- Assign template window
- Clicking Apply button will load the Asset Attributes
Screenshot: 03_Predix-Update-12.jpg/03_Predix-Update-16.jpg
- Asset Attribute view
- The different sections will open/close
- User is able to scroll to see all Attribute sections (and the demo has different sections opening and closing)
- Please include the "Asset Image" from 03_Predix-Update-16.jpg (as it is missing in 03_Predix-Update-12.jpg )
Client Request: Screenshot: 03_Predix-Update-20_ES.jpg
- Remove the Geolocation box
Screenshot: 03_Predix-Update-17.jpg
- The user will click the Properties Attribute to add additional tags
- Match data like storyboard
- Need able to select rows by clicking the radio boxes
Screenshot: 03_Predix-Update-18.jpg
- The user will click on "Add tag to selected" to add more Tags to the selected item.
- There are 3 columns for Tag Source modal window
- Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)
Client Request: Screenshot: 03_Predix-Update-18_ES.jpg
- Remove the Auto Grouping Algorithm field
Screenshot: 03_Predix-Update-19.jpg
- The user has now added the new tags (viewed in the default column)
Client Request: Screenshot: 03_Predix-Update-19_ES.jpg
- Update Default column title into Value
- On the table row, just need display single Tag value
Screenshot: 03_Predix-Update-21.jpg
- User is able to scroll and see the Keyword section and open to see Keywords
3). Create an Asset
Folder: Create an Asset
Demo Features:
- The user is able to Create an within the Asset section and the Models section. We will need you to create some of these flows based on the provided screens (from different references)
- You can re-use existing Create an Asset function
Create an Asset Flow 1
- The user is in the Asset area and they click on the "+Asset" icon in the top bar (01-Create-Asset.jpg)
- The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
- The user will see the New Asset in their Asset list
Create an Asset Flow 2
- The user is in the Models area and they click on the "+Asset" icon in the top bar (01-Create-Asset-From-Model.jpg)
- The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
- The user will see the New Asset in their Asset list
4). History
Folder: History and Import Screens
Demo Features:
- We would like you to add in the placeholder image for History Tab (Screenshot: history.jpg)
- Goal is to have the application not have any gaps/be able to show as part of a Demo
5). Import
Folder: History and Import Screens
Demo Features:
- We would like you to add in the placeholder image for Import Tab (Screenshot: import.jpg)
- Goal is to have the application not have any gaps/be able to show as part of a Demo
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient Predix UI web application that works in all the requested browsers.
- Matching the storyboard flow and experience across the required browsers.
- Best Practice Predix UI web application
- Documentation to set up your submission
CODE REQUIREMENTS:
HTML/HTML5
- Comment your code. The goal is to help future developers understand the code.
- Use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS/SCSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- Basic Javascript should coming from Predix UI components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
SVG
- Use SVG for icons that not exists on Predix UI Iconography
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari and Chrome Mobile on iPad