Challenge Overview
Welcome to the SunShot - PVComplete UI Prototype Merging Challenge! PVComplete is a web application that seeks to streamline the most time consuming tasks in commercial rooftop solar panel project design.
We recently launched 2 separate challenge that builds the mapping application and the HTML prototype pages. For this challenge, the goal is to merge these two prototypes and with additional requirements that are outlined in the Challenge Details section.
Final Submission Guidelines
The following are the functionality needed for this challenge:
1. Merge
There were two provided prototypes, first is the “PVComplete-POC” and the other one was “PVCompletePrototype”. You need to merge this prototype as follows:
1.1 Use PVCompletePrototype as the base, then incorporate PVComplete-POC mapping application into the base.
1.2 Create Project
- See /#/Projects page.
- Clicking “+New Project” will show the form for creating a new project. The address entered here should show a Google map centered on that address on /#/CreateProject page.
- Replace the image placeholder with the actual Google map.
1.3 Drawing
- In the Outline tab, there are 3 drawing tools. Each drawing tool should work like in the provided POC.
- Whenever a drawing item is added in the map, it will represent a list item in the Outline tab content replacing the default text content. See 05_6_new_project.png for reference. You should provide this functionality as this is not yet existing in either prototype files.
- If an item is set as “Obstruction”, it will have additional field just like in POC.
- Do not include the icon on the left of each field.
- The color box on the right should represent/reflect the color of the drawing object in the map.
1.4 Technical Info
- Fill the fields in this tab with the info that you can load from the provided modules.json and inverters.json
2. Generate and Download
- Once the user clicks on the “Submit” button, it will generate a file and will do a force download.
- The generated JSON output should be saved as a file in XML format, convert the existing JSON output into XML structure.
- We recommend using this to generate the file, but you can suggest any plugin or library that can achieve this requirement without backend programming support.
- Check the provided XML file, follow the structure of this file but replace the following with the actual data from the generated map:
- address section
- installationAreaSpecification (for both installation area and roof objects)
- exclusionAreas (for obstruction objects)
- Please fit in the resulting values to the provided XML as much as possible. We may accept minor adjustments and there will be possibility of fixing this during the final fix.
NOTE:
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
HTML5
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- 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
- 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.
- You are allowed to AngularJS 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.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.