Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Universal User Interface (UUI)
<?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