components_ui_BackdropFader.bs
sub init()
m.background = m.top.findNode("background")
m.oldBackground = m.top.findNode("oldBackground")
m.oldbackgroundInterpolator = m.top.findNode("oldbackgroundInterpolator")
m.shade = m.top.findNode("shade")
m.oldBackgroundFadeout = m.top.findNode("oldBackgroundFadeout")
m.shadeFadeoutAnimation = m.top.findNode("shadeFadeoutAnimation")
m.fadeinAnimation = m.top.findNode("fadeinAnimation")
m.currentUri = "pkg:/images/transparent-16x9.png"
applyTheme()
m.background.observeField("bitmapWidth", "onBackgroundLoaded")
m.top.observeField("width", "onSizeChange")
m.top.observeField("height", "onSizeChange")
m.top.observeField("scaleMode", "onSizeChange")
m.top.observeField("uri", "onUriChange")
end sub
sub applyTheme()
constants = m.global.constants
' Set shade color (fully opaque, we'll control visibility with opacity field)
m.shade.color = constants.colorBlack + constants.alpha100
' Initialize parent Rectangle color as transparent (no darkening for transparent images)
m.top.color = constants.colorBlack + constants.alpha0
' Initialize shade opacity
m.shade.opacity = 0
end sub
' If Size changed, change parameters to children
sub onSizeChange()
m.background.width = m.top.width
m.oldBackground.width = m.top.width
m.shade.width = m.top.width
m.oldBackground.loadWidth = m.top.width
m.background.loadWidth = m.top.width
m.oldBackground.height = m.top.height
m.background.height = m.top.height
m.shade.height = m.top.height
m.oldBackground.loadHeight = m.top.height
m.background.loadHeight = m.top.height
m.oldBackground.loadDisplayMode = m.top.scaleMode
m.background.loadDisplayMode = m.top.scaleMode
end sub
sub onBackgroundLoaded()
transparentImage = "pkg:/images/transparent-16x9.png"
' Handle opacity changes
if m.currentUri = transparentImage
' Keep background transparent (don't touch oldBackground - let fadeout animation handle it)
m.background.opacity = 0
else if m.top.isAnimated
' Fade in new background and show shade
m.shade.opacity = 0.6
m.shade.visible = true
m.fadeinAnimation.control = "start"
else
' No animation: immediately show background and shade
m.background.opacity = 1.0
m.oldBackground.opacity = 0
m.shade.opacity = 0.6
m.shade.visible = true
end if
end sub
sub onUriChange()
changeImage(m.top.uri, m.top.isAnimated)
end sub
sub changeImage(uri as string, isAnimated as boolean)
oldUrl = m.currentUri
transparentImage = "pkg:/images/transparent-16x9.png"
constants = m.global.constants
' Normalize empty URI to transparent image for comparison
newUri = uri
if uri = invalid or uri = ""
newUri = transparentImage
end if
' Early return if URI hasn't changed - no need to re-set same image
if newUri = oldUrl then return
' Handle empty URI - use transparent image
if uri = invalid or uri = ""
m.currentUri = transparentImage
' Remove parent darkening for transparent image
m.top.color = constants.colorBlack + constants.alpha0
' Set transparent image to background
m.background.uri = transparentImage
m.background.opacity = 0
else
' Set new URI for real image
m.currentUri = uri
m.background.uri = m.currentUri
end if
' Stop any ongoing fadeout animations
m.oldBackgroundFadeout.control = "stop"
m.shadeFadeoutAnimation.control = "stop"
' Handle transition from old image (same logic for both transparent and real images)
if oldUrl <> invalid and oldUrl <> "" and oldUrl <> transparentImage
m.oldBackground.uri = oldUrl
if isAnimated
' Animate the old background from its current opacity to 0
m.oldbackgroundInterpolator.keyValue = [1.0, 0.0]
m.oldBackgroundFadeout.control = "start"
' Only fade out shade if transitioning TO transparent image
if m.currentUri = transparentImage
m.shadeFadeoutAnimation.control = "start"
end if
else
m.background.opacity = 1.0
m.oldBackground.opacity = 0
' Immediately hide shade for non-animated transitions
if m.currentUri = transparentImage
m.shade.opacity = 0
end if
end if
end if
end sub