Is it possible to display the loading indicator until the task node response is completed?

Archived
1

I’m trying to display image until the task node response is not complete. I’m using below code. But, Still It’s showing blank Screen.

m.LoaderScreen = m.top.findNode("LoaderScreen") 
m.LoaderScreen.visible = true 
m.APIResponse = CreateObject("roSGNode", "APIResponse") 
m.APIResponse.control = "RUN" 
m.LoaderScreen.visible = false

Anyone suggest any other way to do this?

2

MainScene.xml

<Group id="LoaderScreen" visible="false">
    <LayoutGroup translation="[640,360]" horizAlignment="center" vertAlignment="center">
    <BusySpinner id="LoadingIndicator" clockwise="true" spinInterval="2"  uri="pkg:/images/loader.png"/>
    </LayoutGroup>
</Group>

MainScene.brs

sub Show(args as Object)
m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoaderScreen.visible = true
m.LoadingIndicator = m.top.findNode("LoadingIndicator")
m.LoadingIndicator.control = "start"

?"m.LoadingIndicator : "m.LoadingIndicator

?"First : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true

m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.control = "RUN"

?"Second : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true

 m.SecondNode = CreateObject("roSGNode", "SecondNode")
 m.SecondNode.control = "RUN"

?"Third : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true

m.ThirdNode = CreateObject("roSGNode", "ThirdNode")
m.ThirdNode.control = "RUN"

?"Fourth : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true

m.FourthNode = CreateObject("roSGNode", "FourthNode")
m.FourthNode.control = "RUN"

?"Five : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true

m.LoadingIndicator.control = "stop"
m.LoaderScreen.visible = false
end sub

m.LoadingIndicator : <Component: roSGNode:BusySpinner> =
{
    clockwise: true
    control: invalid
    poster: <Component: roSGNode:Poster>
    spinInterval: 2
    uri: "pkg:/images/loader.png"
    childRenderOrder: "last"
    clippingRect: <Component: roAssociativeArray>
    enableRenderTracking: true
    inheritParentOpacity: true
    inheritParentTransform: true
    muteAudioGuide: false
    opacity: 1
    renderPass: 0
    renderTracking: "none"
    rotation: 0
    scale: <Component: roArray>
    scaleRotateCenter: <Component: roArray>
    translation: <Component: roArray>
    visible: true
    change: <Component: roAssociativeArray>
    focusable: false
    focusedChild: <Component: roInvalid>
    id: "LoadingIndicator"
}

Currently, I doing like this. Here, I found m.LoadingIndicator.visible value true After, Run a Every Single Task node. But, When I start the Application. It’s Automatically blank screen above the m.LoadingIndicator. Does anyone knows solution for this?

3

Without really knowing too much about your app, in general you can watch for the task to be done by doing something like this:

m.APIResponse.observeField("state", "onStateChanged")
...
sub onStateChanged()
    if m.APIResponse.state = "stop"
        m.LoaderScreen.visible = false
    end if
end sub
4

Thank you For your Reply.

I’m trying to Display Loading Indicator in-between the splash Screen and landing page. I already tried What you suggested. like below. Does anything change need on this?

Here, I have four task nodes and I’m trying to Display the Loading indicator in-between four task nodes. It displays both the ways I mentioned above and here below. But, Above the Loading indicator, It displays a one blank screen Automatically When the Task node is running. I also tried creating a new Channel. But, Here also Result is the same.

MainScene.xml

<Group id="LoaderScreen" visible="false">
<LayoutGroup translation="[640,360]" horizAlignment="center" vertAlignment="center">
<BusySpinner id="LoadingIndicator" clockwise="true" spinInterval="2"  uri="pkg:/images/loader.png"/>
</LayoutGroup>

MainScene.brs

sub Show(args as Object)
m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoadingIndicator = m.top.findNode("LoadingIndicator")

m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.observeField("state", "onTaskStateChanged")
m.FirstNode.control = "RUN"

m.SecondNode = CreateObject("roSGNode", "SecondNode")
m.SecondNode.observeField("state", "onTaskStateChanged")
m.SecondNode.control = "RUN"

m.ThirdNode = CreateObject("roSGNode", "ThirdNode")
m.ThirdNode.observeField("state", "onTaskStateChanged")
m.ThirdNode.control = "RUN"

m.FourthNode = CreateObject("roSGNode", "FourthNode")
m.FourthNode.observeField("state", "onTaskStateChanged")
m.FourthNode.control = "RUN"

