Documentation
Image Viewer Button Controlled
Description
The Image Viewer Button Controlled module is an extension of the Image Viewer module. It has one additional command - changeFlag, allowing its integration with modules like Double State Button.
Like the original module, 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 to a changing frame. It supports 3 audio formats:
- MP3
- OGG
- AAC
Additionally, the module is extended with Frame names. Those frame names were added to integrate the Image Viewer with the Image Gap module. Of course, it can serve other purposes - possibilities are limited to the author's imagination.
Note: The Image Viewer Button Controlled module 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 |
|---|---|
| Image | An image that serves as a foundation for the animation. It should contain at least one frame.
This property allows online resources. Find out more » |
| Frames | Number of frames specifies how many pieces an image will be split into. In our example, it is 8. Remember to set only positive integer numbers here! |
| Frame size | List of possible frame size adjustments to the module's size: 'Original' (no changes), 'Keep aspect ratio', and 'Stretched'. |
| Sounds | A collection of audio files played by the module 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 must be positive integers from 1 to the frame count. |
| Is click disabled | With this option selected, the user is disabling mouse clicks on the Image Viewer Button Controlled module and limits the frame manipulation to commands. |
| Labels | A collection of text labels shown at a given frame. Each Label is composed of a text string, its position (counted from the slide's upper-left corner) in pixels, and a list of frames on which the Label should be displayed. Frames can be specified as a comma separated list of numbers or their range (i.e. 1-3,5 will display Label on frames 1,2,3 and 5). |
| Show frame | With this option selected, a watermark will be displayed after the module loads. Its purpose is to inform the user to click the module to start the presentation. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| moveToFrame | frame | Change displayed frame to the specified one. |
| moveToFrameName | frameName | Change displayed frame to one specified in the 'Frame names' property. |
| changeFlag | flag | Change the given flag to 1 (0) if the flag is set to 0 (1). |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
Example
The above image contains 8 frames: black-white, red, green, red-green, blue, red-blue, green-blue, and red-green-blue. Those frames show an 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 displaying the frame accordingly to the table above. Because flags can have only two values, 0 (off) and 1 (on), the number of flags should be chosen properly. In the example above, the image has 8 frames, so 3 flags are suitable. Because of that fact, i.e., setting on flag number 9 will have no effect - the calculated combination of flags from 1 to 9 will result in a frame number bigger than the frame number.
Advanced Connector integration
Each command supported by the Image Viewer Button Controlled module can be used in the Advanced Connector module's scripts. The following example shows how to implement an exercise from a demo presentation with RGB colors in the 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. The image element is a direct child of this element. |
| image-viewer-label | Labels are span elements that are shown when the animation isn't playing. Do not change/set position attributes for these elements! |
| image-viewer-loading-image | Loading image showed while loading resources. The image is placed in the slide's center. The default width and height are 50px. Do not change/set position attributes for these elements! |
The module accepts all CSS selectors and modifiers, i.e., if the user would like to specify a separate appearance for the 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 a red border on mouse hover over the module.
Demo presentation
Demo presentation contains examples of how to use the Image Viewer Button Controlled module.