Jérémie Melchior, Jean Vanderdonckt and Peter Van Roy                                                                     ...
•     Motivations •     Distributed User Interfaces: what and how? •     Lacks in other works •     Contribution: distribu...
•     1 or more desktops •     1 or more phones             •     Mobile phone             •     Smartphone •     1 or mor...
•     Lots of devices •     High need of visualization of the distribution state •     Only pre-programmed disposition & s...
Definition:         “any application UI whose components can be         distributed across different displays of different...
-     Any UI could be distributed -     Example: Paint (not distributed by default)18/05/2012   RCIS 2012 – Valencia, Spai...
-     Any UI could be distributed -     Example: Paint (distributed)             -     Windows: drawing area             -...
•     Distribution state of the whole system •     Snapshot of the system at a certain moment of       time in a stable di...
•     Sum of all individual states •     Example:             •     C1bastien = ({desktop, laptop}, {Bastien}, quiet)     ...
• Need to know the distribution state                                        Distribution Graph18/05/2012   RCIS 2012 – Va...
• Need to know the distribution state • Need to trigger the distribution                                        Distributi...
• Need to know the distribution state • Need to trigger the distribution • Need to know « what » to distribute            ...
•    ARIS: visualisation of devices and windows             •     Meta-UI             •     Static environment            ...
•     A Reference Model for DUIs             •       Widgets:                 •     An image:        (WS Slides)          ...
•     Idea: state-transition diagram •     Allow modelling of the distribution •     Dynamic evolution of the distribution...
•     State diagram/state chart model             •       Node                 •       Individual states of entities invol...
C1adrien = ({desktop}, {Adrien}, quiet) C1bastien = ({desktop, laptop}, {Bastien}, quiet)        Event: Adrien changes pla...
•     Distribution Script:             •     Set of distribution primitives •     Distribution Primitive             •    ...
Name                             Effect  Display                          Display an item in one or more UIs  Undisplay   ...
•     A distributed Pictionary:             •       3 roles:                 •     The drawer                 •     The ob...
•     A distributed Pictionary:             •       3 roles:                 •     The drawer: allowed to draw in the appl...
•     A distributed Pictionary:                             Player2                                                      E...
•     Distribution Script 1:             {Display td(name:p1 button(name:b_c glue:e text:"Create:"))}             {Display...
•     A distributed Pictionary:                      Event: Player2 connects                                              ...
•     Distribution Script 2:             {Copy p1 td(name:p2)}18/05/2012   RCIS 2012 – Valencia, Spain, May 17th   25
•     A distributed Pictionary:                      Event: Player1 or 2 starts the game                                  ...
•     Distribution Script 3:             {Undisplay create_game#p1}             {Update status "Running game: "#Name}     ...
•     A distributed Pictionary:             •     Simple example             •     Only 2 players18/05/2012   RCIS 2012 – ...
•     A distributed Pictionary:             •       Complex example             •       4 players             •       2 te...
•     Concepts             •     Distribution Graph             •     Distribution State             •     Distribution Pr...
18/05/2012   RCIS 2012 – Valencia, Spain, May 17th   31
Upcoming SlideShare
Loading in …5
×

Modelling and Developing Distributed User Interfaces based on Distribution Graph

579 views

Published on

Published in: Travel, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
579
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • WS = workspace
  • L in L_uimeans « Laptop »
  • Modelling and Developing Distributed User Interfaces based on Distribution Graph

    1. 1. Jérémie Melchior, Jean Vanderdonckt and Peter Van Roy Jeremie.Melchior@uclouvain.be Researcher at LiLab, http://www.lilab.be Université catholique de Louvain (BELGIUM)18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 1
    2. 2. • Motivations • Distributed User Interfaces: what and how? • Lacks in other works • Contribution: distribution graph • Case study: a distributed Pictionary • Conclusion18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 2
    3. 3. • 1 or more desktops • 1 or more phones • Mobile phone • Smartphone • 1 or more laptops • And maybe more ! • Xbox • Playstation • TV • …18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 3
    4. 4. • Lots of devices • High need of visualization of the distribution state • Only pre-programmed disposition & static environment • No support for platform leaving or joining at run- time18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 4
    5. 5. Definition: “any application UI whose components can be distributed across different displays of different computing platforms that are used by different users (co-located or remote collaboration)”18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 5
    6. 6. - Any UI could be distributed - Example: Paint (not distributed by default)18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 6
    7. 7. - Any UI could be distributed - Example: Paint (distributed) - Windows: drawing area - Windows Phone: all buttons, bars, …18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 7
    8. 8. • Distribution state of the whole system • Snapshot of the system at a certain moment of time in a stable distribution state • Context = set of platforms, set of users and one environment) • Visual representation: C1adrien • Example: • Adrien is in distribution state DS1, which means he is in the context of use C1 • C1adrien = ({desktop}, {Adrien}, quiet) • Adrien’s distribution state = C1adrien18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 8
    9. 9. • Sum of all individual states • Example: • C1bastien = ({desktop, laptop}, {Bastien}, quiet) • Distribution shared state = {C1adrien, C1bastien} C1adrien • Visual representation: C1bastien18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 9
    10. 10. • Need to know the distribution state Distribution Graph18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 10
    11. 11. • Need to know the distribution state • Need to trigger the distribution Distribution Primitives Distribution Script18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 11
    12. 12. • Need to know the distribution state • Need to trigger the distribution • Need to know « what » to distribute Part or whole of the UI18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 12
    13. 13. • ARIS: visualisation of devices and windows • Meta-UI • Static environment • States: ?[BIE04] Biehl & BaileyARIS: An Inferface for Application Relocation in an Interactive Space18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 13
    14. 14. • A Reference Model for DUIs • Widgets: • An image: (WS Slides) • A text: « Infos » (WS Infos) • Conceptual level • States: ?[DEM05] Demeure, Calvary, et al.A Reference Model for DUIs18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 14
    15. 15. • Idea: state-transition diagram • Allow modelling of the distribution • Dynamic evolution of the distribution • Ability to join or split models • Need of some concepts: • Distribution state • Distribution shared state • Distribution graph • Distribution primitive • Distribution script18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 15
    16. 16. • State diagram/state chart model • Node • Individual states of entities involved in the distribution ▪  Distribution State • Collective representation of their synchronization ▪  Distribution Shared State • Transitions = • Event-condition-action: ▪ Action = Distribution Script • At conceptual level • Evolution at run-time18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 16
    17. 17. C1adrien = ({desktop}, {Adrien}, quiet) C1bastien = ({desktop, laptop}, {Bastien}, quiet) Event: Adrien changes platform Action: Replace(C1a, C2a) C2adrien = ({laptop}, {Adrien}, quiet) C1bastien Event: Bastien changes platform C2adrien Action: Replace(C1b, C2b) C2bastien = ({desktop}, {Bastien}, quiet)18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 17
    18. 18. • Distribution Script: • Set of distribution primitives • Distribution Primitive • Definition: basic operations that manipulates parts or wholes of a user interfaces at run-time • Part of a catalog • Example of distribution primitive: {Display td(name:p1 button(name:b_c glue:e text:"Create:"))} {Display entry(name:e_c glue:w bg:white init:"Own game" handle:HEntry return:R) #p1} Operation – Widget - Property:Value - #Location18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 18
    19. 19. Name Effect Display Display an item in one or more UIs Undisplay Hide an item from one to many UIs Move Move an item from a UI to another one Copy Copy an item of an UI to another one Insert Insert an item in a container of a UI Switch Exchange two components in the same or different UIs Merge Merge two UIs together Separate Explode a UI in two or more separated UIs18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 19
    20. 20. • A distributed Pictionary: • 3 roles: • The drawer • The observer • The guesser18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 20
    21. 21. • A distributed Pictionary: • 3 roles: • The drawer: allowed to draw in the application (+drawing bar) • The observer: allowed to see the drawing • The guesser: allowed to see the drawing and suggest words18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 21
    22. 22. • A distributed Pictionary: Player2 Event: Player1 connects Action: execute Distribution Script 1 Player connects No game started Condition: More than 2 players connected Game started18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 22
    23. 23. • Distribution Script 1: {Display td(name:p1 button(name:b_c glue:e text:"Create:"))} {Display entry(name:e_c glue:w bg:white init:"Own game” handle:HEntry return:R) #p1} {Display lr(name:create_game b_c e_c)#p1} {Display td(name:p1 create_game td(name:join) label(name:status glue:swe text:"Waiting for a game“ bg:white) ) } for I in {DiscoverGames} do {Display button(name:b#I glue:nswe text:"Join "#I} #join} end18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 23
    24. 24. • A distributed Pictionary: Event: Player2 connects Action: execute Distribution Script 2 Player connects No game started Condition: More than 2 players connected Game started18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 24
    25. 25. • Distribution Script 2: {Copy p1 td(name:p2)}18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 25
    26. 26. • A distributed Pictionary: Event: Player1 or 2 starts the game Action: execute Distribution Script 3 Player connects No game started Condition: More than 2 players connected Game started18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 26
    27. 27. • Distribution Script 3: {Undisplay create_game#p1} {Update status "Running game: "#Name} {Display td(name:observer lr(name:enter_word glue:nwe bg:white label(bg:white text:"Enter word: ") entry(glue:w bg:white init:"House“ handle:HEW)) lr(name:start_found bg:white glue:new button(glue:e text:"Start") button(glue:w text:"Found !")) lr(name:remaining_time bg:white glue:swe label(glue:e bg:white text:"Remaining time: ") label(glue:w bg:white text:"02:00"))) #p1} {Display td(name:p1 create_game observer status)}18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 27
    28. 28. • A distributed Pictionary: • Simple example • Only 2 players18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 28
    29. 29. • A distributed Pictionary: • Complex example • 4 players • 2 teams (A - B) • 2 players in Team A • 2 players in Team B18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 29
    30. 30. • Concepts • Distribution Graph • Distribution State • Distribution Primitive (distribution operation) • Distribution Script • Complex concepts with several items: • Devices • User Interface components • Roles • Reusable: others can reuse the idea or extends the concepts • Need for validation with a real game/application18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 30
    31. 31. 18/05/2012 RCIS 2012 – Valencia, Spain, May 17th 31

    ×