The page should be 1000 px wide and 670 px tall.
The page will contain a <video> element... which is a square element that displays the video coming from the laptop camera. (see this for an idea of what the video element would look like https://developer.mozilla.org/en-US…ill_photos ). You can layout the video as any size (keeping square aspect ratio) you feel works well as long as its at least (300 px x 300 px). I can size the video using css.
In addition to the element, there needs to be several text variables displayed (once the face recognition does its magic). Below is a list of variables that will need to be displayed:
Pupil Right X: 123 Y: 100
Pupil Left X: 123 Y: 100
Nose Tip X: 123 Y: 100
Head Pose Roll -16.5
Head Pose Yaw 22.1
Glasses Reading Glasses
The above variables can be layout in any way you feel looks good (one column or two.. or any other arrangement).
There needs to be a button labeled "Take Photo" and a button labeled "Reset" below the video.
As for look/feel... the color scheme needs to match our company's theme (http://www.quickbase.com).
I particularly like this page (http://quickbase.intuit.com/databas…r-business) with the blurred background. But... I am totally open to fresh ideas. I like image background.. Just need to make sure it doesn't get too busy around the video.
Feel free to get creative. Go Modern or Nature. It just needs to look interesting. I'm really open minded.
We will need the "QuickBase" logo in there somewhere (http://quickbase.intuit.com/images/quickbase-logo.png);
I will also two images that overlay the size of the video element that are black and semi-transparent background that show:
1. A Green Check (or some other success type feedback).
2. A Red XXX (like the old tv show "Family Feud").