Fork me on GitHub

Namespace: Utils

Utils

Various utility and helper functions
Source:

Members

(static) _COMPUTE_GS_CANVAS

Used internally, for @see Utils.ComputeProbeValue_gs
Source:

Methods

(static) ComputeProbeValue_gs(image, probe, superScale)

Gets the average pixel value (grayscale intensity) with the given image and one probe.
Parameters:
Name Type Description
image * the image to get pixel data from
probe * the sampling shape/spot.
superScale number factor to scale up ("blow-up") the image for the sampling.
Source:
Returns:
the computed grayscale color

(static) CreateRuler(layer, oImg, x1, y1, x2, y2)

Creates a ruler control / drawable on the given layer of a konva stage. Scaling is calculated using the stage size, the input image size, and the (globally set) image pixel size in "real" / physical units.
Parameters:
Name Type Description
layer * The layer of the stage to draw on.
oImg * The input image.
x1 * the starting x coordinate of the ruler line.
y1 * the starting y coordinate of the ruler line.
x2 * the ending x coordinate of the ruler line.
y2 * the ending y coordinate of the ruler line.
Source:
Returns:
an object with the property "element" for the drawable control, a getLengthNm() method to get the current length of the ruler in physical units, a getPixelSize(lengthNm) method to calculate the pixel size in physical (nm) units based on the new specified length of the ruler in physical (nm) units, and a doUpdate() method to update the ruler to represent the its latest state.

(static) GetSuggestedFileName(prefix, counter, fileExtopt)

Generate a filename with a timestamp and the given prefix and counter.
Parameters:
Name Type Attributes Default Description
prefix string the filename prefix
counter number a counter that has been incremented elsewhere
fileExt string <optional>
"png" the file extension
Source:
Returns:
the filename.

(static) MakeZoomHandler(stage, konvaObj, callback, scaleFactor, scaleMin, scaleMax)

Creates a Zoom event handler to be used on a stage. Holding the shift key scales at half the rate.
Parameters:
Name Type Description
stage object the drawing stage
konvaObj object the figure or object on the stage to change.
callback function a callback for when the zoom event handler is called.
scaleFactor number the scale factor per "tick"
scaleMin number | function the scale minimum allowed defined as a number or function.
scaleMax number | function the scale maximum allowed defined as a number or function.
Source:
Returns:
the created event handler

(static) ShowAboutMessage()

Displays a message/dialog box with information about this application.
Source:

(static) _loadImageUTIF(url, callback)

Used internally by @see Utils.loadImage to retry loading TIFFs with the UTIF.js decoder that otherwise failed with the built-in decoder.
Parameters:
Name Type Description
url * The image base64 URL/URI.
callback * a function to call when image.onload happens.
Source:

(static) applyBrightnessContrast(drawable, brightness, contrast)

Applies Brightness/Contrast (B/C) values to a given Konva stage or drawable.
Parameters:
Name Type Description
drawable * The Konva stage or drawable / drawElement.
brightness * The brightness value, from -1 to 1.
contrast * The contrast value, mainly from -100 to 100.
Source:

(static) centeredScale(shape, newScale)

shorthand for @see Utils.scaleOnCenter. Gets the stage and original scale from the shape directly.
Parameters:
Name Type Description
shape * the shape to scale
newScale * the new scale.
Source:

(static) computeCellSize(rect, rows, cols)

Calculates cell size based on given object (eg. rect, stage, or image), rows and cols
Parameters:
Name Type Description
rect * a Konva object that has a width and height, usually a rect, image, or stage.
rows number (optional) the number of rows to split the area into. If not is provided, attempts to get it from gui/input.
cols number (optional) the number of columns to split the area into. If not is provided, attempts to get it from gui/input.
Source:
Returns:
the size (w,h) of a cell in the raster grid.

(static) computeMagLevel(rectBase, rectScaled)

Calculates the magnification based on the given rectangles' width and scaleX
Parameters:
Name Type Description
rectBase * The original object
rectScaled * The scaled object
Source:
Returns:
The magnification (ratio)

(static) computeResampledFast(sourceStage, destStage, image, probe, rows, cols)

