GRAYSCALE

Overview

The GRAYSCALE transform is used to transform an Image Datasource.

Usage

The GRAYSCALE transform converts a CAMERA, FILEPICKER or Data Uri image field to gray scale.

Ideals:

• To allow the user to convert an image to gray scale.

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

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 GRAYSCALE

Partial Example (important bits)

<FILEPICKER id="fp1" allow=".jpg,.png">
  <DATA id="ds1">
    <GREYSCALE source="{fp1.data.file}"/>   
  </DATA>
</FILEPICKER>

Full Example

<FML title="IMAGE TRANSFORMS (Grayscale)" linkable="true">

	<!-- File Picker Data Source -->
    <FILEPICKER id="fp1" allow=".jpg,.png">
        <DATA id="ds1">
            <GREYSCALE source="{fp1.data.file}"/>   
        </DATA>
    </FILEPICKER>

    <PAD top="20"/>
	
	<!-- This is the original image -->
    <TEXT size="12" label="ORIGINAL"/>
    <BOX expand="false" width="200" minheight="75" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{fp1.data.file}"/>
        <BUSY visible="{fp1.busy}" size="50" expand="false" color="red"/>
    </BOX>
    
	<PAD top="10"/>
	
	<!-- This is the transformed image -->
    <TEXT size="12" label="GRAYSCALE"/>
    <BOX expand="false" width="200" minheight="75" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{ds1.data.file}"/>
        <BUSY visible="{ds1.busy}" size="50" expand="false"/>        
    </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
• FLIP
• RESIZE
• CAMERA
• FILEPICKER
• Datasource