Home -> FPP plugins page -> floorplan.swf
This plugin is completely free for use in any context or connection.
FPP external plugin for showing a floorplan with icons representing panorama camera positions. You can show any number of buildings with any number of floors with any number of cameras. It has built-in support for changing icons when a pano has been visited. There is also a radar that follows panning and zooming. Camera mouse-over will show camera id or a thumbnail image in optional tooltip. You can also place buttons in the floorplan for executing FPP commands.

To make it easier in setting up your cameras, there is a setup mode, where you can click on the floorplan to add a camera and drag it around to get the exact position.

Supported attributes in FPP <spot>:
xmlfilexmlfile=floorplan.xmlread plugin parameters from this XML file
setupModesetupMode=1initiates setup mode - see details below

The following parameters can be updated dynamically from FPP ("external.floorplan.name=value"):
visiblevisible=T0 or 1, any other value toggles visibility
alphaalpha="0.60"plugin alpha when not mouse-over, default=1.0
scalescale="0.75"fixed plugin scale, default=1.0
scale="35%"plugin height in percent of pano height
goCameragoCamera=Salonselects camera and executes FPP command
selectCameraselectCamera=Dining Roomselects camera WITHOUT executing FPP command
bumpbump=Kitchenbump camera image to make it stand out
xmlfilexmlfile=floorplan.xmlread new plugin parameters from this XML file

Supported parameters/attributes in plugin xml file:

In <floorplan> tag:
salignsalign="TR"floorplan position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=MC
marginmargin="10"margin to pano edges, default=0
margin="15:10"horizontal margin:vertical margin
alphaalpha="0.60"plugin alpha when not mouse-over, default=1.0
scalescale="0.75"fixed plugin scale, default=1.0
scale="35%"plugin height in percent of pano height
visiblevisible="0"0 or 1, any other value toggles visibility
shadowshadow="1"0 or 1, plugin dropdown shadow, default=0
camUrlcamUrl="files/cam4.png"default camera icon url
currentCamUrlcurrentCamUrl="files/camc.png"default current camera icon url
visitedCamUrlvisitedCamUrl="files/cam4v.png"default visited camera icon url
setupModesetupMode="1"makes plugin enter setup mode, default=0
onOveronOver="global.expandFloor"FPP command(s) to execute at plugin mouse-over
onOutonOut="global.shrinkFloor"FPP command(s) to execute at plugin mouse-out
In <radar> tag:
visiblevisible="0"radar visibility, 0 or 1, default=1
sizesize="40"size of radar cone, default=30
colorcolor="#8080FF"radar color, default=#000000
fillAlphafillAlpha="0.15"radar center filling alpha, default=no filling
In <tooltip> tag: Include this if you want to show tooltips
visiblevisible="0"tooltip visibility, 0 or 1, default=1
fontfont="Verdana"text font, default=Arial
textColortextColor="#505050"text color, default=#000000
textSizetextSize="11"text size, default=10
bgColorbgColor="#E0E0C0"background color, default=#FFFFFF
borderColorborderColor="#FF0000"border color, default=#000000
XX="+10"X offset, default=0, can also be set for each camera
YY="-18"Y offset, default=24, can also be set for each camera
In <building> tag: mandatory - you got to have at least one building
idid="Villa"building id
camUrlcamUrl="files/cam4.png"building camera icon url
currentCamUrlcurrentCamUrl="files/camc.png"building current camera icon url
visitedCamUrlvisitedCamUrl="files/cam4v.png"building visited camera icon url
In <floor> tag: mandatory - you got to have at least one floor
idid="Upstairs"floor id
urlurl="files/upstairs.png"floorplan image url
camUrlcamUrl="files/cam4.png"floor camera icon
currentCamUrlcurrentCamUrl="files/camc.png"floor current camera icon url
visitedCamUrlvisitedCamUrl="files/cam4v.png"floor visited camera icon
In <camera> tag:
idid="Salon"camera id
pospos="22:64"icon position relative to floor image (TL=0:0)
offsetoffset="124"pano offset angle (pan=0 + offset = radar angle)
camUrlcamUrl="files/cam4.png"camera icon url
currentCamUrlcurrentCamUrl="files/camc.png"current camera icon url
visitedCamUrlvisitedCamUrl="files/cam4v.png"visited camera icon url
tooltipUrltooltipUrl="files/room4.png"tooltop image url
tooltipXtooltipX="-10"tooltip X offset value
tooltipYtooltipY="-22"tooltip Y offset value
onClickonClick="global.goKitchen()"command(s) to execute when camera is clicked or selected
onOveronOver="global.ShowSign"command(s) to execute at camera mouse-over
onOutonOut="global.HideSign"command(s) to execute at camera mouse-out
selectedselected="1"this camera will be selected at plugin init
In <button> tag: Can for example be used to show a plugin close button
idid="Salon"button id
pospos="22:64"button image position
urlurl="files/button1.png"button image url
onClickonClick="global.goKitchen()"command(s) to execute when button is clicked