Draws a resampled image with the given spot/probe. Samples on a grid with an array of "cloned" spots. The sampling grid fits the full size of the destination stage.
Parameters:
Name Type Description
sourceStage * The stage for the original image to pixel data from.
destStage * The destination stage to draw on.
image * The image size and position.
probe * The sampling shape or probe
rows number The number of rows for the sampling grid
cols number The number of columns for the sampling grid
Deprecated:
Source:
To Do:
  • review this function, maybe remove or improve.

(static) computeResampledPreview(previewStage, image, probe, rows, cols, rect)

Draws a "stenciled" version of the given image and probe/shape based the grid parameters. "Stenciles" on a grid with an array of "cloned" spots.
Parameters:
Name Type Description
previewStage * The stage to draw on.
image * The image to draw and "stencil".
probe * The shape to stencil image with repeatedly in a grid pattern
rows number The number of rows for the grid
cols number The number of columns for the grid
rect * The bounds for the grid
Source:
To Do:
  • Likely remove it, deprecated and no longer used by anything...

(static) computeResampledSlow(sourceStage, destStage, oImage, probe, rows, cols, rect, rowStart, rowEnd, colStart, colEnd, doClear, useLastLayer)

Essentially, this is Utils.computeResampledFast, but corrected for spot size larger than the cell size. Samples on a grid with an array of "cloned" spots. Utils.computeResampledFast limits the sampling to the cell size, and takes in smaller version of the image that is already drawn and "compositied" in a Konva Stage, instead of the original larger image...
Parameters:
Name Type Description
sourceStage * The stage to get the subregion area
destStage * The stage to draw on
oImage * The ground truth/source/original image to get data from.
probe * The spot/probe to sample with
rows number The number of rows for the sampling grid
cols number The number of columns for the sampling grid
rect number The bounds of the sampling grid
rowStart number The row to start iterating over.
rowEnd number The row at which to stop iterating over.
colStart number The column to start iterating over.
colEnd number The column at which to stop iterating over.
doClear boolean Whether the layer should be cleared before drawing.
useLastLayer boolean Whether to use the last (true) or first (false) layer to draw on.
Source:

(static) distance(x1, y1, x2, y2)

Calculates the euclidean distance.
Parameters:
Name Type Description
x1 *
y1 *
x2 *
y2 *
Source:
Returns:
the distance in the given coordinates' units.

(static) downloadURI(uri, name)

Initiates a download of the given resource, like programmatically clicking on a download link. function from: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html https://stackoverflow.com/a/15832662/512042
Parameters:
Name Type Description
uri string a url pointing to the resource to download.
name * the filename to use for the downloaded file.
Source:

(static) drawGrid(gridLayer, rect, rows, cols, lineColor)

Draws a grid on a given drawing stage. Based on solution-1 from: https://longviewcoder.com/2021/12/08/konva-a-better-grid
Parameters:
Name Type Description
gridLayer * a layer on the stage to use for drawing the grid on.
rect * a rectangle represing the size and position of the grid to draw.
rows number the number of rows in the grid.
cols number the number of columns in the grid.
lineColor * the line color of the grid.
Source:
Returns:
the cell size (width, height)

(static) ensureInfoBox(stage, className, onDblClickopt, titleopt)

Gets or creates an info-box element on the given stage.
Parameters:
Name Type Attributes Description
stage * The stage on which display/have the info-box.
className string The class name of the info-box DOM element.
onDblClick function <optional>
bound on creation, the event handler / callback for on-doubleclick event
title string <optional>
Optional title / tooltip text.
Source:
Returns:
the info-box DOM element.

(static) fitImageProportions(w, h, maxDimension, fillMode)

Calculates a new size (width and height) for the given object to fit in a stage's view bounds.
Parameters:
Name Type Description
w number the original width
h number the original height
maxDimension number The largest dimension (whether width or height) to fit in.
fillMode boolean Whether to do a "fill", "fit" / "letterbox", "crop", or "squish" fit.
Source:
To Do:
  • fillMode is not yet fully supported, see https://github.com/joedf/ImgBeamer/issues/7
Returns:
the new calculated size

