How to control the background opacity of progress dialog in Roku scene graph?

Question

I am using main.brs code to show the progress loading dialog . If i use this code for progress dialog then its default background is occupying complete screen. here i want to show only progress loading animation and background should be little transparent. could anyone please help on this.

'Main.brs

ShowLoading = CreateObject("roSGScreen")
ShowLoading.CreateScene("ProgressDialogExample")
ShowLoading.show()

'ProgressDialogExample.Xml

<component name = "ProgressDialogExample" extends = "Scene">

  <script type = "text/brightscript" >
    <![CDATA[
    sub init()
        progressdialog = createObject("roSGNode", "ProgressDialog")
        progressdialog.title = "Loading..."
        m.top.dialog = progressdialogs
        m.top.setFocus(true)
    end sub 
    ]]>
  </script>
</component>

Answer 1

There is a special node class called BusySpinner that used inside ProgressDialog. You can use it with a label to get a progress dialog with a transparent background. Add the following code into the file ProgressDialogExample.Xml:

<children>
    <Group>
        <BusySpinner 
            id="spinner"
            translation="[570, 300]"
            control="start"
            clockwise="true"
            spinInterval="2" />
        <Label
            id="lblLoding"
            horizAlign="center"
            text="Loading"
            color="0x6c3b97ff"
            font="font:LargeBoldSystemFont"
            translation="[620, 300]" />
    </Group>
</children>

Also, add an image to the folder "images" that will be used as a loading image. Then, in Main.brs add the following code:

spinner = m.top.FindNode("spinner")
spinner.poster.uri="pkg:/images/loader.png"