floorplan.swf
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 put 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.
The following parameters are supported:
Parameter names are not case sensitive ("XMLFile" is equal to xmlfile"). Parameter values, on the other hand, will be savedexactly as written.
In FPP xml file:
| xmlfile | xmlfile=floorplan.xml | read plugin parameters from this XML file |
| setupMode | setupMode=1 | initiates setup mode - see details below |
and the following parameters can be updated dynamically from FPP:
| visible | visible=T | 0 or 1, any other value toggles visibility |
| alpha | alpha=0.6 | sets floorplan alpha when not mouse-over |
| scale | scale=0.75 | sets floorplan scale |
| goCamera | goCamera=Salon | selects camera and executes FPP command |
| selectCamera | selectCamera=Dining Room | selects camera WITHOUT executing FPP command |
| bump | bump=Kitchen | bump camera image to make it stand out |
| xmlfile | xmlfile=floorplan.xml | read new plugin parameters from this XML file |
In external xml file:
| In <floorplan> tag: | ||
| salign | salign="TR" | floorplan position T(op),M(iddle),B(ottom) and |
| L(eft),C(enter),R(ight) default=TC | ||
| margin | margin="10" | margin to pano edges, default=10 |
| or | ||
| margin="15:10" | horizontal margin:vertical margin | |
| alpha | alpha="0.60" | sets floorplan alpha when not mouse-over, default=1.0 |
| scale | scale="0.75" | sets floorplan scale, default=1.0 |
| visible | visible="0" | 0 or 1, any other value toggles visibility |
| shadow | shadow="1" | 0 or 1, plugin dropdown shadow, default=0 |
| camUrl | camUrl="files/cam4.png" | default camera icon url |
| currentCamUrl | currentCamUrl="files/camc.png" | default current camera icon url |
| visitedCamUrl | visitedCamUrl="files/cam4v.png" | default visited camera icon url |
| setupMode | setupMode="1" | makes plugin enter setup mode, default=0 |
| onOver | onOver="global.expandFloor" | FPP command(s) to execute at plugin mouse-over |
| onOut | onOut="global.shrinkFloor" | FPP command(s) to execute at plugin mouse-out |
| In <radar> tag: | ||
| visible | visible="0" | radar visibility, 0 or 1, default=1 |
| size | size="40" | size of radar cone, default=30 |
| color | color="#8080FF" | radar color, default=#000000 |
| fillAlpha | fillAlpha="0.15" | radar center filling alpha, default=no filling |
| In <tooltip> tag: | ||
| visible | visible="0" | tooltip visibility, 0 or 1, default=1 |
| textColor | textColor="#505050" | text color, default=#000000 |
| textSize | textSize="11" | text size, default=10 |
| bgColor | bgColor="#E0E0C0" | background color, default=#FFFFFF |
| borderColor | borderColor="#FF0000" | border color, default=#000000 |
| In <building> tag: | ||
| id | id="Villa" | building id |
| camUrl | camUrl="files/cam4.png" | building camera icon url |
| currentCamUrl | currentCamUrl="files/camc.png" | building current camera icon url |
| visitedCamUrl | visitedCamUrl="files/cam4v.png" | building visited camera icon url |
| In <floor> tag: | ||
| id | id="Upstairs" | floor id |
| url | url="files/upstairs.png" | floorplan image url |
| camUrl | camUrl="files/cam4.png" | floor camera icon |
| currentCamUrl | currentCamUrl="files/camc.png" | floor current camera icon url |
| visitedCamUrl | visitedCamUrl="files/cam4v.png" | floor visited camera icon |
| In <camera> tag: | ||
| id | id="Salon" | camera id |
| pos | pos="22:64" | camera icon position |
| offset | offset="124" | pano offset angle (pan=0 + offset = radar angle) |
| camUrl | camUrl="files/cam4.png" | camera icon url |
| currentCamUrl | currentCamUrl="files/camc.png" | current camera icon url |
| visitedCamUrl | visitedCamUrl="files/cam4v.png" | visited camera icon url |
| tooltipUrl | tooltipUrl="files/room4.png" | tooltop image url |
| command | command="goKitchen()" | command(s) to execute when camera is clicked or selected |
| selected | selected="1" | this camera will be selected at plugin init |
| In <button> tag: | ||
| id | id="Salon" | button id |
| pos | pos="22:64" | button image position |
| url | url="files/button1.png" | button image url |
| command | command="goKitchen()" | command(s) to execute when button is clicked |
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 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" parameter is for showing which camera will be selected when you for example click on a hotspot. 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
" as %22
Example XML file:
<?xml version = '1.0'?>
<floorplan
salign="TC"
margin="-150:15"
alpha=""
scale="0.6"
visible="1"
shadow="1"
currentCamUrl="img/cam1.png"
visitedCamUrl="img/camv.png"
onOver="global.expandFloor"
onOut="global.shrinkFloor"
>
<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" command="global.goHome6()" selected="1" />
<camera id="Kitchen" pos="33:225" offset="-53" command="global.goHome1()" />
<camera id="Livingroom" pos="20:35" offset="113" tooltipUrl="img/ttlivingroom.jpg" command="global.goHome2()" />
<camera id="Hallway" pos="160:35" offset="-151" command="global.goHome3()" />
<camera id="Bedroom" pos="305:35" offset="-53" tooltipUrl="img/ttbedroom.jpg" command="global.goHome4()" />
<camera id="Guestroom" pos="20:100" offset="0" command="global.goHome5()" />
<button id="Get lost" pos="308:233" url="img/black_x.png" command="global.buttonCommand1()" />
</floor>
</building>
<building id="Eniro" camUrl="img/cam2.png">
<floor id="Floor 5" url="img/floor5.png">
<camera id="Reception" pos="185:190" offset="-150" command="global.goWork1()" />
<camera id="Lunch area" pos="140:60" offset="118" command="global.goWork2()" />
<camera id="Staircase" pos="172:125" offset="98" tooltipUrl="img/ttstaircase.jpg" command="global.goWork3()" />
</floor>
<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" command="global.goWork4()" />
<camera id="West Gallery" pos="175:190" offset="-88" tooltipUrl="img/ttwest.jpg" command="global.goWork5()" />
<camera id="East Gallery" pos="160:60" offset="-85" command="global.goWork6()" />
</floor>
</building>
</floorplan>