Challenge Overview

Welcome to "Infront - Cloud Engine GUI Composer UI Prototype Challenge". In this challenge, we need your help to create HTML5 prototype for our new GUI composer that will enable our customers to quickly and easily design cloud blueprints. Blueprints define both the required resources and the relationship between resources in the cloud infrastructure. Join with us NOW!!

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Project Brief
Our company is developing a Cloud Orchestration Engine application that provisions and configures cloud resources. Right now, we are looking to build a HTML5 GUI Composer which will be part of the Cloud Orchestration Engine that will enable customers to quickly and easily design cloud Blueprints by simply using drag and drop features for mapping the cloud resources. Blueprints define both the required resources and the relationship between resources. Blueprints will be stored in a DSL for deployment using our Cloud Orchestration Engine.

Competition Task Overview
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.

Customer/User that going to use this apps will be able to perform the following in the GUI composer :
- Create new Blueprint from Template
- Design application Blueprint with dependencies using GUI composer
- Save the Blueprint (structured text file, xml)
- Load Blueprint (from structured text file, xml)
- Save_As Blueprint (Copy/Clone)
- Delete Blueprint

Key Requirements
- Test in all the required browsers (including Safari and Chrome for tablet).
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.

User Scenario
- John is a Blueprint Cloud Designer and wants to build new cloud resource/infrastructure for his company.
- He opens the Cloud Orchestration Engine app to build the cloud blueprints for his company.
- From the application landing page, he will click on the Blueprint menu Item to enter the catalog area of the application.
- From the Blueprint catalog area, John will select to create a NEW Template or MODIFY an existing Blueprint.
- Design a workload by drag/drop VM/Template/App objects onto the canvas.
- Describe any Dependencies between Nodes (VMs) such as DEPENDS_ON.
- Drag an Application Object onto an existing VM.
- Enter 'property' details for Swim Lane/Template/App.
- Save Blueprint or Deploy.

Screen Requirements
01. Template Page Selection
- Reference Screens infront_p1-1-templates-list.png to infront_p1-7-select-menu.png
- User can choose whether create the blueprints from scratch (via template infront_p1-1-templates-list.png) or from saved files (blueprints infront_p1-2-blueprint-menu.png) menu.
- Provide hover action to all button and links.
- User can view "templates" and "blueprints" via 2 ways, list (infront_p1-2-blueprint-menu.png) or tile (infront_p1-4-selecting-menu.png)
- User will have an access to the blueprint catalog in the menu item from this page.
- There are 2 views needed in this page, they are list and tile.
- In tiles view, user will be able to drag and drop icon placements for customised layout. The customised layout will be automatically saved after an icon placement has changed. The purpose is to improve the UX for user.
- There are 2 types elements can be seen in this screen, they are Template, Blueprints. Each elements needs to have different and unique graphic style for the icons so user can easily differentiate the category.  

02. GUI Composer Page
- Reference Screens infront_p2-1-1-prop-VM.png to infront_p2-5-5-delete-app.png
- In this page, user can create a blueprint, and then be able to save the diagram/blueprint and related data to a text file with specific xml format.  
- The prototype should also be able to read data from a the same xml file format, and then represent the data in a visual diagram. So, no cloud services, but we need to read/write from an xml file.  
- In the apps, user will be able to create a new blueprint from an existing template so that blueprints do not need to be created from scratch each time.   
- To create a new blueprint from an existing template the designer will select the template from landing page and choose "New" (if the templates are displayed in list view then the "New" button in the action column will be selected, in tile view user click the graphic icons).  Templates need to exist for 1, 2 and 3  Swim lane variations
- A new blueprint with predefined properties (Swim lanes, etc) will be created on the GUI Composer canvas.  
- The new blueprint will be named Untitled (can be editable).
- The GUI composer must consist of the following elements :
* A canvas to map and place the cloud resources,
* General menus and navigation pane,
* Small live thumbnails preview to see the whole canvas and
* Item tabs (VMs, Apps, Properties).
- As a blueprint designer, user want to be able to build blueprints in a graphical and intuitive manner.  
- Drag and Drop features from item tabs to the swim lanes is important to be provided. 
- Clicking on an item/node in the Composer canvas will make that node the context node for the composer.  This interaction also important to be provided in your submission,
- The composer will use a visual cue to identify the context node.  
- Properties of the Context node will be displayed in the properties tab.  
- The properties of the context node can be edited.   
- The canvas should have zoom in/out function so user can see the blueprint easily.
- There are 3 tabs in the GUI Composer, they are VMs, Apps, and Properties tab :
* VMs tab - templates and VM's are listed in alphabetical order.  
* Application tab - Application Services and Appliances are listed in alphabetical.
* Properties tab - showing details of context node.
- The side menu bar should be collapsible when not in use.

MORE ABOUT GUI COMPOSER :
Items in the GUI Composer :
* Dependencies
- User will be able to connect / create relationships between nodes in the GUI composer.
- Relationships between nodes will be represented by lines connecting nodes.
- There are two initial dependencies: Depends_ON & Connected_TO.  The Connected_TO dependency is Out of Scope for the POC.
- For a Depends_ON relationship an arrow head will point to the node that is being depended upon.
- Relationship lines must have "Auto-arrange" functionality that ensures the lines do not overlay nodes.
- The context node and all associated dependencies can be deleted from the canvas by clicking on the "delete" key

* Virtual Machines
- VM nodes can exist as standalone items and they also support Application Services.  
- Only Application Services with Operating System requirements compatible with the VM can be "dropped" on the VM.
 
* Application Services
- Application services must be "dropped" onto a VM node on the canvas - they cannot exist as a standalone item in the composer.  
- Application services can only be "dropped" onto a VM that has an Operating System that is compatible with the application.
- Application services items do not support other items being "dropped" on them.
 
* Appliances
- Appliances must exist as standalone nodes on the canvas - they cannot be "dropped" onto a VM node, nor do they support application services.
 
Interactions needed in the GUI Composer :
- Save, user needs to be able to save changes made to the blueprint. To save a blueprint choose "save" from within the composer. It will save the file as XML.  If the blueprint does not yet have a name, the designer is prompted for this information. Provide us a save box confirmation.
- Load Blueprint, User needs to be able to load an existing blueprint so that he can view the blueprint and optionally make changes to the blueprint.  To load a blueprint select the blueprint tile and choose "Load". The load function will interpret the structured text file (XML) and re-render the design on the canvas.  If the blueprints are displayed in list view, then the designer will load the blueprint by clicking "Load" button in the action column of the blueprint.
- Save As Blueprint, User needs to be able to save a blueprint under a different name. To save a blueprint under a different name the designer will select the "Save As" option - the designer will be prompted for a new name.
- Share Blueprint, User needs to be able to share a blueprint with another designer.  Sharing a blueprint with another designer results in a copy of the blueprint being created in the other designer's blueprint catalog.  To share a blueprint the system will prompt for the designer to enter details of the people the blueprint is to be shared with.
- Publish Blueprint, User needs to be able to Publish a blueprint as a Template so that it is available as a Global template (appears as a NEW template in the catalog).
- Easily Identify NEW catalog templates, When a new Template is published a visual cue needs to identify that a new Template has been added to the Catalog.

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. 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.
- You are allowed to use JQuery for this challenge.

Browsers Requirements:
- IE10 above
- Latest Firefox, Safari & Chrome Browsers
- Mobile/Tablet Browser.

Documentation Provided:
Storyboard and All necessary flow documents can be found in forum!

 



Final Submission Guidelines

Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30049664