Resize - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
The RESIZE transform is used to transform an Image Datasource.
| 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 | |
| width | int | The resized width in pixels | ✔ | |
| height | int | The resized height in pixels | ✔ |
This example shows how to select an image from a filepicker, mantain the original image in "fp1" and transform the chosen image using RESIZE.
Partial solution (important bits)
<FILEPICKER id="fp1" allow=".jpg,.png">
<DATA id="ds1">
<RESIZE source="{fp1.data.file}" width="{w}" height="{h}"/>
</DATA>
</FILEPICKER>Full Example
<FML>
<!-- File Picker Data Source -->
<FILEPICKER id="fp1" allow=".jpg,.png">
<DATA id="ds1">
<RESIZE source="{fp1.data.file}" width="{w}" height="{h}"/>
</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 resized image -->
<TEXT size="12" label="RESIZED"/>
<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"/>
<!-- user specified width and height -->
<ROW expand="false">
<INPUT id="w" hint="width" value="100" allow="0-9" width="60"/>
<PAD left="2"/>
<INPUT id="h" hint="height" value="100" allow="0-9" width="60"/>
</ROW>
<PAD top="10"/>
<LINK onclick="fp1.start()">
<ICON icon="add_a_photo" visible="=!{fp1.busy}"/>
</LINK>
</FML>