Predix - GE TurboConnect - Asset and Model View Editor UI Demo Challenge







    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Overview

    Welcome to Predix - GE TurboConnect - Asset and Model View Editor UI Demo Challenge

    The goal of this challenges is to create an HTML/CSS/JavaScript Demo using the GE Predix UI Catalog. The TurboConnect Asset and Model application allow's 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

    General Details and Tasks
    - The focus of this UI Demo Challenge is to create the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components.
    - You can use Predix UI Seed that will accelerate web development for this challenge
    - Click around and get familiar with Predix UI CSS and Predix UI Components before you start building this demo.
    - As with the existing Predix UI Seed, this application needs to support Responsive/fluid layout. But for now, you can stick with provided Desktop screen sizes only
    - We will use this Demo on Touch Screen Laptop, make sure your code supports this.
    - For the icons, use the Predix UI Iconography. If the icon not exists, create them as SVG format.

    Challenge Assets
    Storyboard.zip - GE TurboConnect Storyboard Design

    - By default, the Predix UI overrides the designers PSD creation.
    - All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
    - If some elements do not exist within the Predix UI, you should use Google Polymer for this challenge:
    -- https://beta.webcomponents.org/
    -- https://elements.polymer-project.org/browse?package=google-web-components
    - 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. Or you can use an open source library by linked via Bower Library Manager
    - 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 a separate file.
    - The data for each page will need to be loaded from JSON files.
    - Create the appropriate documentation so we are able to setup and test your submission.

    TreeView Library
    - This is the main TreeView library we want you to use for this challenge.
    - If in some parts you cannot mimic the storyboard look and feel and need swap with library default functionality, let us know via challenge forum.
    - TreeView Library: https://dhtmlx.com/docs/products/demoApps/dhtmlxXMLEditor/index.html

    GE - Turbo Connect Asset and Model View Editor Screen Requirements
    General Layout
    - Update the page title into Turbo Connect | Asset & Model Editor
    - Keep existing Powered by Predix on the right side of header
    - Keep existing footer like Predix UI Seed
    - Use Predix UI Layout to place all elements in web application

    Left Navigation Menu
    - Hamburger menu
    - Templates Editor
    - Assets Editor
    - Models Editor
    - Models Viewer (Can be dead link)
    - History (Can be dead link)
    - Import (Can be dead link)
    - Help (Can be dead link)
    - User Thumbnail (Can be dead link)

    1). Models Editor Flow and Interactions
    Screenshot: Screenshot: 01_4_Tree-Model-Close-Model-V2.jpg
    - Use this design of Close button that is placed on the right side
    - For this Models screen page layout consists of header and fluid body with two columns
    - Display title for MODELS and Acme Pumping

    Left Column
    - Filter link, Create Model icons and have the total placed on the top
    - Selected row using teal color, white color of edit button show up when selected the row
    - Hover on row styling also needs to show up the edit button and tooltips (Screenshot: 01_5_Tree-Model-List-Hover.jpg)

    Right Column
    - This column displays the Tree View
    - Need able to select each row
    - Cancel and Save button always placed on the bottom of Tree view box
    - Hover on tree view need display edit button and tooltips (Screenshot: 01_6_Tree-Model-Hover.jpg)

    Screenshot: 01_7_Tree-Model-Refine.jpg
    - Click Refine link, need load column on the left side (Screenshot: 01_8_Tree-Model.jpg)
    - All columns need use fluid width after Refine column appears. Content needs to be pushed to the right
    - Display all text inputs like storyboard look
    - Notice there are magnify icon for Keyword and Type text inputs
    - Show All Assets check box placed on top of every field (Screenshot: 01_9_Tree-Model.jpg)
    - Keyword and Type need build using autocomplete function (Screenshot: 01_10_Tree-Model.jpg)
    - Type on text input field need display autocomplete (Screenshot: 01_11_Tree-Model.jpg)
    - Set bold text on autocomplete result
    - Autocomplete sample for Type text input (Screenshot: 01_12_Tree-Model.jpg, Screenshot: 01_13_Tree-Model.jpg)
    - For Date created field, you need build the date picker (Screenshot: 01_14_Tree-Model.jpg)
    - Need able to navigate by month when click previous and next navigation (Screenshot: 01_15_Tree-Model.jpg)
    - After some values filled for the Filter panel (Screenshot: 01_16_Tree-Model.jpg)

    Add New Model
    Screenshot: 01_17_Tree-Model.jpg
    - Add New Model triggered from the button on the right column
    - Hover Add Model button need to load the tooltips
    - Modal window show up that allow user to input Model Name and select the Hierarchy or Flow option (Screenshot: 01_18_Tree-Model.jpg)
    - Create button need close modal window and create empty content on the right side (Screenshot: 01_19_Tree-Model.jpg)    
    - User need able to drag from left column to the right column (Screenshot: 01_20_Tree-Model.jpg)
    - This styling when row being dragging (Screenshot: 01_21_Tree-Model.jpg)
    - Drag Placeholder styling when reaching the right column (Screenshot: 01_22_Tree-Model.jpg, Screenshot: 01_23_Tree-Model.jpg)
    - After row dropped need show selected style (Screenshot: 01_24_Tree-Model.jpg)
    - Notice delete button shows up on the right side of selected row
    - Click the arrow needs to expand/collapse each children
    - When dragging row, need able to set the indentation (Screenshot: 01_25_Tree-Model-Hover.jpg, Screenshot: 01_26_Tree-Model-Hover.jpg, Screenshot: 01_27_Tree-Model-Hover.jpg)
    - After dropped the row, need display the New Asset modal window (Screenshot: 01_28_Tree-Model-Clicked.jpg)
    - User-filled text input (Screenshot: 01_29_Tree-Model.jpg, Screenshot: 01_30_Tree-Model.jpg)
    - Create button need add new item on Tree View.
    - Notice there are remove button on the right side (Screenshot: 01_31_Tree-Model.jpg)
    - Select another row also need display remove button (Screenshot: 01_32_Tree-Model.jpg)
    - Click delete button need load the modal windows (Screenshot: 01_33_Tree-Model.jpg)
    - Need remove the selected row from Tree View
    - User need able to change from one row to another (Screenshot: 01_34_Tree-Model.jpg)
    - Drag Placeholder shows up when row dragging to another rows (Screenshot: 01_35_Tree-Model.jpg, Screenshot: 01_36_Tree-Model.jpg, Screenshot: 01_37_Tree-Model.jpg, Screenshot: 01_38_Tree-Model.jpg)
    - After row dropped (Screenshot: 01_39_Tree-Model.jpg)
    - Hover on another row, display the delete button on the right side (Screenshot: 01_40_Tree-Model-Hover.jpg)

    Favorites Column
    Screenshot: 01_41_Tree-Model.jpg
    - Click Favorites button need load the Favorites column (Screenshot: 01_42_Tree-Model.jpg)
    - User need able to drag and drop from model column to Favorites (Screenshot: Screenshot: 01_43_Tree-Model.jpg, Screenshot: 01_44_Tree-Model.jpg, Screenshot: 01_45_Tree-Model.jpg)
    - After added the row, need display the checkbox on the left side (Screenshot: 01_46_Tree-Model.jpg)

    2). Models Editor Flow and Interactions
    Screenshot: 02_1_Flow-Model.jpg
    - This page displays the Flowchart View
    - Diagram Library for this challenge can be image based
    - Hover on the Add model button needs to load the tooltips
    - New Model modal window show up (Screenshot: 02_2_Flow-Model.jpg)
    - Modal window after user selects the option (Screenshot: 02_3_Flow-Model.jpg)

    Screenshot: 02_10_Flow-Model.jpg
    - Click Refine needs to load the column on the left side (Screenshot: 02_11_Flow-Model.jpg)
    - Other columns need to be pushed to the right side
    - Need able to checked on/off the checkboxes (Screenshot: 02_12_Flow-Model.jpg)

    Add New Asset
    Screenshot: 02_13_Flow-Model.jpg
    - Hover on Add New Asset need load the modal window
    - Add New Asset Modal Window (Screenshot: 02_14_Flow-Model.jpg)
    - After type some value (Screenshot: 02_15_Flow-Model.jpg)
    - Save button need close the modal

    3) Templates Editor Flow and Interactions
    Screenshot: 03_Predix-Update-01.jpg
    - This is Templates Editor screen that user access from the 1st button on the left menu
    - Templates column on the left and Collection column on the right side
    - Selected row need use grey background
    - Click Filter link need load the Filter column (Screenshot: 03_Predix-Update-02.jpg)
    - Match forms like storyboard (Screenshot: 03_Predix-Update-03.jpg)
    - Clear need empty all values
    - Filter button placed on the right side
    - For Templates screen there are 2 options for Folder View and List View
    - Click List View tab need display templates in list format (Screenshot: 03_Predix-Update-04.jpg)
    - Click Template Name need load the Template Updates

    4). Templates Updates
    Screenshot: 03_Predix-Update-05.jpg
    - User landed to this screen after double click name on Templates page
    - This is Templates Updates look
    - Match input fields like storyboard look
    - Display some boxes with collapsible function
    - User need able to scroll down the page to see whole content
    - Properties content when expand the content (Screenshot: 03_Predix-Update-06.jpg)
    - Match table data like storyboard look
    - Click Save take user back to Templates screen
    - Select some checkboxes need highlighted the rows (Screenshot: 03_Predix-Update-07.jpg)
    - Click Export button need load Export screen (Screenshot: 03_Predix-Update-08.jpg)
    - Only one option able to select for radio buttons
    - But, checkboxes can select more than one

    5). Assets Editor Flow and Interactions
    Screenshot: 03_Predix-Update-09.jpg
    - User access this screen from 2nd menu on the left navigation
    - Page display 2 columns for main content and Collection on the right side
    - Filter link loads the Filter column. Set hidden by default
    - User can drag the collection to the asset area (Screenshot: 03_Predix-Update-10.jpg)
    - Assign Template modal window show up after dropped to some rows (Screenshot: 03_Predix-Update-11.jpg)
    - User can select some options of the checkboxes
    - Click Apply button need load Asset Updates explained below

    Asset Updates
    Screenshot: 03_Predix-Update-12.jpg
    - Follow fields like storyboard look
    - Display some collapsible boxes like storyboard look
    - Click Arrow under Template field or Add Template links need load Templates screen that allow user to add some template

    Templates with Floating Assets
    Screenshot: 03_Predix-Update-13.jpg
    - This templates screen display Floating Assets on the bottom
    - User need able to select some checkboxes and then drag to Contained Templates area (Screenshot: 03_Predix-Update-14.jpg, Screenshot: 03_Predix-Update-15.jpg)
    - Match styling for dragged button
    - After dropped some options need take user back to Assets screens under Contained templates box (Screenshot: 03_Predix-Update-16.jpg)

    Properties Box
    Screenshot: 03_Predix-Update-17.jpg
    - Expand the Properties box need display this table
    - Match data like storyboard
    - Need able to select rows by click the checkboxes
    - Click Add tag selected need load the modal window (Screenshot: 03_Predix-Update-18.jpg)
    - There are 3 columns for Tag Source modal window
    - Add Tags need close the modal window
    - Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)
    - Models Name placed on the left side
    - Notice there are Hierarchy and Flow options

    Keyword Box
    Screenshot: 03_Predix-Update-19.jpg
    - This is content when expand the Keyword
    - Add New Keyword can be dead links
    - Lock icons placed on the right side

    Geolocation Box
    Screenshot: 03_Predix-Update-21.jpg
    - Display geolocation fields like storyboard look
    - Click View Map need display the Google map on Modal Windows
    - Also, on the left side. There’s a floating filter
    - Match fields like storyboard look

    Client Priorities (The items that are considered highest demo priorities)
    - Creating quality and efficient Predix UI demo that works in all the requested browsers.
    - Matching the storyboards (as close as possible) across the required browsers.
    - Best Practice Predix UI web application
    - Documentation to set up your submission


    - Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
    - Please 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.

    - 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 creating 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.

    - Basic Javascript should be provided by the 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.

    - Use SVG for icons that not exists on Predix UI Iconography

    Browsers Requirements
    - IE11
    - Safari Latest Browser
    - Chrome Latest Browser

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2017 TopCoder(R) Open


    Final Review:

    Community Review Board


    User Sign-Off