Universal User Interface (UUI)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Fri May 16 2014 11:29:59 GMT-0400 (EDT)--> | |
| <XholonWorkbook> | |
| <Notes><![CDATA[ | |
| Xholon | |
| ------ | |
| Title: Universal User Interface (UUI) | |
| Description: | |
| Url: http://www.primordion.com/Xholon/gwt/Xholon.html?app=bf9f46947af55015be4a&src=gist&gui=none | |
| InternalName: bf9f46947af55015be4a | |
| Keywords: | |
| My Notes | |
| -------- | |
| To run this app (assuming you are using editwb.html to view this workbook): | |
| - Click the "none" button above | |
| - A Xholon runtime page will open in a separate tab or window | |
| - It will execute the app defined in this workbook | |
| - The page will include a D3 Circle Pack SVG image | |
| - Hover above each node to see its tooltip | |
| - Any node referenced by that context node will be displayed with an orange background | |
| - Any node that references that context node will be displayed with an orange border | |
| - Click each node to see it's brief description in the out tab | |
| - Right-click each node to see it's context menu | |
| You can also run the app directly: | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=bf9f46947af55015be4a&src=gist&gui=none | |
| I already have an informal concept of a Universal User Interface (UUI), and many examples. | |
| In this workbook I explore a bit more of what a UUI is. | |
| The basic idea: | |
| - all systems are structured as one or more graphs and/or trees | |
| - Xholon makes these structures explicit, but not necessarily visible | |
| - a UUI makes these structures visible | |
| - all nodes | |
| - all relationships between parent and child nodes | |
| - all other graph relationships between nodes | |
| - a UUI allows users to request any and all functionality these systems provide | |
| - the same type of UUI can be used for any system | |
| a previous coworker mentioned usability and functionality? | |
| - I'm interested in a UUI that offers basic funtionality | |
| - that can then be extended to provide better usability | |
| - a minimal UI that provides just enough to allow for the intended functionality | |
| - a solid base for building a UI with high usability | |
| Some implementations of a UUI: | |
| - D3 Circle Packing | |
| - HTML div structures | |
| - indentation, such as in the Xholon classic GUI | |
| - paired parentheses | |
| - | |
| The Xholon D3 Circle Packing GUI is a good example of a UUI: | |
| - at any given time, one node is the context node | |
| - external nodes have a single letter (with no circle) | |
| - instead of including the complete name of the node | |
| - all external node circles are the same size, just large enough to contain a single letter or symbol or icon | |
| - internal nodes have a circle with one or more other nodes inside, but no letter | |
| - adjacent nodes (nodes that the context node points to) are highlighted when the user hovers over a node | |
| - instead of using lines to show these graph relationships | |
| - nodes that point to the context node are optionally highlighted in a different way | |
| - the node's complete name is shown as a tooltip when the user hovers | |
| - left-click any node to see it's toString() value in the out tab | |
| - right-click any node to get a context menu | |
| - tens or hundreds of thousands of nodes can be packed onto a computer screen | |
| - structure is of primary importance, not the names of things | |
| - the positions of things are always the same, from one run of the app to another | |
| - the node's color can show what type of node it is | |
| - clonons[18] are visible by their recurring shape | |
| - any Xholon app, and any part of any Xholon app, can be displayed using D3 circle packing | |
| - the result is a nicer presentation than with popular force-directed visualizations | |
| - two-dimensional circle packing could be extended to three-dimensional sphere packing | |
| - D3 uses Scalable Vector Graphics (SVG), which allows objects to be arbitrarily and vanishingly small | |
| - so the only limit to how nodes can be on the screen is the amount of memory in the computer | |
| - a circle packing can be updated in-place each time step while an app is running | |
| - or a new circle packing can be displayed each time step, allowing comparison | |
| - the evolving circle packing can be written to a video file for subsequent replay | |
| - | |
| Xholon example apps that demonstrate particularly well the D3 Circle Pack GUI: | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=Cell&gui=d3cp | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=GameOfLife&gui=d3cp | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=Life&gui=d3cp | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=7888333&src=gist&gui=d3cp | |
| http://www.primordion.com/Xholon/gwt/Xholon.html?app=11358183&src=gist&gui=d3cp | |
| Ideas: | |
| * our eyes only focus on a very small part of any diagram at any instant | |
| - the circle packing GUI would work well in a system with a camera that watched as our eyes move around on a page | |
| - the GUI would change as your eyes move | |
| - use of saccades | |
| - there's no need to present complete names of things on the screen until the user is looking directly at them | |
| - I could position the mouse at a context node, which would cause other nodes to become highlighted | |
| - as my eyes move around, I would see information about all the highlighted nodes | |
| - perhaps when my eye rests on a highlighted node, what it's connected to would also temporarily highlight | |
| - you could quickly glance about to see the overall connections | |
| * need a good way to zoom in on a small part of a large circle packing without feeling sea sick | |
| * use hardware acceleration; WebGL | |
| - circle packing with threejs ? | |
| References (in no particular order) | |
| ---------- | |
| (1) Knuth, Donald (1973) The Art of Computer Programming, 2nd ed | |
| volume 1, section 2.3 Trees | |
| (2) David Harel, "On Visual Formalisms" paper | |
| (3) David Harel, "Statecharts: A visual formalism for complex systems" paper | |
| (4) google: Universal User Interface | |
| there doesn't seem to be anything that corresponds directly to what I'm looking for | |
| (5) http://andrewdoble.blogspot.ca/2013/07/the-universal-user-interface.html | |
| (6) http://en.wikipedia.org/wiki/Usability | |
| Usability is the ease of use and learnability of a human-made object. | |
| (7) www.jeffreynichols.com/papers/a17-nichols.pdf | |
| Creating a Lightweight User Interface Description Language: | |
| An Overview and Analysis of the Personal Universal Controller Project | |
| (8) http://en.wikipedia.org/wiki/Tree_%28data_structure%29 | |
| (9) http://d3js.org/ | |
| (10) http://bl.ocks.org/mbostock/4063530 | |
| D3 circle packing | |
| (11) https://github.com/mbostock/d3/wiki/Pack-Layout | |
| "Enclosure diagrams use containment (nesting) to represent the hierarchy. The size of each leaf node’s circle reveals a quantitative dimension of each data point. The enclosing circles show the approximate cumulative size of each subtree, but note that because of wasted space there is some distortion between levels; only the leaf nodes can be compared accurately. Although circle packing does not use space as efficiently as a treemap, the “wasted” space more prominently reveals the hierarchy." | |
| (12) http://en.wikipedia.org/wiki/Circle_packing | |
| (13) http://en.wikipedia.org/wiki/Sphere_packing | |
| (14) notes in my paper notebook: April 28, May 7 | |
| (15) google: open source eye tracking software | |
| (16) http://labs.unwieldy.net/moocirclepack/ | |
| https://code.google.com/p/moocirclepack/ | |
| Canvas-based JavaSript library from 2008 | |
| (17) http://www.primordion.com/Xholon/webEdition/HTModL/ | |
| "HTModL is valid HTML repurposed for modeling and app (web application) development, rather than HTML in its traditional role as markup." | |
| (18) http://metapatterns.wikidot.com/bkgd:metapatsoverview | |
| clonon vs holon | |
| ]]></Notes> | |
| <_-.XholonClass> | |
| <UuiSystem/> | |
| <Node> | |
| <InternalNode/> | |
| <ExternalNode/> <!-- leaf node --> | |
| <AdjacentNode/> <!-- a node that's part of a graph --> | |
| </Node> | |
| </_-.XholonClass> | |
| <xholonClassDetails> | |
| <AdjacentNode xhType="XhtypePureActiveObject"> | |
| <port name="port" index="0" connector="../InternalNode/ExternalNode"/> | |
| </AdjacentNode> | |
| </xholonClassDetails> | |
| <UuiSystem> | |
| <InternalNode> | |
| <ExternalNode/> | |
| </InternalNode> | |
| <AdjacentNode roleName="one"/> | |
| <AdjacentNode roleName="two"/> | |
| </UuiSystem> | |
| <ExternalNodebehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
| var node; | |
| var beh = { | |
| postConfigure: function() { | |
| node = this.cnode.parent(); | |
| node.println("I am a " + node.xhc().name() + ", also known as a leaf node."); | |
| $wnd.xh.param("MaxProcessLoops","1"); | |
| $wnd.xh.param("AllowConfigSrv","false"); | |
| this.cnode.remove(); | |
| $wnd.xh.xport("_d3,CirclePack", $wnd.xh.root().first()); | |
| } | |
| } | |
| ]]></ExternalNodebehavior> | |
| <SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, | |
| ]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> | |
| </XholonWorkbook> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment