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, 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 that 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 the module's size: 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 |
| Base width | Base width and base height properties are used for positioning labels. If the current dimensions of the addon differ from those provided in the Base width/height property (such as, because the addon has a different size depending on the selected layout), the position of the labels will be scaled appropriately. If the properties are left empty, the position of the labels will be the same regardless of the size of the addon. |
| Base height | This property is used for positioning labels. See "Base width" property for more details. |
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.