Challenge Overview
Welcome to the SunShot - Kinetic Buildings - Diagnostics Application Prototype Challenge! Faulty operation in buildings is known to waste 15% to 30% of total HVAC energy on average - yet fault diagnostic tools have not been widely adopted by the industry due to the current lack of low-cost, accurate solutions. We have developed a technology for detecting and diagnosing faults, that that combines high-level data-driven analytics and component-level diagnostics using a Bayesian network. This combination provides holistic building diagnostics that can be readily conveyed to a building operator using a probabilistic output.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built. Use Bootstrap and AngularJS for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the responsive HTML5 prototype of this app by using industry standard best practices.
Primary Requirements:
1. Build all the pages mentions in the page requirements outlined below.
2. Layout as per storyboard, minimum width should be 1280px
3. Scrollbar - use native/default browser scrollbar.
4. Fonts - use CSS font stack (“Proxima Nova”, sans-serif)
5. Header
- Settings (cog icon) will be dead link.
- Home icon is always linked to Home page.
6. Breadcrumbs
- Implement breadcrumbs as shown in the storyboard of every page.
- Each segment is linked to their respective pages except for the last item which indicates current page.
- There are pages that segment link is not applicable, these are specified below.
Page Requirements:
The following are the pages and functionalities needed for this challenge.
1. Home
- Please refer to 01-Home.png for reference.
- Link each menu to their corresponding pages.
- Data Visualization will be dead link.
2. Building Overview
- Please refer to 02-Buildings-Overview.jpg for reference.
- “Filter By” is a dropdown with options (Comfort Index, Fault Impact, Comfort, Cost, Energy, IAQ, Campus, Building). The options Comfort, Cost, Energy, and IAQ are grouped together with a header of “Diagnostic Notifications”.
- Change the “Filter By” label to “Sort By” and apply the sorting functionality.
- Most of the sort options will be sorted by highest to lowest or in alphabetical order, except for “Diagnostic Notification” which will be sorted by number of "urgent" notifications, then number of "high" notifications, then number of "medium" notifications, and finally by number of "low" notifications.
- You can use Bootstrap’s button dropdown component for this feature.
- Selected option should reflect the the dropdown field (e.g. Sort By Comfort Index).
- Search will have filter functionality that allows the user to search by Building name (e.g. Straton Hall), campus name (e.g. Drexel U), or city/state, and have the result shown on the page.
- “Expand Diagnostics” will expand to show the Building Diagnostic View.
- User should be able to expand only one Building Diagnostic View at a time.
- When the Building Diagnostic View is expanded, change the link to “Collapse Diagnostic ^”.
- “Collapse Diagnostic ^” when clicked will collapse the specific Building Diagnostic View”.
2.1. Building Diagnostic View
- This is not a new page but expanded section.
- Please refer to 03-Building-Diagnostics-View.jpg for reference. Please note that there were some “minor” bug in this screen that should be corrected. First is the alternate “white” table row background, it should have no border on both left and right and it should not exceed the width of the content. Second is the text “98%” below the first column on first row, please remove that.
- Implement table sorting.
- “Select An Action” or action buttons is a dropdown menu with the following options: In Service Queue, In Repair Queue, Ignore for 10 days, Ignored, Over Capacity, Repaired, Active Test Scheduled, Report Sent, and Report Generated.
- This action button functionality is applicable to all pages.
- Allow only 1 expanded view at a time.
- Update the “breadcrumb” information in the header to reflect the expanded view.
- The segments for the updated breadcrumbs will not have link except for “All Sites” which is linked to the current page to refresh it.
- Clicking anywhere on any row except for the Action button will expand its Diagnostic Details view (see below).
- Click again the row will collapse the Diagnostic Details view.
2.2. Diagnostic Details
- Please refer to 03.1-DiagnosticDetails.jpg for reference.
- “Notes” section - when user clicks “Add” button it will dynamically add a note on the list with dummy username and timestamp.
- On the Diagnostic History section, there is “Time Duration” dropdown (far right) that user can select between 1 day, 1 week, and 1 month.
- The Diagnostic History section in the storyboard has blue background, change this to have white background with light gray rule/lines. Text color should have the same black color from the other section.
- The Diagnostic History section will have “blocks” to show when faults are active or inactive (dormant) during the course of a day/week/month.
- In the storyboard, this is shown as yellow and green filled blocks. Change the yellow color into orange color (same orange from the “Med” text) and remove the green color as this is not required. The data for this will be binary 1 or 0 (on/off).
- The timeline will always show the past day (24 hours), the past week, or the past month - up to the present time.
- If the timeline is 1 day, the blocks will cover the past 24 hours (24 blocks).
- If the timeline is 1 week, the blocks will cover the past 7 hours (7 blocks).
- If the timeline is 1 month, it will show dates and the blocks will cover the past 30 days (30 blocks).
- To determine when the color is filled or not, use JSON file with dummy data that will return an array of 1/0 values - or true/false values that will tell the plot if it should be orange or blank.
- Graph below correspond to the timeline displayed.
- If the timeline is set to 1 day, the graph’s x-axis will have hour values.
- If the timeline is set to 1 week, the graph’s x-axis will have weekdays values.
- If the timeline is set to 1 month, the graph’s x-axis will have date number values.
3. Diagnostic Overview
- Please refer to 04-Diagnostic-Overview.jpg for reference.
- Implement table sorting.
- Action buttons are dropdowns that allow users to take selected action.
- Clicking anywhere on one of the list items, except for the Action dropdown will expand the bottom of that row to show its Diagnostic Detail view. This will have the same layout and functionality as described in section 3.2. Diagnostic Details above.
4. Comfort Overview
- Refer to 03.2-comfort-overview.jpg for reference.
- Clicking anywhere on one of the list items, except for the Action dropdown will expand the bottom of that row to show its Comfort Detail view.
- Implement table sorting. The style should follow the same style in other pages.
4.1. Comfort Detail
- Refer to 05-Comfort-Detail.jpg for reference.
- The graph shows historical data.
- These data should come from JSON file.
5. Service Queue
- Refer to 06-Service-Queue.jpg for reference.
- This page will have the same interface and functionality as with the Diagnostic screens mentioned above in section “3. Diagnostic Overview” (which is related to section 3.2. Diagnostic Details)
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Mac OS)
- Latest Firefox (Windows & Mac OS)
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
Javascript
- All JavaScript must not have a copyright by a 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.
- Use AngularJS library for this challenge.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Use separate retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.