Home -> FPP plugins page -> picshow2.swf
This plugin is completely free for use in any context or connection.
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:

xmlfilexmlFile=picshow2.xmlplugin control XML file


In plugin external xml file, the following tags and attributes are supported:

In <picshow2> tag:
widthwidth="40%"width in percent or pixels, default=200
heightheight="280"height in percent or pixels, default=200
staticXstaticX="6%"horisontal offset from alignment point
in percent or pixels, default=0
staticYstaticY="15"vertical offset from alignment point
in percent or pixels, default=0
borderColorborderColor="#000000"color of image border
borderWidthborderWidth="2"width of image border
In <picture> tag:
idid="P1"picture id
urlurl="images/pic1.jpg"picture file url
onShowonShow="global.pic_cmd"FPP command to be executed when new picture is shown


In the plugin hotspot image attribute the following values are supported:

zoominstart zooming in
zoomoutstart zooming out
zoomstopstop zooming
panleftstart panning left
panrightstart panning right
panupstart panning up
pandownstart panning down
panstopstop panning
resetshow 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"