IFRAME - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<IFRAME/> : ViewableWidget
The IFRAME widget is used to render web content.
- If an
IMAGE'sfitis set to height or width it will override the opposing value when trying to set its size. -IMAGEwill size to its actual size by default, it will not expand to its parent but it will shrink to fit rather than overflow. - The
IMAGEonce loaded will remain in memory until the application reloads.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| url | string | null | The url the image will be retrieved from. | |
| opacity | int | null | The opacity of the image. | |
| fit | string | 'cover' | The fit of the image. 'cover', 'height', 'width', 'fill', 'contain', 'scale', 'none' | |
| interactive | bool | false | Allows for pinch/pan gestures on mobile and drag/scroll on web & desktop |
<FML>
<BOX layout="stack" width="256" height="256">
<IMAGE url="resources/images/doge.png" width="256" height="256" />
<POS bottom="10" left="110">
<TEXT value="**woof**" />
</POS>
</BOX>
</FML>
Graphic result of different fit attribute values
<FML title="IMAGE (example2)" linkable="true">
<SCROLLER>
<BOX center="true">
<BOX height="300" width="300" radius="30">
<VAR id="angle" value="=round({angleslider}, 2)" />
<STACK height="300" width="300">
<IMAGE url="https://pad.fml.dev/images/gauge.png?v=1234" />
<POSITION bottom="80" left="100">
<BOX height="40" width="100" color="#000000" />
</POSITION>
<POSITION bottom="0">
<BOX height="80" width="300" color="#AF1D1D1D,#000000" start="top" end="bottom"/>
</POSITION>
<IMAGE url="https://pad.fml.dev/images/needle.png" rotation="{angle}"/>
<POSITION bottom="0">
<SLIDER id="angleslider" color="orange" minimum="-120" maximum="120" divisions="60" range="false" value="0" width="300" />
</POSITION>
<POSITION bottom="58" left="90">
<TEXT value="{angle} degrees" color="white" size="24" bold="true" />
</POSITION>
<POSITION bottom="40" left="40">
<TEXT value="Slide to rotate the needle image" color="white" shadowcolor="black" elevation="3" size="16" />
</POSITION>
</STACK>
</BOX>
</BOX>
</SCROLLER>
</FML>