Configuration Options

MouseView.js allows you to configure the overlay and aperture, this page gives you an overview of how to do this and what you can configure.

Checkout Functions for an overview of the methods for controlling MouseView.js.

Setting attributes#

You can set multiple different attributes of the aperture and the overlay

Attributes Example
// size of the aperture viewing window. This can be a percentage in a string or an integer in pixels
mouseview.params.apertureSize = '5%'
// the standard deviation (in pixels) of the gaussian filter applied to the edge of the aperture
mouseview.params.apertureGauss = 10
// The colour of the overlay, this can be a colour word ('black', 'blue') or a hex string
mouseview.params.overlayColour = 'black' //i.e. hex black
// The opacity of the overlay, higher makes the content underneath less visible
mouseview.params.overlayAlpha = 0.8 // how transparent the overlay will be
// The SD of the Gaussian blur applied to content underneath overlay
// This is experimental -- not consistent accross browsers and websites, and adds considerable time to the delay
mouseview.params.overlayGaussian = 20 // SD in pixels for the gaussian blur filter (experimental -- not consistent on browsers)
// A callback function can be passed into this argument, that will be run on the completion of the guassian blurring
// As this can take up to a couple of seconds, this is very hand to hide elements or to start events after the blurr is in place!
mouseview.params.overlayGaussianFunc = () => { }
// You can also pass in the number of ms you want to wait before manually recapturing the blur (you may want to do this for dynamic contennt in the page)
// if you pass zero it updates only on page resize or scroll events
mouseview.params.overlayGaussianInterval = 0

All attributes#

SettingDescriptionAccepted TypesDefault
mouseview.params.apertureSizeSize of the viewing aperture in pixels or percentage of screen width.Number-Integer (pixels) orβ€˜5%’
String (β€˜x%’)
mouseview.params.apertureGaussStandard Deviation for Gaussian edge.Number-Integer (pixels)10
mouseview.params.overlayColourColour of overlay.String containing CSS Keyword, hexadecimal, or HSL code.β€˜black’
mouseview.params.overlayAlphaTransparency of overlay.Number-Decimal (0-1).0.8
mouseview.params.overlayGaussianStandard Deviation for Gaussian blurring of overlay.Number-Integer (pixels)20
mouseview.params.overlayGaussianFuncFunction that will be run when the Gaussian overlay has been generated.JavaScript arrow function. β€œ() => {}”() => {console.log('overlay generated')}
mouseview.params.overlayGaussianIntervalMillisecond Interval for the Gaussian blur overlay to be regenerated. Passing 0 means it will only update on window resize and page scroll.Number-Integer or Float (milliseconds)0
mouseview.timing.sampleRateDesired target sample rate. Target because timing can be screen refreshes can be variable.Number-Integer or Float (milliseconds)16.66 (one refresh at 50Hz)