-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (76 loc) · 3.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<!-- Copyright 2012 Jim Rootham -->
<!-- Licensed under GPL3. See mondrian.js and COPYING.txt for more details -->
<head>
<title>Mondrian</title>
<style type="text/css">
#top{width:700px;}
p{margin:10px;}
</style>
</head>
<body>
<div id="top">
<h1>Mondrian</h1>
<h3>Introduction</h3>
<p>
Mondrian is a test bed/example for branching undo/redo (or zero effort
version control). It is about the simplest possible application that
could demonstrate the utility of better undo/redo.
</p>
<h3>Trial Instructions</h3>
<p>
To try it out, first use the add button to create some rectangles, then
drag the right quadrants to move (upper left) and resize (lower right)
them and click on the upper right quadrant to change their colout. If
you create too many you can click on a lower left quadrant to delete them.
</p>
<p>
Start by creating a few coloured blocks. Then use the undo button to
return to earlier states. Do that a few times, and then use the undo and
redo buttons to navigate from one state to another.
</p>
<p>
If you click on the history window button you can see the complete history
of all the commands you have executed. In the default state if you hover
over a command square (either directly or in the magnify window) you will
see the corresponding state in the context window. If you click on a
command window you will be sent back to the application in the state
at that point.
</p>
<h3>Device Tailoring</h3>
<p>
If you are on a tablet device without the ability to hover, click the
"No hover" checkbox. With that set you must click on a command box
in the history window to see
the state and use the "Revert" button on the context window to return to
that state.
</p>
<h3>Storage Information</h3>
<p>
This application uses local storage. I did this to avoid having to
implement user authentication on the server. This does mean if you move
the code to another location the data will not move with it.
I include a simple
local storage manager so the data can be deleted if desired.
I am saving a png for every action, so storage is consumed at a higher
rate than might be expected.
</p>
<h3>Contact</h3>
<p>
The point of this application is to experiment with different UI features
for navigating in an undo/redo tree. Please feel free to comment at
<a href="mailto:jrootham@gmail.com">jrootham@gmail.com</a>.
</p>
<p>
Mondrian is available on github at <a href="https://github.com/jrootham/mondrian"> jrootham/mondrian</a>.
</p>
<h3>Application links</h3>
<ul>
<li>The app <a href="mondrian.html">Mondrian<a></li>
<li>The app with some preloaded data <a href="mondrian.html?small=1">Mondrian Small<a> (it takes some time to load)</li>
<li>A simple local storage manager <a href="simple.html">Simple</a>
</ul>
</div>
</body>
</html>