Platform Independent User Interfaces for Heterogeneous Devices

1
Platform Independent User Interfaces for
Heterogeneous Devices

• Amod Karve
• Jeffrey Lewis
• Xiaoxuan Li
• Charlie Patel
• Bin Xue
• www.caip.rutgers.edu/jeffreyl
• Department of Electrical and Computer Engineering
• Rutgers University

2
Outline

• 1. Inception (Bin)
• 1.1. Objective
• 1.2. Background
• 1.3. UML
• 2. Elaboration (Jeffrey)
• 2.1. System Overview
• 2.2. General Heurisitcs
• 2.3. Item Specific Rules
• 2.3.1. Text
• 2.3.2. Links
• 2.3.3. Images
• 2.3.4. Drop Downs
• 2.3.5. Tables
• 3. Construction (Charlie)
• 3.1. PHP documents
• 3.2. XSLT documents
• 3.3. Tools
• Demonstration (Amod)

3
Background

• Method
• Content creators create different versions of
  the material for each individual device (e.g.
  WML)
• Problem
• Every time a new type of client appears, the
  server needs to be modified. (e.g. wireless
  devices needs the server to host WML documents)

4
Background

• Method
• Use of heuristics where some transformations are
  applied to the existing web pages in order to be
  rendered on the specific device
• Problem
• The content creator has no means of specifying
  what is important and what is trivial.
• Another issue is that often the domain of such
  techniques is fairly restrictive .

5
Objective

• To separate content from the user interface by
  creating a device-independent application
  description and a method of transformation for
  device specific adaptation.
• Project principle
• Use XML and separate the data from the user
  interface. Provide more valuable information to
  the rendering client about what is being
  displayed.

6
UML Use Cases
7
Elaboration

• System Overview
• Pipeline
• Client / Server Relationship
• General Heuristics
• Item-Specific Rules
• Text
• Links
• DropDowns
• Images
• Tables

8
System Overview Pipeline
9
System Overview High Level Process
Web Server
XML
Generic Application Specification
Client
HTML
Application
XML
Content
XML
Device Characteristics
10
Heuristics

• Some General Heuristics
• Use resolution, pixel size, and minimum font
  size to determine general layout
• Minimize scrolling
• Replace links with drop downs if no room for
  links
• Divide pages of text into subpages and choose
  with drop down or links
• Replace links with alternate text which is shown
  when chosen with cursor
• Order menu items by most recently used and most
  frequently used
• No blank lines, use horizontal line to let user
  know content is following
• Assign priorities to objects (text, tabs,
  tables, lists, menu items, etc)
• Display horizontally to resemble aspect ratio of
  desktop monitor

11
Item Specific Rules Text

• Character-based text
• Single Line Scrolled
• Multiple Lines
• Link throughs
• associated with the text node, link name is
  used as a link to the full text node
• Graphical Text
• Determine the number of characters in the text
  node
• Given height of the font and width of each
  character as some percentage of the height,
  determine the area required for each character.
• Reduce the height of the font from the default
  height until all of the characters fit.
• Do not decrease the height of the font below
  the minimum visible height.

12
Item Specific Rules Links

• Links can be either named/un-named i.e they can
  either have an associated text/image or they
  could be just URL(s).
• Maintain links within converted links
• Link name convention (built-in names, derived
  names)
• ie within a paragraph
• Maintain link location within context
• Organize Links

13
Item Specific Rules Images

• Determine if browser is capable of viewing images
  / color images
• Allow parameter to determine at what level
  picture should be displayed, ie always, color
  only, w/ a min resolution only
• Images must maintain a minimum size for clarity
• Image minimum can be determined by original size
  and resolution.
• Should allow for a set picture size minimum to be
  passed in as a parameter
• Full screen images may provide backup icons for
  page fit Images should provide alternate text
  for links

14
Item Specific Rules Drop Downs

• Determine Text/Graphics capabilities
• Find maximum visable items
• Implement scrolling / highlighting
• Apply text rules to highlighted item

15
Item Specific Rule Tables

• Determine if scrolling in both directions is
  allowed.
• Generally, scrolling is avoided. If scrolling is
  not allowed in one direction, rearrange cells to
  accommodate.
• For text-only devices, remove images and show
  table text inline with some delimiters
