Flip - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

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>

logo See it in Action

Other Widgets You May Find Useful

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️