Loading - please wait...

This page requires a reasonably modern HTML5 browser
with both Javascript and WebGL enabled.

If this message is not soon replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.

ANNOTATION
Type:
3D Axis:
Block Align:
Text Align:
Padding:
Displace:
Target Gap:
Offset X:
Offset Y:
Min. Width:
Min. Height:
Title Size:
Title Weight:
Title Color:
Outline:
Text Size:
Text Weight:
Text Color:
Outline:
Border Align:
Border Width:
Cnr Radius:
Notch Length:
Notch Width:
Orientation:
Line Color:
Line Width:
Start Gap:
Shoulder:
Length:
Width:
Thickness:
Indent:
Size:
Segments:
Thickness:
Spoke Size:
Rotation:
Angle:
Chamfer:
Aspect Ratio:
Small Caps Ratio:
Italics:
Skew:
Letter Spacing:
Word Spacing:
Line Spacing:

Edit Color

ANIMATION



Speed

3D VIEW SETTINGS

Projection (Shortcut keys: 1 to 6)

DISPLAY SETTINGS

DATE AND TIME

GEOGRAPHIC LOCATION


Time Zone

INFORMATION

Overview

This app provides both a simple demonstration of my new model annotation features as well as an interface for designing and refining annotations for use within a model.

Interface vs API

It is obvious that the controls shown here for setting up and tweaking annotations are probably too extensive and a bit confusing. However, the aim is to reflect the settings available within the annotation API and illustrate their effects though dynamic interaction. Any API has to balance two competing needs: to work immediately straight out of the box and require as few additional settings as possible to change styles and behaviours, and; to facilitate as much detailed customisation as may be required by specific situations and applications.

Balancing these is not easy. For example, the concept of block alignment doesn't always sit that well with the ability to set arbitrary offset distances in each axis. Some configurations can quite quickly produce horrible results as indicator lines try to snake around left aligned-blocks that have been offset to the right. At the same time, there are many situations where an offset is just as important as alignment in achieving the required effect.

Whilst it would be relatively simple to derive indicator and line configurations from the current offset, when coding via the API directly without visual feedback from a user interface, the user would need to know the rendered dimensions of the resulting annotation block before they could set the offset required to achieve their desired result. Using block alignment means that all that goes away and it is far easier to make it work with just a few settings.

This app and its ongoing evolution is really my attempt to better understand these requirements, how all the various settings work together and then try to rationalise and optimise things wherever I can.

Interesting Features

The following are some of this app's more interesting features:

  • First interesting feature,
  • Second interesting feature, and
  • Third interesting feature.

© Dr. Andrew J. Marsh, 2017.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

Rotation:
Drag with the left/right button or a single finger,
or use the arrow keys.
Panning:
Drag with the middle button or two/three fingers,
or use the A and D keys.
Zooming:
Use the scroll wheel or pinch with two fingers,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.

Credits

This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

Google Maps API  v3
Copyright © 2015 Google Inc. - http://google.com,
https://developers.google.com/maps/   (Terms of Service)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

JSURL
Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

lightgl.js
Copyright © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)