picshow2.swf
FPP hotspot plugin for showing one or several images in a scalable window. Zooming and panning is supported.
The main difference between this plugin and its older brother picshow.swf is the scaling of the image. If values
for both width and height are given, the image will always be scaled to fit inside that box. And if these values
are given as a percentage, the image will be rescaled when screen size changes. Also, image positioning in your
pano can be set with a percentage to keep proportions.
The built-in zoom controls, close button and text capture are removed in this version.
The following hotspot parameter is supported in the FPP xml file:
In plugin external xml file, the following tags and attributes are supported:
In the plugin hotspot image attribute the following values are supported:
Example plugin external xml file:
NOTES: All tag names must be written in lower case, but attribute names are case independent (borderColor is equal to bordercolor). If you want your pictures to be loaded in advance, with no delay when you want to show them, then add them to the xml file. Otherwise, just write the url in the image="..." attribute, and it will be loaded on the fly and displayed. The plugin is monitoring the hotspot image="..." attribute for a command or a picture id. Setting this to a new picture id will make the plugin show the corresponding picture. If no picture with that id is found, the plugin will look for an already loaded picture with a matching url. And if that is not found, it will finally try to load a picture with that url. You can choose to specify both "width" and "height" attributes or only one of them. If you specify both, the image will be scaled to fit inside that "box". If you specify only "width", the plugin height will be calculated to keep image proportions, and vice versa. When a percentage value is used, the plugin will calculate the size at init and when the pano is resized. The staticX and staticY parameters are the same as in the FPP XML file. The reason for having them here is that you cannot specify a percentage value in FPP. The plugin will calculate a new value at init and every time your pano is resized and send it to FPP, which will then position the hotspot correctly. External zoom controls can be ordinary hotspots with the onPress and onRelease events set:
Version history:
| xmlfile | xmlFile=picshow2.xml | plugin control XML file |
In plugin external xml file, the following tags and attributes are supported:
| In <picshow2> tag: | ||
| width | width="40%" | width in percent or pixels, default=200 |
| height | height="280" | height in percent or pixels, default=200 |
| staticX | staticX="6%" | horisontal offset from alignment point |
| in percent or pixels, default=0 | ||
| staticY | staticY="15" | vertical offset from alignment point |
| in percent or pixels, default=0 | ||
| borderColor | borderColor="#000000" | color of image border |
| borderWidth | borderWidth="2" | width of image border |
| In <picture> tag: | ||
| id | id="P1" | picture id |
| url | url="images/pic1.jpg" | picture file url |
| onShow | onShow="global.pic_cmd" | FPP command to be executed when new picture is shown |
In the plugin hotspot image attribute the following values are supported:
| zoomin | start zooming in |
| zoomout | start zooming out |
| zoomstop | stop zooming |
| panleft | start panning left |
| panright | start panning right |
| panup | start panning up |
| pandown | start panning down |
| panstop | stop panning |
| reset | show complete image |
| + | show next image |
| - | show previous image |
| any other value is interpreted as picture id - see below under NOTES | |
Example plugin external xml file:
<?xml = '1.0'?> <picshow2 width="20%" staticX="50%" staticY="15" borderColor="#000000" borderWidth="2" > <picture id="P1" url="images/angantyr.jpg" /> <picture id="P2" url="images/rose.jpg" /> <picture id="P3" url="images/hyperion.jpg" /> </picshow2>
NOTES: All tag names must be written in lower case, but attribute names are case independent (borderColor is equal to bordercolor). If you want your pictures to be loaded in advance, with no delay when you want to show them, then add them to the xml file. Otherwise, just write the url in the image="..." attribute, and it will be loaded on the fly and displayed. The plugin is monitoring the hotspot image="..." attribute for a command or a picture id. Setting this to a new picture id will make the plugin show the corresponding picture. If no picture with that id is found, the plugin will look for an already loaded picture with a matching url. And if that is not found, it will finally try to load a picture with that url. You can choose to specify both "width" and "height" attributes or only one of them. If you specify both, the image will be scaled to fit inside that "box". If you specify only "width", the plugin height will be calculated to keep image proportions, and vice versa. When a percentage value is used, the plugin will calculate the size at init and when the pano is resized. The staticX and staticY parameters are the same as in the FPP XML file. The reason for having them here is that you cannot specify a percentage value in FPP. The plugin will calculate a new value at init and every time your pano is resized and send it to FPP, which will then position the hotspot correctly. External zoom controls can be ordinary hotspots with the onPress and onRelease events set:
<!-- plugin --> <spot id="pictureC" url="../picshow2.swf" static="1" align="TL" salign="TL" shadow="1" mouseChildren="1" blockMouse="1" buttonMode="0" onOver="alpha=1,300; pano.disableWheel=1" onOut="alpha=0.65,600;pano.disableWheel=0" image="P1" xmlFile="picshow21c.xml" /> <!-- zoom control --> <spot id="zoom_in" url="files/zoomin.png" static="1" align="TL" salign="TC" staticX="210" staticY="20" alpha="1.0" mouseChildren="0" visible="1" onPress="pictureC.image=zoomin" onRelease="pictureC.image=zoomstop" /> <spot id="zoom_out" url="files/zoomout.png" static="1" align="TL" salign="TC" staticX="210" staticY="45" alpha="1.0" mouseChildren="0" visible="1" onPress="pictureC.image=zoomout" onRelease="pictureC.image=zoomstop" />
Version history:
1.4:
Improved image drag function:
- image dragging continues when mouse leaves image until mouse button is released
- when dragging, mouse pointer is locked in image until mouse button is released. 1.3:
Modified size checking code to allow pictures to fill screen by letting width
or height be larger than stage. 1.2.1:
Fixed bug as onShow command was being executed at every image resize. 1.2:
Support for onShow attribute added to picture xml. 1.1:
Modified init code to handle FPP hotspot unloading. Modified handling of "width" and "height" attributes. 1.0.2:
Fixed bug when changing images 1.0.1:
Fixed bug when resizing pano while hotspot is hidden with visible="0"
Improved image drag function:
- image dragging continues when mouse leaves image until mouse button is released
- when dragging, mouse pointer is locked in image until mouse button is released. 1.3:
Modified size checking code to allow pictures to fill screen by letting width
or height be larger than stage. 1.2.1:
Fixed bug as onShow command was being executed at every image resize. 1.2:
Support for onShow attribute added to picture xml. 1.1:
Modified init code to handle FPP hotspot unloading. Modified handling of "width" and "height" attributes. 1.0.2:
Fixed bug when changing images 1.0.1:
Fixed bug when resizing pano while hotspot is hidden with visible="0"