Styx MobileView iPad App UI Prototype

Project Overview

Welcome to the MobileView iPad App UI Prototype contest.

Currently have a universal iOS app called TruVision which can be used to see live video from various types of devices (cameras). The MobileView iPad App will be a simplied version of the TruVision app and we want to build it based on the existing TruVision code.

Competition Task Overview

For this contest, we want you to take the existing Truvision app source code, modify the HTML files in it (in www folder) to get a prototype for this new MobileView iPad App.

Key Requirements

• We want to use the files in the www folder as start which currently doesn't work if opened in a browser. You must modify the code to make the files in www folder work inside a browser. Do NOT remove any code, just comment the code that needs to be excluded and for any new code you add, make sure you clearly add a note too. We need to make sure these rules are followed so that when it comes to assembly we can reuse the current code base as much as possible.
• We provided the old HTML prototype for TruVision in the contest forum, but it's just for reference. You must NOT use it as the base for this contest.
• Test in all the required browsers.
• This will be an iPad only app, make sure it looks good on all versions of iPads.
• Basic design elements in the existing code/prototype can be followed.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• The prototype was based on Sencha touch, so should this new prototype.
• The DOM size should be kept as low as possible (keep elements in memory but not in the DOM tree).

Detailed Requirements

See the workflow.png diagram for the workflow of the MobileView iPad App. The new prototype should contain all screens shown in the diagram except for "User Accounts". 

Note the devices/cameras will be installed on vehicles, that's why you see the menus named with "Vehicle".

Note features not mentioned below should be removed from TruVision UI.

Splash Screen / App Icon / Color schema

• We need to use the new splash screen image attached in contest forum.
• We need to use the new app icon (if applicable) attached in contest forum.
• The TruVision app uses green color, the MobileView app should use blue color.

User Login

• User Login will be similar to TruVision but a bit different, basically when user logs in they will be given the option to add devices right away.

Vehicle Selection

• After user logs in, they will see the Vehicle selection screen which is similar to the current Live screen, see the attached requirements document in contest for more details on this.
• Note this live screen will not load camera videos by default
• Minor changes to the slide out add device screen: there will be a button for 'quick view' that user can click and have the slider close and open to live view quickly

Live Video Feed

• This is similar to the single view screen in TruVision, but with controls to go to previous cam and next cam
• We need two icons on single view screen:
  • Save Snapshot: this is similar to the current Save Snapshot feature in TruVision
  • Turn on/off audio: this icon will be used to turn on/off audio for the camera, and when audio is turned on we need to see volumn controls
  • All other icons currently in TruVision should be deleted.

Favorites

• This should be the same as the Favorites feature currently in TruVision.

Snapshot Gallery

• This should be the same as the Gallery feature currently in TruVision.

System Settings

• This should be the same as the Settings feature currently in TruVision with functionality to import / export vehicles.

Exit

• Exits the app, same as the Exit feature currently in TruVision.

Specific HTML/CSS/JavaScript Requirements (if applicable)

• You MUST use HTML5 and CSS3
• 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 lay out 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 stylesheet.
• 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.

Browser Requirements

• Chrome / Safari (both on desktop and ipad)

Documentation Provided

Register to see documents in contest forum.

Final Submission Guidelines

Submission Deliverables

• A complete Sencha based HTML prototype that can run directly inside a browser.
• Changlog to the existing code from www folder.
• Deployment guide (if applicable).

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.