FLIP

Overview

The FLIP transform is used to transform an Image Datasource.

Restrictions:

Attributes

Name	Type	Default	Description	Req
id	string		Datasource id to allow binding	✔
source	string		The field name of the image source. This can also be a bound {} value	✔
target	string		The field name of the image target. If omitted, it uses the source field (overwrite)
enabled	bool	true	If false, the transform is not applied
axis	string (vertical, horizontal)	vertical	The axis used for flip

Examples

Example #1

This example shows how to select an image from a filepicker, maintain the original image in "fp1" and transform the chosen image using the FLIP transform across both the horizontal and vertical axis.

Partial Example (important bits)

<FILEPICKER id="fp1" allow=".jpg,.png">
  <DATA id="ds1">
    <FLIP source="{fp1.data.file}" axis="vertical"/>	
  </DATA>	
  <DATA id="ds2">
    <FLIP source="{fp1.data.file}" axis="horizontal"/>	
  </DATA>	
</FILEPICKER>

Full Example

<FML>    
    <!-- File Picker Data Source -->
    <FILEPICKER id="fp1" allow=".jpg,.png">
        <!-- Vertical Flip -->
		<DATA id="ds1">
            <FLIP source="{fp1.data.file}" axis="vertical"/>    
        </DATA> 
		<!-- Horizontal Flip -->
        <DATA id="ds2">
            <FLIP source="{fp1.data.file}" axis="horizontal"/>  
        </DATA> 
    </FILEPICKER>

    <PAD top="20"/>
	
    <!-- This is the original image -->
    <TEXT size="12" label="ORIGINAL"/>
    <BOX expand="false" width="200" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{fp1.data.file}"/>
        <BUSY visible="{fp1.busy}" size="30"/>
    </BOX>
    
	<PAD top="10"/>
    
    <!-- This is the transformed image flipped vertically -->
   <TEXT size="12" label="FLIPPED (vertically)"/>
   <BOX expand="false" width="200" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{ds1.data.file}"/>
        <BUSY visible="{ds1.busy}" size="30"/>
    </BOX>
    
    <PAD top="10"/>
    
    <!-- This is the transformed image flipped horizonatally -->
    <TEXT size="12" label="FLIPPED (horizontally)"/>
    <BOX expand="false" width="200" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{ds2.data.file}"/>
        <BUSY visible="{ds2.busy}" size="30"/>
    </BOX>

    <PAD top="10"/>

    <LINK onclick="fp1.start()">
        <ICON icon="add_a_photo" visible="=!{fp1.busy}"/>
    </LINK>     
</FML>

See it in Action

Other Widgets You May Find Useful

• CROP
• GRAYSCALE
• RESIZE
• CAMERA
• FILEPICKER
• Datasource