Home -> FPP plugins page -> panoform.swf
This plugin is completely free for use in any context or connection.
panoform.swf
FPP hotspot plugin for showing an input form that very much works as a standard HTML input form, where the viewer can enter data and make selections, and then send the completed form to the server. It can of course also be used as an email contact form, but as Flash cannot send emails by itself, you will either need a server side script or open up the viewers email client.

You can choose whether to send the form data quietly to the server, open up a new browser window or send the data to a JavaScript function via ExternalInterface. You can also use form data to build FPP commands.

Together with the panologic plugin you can easily implement password protection of your panos or tour functions.

Form request method is GET or POST.

The following parameters are supported:

Hotspot attributes in FPP xml file:
xmlfilexmlfile=panoform.xmlread plugin parameters from this XML file
widthwidth=400form width
heightheight=300form height



In plugin XML file:

In <form> tag:
methodmethod="POST"request method, GET (default) or POST
resetreset="1"reset=1 will reinitialize form after closing,
default=0, see below
bgColorbgColor="#C0C0C0"form background color, if missing -
background will be transparent.
borderColorborderColor="#000000"form border color, if missing -
no border will be drawn.
fontfont="Trebuchet MS"form default font
textSizetextSize="12"form default text size
textColortextColor="#000000"form default text color
boldbold="1"form default font is bold
italicitalic="1"form default font is italic
underlineunderline="1"form default font is underlined
In <image> tag:
pospos="120:12"image position (x:y)
urlurl="images/logo.png"image url
In <label> tag:
pospos="120:12"label position (x:y)
In <box> tag:
pospos="120:12"box position (x:y)
sizesize="188:60"box size (width:height)
bgColorbgColor="#C0C0C0"box background color
borderColorborderColor="#000000"box border color
In <hidden> tag:
namename="id"hidden parameter name
valuevalue="abcd"hidden parameter value
In <input> tag:
namename="id"input field name
pospos="120:12"input field position (x:y)
widthwidth="235"input field width
valuevalue="abcd"input field initial value
maxCharsmaxChars="30"max number of characters allowed
passwordpassword="1"field will only show asterisks (*)
bgColorbgColor="#C0C0C0"input field background color
borderColorborderColor="#000000"input field border color
In <textarea> tag:
namename="id"textarea name
pospos="120:12"textarea position (x:y)
sizesize="300:220"textarea size (width:height)
bgColorbgColor="#C0C0C0"textarea background color
borderColorborderColor="#000000"textarea border color
In <select> tag:
namename="id"dropdown list name
pospos="120:12"dropdown position (x:y)
widthwidth="235"dropdown width
rowsrows="5"max number of rows shown when opened
In <option> child tag:
valuevalue="6"option value
selectedselected="1"option initially selected
In <radio> tag:
namename="id"radiobutton group name
pospos="120:12"position of first radiobutton (x:y)
alignalign="H"alignment of radiobuttons (V=vertical, H=horizontal)
spacingspacing="16"radiobutton spacing, default=20
In <radiobutton> child tag:
valuevalue="6"radiobutton value
selectedselected="1"radiobutton initially selected
In <checkbox> tag:
namename="id"checkbox name
pospos="120:12"checkbox position (x:y)
valuevalue="12"checkbox value
selectedselected="1"checkbox initially checked
In <button> tag:
pospos="120:12"button position (x:y)
labellabel="OK"button label text
widthwidth="235"button width (default is label text width + 35)
functionfunction="send"form function, "send", "navigate", "cancel" or JavaScript
function name, default: "cancel", see NOTES below
actionUrlactionUrl="/php/script2.php"url to which form data will be sent when button
is clicked
tooltiptooltip="Click here to send email"
tooltip text shown at button mouse-over
onClickonClick="mailSent"FPP command to execute when button is clicked


Furthermore, the following tags can contain text formatting attributes:
<label>
<input>
<textarea>
<select>
<radio>
<checkbox>
<button>


Font attributes not given in these tags are taken from the <form> tag.

The text formatting attributes are:
font=""
textSize=""
textColor=""
bold=""
italic=""
underline=""




NOTES:

The form fields get their tab order from the order in which they are entered in the XML file.


When form request method "GET" is used all form data will be appended to the url as parameters in the usual way: http://url?name=value&name=value... Request method "POST" is better suited when you have many parameters or more data - as for example in an email contact form. The form data is then sent separately to the server and will never show in the url.


When the reset="1" attribute is included, all form data will be reinitialized after the form has been closed. This will ensure that the form will look exactly the same every time it is reopened.


The function="..." attribute in the <button> tag decides what action is to be taken when the button is clicked:
sendThe form data is just being sent quietly to the server without waiting for
any response. The url is probaly pointing to a server side script (Perl, PHP)
that takes care of the form data.
navigateA new window is opened in the viewers browser, so the url should point to a web
page or to a server script generating HTML.
cancelThe button functions as a cancel button - the plugin is closed and no
data will be sent.
Anything else specified in this attribute will be interpreted as the name of a JavaScript function, which will be called via the ExternalInterface API with all form data passed as parameters.


In the onClick command, you can now include form values that the viewer has entered by using the placeholder $(name), where "name" is the name of an input field, textarea, select list, checkbox or radio button. So, if you for example have an input field with name="username", you can use the value entered by the viewer in your FPP command by writing $(username).


"\n" can be used in the <label> and <textarea> tags to generate line breaks.


