Current version: 2.5
Zip file
Feedback form example
FPP XML file
Plugin XML file
Email form example
Plugin XML file
Password form example
Plugin XML file
Password encryptor
Feedback form example
FPP XML file
Plugin XML file
Email form example
Plugin XML file
Password form example
Plugin XML file
Password encryptor
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:| xmlfile | xmlfile=panoform.xml | read plugin parameters from this XML file |
| width | width=400 | form width |
| height | height=300 | form height |
In plugin XML file:
| In <form> tag: | ||
| method | method="POST" | request method, GET (default) or POST |
| reset | reset="1" | reset=1 will reinitialize form after closing, |
| default=0, see below | ||
| bgColor | bgColor="#C0C0C0" | form background color, if missing - |
| background will be transparent. | ||
| borderColor | borderColor="#000000" | form border color, if missing - |
| no border will be drawn. | ||
| font | font="Trebuchet MS" | form default font |
| textSize | textSize="12" | form default text size |
| textColor | textColor="#000000" | form default text color |
| bold | bold="1" | form default font is bold |
| italic | italic="1" | form default font is italic |
| underline | underline="1" | form default font is underlined |
| In <image> tag: | ||
| pos | pos="120:12" | image position (x:y) |
| url | url="images/logo.png" | image url |
| In <label> tag: | ||
| pos | pos="120:12" | label position (x:y) |
| In <box> tag: | ||
| pos | pos="120:12" | box position (x:y) |
| size | size="188:60" | box size (width:height) |
| bgColor | bgColor="#C0C0C0" | box background color |
| borderColor | borderColor="#000000" | box border color |
| In <hidden> tag: | ||
| name | name="id" | hidden parameter name |
| value | value="abcd" | hidden parameter value |
| In <input> tag: | ||
| name | name="id" | input field name |
| pos | pos="120:12" | input field position (x:y) |
| width | width="235" | input field width |
| value | value="abcd" | input field initial value |
| maxChars | maxChars="30" | max number of characters allowed |
| password | password="1" | field will only show asterisks (*) |
| bgColor | bgColor="#C0C0C0" | input field background color |
| borderColor | borderColor="#000000" | input field border color |
| In <textarea> tag: | ||
| name | name="id" | textarea name |
| pos | pos="120:12" | textarea position (x:y) |
| size | size="300:220" | textarea size (width:height) |
| bgColor | bgColor="#C0C0C0" | textarea background color |
| borderColor | borderColor="#000000" | textarea border color |
| In <select> tag: | ||
| name | name="id" | dropdown list name |
| pos | pos="120:12" | dropdown position (x:y) |
| width | width="235" | dropdown width |
| rows | rows="5" | max number of rows shown when opened |
| In <option> child tag: | ||
| value | value="6" | option value |
| selected | selected="1" | option initially selected |
| In <radio> tag: | ||
| name | name="id" | radiobutton group name |
| pos | pos="120:12" | position of first radiobutton (x:y) |
| align | align="H" | alignment of radiobuttons (V=vertical, H=horizontal) |
| spacing | spacing="16" | radiobutton spacing, default=20 |
| In <radiobutton> child tag: | ||
| value | value="6" | radiobutton value |
| selected | selected="1" | radiobutton initially selected |
| In <checkbox> tag: | ||
| name | name="id" | checkbox name |
| pos | pos="120:12" | checkbox position (x:y) |
| value | value="12" | checkbox value |
| selected | selected="1" | checkbox initially checked |
| In <button> tag: | ||
| pos | pos="120:12" | button position (x:y) |
| label | label="OK" | button label text |
| width | width="235" | button width (default is label text width + 35) |
| function | function="send" | form function, "send", "navigate", "cancel" or JavaScript |
| function name, default: "cancel", see NOTES below | ||
| actionUrl | actionUrl="/php/script2.php" | url to which form data will be sent when button |
| is clicked | ||
| tooltip | tooltip="Click here to send email" | |
| tooltip text shown at button mouse-over | ||
| onClick | onClick="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>
<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=""
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:
| send | The 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. | |
| navigate | A new window is opened in the viewers browser, so the url should point to a web |
| page or to a server script generating HTML. | |
| cancel | The button functions as a cancel button - the plugin is closed and no |
| data will be sent. |
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.
"\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.