Mission Control

the Amazing Robots Asteroid Mining Adventure

Site Purpose

These Mission Control pages provide user feedback for remote-controlled robots built for the Amazing Robots Asteroid Mining Adventure.

Solo Mission Control is for individual robotic pilotage practice. The initialization form requests the IP of the bot to be controlled (enter the full IP address), the IP address of the camera mounted on the bot (bots were designed to use Android phones running the IP Webcam app. Suggest to set video to 320x240 or nearest low-bandwidth setting).

Robotics controls for the ARAMA were developed in SNAP, so the solo initialization form allows a SNAP username and project name (to see a sample app, use username mikep345678 and project name robot15).

Duo Mission Control is the real deal: when pairs of bots are deployed to the asteroid, Duo Mission Control displays video feeds from both bots and from the satellite orbiting the asteroid. The Duo initialization form requests IP addresses for each bot, each bot's camera, and the satellite camera. The color selector form field serves no practical purpose except to exhibit the HTML5 color form field. (Other HTML form fields include num and tel.)

SNAP would be running on separate control computers during Duo missions.

INFOST320x Assessment Targets

• Site will be created from scratch. You cannot use a CMS like WordPress.
  While the AmazingRobots.net website is managed using WordPress, all HTML, Javascript and CSS for the Mission Control pages were hand-coded using Atom.
• Include 4 or more webpages with a navigation menu that links to all the pages of the site
  Site consists of 5 pages, including this index page, the solo and duo mission initialization forms, and the solo and duo mission control pages. Nav menu at the upper-left of each page provides navigation and indicates current page.
• Include a form. All elements will use the label tag. Use 3 or more examples of new HTML5 form input types (email, date, etc.)
  Mission Initialization forms include number, tel and color HTML5 input types.
• 3 or more examples of CSS. Examples include rounded corners, background gradients, text and box shadows, multiple column layouts, and animation/transitions. All CSS will be written in an external stylesheet (no in-line styles).
  All formatting is provided by CSS. Special examples include flex divs for mission control feeds, rounded img frames, and styled form input buttons.
• An example of HTML5 video and audio
  Index page includes video with audio of Duo Mission Control in use.
• Include an image gallery using a lightbox plugin or another JavaScript slideshow type.
  Index page includes lightbox slideshow of Amazing Robots Asteroid Mining Adventure.
• The site will use HTML5 semantic tags where appropriate. For example footer information will go inside of footer and navigation information will go inside of nav.
  Nav and form use semantic tags.
• The site will be responsive with different layout options for small, medium, and large views (at least 3 break points will be used).
  Pages use mobile-first orientation with breakpoints at 400, 600, 800, 1000 and 1200px changing sizes of camera feeds and fonts. The SNAP app embedded in Solo mission control does not scale.
• In addition, pages utilize javascript to parse form values from page URL, provide and update the mission countdown timer, and to provide periodic distance and environmental readings from bot sensors.