Kodi Community Forum

Full Version: Overlay when loading screens
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi, I spent the last few days trying to figure out how to show a loading dialog with an animation (or text or basically anything) which would appear when I'm loading screens. I just couldn't find it anywhere.

Here's an example to demonstrate the problem:
I'm on my Home screen and press a button with:
Code:
<onclick>ActivateWindow(VideoLibrary,MovieTitles,return)</onclick>

But before the screen loads (I have a big library and am running a Raspberry Pi, so it takes about 5 seconds), everything goes black.
I would like to pop up a dialog which would overlay the Home screen and close as soon as the Library is loaded.

Is there any way to do this? Do I have to write a python script or is it a skin setting?
Thanks for your help in advance.
DialogProgress.xml usually displays a loading indicator for these sorts of things. Have you tried adding stuff there. You can use .gif for animations.
I think that would have to be DialogBusy.xml, although I'm not sure if it's initiated until after the library window is active.

Also, especially on the Raspberry Pi you might want to use a scrolling label as a loading indicator, or a .gif with a low framerate.

See: https://github.com/xbmc/xbmc/pull/4212
Hi, thanks for the replies. I got the idea how to use the dialog (again thanks for pointing out the DialogProgress and DialogBusy).
But the problem still is HOW to get the dialog to show up.

I tried:
Code:
<onclick>ActivateWindow(ID_of_dialog_to_pop_up)</onclick>
<onclick>ActivateWindow(VideoLibrary,MovieTitles,return)</onclick>

But, of course, all I got was the dialog first and after I closed it, the Video Library screen started to load....

So I'm looking for a way make the the indicator show at the right time. Thanks
XBMC handles this internally, it's not something the skin initiates.
(2014-04-09, 15:42)Jeroen Wrote: [ -> ]I think that would have to be DialogBusy.xml, although I'm not sure if it's initiated until after the library window is active.
Whoops, yeah DialogBusy.xml - I always get them mixed up - DialogBusy, DialogProgress and DialogExtendedProgress.
Couldn't you use Immersive's splash? MyVideoNav.xml with onload (or Home.xml with <onunload>)
Code:
<onload condition="!Skin.HasSetting(NoSplashScreen) + Window.Previous(home)">ActivateWindow(60)</onload>
And a custom dialog that closes on Alarm
https://github.com/Sranshaft/skin.immers...Splash.xml

Or Xperience1080's fullscreen enabler? With Window.Next(id) and a check for thumb maybe?
https://github.com/Black09/Xperience1080...nabler.xml
(2014-04-10, 02:02)MassIV Wrote: [ -> ]Couldn't you use Immersive's splash? MyVideoNav.xml with onload (or Home.xml with <onunload>)
Code:
<onload condition="!Skin.HasSetting(NoSplashScreen) + Window.Previous(home)">ActivateWindow(60)</onload>
And a custom dialog that closes on Alarm
https://github.com/Sranshaft/skin.immers...Splash.xml

Or Xperience1080's fullscreen enabler? With Window.Next(id) and a check for thumb maybe?
https://github.com/Black09/Xperience1080...nabler.xml

I don't think either of those would work properly. The problem is that the loading time would be variable but the alarm in the immersive splash has a fixed duration.
What if you activate the loading dialog after the video library window and place an <onload> Dialog.Close in video library window ?

Your Home button...
PHP Code:
<onclick>ActivateWindow(VideoLibrary,MovieTitles,return)</onclick>
<
onclick>ActivateWindow(loading-dialog-id)</onclick

The <onload> in MyVideoNav...
PHP Code:
<onload condition="Window.IsActive(loading-dialog-id)">Dialog.Close(loading-dialog-id)</onload

Just thinking out of my head. Didn't test it.

Cheers
Nessus
Thanks again for the suggestions but I still can't manage to do it.

I tried a different approach. With conditional visibility of a fullscreen overlay I'm trying to show the overlay every time I click a button which should take me to a different screen.

I tried adding this to a button:
Code:
<onclick>Skin.SetBool(ShowOverlay)</onclick>

A visibility condition to the overlay:
Code:
<visible>Skin.HasSetting(ShowOverlay)</visible>

And reset the setting on every screen load:
Code:
<onload>Skin.Reset(BusyLoading)</onload>

But it still seems the setting gets set just before the other screen loads. I get stuck on the previous screen with no indicator, then the overlay flashes quickly and the next screen is loaded.

I can't believe it's THIS hard to do this Big Grin
The activation of the video window is done after the library is loaded so you're out of luck here. I know it's bad to have the GUI locked while something is loading but that's how it is at the moment.
Oh, ok.
Thank you for the clarification.
Hey! I think I finally did it. It's a kind of a workaround, but seems to do the trick...

I found this thread about the visibility on window open/close (incidentally by you, `Black): http://forum.xbmc.org/showthread.php?tid...pid=831422

Then I did this:

Add this to each window:
Code:
<onunload>Skin.SetBool(BusyLoading)</onunload>
<onload>Skin.Reset(BusyLoading)</onload>

Add this to the end of the controls tag of each window:
Code:
<include>BusyOverlay</include>

The BusyOverlay looks like this:
Code:
<include name="BusyOverlay">
        <control type="image" description="Busy Overlay">
            <include>TriggerBusy</include>
            <visible>Skin.HasSetting(BusyLoading)</visible>
            <include>Dimensions_Fullscreen</include>
            <texture background="true">overlay.png</texture>
        </control>    
        <control type="group">
            <include>TriggerBusy</include>
            <!--<visible>Window.Next(VideoLibrary)</visible>-->
            <!--<visible>Skin.HasSetting(BusyLoading)</visible>-->
            <visible>Skin.HasSetting(BusyLoading)</visible>
            <posx>864</posx>
            <posy>444</posy>
            <control type="image" description="Busy animation">
                <posx>0</posx>
                <posy>0</posy>
                <width>192</width>
                <height>192</height>
                <bordersize>24</bordersize>
                <texture background="true">busy/Busy.png</texture>
                <aspectratio>keep</aspectratio>
                <animation effect="rotate" start="360" end="0" center="auto" time="1800" loop="true" condition="true">conditional</animation>
            </control>
        </control>
    </include>

And the TriggerBusy looks like this:
Code:
<include name="TriggerBusy">
        <animation type="WindowOpen" reversible="false">
            <effect type="fade" start="0" end="100" time="0" />
            <effect type="fade" start="100" end="0" delay="250" time="0" />
        </animation>
        <animation type="WindowClose" reversible="false">
            <effect type="fade" start="100" end="0" delay="1000" time="0" />
            <effect type="fade" start="0" end="100" time="0" />
        </animation>
    </include>

And finally this to each button which triggers a new screen:
Code:
<onclick>Skin.SetBool(BusyLoading)</onclick>
<onclick>ActivateWindow(window-id)</onclick>

So the only thing left is using a low-fps animated gif or something else, because the animation doesn't work well on my RPi.

Again thanks for all the help!