Images and Animations
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 isoptional
. If this is leftnil
, the light mode version will be used.speed
: This is the speed in which the animation is played. The default is1.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 about 1 year ago