• Apply rules for text and images in each cell
  first and then make each cell conform to the rest
  of the table rules

16
General Metrics

• Device Considerations
• Resolution (number of pixels)
• Display size (height x width)
• Pixel Size
• Pixel type (text or graphics)
• Aspect ratio
• Color capability (8-bit, 16-bit, greyscale, etc)
• Type of input (mouse, keyboard, voice, etc)

Not considered for our implementation

• Human Considerations
• Minimum visible size (e.g. fonts, graphics,
  icons)

For most devices, Resolution Pixel Size
Display Size
Need 2 of 3 of these to do transformation
17
System Implementation
Web Server
Client
API UI Tag
HTML
XML
Generic Application Specification ltuilgt
lttextgtgreetinglt/textgt lt/uilgt
Application lthtmlgt ltheadgt lttitlegtFinal
outputlt/titlegt lt/headgt ltbodygt ltttgtHellolt/ttgt ltttgtW
orldlt/ttgt lt/bodygt lt/htmlgt
XML
XML
Content ltgreetinggtHello World lt/greetinggt
Device Characteristics ltdevice_infogt
lttypegttextlt/typegt ltresolution
units'characters'gt ltwidthgt5lt/widthgt
ltheightgt5lt/heightgt lt/resolutiongt lt/device_infogt
User-Defined UI Tag
18
Implementation Flowchart
devinfo.php
index.html
device_info.xml
suggested_ui.xml
xml_out.php
dev_spec_uil.xslt
Device-dependent Transformation
dev_spec_uil.xml
data.xml
html_engine.php
merge_data.xslt
Data-dependent Transformation
eng_spec.xml
html_engine.xslt
HTML Conversion
Final Output HTML
19
Implementation Flowchart with Examples
index.html
devinfo.php
dev_info.xml ltdevice_infogt lttypegttextlt/typegt
ltresolution units'characters'gt
ltwidthgt10lt/widthgt ltheightgt10lt/heightgt
lt/resolutiongt lt/device_infogt
suggested_ui.xml ltuilgt lttextgtgreetinglt/textgt lt/ui
lgt
dev_spec_uil.xslt
xml_out.php
dev_spec_uil.xml ltuilgt ltline break"10"gtgreetinglt
/linegt lt/uilgt
data.xml ltgreetinggtHello World lt/greetinggt
html_engine.php
merge_data.xslt
eng_spec.xml ltuilgt ltlinegtHellolt/linegt ltlinegtWorldlt
/linegt lt/uilgt
Final Output HTML lthtmlgt ltheadgt lttitlegtFinal
outputlt/titlegt lt/headgt ltbodygt ltttgtHellolt/ttgt ltttgtW
orldlt/ttgt lt/bodygt lt/htmlgt
html_engine.xslt
20
Tools
MS Windows PC
Client
Web Server
Apache HTTP Server Version 1.3.27
Internet Explorer Version 6.0
http//www.apache.org
DLL
DLL
PHP Version 4.3.1
Sablotron XSLT
http//www.php.net
21
Screen Shot of Implementation
Final Output Window for a 5 x 1 Text-based Device
22
Current Functionality

• Defined the system architecture
• Set up the web server to allow the client to
  input the device specific information and
  transformation of character-based text
• Have defined item-specific rules
• Text
• Links
• Tables
• Images
• Drop-downs

23
Current Functionality

• A simple system with text and link adaptation,
  implemented by PHP
• The user can make input their own device
  information, the content and suggested UI files

24
Future Work

• The goals of future work are to implement the
  current rules and create more rules for the basic
  elements of Windows-based application
• Expand the Supported UI documents, make it
  applicable to complicated web page (based on News
  XML, with headline, author, title, content, etc)
• Implement the rules for text, links, tables and
  images and drop-downs, make the user interface
  adaptation for complicated contents
• Define rules for other HTML elements (radio,
  checkbox, button, and frame)

25
Future Work

• Apply priorities to each of the item-specific
  rules
• EXP

• Consider the more challenging issue of a user
  interface with combinations of all elements

26
Future Work

• For different applications (such as ticket, stock
  information), get some idea for different
  Supported UI documents
• Do some research on how to define the generic
  supported UI documents
• Add better space management for graphical and
  character-based text

27
Any Questions?