ESB Design

( 1020 x 760 )

Target Area

( 1920 x 1080 )

This is a label

1920 x 1080

1020 x 760

This is a label

1920 x 1080

1020 x 760

This is a label

1920 x 1080

1020 x 760

This is a label

1352 x 760

Scale the screen shrink 1.42 x as layout space
(1.42 = 1080 / 760, 1352 = 1920 / 1.42)

This is a label

1352 x 760

Layout grid
(cellHeight = 760 / 1510, cellWidth = 1352 / 102 = 13.24)

1352 x 760

Place all dashcard based on new grid
(cellHeight = 10, cellWidth = 1352 / 102 = 13.24)

This is a label

1352 x 760

Scale all to actually screen size

This is a label

Issues for current design

Existed issue (Will support in MVP 2)

• Image will be scaled as a square

Existed issue (Will support in MVP 2)

• Image will be scaled as a square

A new setting "Retain aspect ratio" will be added to image

Existed issue (Need to change design)

• Text is not aligned as iOS appearance

Existed issue (Need to change design)

• Text is not aligned as iOS appearance

Existed issue

• Shadow shown different with iOS (ESB-7341)

EMob Triggers

Existed issue

• Shadow shown different with iOS (ESB-7341)

Move the label with shadow to back to resolve this issue.

EMob Triggers

Other issues

• Use different render/layout engine between EyeVia and iOS App
• Different widget have different layout logic and it is difficult for us to ensure alignment across components.
• We have tried to fix the problems found where possible and have avoided the need to adjust the design where possible.