Login Register

Documentation

Image Viewer Button Controlled

Description

This addon is an extension of the Image Viewer Addon. It has one additional command - changeFlag, allowing its integration with modules like Double State Button.

Like the original addon, it 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 video formats:

  • MP3
  • OGG Vorbis
  • AAC

Additionally, the addon is extended with Frame names. Those 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 Button Controlled supports the following graphic formats: JPG, PNG, and BMP. Vector formats are not supported.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

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 spitted. 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 frame change. For each frame you can upload 3 audio files in different formats. Sounds will be played on frame change accordingly to order of sounds set. If playing audio on some frame change is undesirable then don't upload 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 number. Frame numbers have to be positive integers from 1 to frames count
isClickDisabled With this option selected user is disabling mouse click on 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's range (i.e. 1-3,5 will display Label on frames 1,2,3 and 5).
Show frame This option is for Presentation Editor only! It allows you to view specified frame (counted from 1 to Frames)

Supported commands

Command name Params Description
moveToFrame frame Change displayed frame to specified
moveToFrameName frameName Change displayed frame to one specified in Frame names property
changeFlag flag Change given flag to 1 (0) if flag is set to 0 (1)
show --- Shows the module
hide --- Hides the module

Example

Above image contain 8 frames: black-white, red, green, red-green, blue, red-blue, green-blue and red-green-blue. Those frames shows image with only some (or none) color pallets displayed in RGB. The combination of flags (in our example color pallets) turned on/off is shown below.

3 - "Blue" 2 - "Green" 1 - "Red" Frame
0 0 0 1
0 0 1 2
0 1 0 3
0 1 1 4
1 0 0 5
1 0 1 6
1 1 0 7
1 1 1 8

Setting proper flags will result in displying frame accordingly to table above. Because flags can have only two values, 0 (off) and 1 (on), number of flags should be chosen properly. In example above image has 8 frames, so 3 flags is suitable. Because of that fact, i.e. setting on flag number 9 will have no effect - calculated combination of flags from 1 to 9 will result in frame number bigger than frames number.

Advanced Connector integration

Each command supported by Image Viewer Button Controlled addon can be used in the Advanced Connector addon scripts. The below example shows how to implement excercise from a demo presentation with RGB colors in Advanced Connector.

    EVENTSTART
    Source:Text1
    Value:Red
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Button_Controlled_Public1');
        imageViewer.moveToFrame(2);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text1
    Value:Green
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Button_Controlled_Public1');
        imageViewer.moveToFrame(3);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text1
    Value:Blue
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Button_Controlled_Public1');
        imageViewer.moveToFrame(5);
    SCRIPTEND
    EVENTEND
    EVENTSTART
    Source:Text1
    Value:^$
    SCRIPTSTART
        var imageViewer = presenter.playerController.getModule('Image_Viewer_Button_Controlled_Public1');
        imageViewer.moveToFrame(1);
    SCRIPTEND
    EVENTEND

CSS classes

Class name Description
image-viewer DIV surrounding the image element. image element is a direct child of this element
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!

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

.Image_Viewer_Button_Controlled_Public_custom {
}

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

.Image_Viewer_Button_Controlled_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 contain example of how to use Image Viewer Button Controlled Addon.