📘

Source code

Please see the UgBitmapDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples. The URL is here for direct access is https://github.com/scadedoc/UgExamples/tree/master/UgBitmapDemo2

Introduction

Using the bitmap control, you can display images sourced from within the app or dynamically downloaded from the internet.

As with all of our controls, the controls represent a wrapper around the native controls and expose a subset of their functionality to users:

• We support the following formats : PNG, SVG, and JPG
• We support SVG-based scaling of the bitmap

Image Control attributes

Static image references

The image control serves the purpose of adding new images to an app, but it isn't active until you've placed one or more images/bitmaps in the Assets folder (or a subfolder).

Use the IMAGE Path found on the lower end of the Page Editor Panel to set a bitmap on the image control you have selected:

Scale Mode, Alignment and Wrap/Fill

The scale mode describes how the bitmap fits into the current area. You can combine the scale mode and the alignment for best fit.

• Scale mode: none, Fit into Parent (Meet), Fill Parent (slice)
• Alignment (6 different positions)
• Wrap/Fill: Wrap/fill contents in minimal/maximum spaces

📘

Scaling Factor Articles

These articles explain scaling factor in detail. In case its needed

• http://unmatchedstyle.com/news/svg-and-the-preserveaspectratio-property.php
• https://sarasoueidan.com/demos/interactive-svg-coordinate-system/#CheatSheet

Setting Bitmaps using Code

You always have to make TWO settings

• make sure you specify the path in the url field correctly. It's <resource folder name>/<image.png|jpg|svg>
• make sure you set the isContentPriority to false

import ScadeKit
  
class BindingAndScalePagePageAdapter: SCDLatticePageAdapter {
  
  // page adapter initialization
  override func load(_ path: String) {
    super.load(path)
    
    self.image2.url = "Assets/dog2.jpg"
    self.image2.contentPriority = false
    
    self.main.onClick.append(SCDWidgetsEventHandler{_ in self.navigation!.go(page: "main.page")})
  }
}

Setting images using raw data from download

To use images that don't exist on the app yet, we use the SCDNetworkRequest and SCDNetworkResponse objects to download the data:

• set the content field with the raw image data received from the network call
• make sure you set the isContentPriority to true

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {
	
   // page adapter initialization
   override func load(_ path: String) {		
	   super.load(path)
		
   // adding 2nd page btn 
   self.itmBinding.onClick{_ in self.navigation!.go(page: "BindingAndScalePage.page")}
		
		
   // get reference to second bitmap and set bitmap
   self.image2.url = "Assets/dog2.jpg"
   self.image2.contentPriority = false
		
   // network image to be downloaded
   let externalurl = "https://i.pinimg.com/originals/08/2c/ce/082cce3add1418e48ef80208694e8f86.png"
    
    // Create URL
    let url = URL(string: externalurl)!
    DispatchQueue.main.async {
      // Fetch Image Data
      if let data = try? Data(contentsOf: url) {
        DispatchQueue.main.async {
          // Create Image and Update Image Control
          self.image3.contentPriority = true
          self.image3.content = data
        }
      }
    }
		
  }
}

The Image Control Video Tutorial