(static) formatUnitNm(value_in_nm, value2_in_nm)

Formats the values given to the appropriate display unit (nm or μm).
Parameters:
Name Type Description
value_in_nm * a value in nm.
value2_in_nm * (optional) a value in nm.
Source:
Returns:
an object containing the adjusted values and selected unit.

(static) getFirstImageFromStage(stage)

Find and gets the first "image" type from the first layer of the given Konva stage
Parameters:
Name Type Description
stage * the stage to search through
Source:
Returns:
the first image object

(static) getInputValueInt($e)

Attempts to get the value or text within a given element/control.
Parameters:
Name Type Description
$e object | jQuery the jquery wrapped DOM element.
Source:
Returns:
the value contained or represented in the given control/element.

(static) getKonvaImageData(konvaObject, pixelRatio, imageSmoothing)

get the imageData (pixels) from a given konva object/image
Parameters:
Name Type Description
konvaObject * the shape/image/object to get image data from
pixelRatio number the pixel ratio to scale (larger means ~higher resolution)
imageSmoothing boolean Set to true to use image smoothing
Source:
Returns:
The image data

(static) getLayerByName(stage, layerName)

Finds (non-recusrive) the first layer with a matching on a given stage, null if n/a.
Parameters:
Name Type Description
stage * The stage or element with layers.
layerName * The name of the layer.
Source:

(static) getRandomInt(max)

Creates a random integer between 0 and the given maximum. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Parameters:
Name Type Description
max number the largest value possible.
Source:
Returns:
a random number.

(static) getRectFromKonvaObject(kObject)

Creates a new Konva.Rect object based on the position and size of a given konva object.
Parameters:
Name Type Description
kObject * A konva object that has a size and postion, such as a stage, image, or rect.
Source:
Returns:
a rectable object with x, y, width, and height functions.

(static) getVirtualSEM_KonvaImage(stage)

get the image without the row/draw indicator
Parameters:
Name Type Description
stage * the stage to search through
Source:
Returns:
the image object

(static) get_avg_pixel_gs(raw)

Computes the average grayscale pixel value assuming an RGBA format, with a max of 255 for each component. However, only the R (red) component is considered.
Parameters:
Name Type Description
raw ImageData The image data (access to pixel data).
Source:
Returns:
a number representing the average pixel value intensity (0 to 255).

(static) get_avg_pixel_rgba(raw)

Computes the average pixel value assuming an RGBA format, with a max of 255 for each component.
Parameters:
Name Type Description
raw ImageData The image data (access to pixel data).
Source:
Returns:
an array of the average pixel value [R,G,B,A].

(static) imagePixelScaling(konvaImage, imageObj)

Gets the image scaling based on the Konva.Image size vs the image's true or 'natural' size.
Parameters:
Name Type Description
konvaImage * The konva image object
imageObj * The actual image's HTML/DOM object
Source:
Returns:
an object with the calculated values as properties 'x' and 'y'.

(static) imagePixelToRealCoordinates(x, y, pxSizeX, pxSizeY)

Convert image pixel to coordinates in "real" (or scaled) units
Parameters:
Name Type Description
x *
y *
pxSizeX * the width of a pixel in "real" units
pxSizeY * the height of a pixel in "real" units
Source:
Returns:
"real" coordinates

(static) loadImage(url, callback, _allowRetryAsUTIF)

Initiates the image resource load with a callback once the image is loaded.
Parameters:
Name Type Description
url string The url pointing to the image to load.
callback function The callback function to call/run once the image is loaded.
_allowRetryAsUTIF boolean Used internally to prevent a recursive retry loop with the UTIF decoder.
Source:

(static) newStageTemplate(parentContainer, w, h)

Makes a new stage 'box' with a layer added, and some settings
Parameters:
Name Type Description
parentContainer Element the DOM element of the parent container in which to add a stage 'box'.
w * the width of the stage
h * the height of the stage
Source:
Returns:
the drawing stage.

(static) repeatDrawOnGrid(layer, rect, shape, rows, cols)

