Challenge Overview
Welcome to NASA - Open MCT Notebook UI Prototype Challenge
The goal of this challenges is to create an UI Prototype using the NASA Open MCT framework.
This challenge seeks to develop software that implements a notebook capability within the Open MCT (Mission Control Technologies) mission control software framework.
Read the challenge details and let us know if you have any questions!
Open MCT (Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research
Center in collaboration with the Jet Propulsion Laboratory, and is being used by NASA for data
analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
Open MCT uses an object-oriented approach to its content model: everything a user can browse and create are all objects of a given type (Telemetry Elements, Display Layouts, Clocks, Timers, Folders, etc.) and each type of object has different capabilities and views. This project aims to add a new user-creatable Notebook object type to the platform as a plugin
component.
A Notebook is a container for multiple Notebook Entries, which are comprised of a timestamp, text and optionally one or more embedded links to other objects in Open MCT. Embedded links themselves can optionally include a Snapshot image capture of their linked object’s viewstate at a given point in time. For example, an user might be viewing a plot of a telemetry element that tracks temperature for a system in a rocket. They might see an anomalous temperature spike in the plot, and would be able to immediately create a new Notebook Entry describing what they saw that also includes a visual image capture of the plot.
The image capture can optionally be annotated as well, utilizing a simple JavaScript-based editor like painterro (https://www.npmjs.com/package/painterro). Notebook Entries can be edited and searched for.
Submission Requirements
- This challenge submitter MUST develop the deliverable code based on Open MCT practices,
conventions and pre-existing components and services listed/referenced:
- Open MCT repo: https://github.com/topcoderinc/openmct
- Open MCT API documentation: https://github.com/nasa/openmct/blob/master/API.md
- Open MCT development process: https://nasa.github.io/openmct/docs/process/
- Open MCT Getting Started: https://github.com/nasa/openmct-tutorial
- Open MCT Demo on Heroku: https://openmct-demo.herokuapp.com
- Layout, design, user gestures and component behaviors shall be implemented as detailed in the attached User Interface document (Attached UI document : NOIS-TO-40_ Open MCT Notebook_RFP Attachment 1.pdf)
- All associated functionality shall be implemented as a new plugin in accordance with Open MCT documentation found online at https://github.com/nasa/openmct/blob/master/API.md
- All development practices shall be followed per the Open MCT development process including unit tests providing at least 80% coverage and test procedures specifying how to verify behavior.
- Interfaces and UI elements shall be implemented using existing Open MCT elements as much as possible. There are additional details and notes in the UI documentation.
- All new markup shall be as semantic as possible and will follow guidelines as laid out in the UI documentation “Development Notes” section.
- Markup shall be implemented in accordance with the Open MCT Style Guide, available in the default build.
- CSS should not implement any new styles that are incompatible with the application’s base look-and-feel and theming approach.
- CSS shall be implemented as SASS within the plugin directory.
- Icons for buttons and Embeds as noted below should use pre-existing available glyphs. See the Open MCT Style Guide for more info.
- Do not use inline styling in markup except where necessary for items with dynamic style properties.
- All markup and CSS must also be mobile compatible via responsive design, in accordance with the current approach to this in Open MCT.
General Tasks:
1). Notebook
- New Notebooks shall be created as domain objects via the Create menu.
- Notebooks must be nameable.
- Notebooks must be able to be added to Display Layouts.
- Notebooks must be able to contain n notebook Entries.
- Notebooks must support search and timeframe filtering as detailed in the UI documentation.
- Notebooks should load and display entries using an infinite scrolling approach - as opposed to a pagination strategy.
2). Notebook Entries
- Notebook Entries must be able to contain and display n characters of text.
- Notebook Entries must be editable after initial creation.
- Notebook Entries should track their modified datetimes, but only display their creation timestamp per the UI documentation. The creation timestamp is defined at the first instant of Entry creation.
- Notebook Entries must be able to contain Embeds of other domain objects.
- Notebook Entries must be cached per keystroke using local storage and synced to a persistence service at reasonable intervals.
- Notebook Entries must be able to be launched from any supported domain object, following the workflow as detailed in that section of the UI document.
- When a Notebook entry is deleted by the user, it shall be stored in the database with a flag denoting that state, but not permanently deleted from the database.
- Deleted Notebook entries should not be made visible to the user.
- Future functionality will allow a user to view deleted entries and restore them.
3). Entry Embeds
- Embeds shall consist of a navigable link to a domain object and an optional Snapshot of that object.
- Embeds should display as well as an icon denoting their object type
- If Embeds include a Snapshot, they shall display the following details:
- A thumbnail of the Snapshot.
- The created datetime of the Snapshot.
- If Embeds do not contain a Snapshot, they should display a button for generating a Snapshot
- See the UI documentation for details.
4). Snapshots
- Object Snapshots should be generated from the originating object view via the exportImageService and stored as PNGs.
- Object Snapshots should be stored in the persistence database.
- Object Snapshots must track their created and modified datetimes.
- Object Snapshots can be generated from any view -- which will prompt the user to select a notebook, after which a Notebook Entry will be created and the Object Snapshot will be added as an Entry Embed.
- See the relevant page in the UI document for more detail.
- [ Stretch Requirement - Optional ] The software will allow annotation of object Snapshots as described in the UI document.
NASA - Open MCT Notebook UI Prototype Screen Requirements
Note: For all screens below please refer to the attached UI Document (NOIS-TO-40_ Open MCT Notebook_RFP Attachment 1.pdf)
Notebook Layout Overview
Info: pdf > page 116
Notes:
- This is the general layout how the Notebook look & feel
- For your submission you need keep the dark theme like existing Open MCT layout
- Follow layout guideline like UI Document
Left pane
- This panel contains the tree view
- Search filter input placed on top
- Notice there are red & blue colored indicator on some menus
- Create another group on the bottom for Owned by Me, Shared with Me, Starred & Content
- Match all left-pane content like provided storyboard on the left pane
Center pane
- Center panel is for the main content
- Search filter input placed on top
- Start new entry area is not part of scrolling and always be visible
- Entry list has vertical scroll
- On some rows, there are embedded domain object link with snapshot & embedded domain object link.
- On the bottom of entry list you need displayed start time & end time
Right pane
- This is for Inspection
Footer
- Display just 1 icon based on
- Date/Time & Open MCT logo on the right side
1). Creating a Notebook
Info: pdf > page 118
- For this challenge submission create your UI prototype starting from Creating a Notebook
- New Domain Object displayed on the last row of Create menu options
- Hover on the Notebook menu need display more information on the right side column
2). Empty Notebook
Info: pdf > page 119
- You can display this Empty screen on your submission to simulate the application flow
- Just need display the search filter, dropdowns and entry button on the top
3). Adding a New Entry
Info: pdf > page 120
- Adding a new entry can be started by clicking the Start new entry area
- Or by dragging object from tree view to the Start new entry Area
- User can do right click that will open options on the menu of tree view
4). Adding a New Entry to a Notebook in a Display Layout
Info: pdf > page 121
- When a Notebook is placed in a Display Layout, the user can drag and drop to create new Entries, as well as interact in all the same ways as when the Notebook is in the main view.
- An object in a Display Layout can be dragged from layout area and dropped into a Notebook 2 also in the layout.
- On the top left PWR-OVW, this is CH Fixed Position Display when you create new Object.
- Fill PWR-OVW with hosted image on the left side, line connector & text information
- For the EGN frame, please use “Create a New Sine Wave Generator” chart to existing line chart on Open MCT demo. Match X-axis & Y-axis values based on storyboard
5). Having Clicked in the Start Area
Info: pdf > page 122
- When a new entry is started by clicking in the Start area, a new entry should be inserted with a timestamp 2 at the time of insertion.
- The sort method affects where a new entry is placed: when the user is sorting by "Newest first" (as shown here) the entry should be placed at the top of the display area before any existing entries.
- Remove button deletes that entry.
6). Having Dropped an Object in the Start Area
Info: pdf > page 123
- Drop object from the left menu need embed the object
- User still need to filled the description text
7). Dragging Onto an Existing Entry
Info: pdf > page 124
- Dragging from the tree onto an existing Entry will add an Embed with Snapshot to that Entry.
8). Entry Embed Details
Info: pdf > page 125
- This is Entry list look after filled with some object type
9). Viewing Snapshot
Info: pdf > page 126
- This modal window show up after user click the View Snapshot button
- Snapshot will be image based (JPG/PNG)
- When the snapshot is created it also contains metadata which contains a pointer to the data itself.
10). Hovering Over the Text Entry Area
Info: pdf > page 127
- Hover on Enter text here need show up the text area
11). Entering Text in an Entry
Info: pdf > page 128
- User can type text on the text area
12). New Notebook Entry From Object's View
Info: pdf > page 129
- Allow a Notebook entry to be created via a new button to be added to an object's local controls. All
objects that can be embedded in a Notebook entry should support this
13). New Notebook Entry Dialog, Embed Link and Image
Info: pdf > page 130
- This modal window show up on New Notebook Entry From Object's View
- When change the Embed Type dropdown need display different format. Refer to flow explained below
14). New Notebook Entry Dialog, Embed Link Only
Info: pdf > page 131
- This New Notebook Entry Dialog with Embed Link Only
15). Using the Search Filter
Info: pdf > page 132
- Read detail requirements for the Search filter
16). Annotating a Snapshot
Info: pdf > page 133
- You can get to the Annotation screen from these flow:
-- Page 117 shows two routes to get there: from the New Notebook Entry dialog (pg. 130, click "Annotate"),
-- And from adding an annotation to an existing entry (pg. 125, button or context menu).
- Utilize a library such as Painterro (https://github.com/ivictbor/painterro) or similar.
17). View Large Dialog Modifications
Info: pdf > page 134
- This View Large Dialog modal window show up when you click the “full size” icon on the top right of chart on the center pane
- Display the New Notebook Entry on top area
18). Create Snapshot Dialog
Info: pdf > page 135
- Annotate button placed on top of chart
19). Confirmation Dialogs
Info: pdf > page 136
- This confirmation dialog to be displayed when removing a Notebook Entry, Entry Embed, or an Embed's Snapshot. Use existing Open MCT blocking modal dialog UI element.
20). Notifications
Info: pdf > page 137
- To be displayed when successfully creating a Notebook entry via the "New Notebook Entry" dialog as shown on "New Notebook Entry Dialog, Embed Link and Image" on page 130 and "New Notebook
Entry Dialog, Embed Link Only" on page 131.
Development Notes - Notebook Markup and CSS
Info: pdf > page 138
- Guidelines as noted here are important for compatibility and maintainability of the code on a moving
forward basis, as well as compatibility with the application's approach to mobile.
- Markup in the Entry List should utlize a <ul> and <li> structure, ideally taking advantage of CSS
flexbox. Do not utilize tables for this markup.
- As much as possible, review how layout is effected in similar displays that already exist in Open MCT and implement in the same fashion.
- Column structure within rows should be implemented via usage of CSS flexbox.
- Entries must support display of n embeds. Layout should be implemented via CSS flexbox using wrap.
Development Notes - Notebook Mobile Considerations
Info: pdf > page 139
- Mobile display should be consistent with Open MCT's current approach. No new media queries should be needed if the markup and CSS recommendations are followed as noted on "Notebook Markup and CSS" on page 138.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient Open MCT UI Prototype that works in all the requested browsers
- Responsiveness on Desktop, Tablet and Mobile devices
- Matching the layout across the required browsers.
- Best Practice Open MCT web application
- Documentation to set up your submission
- Your submission hosted on Heroku for client review
- Challenge winner will be responsible to push code updates to our repo: https://github.com/topcoderinc/openmct
CODE REQUIREMENTS:
HTML/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.
SASS
- Use SASS on your submission
- Provide comments on the SASS code. We need SASS 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 SASS so developers can follow the code.
- All SASS naming should not have any conflicts.
Javascript
- Javascript should coming from Open MCT 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.
Browsers Requirements
- IE11
- Firefox Latest Browser
- Safari Latest Browser
- Chrome Latest Browser
- Safari and Chrome Mobile on iPhone
The goal of this challenges is to create an UI Prototype using the NASA Open MCT framework.
This challenge seeks to develop software that implements a notebook capability within the Open MCT (Mission Control Technologies) mission control software framework.
Read the challenge details and let us know if you have any questions!
Final Submission Guidelines
Background of the problemOpen MCT (Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research
Center in collaboration with the Jet Propulsion Laboratory, and is being used by NASA for data
analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
Open MCT uses an object-oriented approach to its content model: everything a user can browse and create are all objects of a given type (Telemetry Elements, Display Layouts, Clocks, Timers, Folders, etc.) and each type of object has different capabilities and views. This project aims to add a new user-creatable Notebook object type to the platform as a plugin
component.
A Notebook is a container for multiple Notebook Entries, which are comprised of a timestamp, text and optionally one or more embedded links to other objects in Open MCT. Embedded links themselves can optionally include a Snapshot image capture of their linked object’s viewstate at a given point in time. For example, an user might be viewing a plot of a telemetry element that tracks temperature for a system in a rocket. They might see an anomalous temperature spike in the plot, and would be able to immediately create a new Notebook Entry describing what they saw that also includes a visual image capture of the plot.
The image capture can optionally be annotated as well, utilizing a simple JavaScript-based editor like painterro (https://www.npmjs.com/package/painterro). Notebook Entries can be edited and searched for.
Submission Requirements
- This challenge submitter MUST develop the deliverable code based on Open MCT practices,
conventions and pre-existing components and services listed/referenced:
- Open MCT repo: https://github.com/topcoderinc/openmct
- Open MCT API documentation: https://github.com/nasa/openmct/blob/master/API.md
- Open MCT development process: https://nasa.github.io/openmct/docs/process/
- Open MCT Getting Started: https://github.com/nasa/openmct-tutorial
- Open MCT Demo on Heroku: https://openmct-demo.herokuapp.com
- Layout, design, user gestures and component behaviors shall be implemented as detailed in the attached User Interface document (Attached UI document : NOIS-TO-40_ Open MCT Notebook_RFP Attachment 1.pdf)
- All associated functionality shall be implemented as a new plugin in accordance with Open MCT documentation found online at https://github.com/nasa/openmct/blob/master/API.md
- All development practices shall be followed per the Open MCT development process including unit tests providing at least 80% coverage and test procedures specifying how to verify behavior.
- Interfaces and UI elements shall be implemented using existing Open MCT elements as much as possible. There are additional details and notes in the UI documentation.
- All new markup shall be as semantic as possible and will follow guidelines as laid out in the UI documentation “Development Notes” section.
- Markup shall be implemented in accordance with the Open MCT Style Guide, available in the default build.
- CSS should not implement any new styles that are incompatible with the application’s base look-and-feel and theming approach.
- CSS shall be implemented as SASS within the plugin directory.
- Icons for buttons and Embeds as noted below should use pre-existing available glyphs. See the Open MCT Style Guide for more info.
- Do not use inline styling in markup except where necessary for items with dynamic style properties.
- All markup and CSS must also be mobile compatible via responsive design, in accordance with the current approach to this in Open MCT.
General Tasks:
1). Notebook
- New Notebooks shall be created as domain objects via the Create menu.
- Notebooks must be nameable.
- Notebooks must be able to be added to Display Layouts.
- Notebooks must be able to contain n notebook Entries.
- Notebooks must support search and timeframe filtering as detailed in the UI documentation.
- Notebooks should load and display entries using an infinite scrolling approach - as opposed to a pagination strategy.
2). Notebook Entries
- Notebook Entries must be able to contain and display n characters of text.
- Notebook Entries must be editable after initial creation.
- Notebook Entries should track their modified datetimes, but only display their creation timestamp per the UI documentation. The creation timestamp is defined at the first instant of Entry creation.
- Notebook Entries must be able to contain Embeds of other domain objects.
- Notebook Entries must be cached per keystroke using local storage and synced to a persistence service at reasonable intervals.
- Notebook Entries must be able to be launched from any supported domain object, following the workflow as detailed in that section of the UI document.
- When a Notebook entry is deleted by the user, it shall be stored in the database with a flag denoting that state, but not permanently deleted from the database.
- Deleted Notebook entries should not be made visible to the user.
- Future functionality will allow a user to view deleted entries and restore them.
3). Entry Embeds
- Embeds shall consist of a navigable link to a domain object and an optional Snapshot of that object.
- Embeds should display as well as an icon denoting their object type
- If Embeds include a Snapshot, they shall display the following details:
- A thumbnail of the Snapshot.
- The created datetime of the Snapshot.
- If Embeds do not contain a Snapshot, they should display a button for generating a Snapshot
- See the UI documentation for details.
4). Snapshots
- Object Snapshots should be generated from the originating object view via the exportImageService and stored as PNGs.
- Object Snapshots should be stored in the persistence database.
- Object Snapshots must track their created and modified datetimes.
- Object Snapshots can be generated from any view -- which will prompt the user to select a notebook, after which a Notebook Entry will be created and the Object Snapshot will be added as an Entry Embed.
- See the relevant page in the UI document for more detail.
- [ Stretch Requirement - Optional ] The software will allow annotation of object Snapshots as described in the UI document.
NASA - Open MCT Notebook UI Prototype Screen Requirements
Note: For all screens below please refer to the attached UI Document (NOIS-TO-40_ Open MCT Notebook_RFP Attachment 1.pdf)
Notebook Layout Overview
Info: pdf > page 116
Notes:
- This is the general layout how the Notebook look & feel
- For your submission you need keep the dark theme like existing Open MCT layout
- Follow layout guideline like UI Document
Left pane
- This panel contains the tree view
- Search filter input placed on top
- Notice there are red & blue colored indicator on some menus
- Create another group on the bottom for Owned by Me, Shared with Me, Starred & Content
- Match all left-pane content like provided storyboard on the left pane
Center pane
- Center panel is for the main content
- Search filter input placed on top
- Start new entry area is not part of scrolling and always be visible
- Entry list has vertical scroll
- On some rows, there are embedded domain object link with snapshot & embedded domain object link.
- On the bottom of entry list you need displayed start time & end time
Right pane
- This is for Inspection
Footer
- Display just 1 icon based on
- Date/Time & Open MCT logo on the right side
1). Creating a Notebook
Info: pdf > page 118
- For this challenge submission create your UI prototype starting from Creating a Notebook
- New Domain Object displayed on the last row of Create menu options
- Hover on the Notebook menu need display more information on the right side column
2). Empty Notebook
Info: pdf > page 119
- You can display this Empty screen on your submission to simulate the application flow
- Just need display the search filter, dropdowns and entry button on the top
3). Adding a New Entry
Info: pdf > page 120
- Adding a new entry can be started by clicking the Start new entry area
- Or by dragging object from tree view to the Start new entry Area
- User can do right click that will open options on the menu of tree view
4). Adding a New Entry to a Notebook in a Display Layout
Info: pdf > page 121
- When a Notebook is placed in a Display Layout, the user can drag and drop to create new Entries, as well as interact in all the same ways as when the Notebook is in the main view.
- An object in a Display Layout can be dragged from layout area and dropped into a Notebook 2 also in the layout.
- On the top left PWR-OVW, this is CH Fixed Position Display when you create new Object.
- Fill PWR-OVW with hosted image on the left side, line connector & text information
- For the EGN frame, please use “Create a New Sine Wave Generator” chart to existing line chart on Open MCT demo. Match X-axis & Y-axis values based on storyboard
5). Having Clicked in the Start Area
Info: pdf > page 122
- When a new entry is started by clicking in the Start area, a new entry should be inserted with a timestamp 2 at the time of insertion.
- The sort method affects where a new entry is placed: when the user is sorting by "Newest first" (as shown here) the entry should be placed at the top of the display area before any existing entries.
- Remove button deletes that entry.
6). Having Dropped an Object in the Start Area
Info: pdf > page 123
- Drop object from the left menu need embed the object
- User still need to filled the description text
7). Dragging Onto an Existing Entry
Info: pdf > page 124
- Dragging from the tree onto an existing Entry will add an Embed with Snapshot to that Entry.
8). Entry Embed Details
Info: pdf > page 125
- This is Entry list look after filled with some object type
9). Viewing Snapshot
Info: pdf > page 126
- This modal window show up after user click the View Snapshot button
- Snapshot will be image based (JPG/PNG)
- When the snapshot is created it also contains metadata which contains a pointer to the data itself.
10). Hovering Over the Text Entry Area
Info: pdf > page 127
- Hover on Enter text here need show up the text area
11). Entering Text in an Entry
Info: pdf > page 128
- User can type text on the text area
12). New Notebook Entry From Object's View
Info: pdf > page 129
- Allow a Notebook entry to be created via a new button to be added to an object's local controls. All
objects that can be embedded in a Notebook entry should support this
13). New Notebook Entry Dialog, Embed Link and Image
Info: pdf > page 130
- This modal window show up on New Notebook Entry From Object's View
- When change the Embed Type dropdown need display different format. Refer to flow explained below
14). New Notebook Entry Dialog, Embed Link Only
Info: pdf > page 131
- This New Notebook Entry Dialog with Embed Link Only
15). Using the Search Filter
Info: pdf > page 132
- Read detail requirements for the Search filter
16). Annotating a Snapshot
Info: pdf > page 133
- You can get to the Annotation screen from these flow:
-- Page 117 shows two routes to get there: from the New Notebook Entry dialog (pg. 130, click "Annotate"),
-- And from adding an annotation to an existing entry (pg. 125, button or context menu).
- Utilize a library such as Painterro (https://github.com/ivictbor/painterro) or similar.
17). View Large Dialog Modifications
Info: pdf > page 134
- This View Large Dialog modal window show up when you click the “full size” icon on the top right of chart on the center pane
- Display the New Notebook Entry on top area
18). Create Snapshot Dialog
Info: pdf > page 135
- Annotate button placed on top of chart
19). Confirmation Dialogs
Info: pdf > page 136
- This confirmation dialog to be displayed when removing a Notebook Entry, Entry Embed, or an Embed's Snapshot. Use existing Open MCT blocking modal dialog UI element.
20). Notifications
Info: pdf > page 137
- To be displayed when successfully creating a Notebook entry via the "New Notebook Entry" dialog as shown on "New Notebook Entry Dialog, Embed Link and Image" on page 130 and "New Notebook
Entry Dialog, Embed Link Only" on page 131.
Development Notes - Notebook Markup and CSS
Info: pdf > page 138
- Guidelines as noted here are important for compatibility and maintainability of the code on a moving
forward basis, as well as compatibility with the application's approach to mobile.
- Markup in the Entry List should utlize a <ul> and <li> structure, ideally taking advantage of CSS
flexbox. Do not utilize tables for this markup.
- As much as possible, review how layout is effected in similar displays that already exist in Open MCT and implement in the same fashion.
- Column structure within rows should be implemented via usage of CSS flexbox.
- Entries must support display of n embeds. Layout should be implemented via CSS flexbox using wrap.
Development Notes - Notebook Mobile Considerations
Info: pdf > page 139
- Mobile display should be consistent with Open MCT's current approach. No new media queries should be needed if the markup and CSS recommendations are followed as noted on "Notebook Markup and CSS" on page 138.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient Open MCT UI Prototype that works in all the requested browsers
- Responsiveness on Desktop, Tablet and Mobile devices
- Matching the layout across the required browsers.
- Best Practice Open MCT web application
- Documentation to set up your submission
- Your submission hosted on Heroku for client review
- Challenge winner will be responsible to push code updates to our repo: https://github.com/topcoderinc/openmct
CODE REQUIREMENTS:
HTML/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.
SASS
- Use SASS on your submission
- Provide comments on the SASS code. We need SASS 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 SASS so developers can follow the code.
- All SASS naming should not have any conflicts.
Javascript
- Javascript should coming from Open MCT 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.
Browsers Requirements
- IE11
- Firefox Latest Browser
- Safari Latest Browser
- Chrome Latest Browser
- Safari and Chrome Mobile on iPhone