image

The image widget is set up primarily for displaying an image on the Home Hub or jig.

Image widgets with title component

The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline. For more details, refer to Assets.

Configuration options

Core structure

source

For the URL of the image. The following can be used: - https//: imagesource - image from a datasource referenced in an expression The image source (either a remote URL or a local file resource).This property can contain several remote URLs, specified together with their width and height and scale.The native side will then choose the best uri to display based on the measured size of the image container. A cache property can be added to control how network requests interact with the local cache. Supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).

Other options
bottom	The component will be added to the bottom of the widget.
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
height	Change constraints of an image's height. Use a proper resizeMode to achieve the best results in all different device resolutions.
isContentOverlaid	Specify if the component and description should overlay the image or placed above/ below the image. Use true for overlay, false for above or below.
placeholders	Specify a placeholder text to display if there is no data, for example - title: No data to display.
resizeMode	Determines how to resize the image when the frame doesn't match the raw image dimensions. cover: Scale the image uniformly (maintain the image's aspect ratio)so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). stretch: Scale width and height independently, This may change the aspect ratio of the source. center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up.
top	The component will be added to the top of the widget.

Examples and code snippets

Image widget 2x2

Image widget

An image widget using 2x2 size with component.titles at the bottom to add a name of the image and an icon.

Examples: See the complete example using in GitHub.

image-2_2x2.jigx

widgets:
  image2-2x2:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2159&q=80
      isContentOverlaid: false
      bottom:
        type: component.titles
        options:
          title: Seljalandsfoss
          subtitle: Iceland
          icon: pin

grid-item

Image widget 2x4

An image widget using 2x4 size with component.titles at the top to add a name title and email subtitle and an icon.

Example: See the complete example in GitHub.

Image widget 2x4

image-1_2x4.jigx

widgets:
  image1-2x4:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80
      isContentOverlaid: true
      top:
        type: component.titles
        options:
          title: John Donald
          subtitle: [email protected]
          icon: phone
          align: center

grid-item

Image widget 4x2

Image widget 4x2

An image widget using 4x2 size with component.titles at the bottom to add a location title and an icon on the right.

Example: See the complete example in GitHub.

image-2_4x2

widgets:
  image2-4x2:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1585848705732-e938bf971da6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1546&q=80
      isContentOverlaid: false
      bottom:
        type: component.titles
        options:
          title: Orlicke Hory
          subtitle: Czech Republic
          icon: pin
          align: right
          iconColor: color4

grid-item

Image widget in group widget 4x2

Group image widget 4x2

In this example two image widgets are combined into one group with the component.title at the bottom to show the score and team names.

Example: See the complete example in GitHub.

combined-image-image-1_4x2

widgets:
  combined-image1-4x2:
    type: widget.group
    options:
      children:
        - type: widget.image
          options:
            isContentOverlaid: false
            source:
              uri: https://seeklogo.com/images/O/oakland-athletics-logo-2BAC84D00D-seeklogo.com.png
            resizeMode: contain
            bottom:
              type: component.titles
              options:
                title: "3"
                subtitle: "Oakland Invaders"
                align: center
        - type: widget.image
          options:
            isContentOverlaid: false
            source:
              uri: https://seeklogo.com/images/K/kane-county-cougars-logo-47AAB515C1-seeklogo.com.png
            resizeMode: contain
            bottom:
              type: component.titles
              options:
                title: "2"
                subtitle: "Kane County Cougars"
                align: center

grid-item

Image widget in group widget 4x4

The 4x4 image widget in this example is a simple widget with just an image shown. This is great when you want to combine the widget in another jig.

Image widget 4x4

image-widget 4x4

widgets:
  imageWidget4x4:
    type: widget.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

grid-item