[epic][ui/ux] Overview of the UI/UX

[sporniket]

• The display is a viewport of a larger area, modelized as a character matrix
• The matrix will be organized as a collections of lines, each line being a section of functionnalities
  • Time/Daylight Saving Time/date
  • Wifi status, MAC address
  • WPS status and trigger
  • Time zone and DST setting
  • Title
• At startup, the viewport shows the title, THEN it goes to the Time/DST/Date line, focusing on Time.
• Going to the Right advance to the next function in the line, going left goes back. Up and down button change value, long press on up or down cancel change, left or right commit change.

The UI rendered as an HTML table :

<table border="1" style="background-color:#999999">
<tr>
<td>
<table border="1" style="background-color:#aa8899;margin:8px"><tr><td style="padding:8px;">[HEURE]</td><td style="padding:8px;">"DST" On/Off</td><td style="padding:8px;">  "Year " xxxx    </td><td style="padding:8px;">"Month "  yy</td><td style="padding:8px;">    "Day "  dd</td></tr></table>            
</td>
</tr>
<tr>
<td>
<table border="1" style="background-color:#aa8899;margin:8px"><tr><td style="padding:8px;">"Wifi "  Enrolled/Error</td><td style="padding:8px;">"MAC address"</td><td style="padding:8px;">"1"  xx</td><td style="padding:8px;">"2 "    yy</td><td style="padding:8px;">"3 "    yy</td><td style="padding:8px;">"4 "    yy</td><td style="padding:8px;">"5 "    cc  </td></tr></table>
</td>
</tr>
<tr>
<td>
<table border="1" style="background-color:#aa8899;margin:8px"><tr><td style="padding:8px;">"WPS Trying"/"WPS idle"</td><td style="padding:8px;">"Try"</td></tr></table>                 
</td>
</tr>
<tr>
<td>
<table border="1" style="background-color:#aa8899;margin:8px"><tr><td style="padding:8px;">"Time zone"</td><td style="padding:8px;">"[-]xx:yy"</td><td style="padding:8px;">"DST " On/Off</td></tr></table>
</td>
</tr>
<tr>
<td style="padding:8px;">
[APP TITLE]
</td>
</tr>
</table>

[sporniket]

UI model

• The general model is a matrix of characters, made of H rows of W columns of char
• One char = 1 byte ASCII code + 1 byte effect. --> font to use, glyph of the font to display

fixed labels (single line)

• position, dimension (x, y, w, h) (h = 1)
• label (up to W characters + null terminator)
• font (or default)

dynamic labels (single line)

• position, dimension (x, y, w, h) (maximum dimension, actual dimension)
• label format (e.g. "Whatever %d")
• Value (string) ; on change, apply format and notify container
• font (or default)

Monodirectionnal container

• position, dimension (x,y,w,h) ; maximum vs actual
• Childrens (vector of components)
• Append strategy : horizontal or vertical

[sporniket]

UX Model

• Focused on a single component (e.g fixed or dynamic label) that MUST be single line
• when _W_component <= Wviewport, displays only that component, aligned on the left
• when _W_component > Wviewport, the displays scroll to the right every 1/3 seconds to show the next characters, the display rolls over with a space, e.g. "Hello" will be triggers the following sequence :
  • Hell
  • ello
  • llo
  • lo
  • o
  • H
  • He
  • Hel
  • Hell
  • and so on....

[sporniket]

Object model

• Follows AES/GEM Object structure (ob_next, etc...)
• supported ob_type : G_BOX (20) and G_STRING (28)
• Thus the form will be organized like the following
  • a root G_BOX, containing 4 G_BOX and one G_STRING
  • each contained G_BOX contains as many G_STRING as required.
  • each G_STRING is sufficiently sized