end sub

sub onTaskStateChanged()
?"MainScene :: onTaskStateChanged()"
    if m.FirstNode <> invalid then
        if m.FirstNode.state = "run"
            m.LoaderScreen.visible = true
            m.LoadingIndicator.control = "start"
        end if
    end if
    if m.SecondNode <> invalid then
        if m.SecondNode.state = "run"
            m.LoaderScreen.visible = true
            m.LoadingIndicator.control = "start"
        end if
    end if
    if m.ThirdNode <> invalid then
        if m.ThirdNode.state = "run"
            m.LoaderScreen.visible = true
            m.LoadingIndicator.control = "start"
        end if
    end if
    if m.FourthNode <> invalid then
        if m.FourthNode.state = "run"
            m.LoaderScreen.visible = true
            m.LoadingIndicator.control = "start"
        else if m.FourthNode.state = "stop"
            m.LoaderScreen.visible = false
            m.LoadingIndicator.control = "stop"
        end if
    end if
end sub
5

I am still facing this issue. Any one give me suggestion?. I tried this issue with both BrightScript Component(SGDex Component and normal BrightScript Component). I applied both ways in both components As I mentioned above. In normal BrightScript Component display an automatically Splash Screen until a TaskNode Response is not complete. But In SGDex Component display and automatically Blank Screen Until a TaskNode Response is not Complete.

6

In the task you add a field. Call it “TaskComplete” and set it to always notify.

<field id="TaskComplete" type="Boolean" value="false" alwaysNotify="true" />

Then in the task when you are done.

m.top.TaskComplete = true

Put the below in whatever calls the task.

m.thatTask.observeField("TaskComplete", "DoStuffWhenTaskCompletes")

This will pass to the observer in whatever invoked the task in the init section.

Then add this to you code that calls that task.

m.loadingspinner.visible = true
m.thattask.control = "start"

Sub DoStuffWhenTaskCompletes()
    m.loadingspinner.visible = false
    ... whatever other code you need goes here ...
End Sub

Then DoStuffWhenTaskCompletes will only run when the task completes. If there is an error in the task it will not set TaskComplete so depending on what the task does you may need error handling on top to handle timeouts, etc. But this should get you going in the right direction.

7

Thank you for your Answer.

I tried which you suggest like below :

Add this below Field in Task Node :

<field id="TaskComplete" type="Boolean" value="false" alwaysNotify="true" />

and changed m.top.TaskComplete value “true” when the Fourth TaskNode Response is complete.

sub Show(args as Object)
m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoadingIndicator = m.top.findNode("LoadingIndicator")

m.LoadingIndicator.observeField("TaskComplete", "onTaskStateChanged") 

m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"

m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.control = "RUN"

m.SecondNode = CreateObject("roSGNode", "SecondNode")
m.SecondNode.control = "RUN"

m.ThirdNode = CreateObject("roSGNode", "ThirdNode")
m.ThirdNode.control = "RUN"

m.FourthNode = CreateObject("roSGNode", "FourthNode")
m.FourthNode.control = "RUN"

end sub 


sub onTaskStateChanged()
    m.LoaderScreen.visible = false
    m.LoadingIndicator.control = "stop"
end sub

I also tried with the single TaskNode like below :

sub Show(args as Object)

m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoadingIndicator = m.top.findNode("LoadingIndicator")

m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"

m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.observeField("TaskComplete", "onTaskStateChanged") 
m.FirstNode.control = "RUN"
end sub 

sub onTaskStateChanged() 
    m.LoaderScreen.visible = false
    m.LoadingIndicator.control = "stop"
end sub

If I observed from Task Node or Busy Spinner. Function not calls when Task Node Response is complete. I write my.top.TaskComplete = true in my Task Node when my Response is Complete. But, It’s Doesn’t Work. Anything else is Required? Second thing, Here, Boths the ways I mentioned in Above, Spinning wheel is Displayed. But, above the Spinning wheel Displayed a one blank dialog Box. I don’t understand where that dialog box comes from. I did not write it anywhere in the code. Currently, this one happening with SGDex Component. It’s Working fine with RSG(Normal Brightscript) Component. In SGDEX views, the loading spinner is managed by the framework, there’s nothing extra I need to do in that case. But, not understand clearly why a blank screen is displayed, until a Task node Response is not Complete.