Viewer Events

Back to Contents

First, make sure you have:

(as of June 2020)

Creating an event

These aren't acutally events. True events can have multiple listeners added to them, this is not the case here. The following functions are only functions, if you make two with the same name, the last one to be created is the only one to be used.

These functions are called when potentially important updates happen in the viewer.

If an important event occurs, the viewer looks for a function attached to the window (the parent object of everything that both your JavaScript and the viewer can see), if it finds one it runs it, otherwise nothing happens.

A function added to the window anonymously:
window.sayHi = function(x){ console.log(Hello World, I saw an + x);}

Or you can define a function elsewhere and attach it separately.
function hidy(x){ console.log(Hello World, I saw an + x);}
window.sayHi = hidy;
  • Preloader functions:
    • window.viewerLoadingBarAdvance = function(percent){}: Called every time the preloading bar advances with the percent loaded from 0 to 1.
    • window.viewerCustomLoadingBar = function(panel){}: Called once when the preloader is created. panel is the root object of the preloader you can attach things to. If you use this function, be sure to use window.viewerLoadingBarAdvance as well, otherwise the preloader will try to advance a loading bar which may not exist.
  • Initial functions:
    • window.viewerStatsWidth = function(){ return 700; }: Called when the viewer first starts. This function should return the desired width in pixels if you are setting it dynamicly.
    • window.viewerEventResetFinished = function(){}: Not called when the viewer first initilaizes, but called after a resizing task is complete (The viewerResetSize function triggers a reset).
    • window.viewerListenerProcessing = function(remaining,progress){}: Called between image processing tasks. This will generally not be called more often than the yield time in config.ini. The function informs you of the number of tasks remaining, as well as the progress on the current task (a number between 0 and 1). When all processing is complete (even if there was none to do in the first place, this function will be called with 0 remaining tasks with the current progress at 1.
    • window.viewerListenerLoadingStateChanged = function(state){}: This function informs you when a loading state changes. The state is a numeric flag:
      • FLAGviewerReady: Indicates everything loaded properly and every image is processed and in the GPU.
      • FLAGviewerLoaded: Indicates everything loaded properly, but there may still be images to be processed.
      • FLAGviewerFailedLoad: Indicates an error the viewer can't recover from (usually if the server goes down before the loading process completes).
  • Runtime functions:
    • window.viewerListenerInput = function(){}: Called when any known input occurs.
    • window.viewerListenerClickAdded = function( click ){}: Called when a click is added to the viewer.
    • window.viewerListenerClickRemoved = function( click ){}: Called when a click is removed from the viewer. The click is a string with x,y,z,time separated by commas. Note that the coordinates are scaled to the dimensions specified in config.ini. It represents the position of the click when it was added, not the click that removed it (it is guaranteed to be the same values as provided in window.viewerListenerClickAdded above, even if the viewer has been resized between events).
    • window.viewerListenerScrollSuccess = function(slideIndex){}: Called when the viewer scrolls to a new slide. Provides the slideIndex of the current slide.
    • window.viewerListenerScrollFail = function(slideIndex){}: Called when the viewer tries to scroll to a new slide but fails because it is either at the first or last available slide. Provides the slideIndex of the current slide.
    • window.viewerCoroutine = function(){}: Called everytime the screen renders before any changes or updates occur (after drawing and updating). This will always run every frame, even if the viewer image set is 0.
  • System:
    • window.viewerConsoleOut = function(msg){}: called anytime the viewer would output to the console. Note that the output from your own JavaScript (and errors created there) will not output through this function. This can be used if you want to send all of your log output back from each client for debugging (not generally recommended) or you can use this to create a console in mobile browsers if you are targeting that platform.

Tutorial Videos