Challenge Overview
Welcome to the SunShot - SolarRetina - Real Time PV Data Responsive UI Prototype Challenge! The SolarRetina is a software platform that provides real time intelligence of total “behind-the-meter” solar PV generation on the distribution system. Using crowd-sourced solar generation data from actual PVs on the distribution grid, the platform provide superior distributed solar generation analysis.
The primary objective of this challenge is to create an HTML prototype based on the provided storyboard design and requirements outlined in the Challenge Details section.
Final Submission Guidelines
The goal of this challenge is to build out the responsive UI prototype of the SolarRetina software platform. You can use Google Maps or any other mapping application that you think will meet the requirements.
The following are the pages and functionality needed for this challenge:
1. Login
- See 01_login.png for reference.
- Clicking “Login” button leads to “Map” page.
2. Map
2.1. See 02-0_Map New User.png for reference.
- "Please select location first" is part of the prototype with an semi-transparent overlay in the map. Once the user starts to type in on the search box, this overlay will be removed.
- The user should be able to enter location address in the location field.
- The browser should also prompt the user to allow geolocation use.
- If the user opt in to use geolocation, the location field should be auto populated.
- Whenever the seach box is cleared at any screen, the state of the page should move back to this part (section 2.1.).
2.2. At anytime, the user should be able to enter an address in the location field and this location field should be set as autotext/autocomplete. See 02-1_Map_Location Set_Autotext.png for reference.
2.3. The map should zoom in to the location address once the location field has been populated either by using geolocation or by manual entering of address. See 02-2_Map_Location Set.png for reference.
- The map view should display the available PV systems ( dots ) that are within the map area. Simulate this scenario by placing some test locations (at least 10 dots) on a sample source data file that is configurable and can be easily updated later on with actual data.
2.4. Hovering on these dots will show a tooltip. See 02-3_Map_PV System_Mouse hover.png for reference.
2.5. Hovering on any tools located in the upper right part of the page will display the tooltip of the hovered tool ONLY and not the whole tools. See 02-4_Map_Tool_Mouse hover.png for reference.
2.6. Once a dot is clicked, it will show the “Generation Over Time” information box. This info box has 3 different chart filter, and the default chart filter is “Generation” and the other 2 chart filters are “Performance Index” and “Ramp Rate”. Clicking any of the chart filter replaces the displayed chart, this chart is just an image placeholder for this challenge. See the following storyboards for reference:
- 02-5_Map_Clicked PV System.png
- 02-6_Map_Clicked PV System.png
- 02-9_Map_PV System_Performance Index.png
- 02-10_Map_PV System_Ramp Rate Selected.png
2.7. The “Generation Over Time” information box has also data filters namely Day, Week, Month, Year, and Custom. The default active data filter should be Day. The Day, Week, Month, and Year data filters will have the same display while Custom filter will have an additional fields. See the following storyboard for reference:
- 02-7_Map_Clicked PV System_Custom Time Peroid.png
- 02-8_Map_Clicked PV System_Set Custom Time Peroid.png
3. Map Play
3.1. Clicking the “play” icon will show a timeline control, see 03-1_Map_Play Animation.png for reference.
3.2. User should be able to select pre-defined set of duration. See 03-2_Map_Play Animation_Set Duration.png for reference.
3.3. User can also make a custom set of duration. See the following storyboards for reference:
- 03-3_Map_Play Animation_Set Duration.png
- 03-4_Map_Play Animation_Set Duration.png
3.4. Click the “play” icon with the timeline control will make a map animation of generation over time. In such a scenario, each PV location (~1400) would be represented by a dot or heat map dot that would expand and contract or change in color intensity/translucency relative to the amount of energy being produced. See the following storyboards for reference:
- 03-5_Map_Play Animation.png
- 03-6_Map_Play Animation.png
- 03-7_Map_Play Animation.png
- 03-8_Map_Play Animation.png
- 03-9_Map_Play Animation.png
- 03-10_Map_Play Animation.png
- 03-11_Map_Play Animation.png
- 03-12_Map_Play Animation.png
4. Map Draw
Clicking the “line” tool will enable the user to draw polylines in the map. See the following storyboards for reference:
- 04-1_Draw Line.png
- 04-2_Draw Line.png
- 04-3_Draw Line_Closed.png
5. Area Statistics
5.1. Once the polylines forms a polygon ( or closed the shape ), it will show the selected PV systems ( dots ) area statistics information. See 05-1_Area Statistic_Colapse.png for reference.
5.2. User can expand this information to show details area statistics. The user can also collapse this box by clicking the arrow down located at the top right part of the box. See the following storyboards for reference:
- 05-2_Area Statistic_Expand.png
- 05-3_Area Statistic_Expand.png
5.3. Within this expanded information, the user can filter data that has similar functionality mentioned in section 2.6 and 2.7. See 05-4_Area Custom Time Period.png for reference.
5.4. Clicking the “share” icon located in the top right part will allow the user to export the data. This part will just display a popover box with an option to export or send the data Email, PDF, or as an Excel file. The actual exporting of data is out of scope in this challenge. See 05-5_Area Statistic_Export Data.png
for reference.
5.5. To close the area statistics information, user can click the “clear” icon. See the following storyboard for reference:
- 05-6_Area Statistic_Clear Selection.png
- 05-7_Area Statistic_Cleared.png
6. Ward Selections
6.1. Clicking the ward selection tool will display map regions ready to be selected. See the following storyboard for reference:
- 06-1_Ward Selection.png
- 06-2_Ward Selection.png
6.2. From these map regions, the user can select specific region and will display the area statistics information of PV systems within the selected region. User can also expand this information which is very similar to functionality defined in 5. Area Statistics section mentioned above. See the following storyboard for reference:
- 06-3_Ward Selected.png
- 06-4_Ward Statistic.png
- 06-5_Ward Statistic_Expand.png
- 06-6_Ward Statistic_Expand.png
7. Zip Code Selection
This will be similar functionality with the Ward Selection but instead of selecting from pre-defined regions, the user should enter a valid zip code. See the following storyboards for reference:
- 07-1_Zip Code Selection.png
- 07-2_Zip Code Selection.png
- 07-3_Zip Code Selection_Set.png
- 07-4_Zip Code Selection_Result.png
NOTE:
The mentioned storyboard above are reference to Desktop view. For specific mobile view, please check the provided folder for mobile files.
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
- iPhone ( Landscape and Portrait mode, the goal is just to make sure the page renders correctly and not messed up )
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 jQuery or 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.