This builds on the 3D Example app
by changing a default mouse adaptor to adjust cut planes, creating a
voxel value custom mouse adaptor and line measurement adaptor,
and creating a hotspot using the override mouse adaptor. It also
installs a keyboard handler to toggle on/off the front cut plane.
This example includes
use of Fovia.UI.HTMLViewport3D w/ repaintable viewports for rendering contents
use of setMouseAdaptor to chagne default mouse behavior
use of setCustomMouseAdaptor to create custom voxel value mouse adaptor and line measurement adaptor
use of setOverrideMouseAdaptor to create a hotspot in the window to reset the viewport
use of a keyboard handler to toggle on/off the front cut plane
To run the example, click on the local link of http://localhost:8088/apps/hellofovia/mouseadaptors.html
HTMLViewport
The only different from the 3D Example app is that the HTMLViewport constructor uses an optional fourth boolean parameter to indicate that this viewport is repaintable. If it is repaintable, an internal copy of the last rendered image is preserved so the client can initiate a repaint(),
which causes the last rendered image to be painted on the canvas, and
allows the client application to trigger a redraw of the canvas without
a round trip to the server.
The Fovia.UI.HTMLViewport3D defines a set of default mouse and touch adaptors that are mapped
to specific UI actions. Specifically:
Default Mouse Operations
left-click -- center rotate (3D parallel), window/level (MIP/MPR/2D), manual flythrough (3D perspective) shift-left-click -- surface rotate (3D parallel and perspective), center rotate (MIP/MPR) ctrl-left-click -- auto-flythrough (3D perspective) right-click -- pan shift-right-click -- zoom mouse-wheel -- scroll (front clipping plane, when slabbing is enabled)
The example app maps ctrl-left click to the scroll adaptor, which is
only useful if slabbing (front clipping plane) is enabled, which can be
done through the "c" keyboard shortcut.
The example app creates a voxelValue adaptor and maps it to ctrl-left-click which then prints out the voxel value from any given
location into the JavaScript console and in the DICOM overlay.
Alt-left-click installed a line measurement adaptor.
SetOverrideMouseAdaptor
It is sometimes useful to install a special mouse adaptor allows for an
override of all other adaptors (regardless of specific
mouse/keyboard/touch mapping). For example, defining a hot spot
or an on-screen slider control that should become active when the mouse
or finger is over the region. The design pattern is the same
except that the return value should be false to consume the event, or
true to propagate the event to the default or custom adaptor currently
defined based on the mouse/keyboard/touch mapping. The override
interface can be installed through Fovia.UI.HTMLViewport3D.setOverrideMouseAdaptor() (or Fovia.UI.HTMLViewport3D.setOverrideTouchAdaptor() for touch).
The example app defines a hot spot region in left corner of the window.
Keyboard Event Handling
The last concept shown in this example application is to define a
default key handle to catch the event to turn cut planes on/off.
Ensure that a tabIndex is specified on the HTML canvas tag so it
can receive key events.
// capture key sequences for "fovia" element, make sure tabindex="1" is specified
// in the HTML so it can get key events!
var htmlobj = foviaViewport.getHTMLElement();
htmlobj.focus();
htmlobj.addEventListener('keydown', doKeyDown);
The example app maps the keyboard shortcut "c" to toggling on/off slab (front clipping plane) mode.
Mouse Adaptors
This builds on the 3D Example app by changing a default mouse adaptor to adjust cut planes, creating a voxel value custom mouse adaptor and line measurement adaptor, and creating a hotspot using the override mouse adaptor. It also installs a keyboard handler to toggle on/off the front cut plane.This example includes
- use of Fovia.UI.HTMLViewport3D w/ repaintable viewports for rendering contents
- use of setMouseAdaptor to chagne default mouse behavior
- use of setCustomMouseAdaptor to create custom voxel value mouse adaptor and line measurement adaptor
- use of setOverrideMouseAdaptor to create a hotspot in the window to reset the viewport
- use of a keyboard handler to toggle on/off the front cut plane
View source /foviaserver/public/apps/hellofovia/mouseadaptors.jsTo run the example, click on the local link of http://localhost:8088/apps/hellofovia/mouseadaptors.html
HTMLViewport
The only different from the 3D Example app is that the HTMLViewport constructor uses an optional fourth boolean parameter to indicate that this viewport is repaintable. If it is repaintable, an internal copy of the last rendered image is preserved so the client can initiate a repaint(), which causes the last rendered image to be painted on the canvas, and allows the client application to trigger a redraw of the canvas without a round trip to the server.
The Fovia.UI.HTMLViewport3D defines a set of default mouse and touch adaptors that are mapped to specific UI actions. Specifically:
Default Mouse Operations
left-click -- center rotate (3D parallel), window/level (MIP/MPR/2D), manual flythrough (3D perspective)
shift-left-click -- surface rotate (3D parallel and perspective), center rotate (MIP/MPR)
ctrl-left-click -- auto-flythrough (3D perspective)
right-click -- pan
shift-right-click -- zoom
mouse-wheel -- scroll (front clipping plane, when slabbing is enabled)
Default Touch Operations
single-touch -- rotate (3D parallel), scroll (MIP/MPR/2D), manual flythrough (3D perspective)
two-finger touch -- zoom/pan
three-finger touch -- window/level (MIP/MPR/2D)
SetMouseAdaptor
The default mapping of mouse operations can be changed through Fovia.UI.HTMLViewport3D.setMouseAdaptor() (or Fovia.UI.HTMLViewport3D.setTouchAdaptor() for touch).
HTMLViewport3D.setMouseAdaptor().(Fovia.UI.MouseAdaptors, Fovia.UI.MouseButton, Fovia.UI.KeyboardModifier);
HTMLViewport3D.setTouchAdaptor().(Fovia.UI.TouchAdaptors, Fovia.UI.TouchEvents, Fovia.ViewType);
The example app maps ctrl-left click to the scroll adaptor, which is only useful if slabbing (front clipping plane) is enabled, which can be done through the "c" keyboard shortcut.
SetCustomMouseAdatpor
A custom mouse operations installed can be changed through Fovia.UI.HTMLViewport3D.setCustomMouseAdaptor() (or Fovia.UI.HTMLViewport3D.setCustomTouchAdaptor() for touch).
HTMLViewport3D.setCustomMouseAdaptor().(Fovia.UI.MouseAdaptorInterface, Fovia.UI.MouseButton, Fovia.UI.KeyboardModifier);
HTMLViewport3D.setCustomTouchAdaptor().(Fovia.UI.TouchAdaptorInterface, Fovia.UI.TouchEvents);
The example app creates a voxelValue adaptor and maps it to ctrl-left-click which then prints out the voxel value from any given location into the JavaScript console and in the DICOM overlay.
Alt-left-click installed a line measurement adaptor.
SetOverrideMouseAdaptor
It is sometimes useful to install a special mouse adaptor allows for an override of all other adaptors (regardless of specific mouse/keyboard/touch mapping). For example, defining a hot spot or an on-screen slider control that should become active when the mouse or finger is over the region. The design pattern is the same except that the return value should be false to consume the event, or true to propagate the event to the default or custom adaptor currently defined based on the mouse/keyboard/touch mapping. The override interface can be installed through Fovia.UI.HTMLViewport3D.setOverrideMouseAdaptor() (or Fovia.UI.HTMLViewport3D.setOverrideTouchAdaptor() for touch).
HTMLViewport3D.setOverrideMouseAdaptor().(Fovia.UI.MouseAdaptorInterface);
HTMLViewport3D.setOverrideTouchAdaptor().(Fovia.UI.TouchAdaptorInterface);
The example app defines a hot spot region in left corner of the window.
Keyboard Event Handling
The last concept shown in this example application is to define a default key handle to catch the event to turn cut planes on/off. Ensure that a tabIndex is specified on the HTML canvas tag so it can receive key events.
// capture key sequences for "fovia" element, make sure tabindex="1" is specified
// in the HTML so it can get key events!
var htmlobj = foviaViewport.getHTMLElement();
htmlobj.focus();
htmlobj.addEventListener('keydown', doKeyDown);
The example app maps the keyboard shortcut "c" to toggling on/off slab (front clipping plane) mode.