1. A model-based development for 3D User Interfaces Juan Manuel Gonzalez Calleros 1, Jean Vanderdonckt 1, Jaime Muñoz Arteaga 2 1. Université catholique de Louvain, School of Management (IAG) Information Systems Unit (ISYS) 2. University Autonomous of Aguascalientes 6th International Conference on Computer-Aided Design of User Interfaces CADUI´2006 June 6th-8th, 2006, Bucharest, Romania. www.usixml.org

2. June 6-8CADUI Bucharest, Romania2 Contents  Introduction  Related Work  Model-based development for 3D User Interfaces  Case Study  Conclusion

3. June 6-8CADUI Bucharest, Romania3 Introduction - Problem  Actual methods: Rarely provide the design knowledge Rarely provide the design knowledge Are more focusing on the implementation Are more focusing on the implementation  Available tools for 3D UIs are: Toolkits, interface builders, rendering engines

4. June 6-8CADUI Bucharest, Romania4 Introduction – proposal  We rely on: A user-centered approach A user-centered approach Separation of concerns Separation of concerns Model-driven architecture 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. June 6-8CADUI Bucharest, Romania5 Contents  Introduction  Related Work  Model-based development for 3D User Interfaces  Case Study  Conclusion

6. June 6-8CADUI Bucharest, Romania6 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. June 6-8CADUI Bucharest, Romania7 Related work – Programmatic Approach, VRML

8. June 6-8CADUI Bucharest, Romania8 Related work – Toolkit Approach, Anark

9. June 6-8CADUI Bucharest, Romania9 Related work – Render Engines, 3DNA

10. June 6-8CADUI Bucharest, Romania10 Related work – Model-based approach, CoGenIVE-VRIXML    <Tickstyle orientation =" horizontal“ position =" both "  frequency ="16"/>    1.0 1.5  1.0 1.5  

11. June 6-8CADUI Bucharest, Romania11 Contents  Introduction  Related work  Model-based development for 3D User Interfaces  Case Study  Conclusion

12. June 6-8CADUI Bucharest, Romania12 We rely on…  Cameleon reference Framework  UsiXML  UML class diagrams  Graph transformations

13. June 6-8CADUI Bucharest, Romania13 Method Outline AUI production (IdealXML) CUI production (TransformiXML) 3D Concrete User Interface #1 (UsiXML) Maya Development environment Java3D code HTML browser with Cortona player Java3D Generator Abstract user interface #1 Domain model Task model … … Abstract user interface #2 Abstract user interface #n 3D Concrete User Interface #3 (MEL) VRML97/ X3D code HTML browser with Cortona player VRML97/X3D Generator … Step 1 Step 2 Step 3 Step 4 Task & Concepts Abstract UI Concrete UI Final UI AUI: UI definition independent of any modality of interaction CUI: concretizes an AUI into CIOs (widget sets found in popular graphical and vocal toolkits) FUI: operational UI that runs on a particular platform either by interpretation or by execution 3D Concrete User Interface #2 (Java3D) VRML97 code HTML browser with Cortona player VUIToolkit

14. June 6-8CADUI Bucharest, Romania14 Software tools - IdealXML

15. June 6-8CADUI Bucharest, Romania15 Software tools - AGG

16. June 6-8CADUI Bucharest, Romania16 Software tools - Alice

17. June 6-8CADUI Bucharest, Romania17 Software tools - Maya

18. June 6-8CADUI Bucharest, Romania18 Software tools - VUIToolkit

19. June 6-8CADUI Bucharest, Romania19 Contents  Introduction  Related Work  Model-based development for 3D User Interfaces  Case Study  Conclusion

20. June 6-8CADUI Bucharest, Romania20 Case Study – Virtual polling system

21. June 6-8CADUI Bucharest, Romania21 Case Study – Task and domain definition

22. June 6-8CADUI Bucharest, Romania22 Case Study – Concrete Definition

23. June 6-8CADUI Bucharest, Romania23 Case Study – Concrete Model B

24. June 6-8CADUI Bucharest, Romania24 Case Study – From Abstract to concrete Model NAC LHS:=RHS x>2

25. June 6-8CADUI Bucharest, Romania25 Case Study – From Abstract to concrete Model “Show Questionnaire” Output (value unknown) Attribute, data type, domain characteristics An output text “Select Answer”Select attribute value + repetitive (selection values not known) Data type, domain characteristics A dropdown list, a group of option buttons “Send Questionnaire”ControlFeedbackA trigger “Navigation”NavigationFeedbackA trigger

26. June 6-8CADUI Bucharest, Romania26 Mock-up of the Concrete User Interface

27. June 6-8CADUI Bucharest, Romania27 Case Study – From Abstract to concrete Model <SphereTrigger defaultContent="Start" radious="1.5" solid="True" isVisible="true" isEnabled="true"> isEnabled="true"> <Material diffuseColor="0.8 0.8 0.0" specularColor="0.11 0.11 0.11" emissiveColor="0.0 0.0 0.0" shininess="0.3"/> emissiveColor="0.0 0.0 0.0" shininess="0.3"/>

28. June 6-8CADUI Bucharest, Romania28 Case Study – Editing the FUI in Maya

29. June 6-8CADUI Bucharest, Romania29 Case Study – Editing the FUI in Alice

30. June 6-8CADUI Bucharest, Romania30 Case Study – FUI generated with Alice

31. June 6-8CADUI Bucharest, Romania31 Case Study – FUI generated with the VUIToolkit

32. June 6-8CADUI Bucharest, Romania32 Case Study – FUI generated with the Maya

33. June 6-8CADUI Bucharest, Romania33 Case Study – FUI generated with the Maya

34. June 6-8CADUI Bucharest, Romania34 Use of the virtual polling system Case Study in a virtual world

35. June 6-8CADUI Bucharest, Romania35 Contents  Introduction  Related Work  Model-based development for 3D User Interfaces  Case Study  Conclusion

36. June 6-8CADUI Bucharest, Romania36 Conclusion –Model-based approaches Models t= task, Do = Domain Di = dialog AUI=abstract presentation CUI=concrete user interface U = user, C = context. Inter Model Transformation  Bidirectional derivation → Derivation link ≈→ Manual Derivation ≈  Manual Bidirectional der. FUI = Final User Interface FUI target languages *Indicates that it is done manually VR-Wise CUI CUI → FUI VRML, X3D CoGenIVE T, Di, CUI ( T, Di, CUI )  FUI C++ InTML Di, CUI T ≈→ (Di, CUI), (Di, CUI) ≈→ FUI Contigra CUI, Di (CUI, Di) → FUI X3D, Behavior3D, Audio3D Our methodology T, Do, C, AUI, CUI T  Do, T  AUI, AUI  CUI, CUI  AUI, T  CUI, (T, Do,AUI,CUI)  C, CUI ≈→ FUI Java, XHTML, Flash, HTML, Voice XML* Java 3D*, X3D*, VRML*.

37. June 6-8CADUI Bucharest, Romania37 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. June 6-8CADUI Bucharest, Romania38 Conclusion  Future work. Exploring more design options and encode them in UsiXML Models Models Transformational rules Transformational rules Software tools Software tools More FUI More FUI

39. June 6-8CADUI Bucharest, Romania39 Thank you Multumesc!  Juan Manuel Gonzalez Calleros   Contact:   gonzalez@isys.ucl.ac.be gonzalez@isys.ucl.ac.be www.usixml.org