Parameter names are not case sensitive ("XMLFile" is equal to xmlfile"). Parameter values, on the other hand, will be saved
exactly as written.

If you want all your camera icons to be the same, then you only have to specify the "camUrl" attribute in the <floorplan> tag. And the same goes for the "currentCamUrl" and "visitedUrl" attributes. If you want a house or a floor to have different camera icons, then you specify it in the <building> or <floor> tags. And if you want a single camera to have its own icon, then you specify it in the <camera> tag.

In each floor you can also include a number of buttons with the <button> tag. They can be used to execute any FPP commands to change floor or building or select a certain camera or whatever is needed.

When setting scale to a percentage value, the scaling of the floor image will never be higher than 1:1.

When you use the "goCamera=camera_id" and "selectCamera=camera_id" parameters, it is sufficient to write only the camera_id if it is unique. Otherwise you have write "goCamera=floor_id:camera_id", and if that isn't unique you have to write "goCamera=building_id:floor_id:camera_id".

The "bump=camera_id" command can for example be used at a hotspot mouse-over to show which camera will be selected when the hotspot is clicked.

If you are using the &" characters inside the "command" parameters in the xml file, you have to encode them as follows:

& as %26
" as %22

The setup mode is a help to get your cameras into the proper positions. Just write setupMode="1" in the tag and start up the pano. All the cameras in your xml file will show as usual, but when you click on them, the camera xml tag will be shown in a text box. And when you drag the camera, the text box will show the updated position. New cameras can be added by clicking on the floorplan, and cameras can be deleted by holding down the Alt-key while clicking on them. You can change the generated camera id in the text box, but not any of the other parameters. Note that your xml file will not be changed in any way by the plugin. You have to copy the text in the box and paste it into your text editor. This is just an easy way to get your camera positions.

Example XML file:

<?xml version = '1.0'?>
   <radar visible="1" size="40" color="#8080E0" fillAlpha="0.15" />
   <tooltip visible="1" textColor="#505050" textSize="11" bgColor="#E0E0C0" borderColor="#000000" />
   <building id="My house" camUrl="img/cam2.png">
      <floor id="My apartment" url="img/apartment.png">
         <camera id="Entry" pos="145:195" offset="55" onClick="global.goHome6()" selected="1" />
         <camera id="Kitchen" pos="33:225" offset="-53" tooltipY="-22" onClick="global.goHome1()" />
         <camera id="Livingroom" pos="20:35" offset="113" tooltipUrl="img/ttlivingroom.jpg" onClick="global.goHome2()" />
         <camera id="Hallway" pos="160:35" offset="-151" onClick="global.goHome3()" />
         <camera id="Bedroom" pos="305:35" offset="-53" tooltipUrl="img/ttbedroom.jpg" tooltipX="-90" onClick="global.goHome4()" />
         <camera id="Guestroom" pos="20:100" offset="0" onClick="global.goHome5()" />
         <button id="Get lost" pos="308:233" url="img/black_x.png" onClick="global.buttonCommand1()" />
   <building id="Eniro" camUrl="img/cam2.png">
      <floor id="Floor 5" url="img/floor5.png">
         <camera id="Reception" pos="185:190" offset="-150" onClick="global.goWork1()" />
         <camera id="Lunch area" pos="140:60" offset="118" onClick="global.goWork2()" />
         <camera id="Staircase" pos="172:125" offset="98" tooltipUrl="img/ttstaircase.jpg" onClick="global.goWork3()" />
      <floor id="Floor 8" url="img/floor8.png" camUrl="img/cam2.png">
         <camera id="My desk" pos="260:230" offset="-52" camUrl="img/camb.png" onClick="global.goWork4()" />
         <camera id="West Gallery" pos="175:190" offset="-88" tooltipUrl="img/ttwest.jpg" onClick="global.goWork5()" />
         <camera id="East Gallery" pos="160:60" offset="-85" onClick="global.goWork6()" />

Version history:

Added support for plugin size in percent of pano height.

Changed default values for salign and margin.

Added font attribute in <tooltip> tag.
Modified plugin command execution during pano loading.

Added onOver and onOut camera attributes.
Fixed problem in setup mode when no camera was defined in xml file.

Added possibility to set the default tooltip offset position - and also separate values for each camera.

Fixed bug when using selectCamera, that could make the camera FPP command excute anyway.

Fixed a bug when setting camera positions.

Fixed a positioning bug.
Modified initialization code.

Making "margin" attribute active also when salign is "M" or "C".
Attribute "currentCamUrl" added for showing "current" camera.
Attribute "fillAlpha" added in <radar> tag for specifying radar center filling.
Attributes "onOver" and "onOut" added for executing commands at plugin mouse-over and mouse-out.
Attribute "textSize" added to <tooltip> tag for setting tooltip text size.

Fixed bug in plugin positioning when pano is resized.

Fixed bug in function waiting for new pano to load.

Added the "bump=camera_id" parameter to be able to show which camera will be selected if you for example click on a certain hotspot.

Fixed problem with plugin and tooltip position when "scale" parameter is used.

Added support for the <button> tag which makes it possible to use buttons in the floorplan.
Added support for tooltip images.
Added a queuing function of plugin commands received during pano loading.