Service and Auth GuidesAPI Reference
Service and Auth Guides

Images and Animations

Suggest Edits

Theming Document

Please refer to this theming document for more detailed information on how to best brand images and animations within the Guided Scan SDK.

How to Customize Images

The Guided Scan SDK allows for many of the images and animations to be branded. Please refer to the above theming documentation for a high level overview of what can be customized. In many of these views we'll talk about, there are also strings that can be customized. We won't customize those here, please refer to Strings for how to do that.

To customize these images and animations, we will use the Guided Scan SDK's public GuidedScanThemeConfig that we initialized in Customizations.

Onboarding Modal

First we'll cover customizing the Onboarding Modal animations with the CustomScanInstructionAnimationsConfig and CustomAnimationConfig

First, the CustomScanInstructionAnimationsConfig lets us customize the introduction and steps 1-4 of the Onboarding Modal. In each of these, we'll use the CustomAnimationConfig. If any step is left nil, the Guided Scan SDK will use a default for that page.

The CustomAnimationConfig has 4 parameters used in the initializer.

  • lightModeName: This is used for the name of the light mode Lottie JSON file.
  • darkModeName: This is used for the name of the dark mode Lottie JSON file. This is optional. If this is left nil, the light mode version will be used.
  • speed: This is the speed in which the animation is played. The default is 1.0.
  • bundle: This is the bundle where the animation is packaged in.

Here's an example:

class ViewController: UIViewControllerSupport {
  ...
  
  func newGuidedScanTapped() {
    ...
    let step1AnimationConfig = CustomAnimationConfig(
      with: "step1LightMode",
      darkModeName: nil,
      speed: 1.25,
      and: Bundle.main)
    let step2AnimationConfig = ...
    let step3AnimationConfig = ...
    let step4AnimationConfig = ...

    // NOTE: If we leave any of the parameters empty or `nil` when initializing CustomScanInstructionAnimationsConfig
    // our experience will use the default animations.
    let brandedScanInstructionAnimationsConfig = CustomScanInstructionAnimationsConfig(
    	introduction: nil, 
      step1: step1AnimationConfig, 
      step2: step2AnimationConfig, 
      step3: step3AnimationConfig, 
      step4: step4AnimationConfig
    )
    let brandedGuidedScanThemeConfig = GuidedScanThemeConfig(customInstructionAnimationsConfig: brandedScanInstructionAnimationsConfig)

    StreemGuidedScan.shared.guidedScanThemeConfig = brandedGuidedScanThemeConfig
    StreemGuidedScan.shared.startGuidedScan(presenter: self)
  }
  
  ...
}

Post Scan Modal

Next, we'll cover the Post Scan Modal animations and images with the CustomGeneratingFloorplanAnimationsConfig and the CustomAnimationConfig explained above in the Onboarding Modal section.

With the CustomGeneratingFloorplanAnimationsConfig, we can customize steps 1-5's animation and image background. We have the option to use a custom animation, an image background, or both. If we use both at the same time, they are layered on top of each other. This means we need to make sure they are lined up and the dimensions are the same. There is an example of this when using the default Guided Scan SDK experience.

Each of these can be set in the initializer, for example, step1 is used for the animations for step 1. step1Background is used for the background image of step 1's background. This continues on for step2, step3, step4, and step5. If any part is left nil, the Guided Scan SDK default will be used.

Here's an example:

class ViewController: UIViewControllerSupport {
  ...
  
  func newGuidedScanTapped() {
    ...
    let step1AnimationConfig = CustomAnimationConfig(
      with: "step1LightMode", // This is the name of your light mode Lottie json file. 
      darkModeName: "step1DarkMode", // If no animation is provided, the lightmode version will be used.
      speed: 1.25, // The speed at which the animation is played.
      and: Bundle.main) // The bundle the animation is packaged in.
    let step1Image = UIImage(named: "step1Image")
    
    let step2AnimationConfig = ...
    
    let step3AnimationConfig = ...
    let step3Image = ...
    
    let step4Image = ...

    // NOTE: If we leave any of the parameters empty or `nil` when initializing CustomGeneratingFloorplanAnimationsConfig
    // our experience will use the default animations and images.
    let brandedGeneratingFloorplanAnimationsConfig = CustomGeneratingFloorplanAnimationsConfig(
      step1: step1AnimationConfig, 
      step1Background: step1Image, 
      step2: step2AnimationConfig, 
      step2Background: nil, 
      step3: step3AnimationConfig, 
      step3Background: step3Image, 
      step4: nil, 
      step4Background: step4Image, 
      step5: nil, 
      step5Background: nil
    )
    let brandedGuidedScanThemeConfig = GuidedScanThemeConfig(customGeneratingFloorplanAnimationsConfig: brandedGeneratingFloorplanAnimationsConfig)

    StreemGuidedScan.shared.guidedScanThemeConfig = brandedGuidedScanThemeConfig
    StreemGuidedScan.shared.startGuidedScan(presenter: self)
  }
  
  ...
}

Settings Menu Icons

We can customize the three settings menu icons inside the Floor Plan View using the CustomImageConfig. The CustomImageConfig initializer has 3 parameters to handle each of the icons, i.e.,:

  • meshIcon: The mesh icon inside the settings menu on the floor plan view.
  • layoutEstimationIcon: The layout estimation icon inside the settings menu on the floor plan view.
  • texturedMeshEstimationIcon: The textured mesh icon inside the settings menu on the floor plan view.

Note: If we pass nil to any of these, the Guided Scan SDK default will be used.

Here is an example:

class ViewController: UIViewControllerSupport {
  ...
  
  func newGuidedScanTapped() {
    ...

    let brandedCustomImageConfig = CustomImageConfig(
      with: UIImage(named: "branded-mesh-icon"),
      layoutEstimationIcon: UIImage(named: "branded-layout-icon"),
      texturedMeshEstimationIcon:  UIImage(named: "branded-photo-icon")
    )
    
    let brandedGuidedScanThemeConfig = GuidedScanThemeConfig(
    	customImageConfig: brandedCustomImageConfig
    )

    StreemGuidedScan.shared.guidedScanThemeConfig = brandedGuidedScanThemeConfig
    StreemGuidedScan.shared.startGuidedScan(presenter: self)
  }
  
  ...
}

Updated over 1 year ago

What’s Next