When complete, this will be the timeline control for the
Sudoku explained page, but its design will allow the
parts it's built from to be re-used.
The objective is a viewport onto a virtual surface that may be many times larger than the viewport (or even the display).
I thought initially that a Gantt-like chart/graph would do the trick.
Two problems prevent this.
1. Gantt charts are very sparse - they take up a lot of space for the information they contain.
2. Relations between distant nodes can be difficult to see at the same time because of this.
So another approach is needed.
I call this approach a focus graph.
You can select the timeline focus
The graph shows an evenly divided scrollable area containing object spans.
This lets you concentrate on real durations.
You can also choose the object or topology focus.
Here, the relationships between object spans is highlighted, at the expense of linearity.
Clicking on an object switches to topology mode.
Clicking on the space between objects switches to timeline mode.
This transition should be smooth.
I'm building up to this with the projects below, most recent first.
Thanks to Soh Tanaka for the JQuery snippet to toggle the sections by clicking on the section header.
I enhanced it with local storage to save your selections.
On 2016-09-19 I got a message from Debra Peterson from www.whoishostingthis.com pointing out that the above link seems to be broken, and suggested an alternate resource - well here it is.
Click and then refresh the page to make them all visible again.
I've included a number of checks below to see what your browser can do.
|Canvas element (required)||FAIL|
|Signals and slots (required)||FAIL|
timeline (work in progress)
The timeline has a cursor that indicates the current story time.
This is a test of nested widgets.
On the left is a scroll area.
On the left is some scroll bars for you to try.
The top one changes the value
The bottom one changes the top scroll bar's page step, i.e. it's size.
This shows how we can track the mouse.
This demo aims to help visualize graphics primitives by drawing on a regular canvas, grabbing that as an image, and then drawing it magnified with the original drawing primitives sketched on top.
This helps to clarify understanding as to the real locations needed for the co-ordinates to produce the desired effect.
On the left is the "draw" widget.
On the right is the "zoom" widget, showing pixel borders and the graphics
primitives "sketched" with floating-point precision in red on top.
Below them is a "timeline" widget with evenly spaced blocks, one for each
You can also mouse-wheel the timeline to see the graphics being drawn.
Some of the graphics events on the timeline don't seem to have any effect because they're updating the fill or stroke style, or transforming the co-ordinate system
Below that is a textarea, containing the instructions to draw on the canvas.
And at the bottom, a textual representation of the drawing events.