Webleau progress (Liquid Space)

Hi, this is a quick update on Webleau (Web Tableau) part of my suite of ideas for how I’d like information systems to work. A guiding principle for me is that people should be able to get a feel for what’s going on and it should be “easy to do the right thing”, rather than a chore.

Try the current work in progress here:

http://www.soton.ac.uk/~totl/webleau/

The webleau idea is based on an older tool I made, wiki explorer, which was a tool for exploring wikipedia, linked data and other graphs of information. It used <canvas> and didn’t save well, nor did I really think about how to load/save things. None the less the idea was to create something mostly aimed at a big (touch) screen where you could lay out your web research spatially.

The new version uses SVG over the top of HTML and is designed from scratch to be able to save and restore it’s state. Later I hope that the state of a webleau can be stored in a wordpress node

• double click to make a comment
• double click on a node to make a comment on that node (makes it with a
  link)
• click edit icon to alter a comment
• click [+] icon to (try to) scale a node.
• click [i] icon to see citation and other metadata stored in the node
  (nb. this metadata is all over the place, I’ve not put much thought into
  coherence)
• paste a URL from common media sites; youtube, wikipedia, twitter, etc. will
  use oembed protocol to make a nice looking node
• [firefox only for now] copy a range of text from an “ultralinks”  enabled
  blog, eg.
  http://blog.soton.ac.uk/webteam/2018/10/08/testing-strategy-in-tid-projects/
  and paste into the webleau and it’ll store a citation with the deep link
  URL, plus metadata from the blog. Use the [i] icon to see the metadata it stored with the node (we can be more clever with this later). Firefox has an interesting option to store JSON on the clipboard as well as text & html. I’m thinking a hack to work in other browsers would be to embed this JSON in a data attribute in the HTML clipboard (blurgh!).  If you want to see what’s on your clipboard, I made a clipboard debug tool. nb. “ultralinks” was a working title for this, rather than a product name.
• use the sliders to zoom the layout out or change the scale of all nodes
• move node using their title bar
• scale node using the right, bottom edges, and bottom right corner. Nb. nodes are anchored at their centre point, not the top left. It’s a little alien but makes sense in the interface.
• make generic links between nodes by dragging a node onto another node

What I’m working on now:

• import nodes and links from blog (I’m planning on mocking this up
  using the JSON file and PHP for tomorrow)
• save / load the layout to a text string
• change default location so boxes load in the middle of the area, not
  the top left, which will make zooming nicer.

The code is here;  https://github.com/cgutteridge/webleau, but it’s unpolished, and if you want the oembed to work you’ll need to do the “composer install” thing.

Nb. I’ve deliberately given little energy to worrying about XSS and other security issues. It’s not that they are not important, but the goal of this work is to show people novel ways to interact with information. If it’s successful we can invest the work “doing it properly”.