Documentation

Image Viewer

Description

This addon allows users to embed simple animations where new frames are shown on a mouse click. It also allows users to add a sound notification on a changing frame. It supports 3 audio formats:

  • MP3
  • OGG Vorbis
  • AAC

Additionally, this addon is extended with frame names. These frame names were added to integrate Image Viewer with the Image Gap addon. Of course it can serve other purposes - possibilities are limited to the author's imagination.

Note: Image Viewer supports the following graphic formats: JPG, PNG, BMP. Vector formats are not supported.

Properties

Property name Description
Images An image which serves as a fundamental for the animation. It should contain at least one frame.

This property allows online resources. Find out more »

Frames Number of frames specifies to how many pieces an image will be split. In our example it is 6. Remember to set only positive integer numbers here!
Frame size List of possible frame size adjustments to Addon size. Choice is from: Original (no changes), 'Keep aspect ratio' and 'Stretched'
Sounds A collection of audio files played by the addon on a frame change. For each frame you can upload 3 audio files in different formats. Sounds will be played on a frame change accordingly to the order of sounds set. If playing audio on some frame change is unwanted, it is enough not to upload relevant files and just leave this Item empty.

This property allows online resources. Find out more »

Frame names A collection of frame names with corresponding frame numbers. Frame numbers have to be positive integers from 1 to frames count
isClickDisabled With this option selected, user is disabling mouse click on the Image Viewer addon and limits the frame manipulation to commands
Labels A collection of text label shown at given frame. Each Label is composed of text string, its position (counted from slide upper-left corner) in pixels and list of frames on which Label should be displayed. Frames can be specified as comma separated list of numbers or their range (i.e. 1-3,5 will display Label on frames 1,2,3 and 5)
Show watermark With this option selected, a watermark will be displayed after the addon's start. Its purpose is to inform user to click the addon in order to start the presentation
Watermark color Watermark color in #RRGGBB format (default is #000000 - black)
Watermark opacity Watermark opacity (value must be between 1 - fully visible and 0 - fully transparent, default is 1)
Watermark size Watermark size counted in pixels
Animation List of possible animations during frame change. Choice is from: None (simple change), 'Linear' and 'Fading'
Correct frames List of comma separated frames that are treated as correct answers. If nothing is set, the addon acts as a static module without points calculation
Show frame This option is for the Presentation Editor only! It allows you to view a specified frame (counted from 1 to Frames)
Do not reset If this property is checked, then Reset button will NOT revert any changes.
Random frame If this property is checked, then random frame is displayed.
Initial frame It's a number of a frame to display.
Show frame counter If this property is checked, frame counter is displayed

Supported commands

Command name Params Description
next --- Change displayed frame to next one (or first if last frame was displayed)
previous --- Change displayed frame to next one (or last if first frame was displayed)
moveToFrame frame Change displayed frame to specified one
moveToFrameName frameName Change displayed frame to one specified in Frame names property
getCurrentFrame --- Returns current frame number (values from 1 to frames count)
show --- Shows the module
hide --- Hides the module
markAsCorrect --- Marks addon as correct (adds the "correct" class to image-viewer and removes the "wrong" class
markAsWrong --- Marks addon as wrong (adds the "wrong" class to image-viewer and removes the "correct" class
setClickDisabled --- Blocks the option of clicking on the module
setClickEnabled --- Allows user to click on the module

Advanced Connector integration

Each command supported by Image Viewer addon can be used in the Advanced Connector addon scripts. The below example shows how to react on Text module gap content changes (i.e. throughout putting in it elements from Source List) and change displayed frame accordingly.

    EVENTSTART
    Source:Text2
    Value:1
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(1);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text2
    Value:2
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(2);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text2
    Value:3
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(3);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text2
    Value:4
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(4);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text2
    Value:5
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(5);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text2
    Value:6
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
        imageViewer.moveToFrame(6);
    SCRIPTEND
    EVENTEND

Scoring

Imaga Viewer addon allows to create exercises as well as activities. To set module in excercise mode set 'Correct frames' property. If Addon is not in excercise mode, all of below methods returns 0!

Property Description
maxScore maximum score is 1 point
score 1 if user selects one of specified correct frames, otherwise 0
errorCount 0 if user selects one of specified correct frames, otherwise 1

Events

Image Viewer Addon sends ValueChanged type events to Event Bus when frame is changed.

Field name Description
Item Current frame number (1 to n)
Value N/A
Score N/A

CSS classes

Class name Description
image-viewer DIV surrounding the image element. Image element is a direct child of this element
correct Additional class for image-viewer element for correctly selected frame in error checking mode
wrong Additional class for image-viewer element for incorrectly selected frame in error checking mode
image-viewer-helper DIV element, child of image-viewer element, adding more styling possibilities
image-viewer-label Labels are span elements which are show when animation isn't playing. Do not change/set position attributes for this elements!
image-viewer-loading-image Loading image showed while loading resources. Image is placed in slides center. Default width and hight are 50px. Do not change/set position attributes for this elements!
image-viewer-watermark DIV surrounding watermark canvas element
frame-counter-wrapper DIV element, parent of .frame-counter element
frame-counter DIV element containing all dots elements
dot DIV element representing page
current additional class for .dot element representing current frame dot

Addon accepts all CSS selectors and modificators, i.e. if user would like to specify a different appearance for image on mouse hover, a CSS declaration could look like this:

.Image_Viewer_Public_custom {
}

.Image_Viewer_Public_custom .image-viewer {
  border: 2px solid black;
}

.Image_Viewer_Public_custom .image-viewer:hover {
  border: 2px solid red;
}

This declaration will result in red border on mouse hover over Addon.

Demo presentation

Demo presentation contains examples of how to integrate Image Viewer with other Addons, i.e. Image Gap in different ways.