Draws a given shape repeatedly (clones) in a grid pattern. The shape will be drawn rows by cols times. Originally based from drawGrid() ...
Parameters:
Name Type Description
layer * The layer to draw on
rect * The bounds of the grid pattern
shape * The shape to draw
rows number the number of rows for the grid
cols number the number of columns for the grid
Source:

(static) scaleCenteredOnPoint(point, shape, oldScale, newScale)

Scales the given shaped while keeping it centered on the given point.
Parameters:
Name Type Description
point * the centering point.
shape * the shape to scale and position.
oldScale * the shape's original scale
newScale * the shape's new scale
Source:

(static) scaleOnCenter(stage, shape, oldScale, newScale)

Scales the given shape, and moves it to preserve original center
Parameters:
Name Type Description
stage * The stage of the shape object
shape * the shape object itself
oldScale * the shapes old scale
newScale * the new scale
Source:
To Do:
  • maybe, no need to have oldScale specified, can be obtained from shape.scale() ...
  • possibly simplify this like Utils.centeredScale and remove the other?

(static) setStageImageSmoothing(stage, enabled)

Sets the image Smoothing option for a given stage. Currently, this only affects the "base" layer. For now it doesn't make sense to remove smoothing from overlay layers which are currently used for annotations and such.
Parameters:
Name Type Description
stage * The stage
enabled * True for enabled, false for disabled
Source:

(static) stageToImagePixelCoordinates(x, y, stage, imageObj)

Convert stage to Image pixel coordinates
Parameters:
Name Type Description
x *
y *
stage * coordinates source stage
imageObj * the original image object (with a width and height property)
Source:
Returns:
image pixel coordinates

(static) stageToUnitCoordinates(x, y, stage)

Convert stage to unit square coordinates
Parameters:
Name Type Description
x *
y *
stage * coordinates source stage
Source:
Returns:
unit square coordinates

(static) toDegrees(angle)

Converts an angle in radians to degrees
Parameters:
Name Type Description
angle number the angle in radians.
Source:
Returns:
the angle in degrees

(static) toRadians(angle)

Converts an angle in degrees to radians
Parameters:
Name Type Description
angle number the angle in degrees.
Source:
Returns:
the angle in radians

(static) unitToImagePixelCoordinates(x, y, imageObj)

Convert unit square to image pixel coordinates.
Parameters:
Name Type Description
x *
y *
imageObj * the original image object (with a width and height property)
Source:
Returns:
image pixel coordinates

(static) updateAdvancedMode()

Updates the displayed element to be shown/hidden according to the advanced mode setting. Affects all HTML elements with the class "advancedMode".
Source:

(static) updateDisplayBeamParams(stage, beam, cellSize, userImage)

Updates the displayed statistics or parameters on the Spot profile.
Parameters:
Name Type Description
stage * the drawing stage for the spot profile and where to display the values.
beam * the beam used for the spot layout and sampling of the image (after scaling).
cellSize * the size of a cell in the raster grid of the resulting image.
userImage * the scaled image by the user (in spot content) used to size the beam.
Source:

(static) updateExtraInfo(destStage, infoText)

Displays and updates additional info on the given stage
Parameters:
Name Type Description
destStage * The stage to display info on.
infoText string Text to display.
Source:

(static) updateImageMetricsInfo(sourceStage, destStage)

Displays and updates the Image metrics, if G_IMG_METRIC_ENABLED is true.
Parameters:
Name Type Description
sourceStage * The stage for the ground truth / reference image
destStage * The stage for the image to compare
Source:

(static) updateMagInfo(destStage, scaledRect)

Displays and updates the magnification.
Parameters:
Name Type Description
destStage * The stage to display the info on.
scaledRect * The shape to calculate the magnification from compared to its stage.
Source:

(static) updateVSEM_ModeWarning(stage)

Conditionally displays a small warning icon if it meets the G_AUTO_PREVIEW_LIMIT. This icon can be hovered or double-clicked to obtain a message explaining the drawing is done row-by-row instead of frame-by-frame for performance / responsiveness.
Parameters:
Name Type Description
stage * The stage to display it on.
Source:
To Do:
  • Currently, only used for the Subregion resampled stage, could be used elsewhere?

↑ Top