GrayScale - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
The GRAYSCALE transform is used to transform an Image Datasource. The GRAYSCALE transform converts a CAMERA, FILEPICKER or Data Uri image field to gray scale.
| 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 |
This example shows how to select an image from a filepicker, maintain the original image in "fp1" and transform the chosen image using GRAYSCALE
<FILEPICKER id="fp1" allow=".jpg,.png">
<DATA id="ds1">
<GREYSCALE source="{fp1.data.file}"/>
</DATA>
</FILEPICKER><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>