Forum Discussion

chaklasiyanikun's avatar
chaklasiyanikun
Roku Guru
5 years ago

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

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?

Roku Developer Program

6 Replies

  • chaklasiyanikun's avatar
    chaklasiyanikun
    Roku Guru
    5 years ago

    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?

    • WSJTim's avatar
      WSJTim
      Binge Watcher
      5 years ago

      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

       

      • chaklasiyanikun's avatar
        chaklasiyanikun
        Roku Guru
        5 years ago

        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