Passing data with dynamic Frogans slides

Site example: Color this froggy

Here’s an example site that uses the same principle as in the example above, except that everything takes place on one slide and instead of letting the user choose a photo to display, it lets the user choose the color of a resource created with a <respath> element.

When you open the site, it looks like this:

frog3

You can get the source file here. You can upload it to a folder that is in the same directory that contains the “private” folder (which in turn contains “FsdlRequestParser.php”). You can also view this site online as a “test*” site by pasting this into your Frogans Player’s “configuration-for-testing.xml” file:

 <test-frogans-site address='test*parseme'>
        <frogans-site-root-directory>
            <ucsr-path network='IP_DNS_TCP_HTTP'>
                <location>public</location>
                <domain-name>frogans-lab.com</domain-name>
                <port>80</port>
                <directory>/test/parseme</directory>
            </ucsr-path>
        </frogans-site-root-directory>
        <fsdl-documents>
            <version>3.0</version>
            <encoding>UTF-8</encoding>
        </fsdl-documents>
        <home-slide-file>/home.php</home-slide-file>
    </test-frogans-site>

The slide is set up so that, when you click on one of the four buttons, you will send a piece of data indicating the color red, green, blue or black. So, for each of the four buttons on the slide, there is

  • a <setdata> element – for determining the chunk of data that will be sent;
  • a <file> element – indicating the same source file, but with a unique chunk of data, and
  • a <button> element – taking the user to the file

So, for the Red button, I have a <setdata> element that looks like this: <setdata dataid=’red_d‘>

<data key='color'>ff0000</data>
</setdata>

…where “color” = “ff000” (a hexacolor value for bright red).
Also for the Red button, I have a <file> element that looks like this:

<file fileid='red_f' nature='dynamic' name='/home.php' dataref='red_d'/>

This element refers to the same source file that we are working on, but the data found in <setdata dataid=’red_d’>.
Finally, in the <button> element:

<button buttonid='btn_red' goto='slide' fileref='red_f'>

...

</button>

So, when the user clicks on the Red button, Frogans Player will request the document from the <file> element, with the dataref from the <setdata> element which contains the data in which “color”=”ff000.”

In the PHP code at the beginning of the file, you can see:

$fcolor=$fileFields['color'];

When the Red button has been clicked, and “color”=”ff0000,” the PHP script will identify “$fileFields[‘color’]” as being “ff000.”

So, the <setpath> element (which draws the froggy), is coded such that

color='<?php  print('#'.$fcolor);?>'

But when Frogans Player reads the file after it has been interpreted by the server, the “color” in the <setpath> element looks like this:

color='#ff0000'

To sum it all up

When you click on the Red, Blue, Green or Black button, the slide reloads with the froggy in the corresponding color. This is because each <button> has a corresponding <setdata> and <file> assuring that the corresponding color data is encoded in the FSDL Request file. When the slide reloads, the “color” attribute of the drawing is determined by that data. There are many steps, but in the end the basis is simple and easy to replicate.

 

 

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*