To support password protection, you can also encrypt data sent to - for example - the panoform plugin for validation of the password. The field value will be encrypted when an asterisk (*) is added before the field name in the onClick string.
Example: onClick="external.panologic.check1=$(*pswd)"

An encryptor (encrypt.html) is included for generating encrypted values.



Example 1:
<?xml version = '1.0'?>
<form
   bgColor="#FFFFF0" borderColor="#404040"
   font="Trebuchet MS" textSize="12" textColor="#404040" 
   method="GET"
   >
   <hidden name="hid1" value="1111" />
   <hidden name="hid2" value="222222" />
   <image pos="12:12" url="images/logo1.png" />
   <label pos="120:12" textSize="16" bold="1">This is my FPP form</label>
   <label pos="120:55">Enter your name here</label>
   <input pos="120:75" width="235" name="name" value="" font="Courier New" textSize="11" maxChars="" bgColor="#E8E8D8" borderColor="#D0D0C0" />
   <label pos="120:105">Hotel category</label>
   <select name="category" pos="120:125" width="235" rows="3" font="Courier New" textSize="11">
      <option value="1">Cheapest possible</option>
      <option value="2">Clean - with no rats</option>
      <option value="3" selected="1">Better than home</option>
      <option value="4">Really luxurious</option>
      <option value="5">Penthouse out of this world</option>
   </select>
   <label pos="25:165">Room choice:</label>
   <box pos="25:185" size="188:60" bgColor="#E8E8D8" />
   <radio name="room_type" pos="28:190" spacing="22" textSize="10" textColor="#FF0000">
      <radiobutton value="S" selected="1">Single room</radiobutton>
      <radiobutton value="D">Double room with king size bed</radiobutton>
   </radio>
   <label pos="230:165">Any extras?</label>
   <box pos="230:185" size="125:60" borderColor="#000000" />
   <checkbox name="view" pos="235:190" value="1" textSize="10" textColor="#0000FF">With a view</checkbox>
   <checkbox name="shower" pos="235:210" value="1" checked="1" textSize="10" bold="1">Shower, please</checkbox>
   <label pos="25:250">Give feedback:</label>
   <textarea pos="25:270" name="description" size="330:130" bgColor="#E8E8D8" borderColor="#D0D0C0">
      The cat was playing in the garden.
   </textarea>
   <button
      pos="190:390" 
      label="Send" 
      actionUrl="http://wirestam.com/php/mailscript2.php" 
      width="60" 
      function="send"
      onClick="global.mailSent"
   />
   <button pos="200:410" label="Cancel" function="cancel" />
</form>
							
Example 2:
<?xml version = '1.0'?>
<form
   method="POST"
   font="Trebuchet MS" textSize="12" textColor="#606060" bold="1" italic="1"
   >
   <hidden name="param1" value="Reply from panoform plugin" />
   <image pos="0:0" url="images/envelope2.png" />
   <label pos="130:15" textSize="16">Why don't you send me an email?</label>
   <label pos="140:45">Enter your name here:</label>
   <input pos="140:65" width="200" name="name" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:85">Your email address:</label>
   <input pos="140:105" width="200" name="email" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:125">Subject:</label>
   <input pos="140:145" width="200" name="subject" value="" borderColor="#A0A0A0" font="Courier New" textColor="#000000" textSize="12" maxChars="" />
   <label pos="140:175">Your message:</label>
   <textarea pos="140:195" name="content" size="260:185" borderColor="#A0A0A0" textColor="#000000" bold="0">
      The cat was playing in the garden...
   </textarea>
   <button 
      pos="190:390" 
      label="Send" 
      actionUrl="http://wirestam.com/php/mailscript2.php" 
      width="60" 
      function="send"
      onClick="global.mailSent"
   />
   <button pos="270:390" label="Cancel" function="cancel" />
</form>
							
Example 3:
<?xml version = '1.0'?>
<form reset="1" bgColor="#1C492F" borderColor="#000000" font="Trebuchet MS" textSize="12" textColor="#404040" bold="1" >
   <image pos="1:5" url="images/lock.png" />
   <label pos="135:18" textSize="15" textColor="#FFFFF0">Enter password:</label>
   <input pos="135:50" width="120" name="pswd" password="1" textSize="13" bgColor="#E8E8D8" borderColor="#000000" />
   <button pos="120:110" label="OK" bold="1" width="60" onClick="external.panologic.pano2=$(*pswd)" />
   <button pos="200:110" label="Cancel" function="cancel" />
</form>
							
Version history:
2.5:
"\n" can now be used in the <label> and <textarea> tags to generate line breaks.

2.4.1:
Fixed bug when no radiobutton in a group is selected.

2.4:
Added attribute spacing="nn" in <radio> tag.

2.3:
Form element data used in the onClick command can now be encrypted by preceding the field name with an asterisk(*).
Form input fields used for example as password fields can now be visibly protected to show only asterisks (*).
The reset="1" attribute added to the <form> tag for reinitializing all form fields after pressing a button.

2.2:
Added the possibility to use the values of form elements in button onClick command.

2.1.1:
Fixed bug when processing Enter key in form input.

2.1:
Added the possibility to specify the name of a JavaScript function in the function="..." attribute in the <button> tag.

2.0:
The plugin has been more adapted to work as an email contact form.

1.3:
XML parsing changed so that fields get their tab order from the order in which they are entered in the XML file.

1.2:
No default for border and background color - if not specified, no border is drawn and background will be transparent. "bgColor" and "borderColor" attributes supported in <input> and <textarea> tags

1.1:
Added support for <textfield> tag. Added support for request method POST.