A modelbased development for 3D User Interfaces

1
A model-based development for 3D User Interfaces
6th International Conference on Computer-Aided
Design of User Interfaces CADUI2006June
6th-8th, 2006, Bucharest, Romania.

• Juan Manuel Gonzalez Calleros1, Jean
  Vanderdonckt1, Jaime Muñoz Arteaga2

1. Université catholique de Louvain, School of
Management (IAG) Information Systems Unit
(ISYS) 2. University Autonomous of Aguascalientes
www.usixml.org
2
Contents

• Introduction
• Related Work
• Model-based development for 3D User Interfaces
• Case Study
• Conclusion

3
Introduction - Problem

• Actual methods
• Rarely provide the design knowledge
• Are more focusing on the implementation
• Available tools for 3D UIs are Toolkits,
  interface builders, rendering engines

4
Introduction proposal

• We rely on
• A user-centered approach
• Separation of concerns
• Model-driven architecture
• Our goal
• To demonstrate the feasibility of a
  MDE-compliant method that is user-centered as
  opposed to contents-centric for developing 3D UIs

5
Contents

• Introduction
• Related Work
• Model-based development for 3D User Interfaces
• Case Study
• Conclusion

6
Related work 3D UIs generation

• Programmatic approach OpenGL, Direct3D, C,
  MCNL, VRML, X3D,
• Toolkit programming Maya, Max3D, Crazy Eddie's
  GUI System, Anark, Alice
• Render engines Microsoft task gallery, infinite
  3D Cube, Sphere XP, looking glass, Clara browser,
  3DNA
• Model based ontoWEb (VR-Wise), ConGenIVE
  (VRIXML), InTML, Contigra

7
Related work Programmatic Approach, VRML
8
Related work Toolkit Approach, Anark
9
Related work Render Engines, 3DNA
10
Related work Model-based approach,
CoGenIVE-VRIXML

• ltGroupItem gt
• ltUISlider paramID "10"gt
• ltValue min "0" max"255"/gt
• ltTickstyle orientation " horizontal
  position " both "
• frequency "16"/gt
• lt/ UISlider gt
• ltPosition gt
• ltXgt1.0 lt/XgtltYgt1.5 lt/Ygt
• lt/ Position gt
• lt/ GroupItem gt

11
Contents

• Introduction
• Related work
• Model-based development for 3D User Interfaces
• Case Study
• Conclusion

12
We rely on

• Cameleon reference Framework
• UsiXML
• UML class diagrams
• Graph transformations

13
Method Outline
Domain model
Task model
Task Concepts
Step 1
Abstract UI
AUI UI definition independent of any modality of
interaction
Step 2
AUI production (IdealXML)
Abstract user interface 1
Abstract user interface 2
Abstract user interface n

CUI concretizes an AUI into CIOs (widget sets
found in popular graphical and vocal toolkits)
Concrete UI
Step 3
CUI production (TransformiXML)

3D Concrete User Interface 1 (UsiXML)
3D Concrete User Interface 3 (MEL)
3D Concrete User Interface 2 (Java3D)
Maya Development environment


FUI operational UI that runs on a particular
platform either by interpretation or by execution
Java3D Generator
VRML97/X3D Generator
VUIToolkit
Final UI
VRML97/ X3D code
Java3D code
VRML97 code
Step 4
HTML browser with Cortona player
HTML browser with Cortona player
HTML browser with Cortona player
14
Software tools - IdealXML
15
Software tools - AGG
16
Software tools - Alice
17
Software tools - Maya
18
Software tools - VUIToolkit
19
Contents

• Introduction
• Related Work
• Model-based development for 3D User Interfaces
• Case Study
• Conclusion

20
Case Study Virtual polling system
21
Case Study Task and domain definition
22
Case Study Concrete Definition
23
Case Study Concrete Model B
24
Case Study From Abstract to concrete Model
25
Case Study From Abstract to concrete Model
26
Mock-up of the Concrete User Interface
27
Case Study From Abstract to concrete Model

• ltGroupgt
• ltCubeFace id"C1"gt
• ltSphereTrigger defaultContent"Start"
  radious"1.5" solid"True" isVisible"true"
• isEnabled"true"gt
• ltTransform scale"8.23 8.23 8.23"
  translation"0.27 12.14 18.30"/gt
• ltTouchSensor id"TS1" enabled"True"/gt
• ltAppearance name"ButtonAppe" id"App1"gt
• ltMaterial
• diffuseColor"0.8 0.8 0.0"
  specularColor"0.11 0.11 0.11"
• emissiveColor"0.0 0.0 0.0"
  shininess"0.3"/gt
• lt/Appearancegt
• lt/SphereTriggergt
• lt/Groupgt

28
Case Study Editing the FUI in Maya
29
Case Study Editing the FUI in Alice
30
Case Study FUI generated with Alice
31
Case Study FUI generated with the VUIToolkit
32
Case Study FUI generated with the Maya
33
Case Study FUI generated with the Maya
34
Use of the virtual polling system Case Study in a
virtual world
35
Contents

• Introduction
• Related Work
• Model-based development for 3D User Interfaces
• Case Study
• Conclusion

36
Conclusion Model-based approaches
37
Conclusion

• The method based on graph transformation has
  been introduced, defined and illustrated
• We proposed a method for 3D UI development whose
  life cycle was divided into four steps ranging
  from the most abstract to the most concretes
  according to the principles of Model-Driven
  Engineering.
• The feasibility of the approach is much depending
  on the amount and the quality of the design rules
  that are encoded in UsiXML.

38
Conclusion

• Future work. Exploring more design options and
  encode them in UsiXML
• Models
• Transformational rules
• Software tools
• More FUI

39
Thank youMultumesc!

• Juan Manuel Gonzalez Calleros
• Contact
• gonzalez_at_isys.ucl.ac.be

www.usixml.org