Interactive scenes (Views) are instantiated by 1000Words.js in a DOM element specified by the application.
Views contain Shapes.
Shapes are instances of Shape Types.
The application specifies each shape's position (x, y) expressed as a percentage of the view's width and height.
The definition of what a shape looks like is defined once per Shape Type in the form of SVG (string snippets).
Views can be configured to publish events when a shape is clicked, comes into focus, the viewport changes etc. The application can subscribe to these events.
Shape Groups contain one or more shape instances, of one or more shape types, and are used to configure:
- Shape Resolutions. Display at different levels of detail at various zoom levels.
- Layers (optional). Groups of shapes that come into, or go out of, existence at different zoom levels.
A couple of potential uses of layering are:
- The domain is visually arranged such that users are intuitively expecting objects to show up at deeper zoom levels
- Give users an indication that a group of shapes (that are too small to be seen at low zoom levels) exists at a certain place in the view. As the user zooms in, the placeholder indicator(s) go away and can be replaced by the relevant domain objects.
Drilldown into shapes is supported. When a user dives into (zooms in) a shape configred for drilldown, a new sub-view is opened up. One or more shapes in the new view can, in turn, be configured for drilldown (recursive).
Infinite Canvas can be used for very large screens. A summary or Overview is provide to accompany the Primary View. The overview provides a quick look at what part of the main view is currently visible. It comes with a Viewport Controller which users can drag to quickly pan across the primary view as desired.
▸ HomeA shape type (e.g. Car, Circle, House, Hospital) is expressed as a class that extends the library's built-in shape class
const DomainShape = $1000Words.import('DomainShape');
export default class Car extends DomainShape {
renderContents(node, detailLevel) {...} // shape svg string injection
}
// The standardized definition of a shape should render inside a box with
// 0x0 and 100x100 as the top-left and bottom-right corners.
// NOTE: The shape definition is independent of how 'large' shape
// instances are or 'where' they are placed on the scene.
// square
<rect x="0" y="0" width="100" height="100" stroke="red"></rect>
// circle
<circle cx="50" cy="50" r="50" stroke="blue"></circle>
// shape with a bunch of paths
<g>
<path d="m22.16 ..." stroke="green"></path>
<path ...></path>
<path ...></path>
</g>
Three shape definitions in the form of a square, circle and collection of paths.
The position is specified in percentage terms when the shape is created.
$1000Words.createShape(Car, "car-fred", view, options, 10, 8);
$1000Words.createShape(Car, "car-jimmy", view, options, 85, 90);
$1000Words.createShape(Truck, "company-truck", view, options, 50.21, 60.07);
Two cars and a truck.
For graphical scenes, things typically get more detailed as the user zooms in. When using 1000Words.js, it isn't strictly necessary to show shapes in greater level of detail as the user zooms in. However the UX design of the scene can often involve showing shapes at different amounts of detail, depending on the zoom level.
const ShapeConfigurations = $1000Words.import('ShapeConfigurations');
const configs = new ShapeConfigurations( {
shapeTypes: [], // optional - use when svg referenced elements are used
groups: [{
name: 'trees',
existences: {1 : 0.5, 20 : 0}, // covered in the 'layers' section
resolutions: {1 : 'low', 3: 'medium', '8': 'high' },
// show the high fidelity version of tree when zoom level goes to 8
// and above and medium fidelity version when zoom level goes below 8
...
}]
})
...
$1000Words.createView('Main View', container, configs, onEvent, eventsOfInterest)
.then( view => {...} )
Note: The zoom levels at which shape resolutions can change isn't fixed and is determined by the application. The application needs to provide the rendering of the svg shape at different fidelity levels.
resolutions: {1 : 'low', 2: 'medium', '8': 'high'}
resolutions: {1 : 'low', 3: 'medium', '4': 'high', '12': 'superhigh'}
resolutions: {1 : 'far away', 9': 'clear sight', '14': 'rubbing noses'}
resolutions: {1 : 'standard'} // fixed resolution, independent of zoom level
// 1000Words.js will determine when it is time to display a shape at a different detail
// level and ask the shape for the SVG that corresponds to that level (e.g. 'clear sight')
If a house shape is displayed on a scene, the application could decide to show different house details at different levels of zoom, say 'low', 'medium' and 'high'.
low
medium
high
Shape Definitions (100x100) for different zoom levels
Scene at a low level of zoom
Scene at a medium level of zoom
Scene with a high level of zoom
Layers allow groups of shapes to come into or go out of existence. Scene designers can find many creative uses for layers. Two, out of potentially many, potential uses are outlined below:
- Depth. When the scene naturally contains depth or the application designer is able to creatively visualize a complex technical domain using depth
- Marker Shapes. When a group of shapes with their natural screen size are too small to be seen without zooming in, and users need a hint of what lies there
const ShapeConfigurations = $1000Words.import('ShapeConfigurations');
const configs = new ShapeConfigurations( {
shapeTypes: [], // optional - use when svg referenced elements are used
groups: [{
name: 'big',
existences: {1: 20, 10 : 0}, // the shapes included in the
// 'big' group will be visible in the beginning (zoom = 1) with a size
// of 20% of the view and will be hidden when the user zooms past 10
resolutions: {1 : 'standard'}
...
},
{
name: 'medium',
existences: {12 : 10, 15: 0}, // 10% of viewport when zoom is 12
resolutions: {4 : 'standard' }
...
},
{
name: 'small',
existences: {150 : 7, 30: 0},
resolutions: {20 : 'standard' }
},
{name: 'tiny ...}, {name: 'miniscule ...}, {microscopic ...}
})
...
$1000Words.createView('Main View', container, configs, onEvent, eventsOfInterest)
.then( view => {...} )
Fishes arranged from top to bottom, arranged by size
(100s of fish that are too small to be seen, are hidden at first)
Zoom level 1
Zoom level 12
Zoom level 150
const ShapeConfigurations = $1000Words.import('ShapeConfigurations');
const configs = new ShapeConfigurations( {
shapeTypes: [], // optional - use when svg referenced elements are used
groups: [{
name: 'settings-marker',
existences: {1 : 1, 20 : 0},
resolutions: {1 : 'standard'}
...
},
{
name: 'settings',
existences: {20 : 8},
resolutions: {20 : 'standard' }
...
}]
})
...
$1000Words.createView('Main View', container, configs, onEvent, eventsOfInterest)
.then( view => {...} )
Individual Settings Icons are too small to be seen so a marker shape is used
Views are created inside a placeholder DOM element created by the application. Views need to be created prior to creating individual shapes. View creation takes the following inputs:
- viewName: Logical name
- container: DOM container element
- configs: Shape Configurations that control layers and shape detail
- onEvent: optional app event handler
- events: optional list of events that the app wants to subscribe to
const ShapeConfigurations = $1000Words.import('ShapeConfigurations');
const EventType = $1000Words.import('EventType');
const ShapeEventType = $1000Words.import('ShapeEventType');
const onEvent = (event) => console.log(event);
const container = document.getElementById("my-view-container");
// see 'Layers' & 'Shape Detail Level' for details on shape configs
const configs = new ShapeConfigurations( {...} );
const events = [ShapeEventType.IN_FOCUS, ShapeEventType.SELECT, EventType.VIEWPORT];
$1000Words.createView(viewName, container, configs, onEvent, events)
.then( view => {
const shape1 = $1000Words.createShape(type1, id1, view, options, x1, y1);
const shape2 = $1000Words.createShape(type2, id2, view, options, x2, y2);
view.initialize(...);
});
Applications can subscribe to various events of interest, emitted by the library.
const ShapeConfigurations = $1000Words.import('ShapeConfigurations');
const EventType = $1000Words.import('EventType');
const ShapeEventType = $1000Words.import('ShapeEventType');
const onEvent = (event) => console.log(event);
const events = [ ShapeEventType.IN_FOCUS, ShapeEventType.SELECT,
EventType.VIEWPORT_EVENT ];
$1000Words.createView(viewName, container, configs, onEvent, events)
.then( view => {...}
-
ShapeEventType.SELECT
|_ shapeId -
EventType.CORNER_ACTIVATED
- shape
- corner
- EventType.CORNER_DEACTIVATED |_ shape |_ corner
- EventType.VIEWPORT |_ percentLeft |_ percentRight |_ percentTop |_ percentBottom
- ShapeEventType.CLICK |_ shapeId
- ShapeEventType.IN_FOCUS |_ shape
- ShapeEventType.DESELECT |_ shapeId
- ViewChangedEvent |_ view
para para should be serif?
coming soon...
coming soon...
coming soon...
coming soon...
- Well formed markup
- Working with data binding frameworks
<path
style="fill:#edc496..."
d="m 9.544... z"
id="path3191-9" />
should be rewritten as
<path
style="fill:#edc496..."
d="m 9.544... z">
</path>
...
coming soon...