timeline

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.

Thanks Debra!

Click and then refresh the page to make them all visible again.

Browser status

I've included a number of checks below to see what your browser can do.

Description	Status
JavaScript (required)	FAIL
Canvas element (required)	FAIL
Signals and slots (required)	FAIL
Property getters/setters	FAIL

timeline (work in progress)

The timeline has a cursor that indicates the current story time.
You can mouse-wheel and mouse click to move along the timeline.

The timeline design control displays events around the story time.

Here you can add and remove objects and change their start times and durations.

There is a palette which you can click to add elements to and from the timeline.
The slide palette element is enabled when you click on the border of the sudoku board, creating a slide.

widget hierarchy

This is a test of nested widgets.
Move the mouse around and click-drag to see that the widgets act like real Qt widgets.

scroll area

On the left is a scroll area.

Zoom in with the mouse wheel to the point at the centre of the view.
Pan around by dragging on the work area or with the scrollbars.

This demonstrates how to use a html5 canvas element to implement a user interface, in this case a widget hierarchy with event listeners.

scrollbar

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.

mouse

This shows how we can track the mouse.
The status report below shows the last three non-repeated events.

If you drag on the surface, the mouse is captured.

Status: none

pixel

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.
If you move the mouse over it, that red square will move with it, and what's under the square appears magnified on the right "zoom" widget.
You can mouse-scroll on either widget to zoom in and out.
If you click the mouse, the position is remembered when you move the mouse away.

On the right is the "zoom" widget, showing pixel borders and the graphics primitives "sketched" with floating-point precision in red on top.
You can drag on this widget to move the magnified area.

Below them is a "timeline" widget with evenly spaced blocks, one for each drawing event.
You can clisk and drag on this widget to traverse the timeline.

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.
You can click on an event and the draw, zoom and timeline widgets will update to just after that event.