[josz]

Hey folks,

I was playing around with Rapier a while back and liked the SystemInfoPanel idea it got going on in the homescreen. I decided to recreate this for my favourite skin; Aeon Nox.

First off, I'm pretty new to XBMC skinning. I used to skin for MediaPortal a lot and since the engines are pretty similair I think I can handle and figure out most stuff.

Next let's take a look @ what we're talking about;



To get this going yourself you will need to edit 2 files;

1) first openup home.xml and add the following;

PHP Code:

<include>SystemInfoPanel</include> 


This needs to be added just before;

PHP Code:

</controls>
</window> 


2) next openup Includes_HomeWidgets.xml and add;

PHP Code:

    <include name="SystemInfoPanel">
        <control type="group">
            <posx>1028</posx>
            <posy>452</posy>
            <visible>Container(9000).HasFocus(5)</visible>
            <animation effect="slide" start="0,0" end="0,-180" time="400" tween="cubic" easing="inout" condition="Skin.HasSetting(lowermainmenu)|Skin.HasSetting(Lockhomemenulow)">Conditional</animation>
            <include>VisibleFadeEffect</include>
            <control type="image">
                <description>background</description>
                <width>240</width>
                <height>240</height>
                <texture border="0">keyboard/keyboard_back.png</texture>
            </control>
            <control type="label">
                <description>Title</description>
                <posx>10</posx>
                <posy>5</posy>
                <width>220</width>
                <height>40</height>
                <align>center</align>
                <aligny>center</aligny>
                <label>[UPPERCASE]$LOCALIZE[138][/UPPERCASE]</label>
                <font>Font_Reg19_Caps</font>
                <textcolor>c0FFFFFF</textcolor>
                <shadowcolor>black</shadowcolor>
                <animation effect="fade" start="0" end="100" delay="1000" time="500">WindowOpen</animation>
                <animation effect="fade" start="100" end="0" time="200">WindowClose</animation>
                <animation effect="fade" start="0" end="100" delay="500" time="800">Visible</animation>
                <animation effect="fade" start="100" end="0" time="200">Hidden</animation>
            </control>
            <!-- Icons -->
            <control type="grouplist">
                <posx>20</posx>
                <posy>42</posy>
                <width>24</width>
                <itemgap>3</itemgap>
                <control type="image">
                    <description>InternetState connected</description>
                    <width>24</width>
                    <height>24</height>
                    <visible>$INFO[System.InternetState]</visible>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\connected.png</texture>
                </control>
                <control type="image">
                    <description>InternetState disconnected</description>
                    <width>24</width>
                    <height>24</height>
                    <visible>!$INFO[System.InternetState]</visible>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\disconnected.png</texture>
                </control>
                <control type="image">
                    <description>Uptime</description>
                    <width>24</width>
                    <height>24</height>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\uptime.png</texture>
                </control>
                <control type="image">
                    <description>CPU</description>
                    <width>24</width>
                    <height>24</height>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\cpu.png</texture>
                </control>
                <control type="image">
                    <description>RAM</description>
                    <width>24</width>
                    <height>24</height>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\ram.png</texture>
                </control>
                <control type="image">
                    <description>Resolution</description>
                    <width>24</width>
                    <height>24</height>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\resolution.png</texture>
                </control>
                <control type="image">
                    <description>Windows</description>
                    <width>24</width>
                    <height>24</height>
                    <texture border="0">C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\windows.png</texture>
                </control>
            </control>
            <control type="grouplist">
                <posx>50</posx>
                <posy>42</posy>
                <width>210</width>
                <itemgap>15</itemgap>
                <control type="label">
                    <description>IP Address</description>
                    <width>220</width>
                    <height>12</height>
                    <label>$INFO[Network.IPAddress]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>System Uptime</description>
                    <posy>7</posy>
                    <width>220</width>
                    <height>12</height>
                    <label>$INFO[System.Uptime]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>CPU</description>
                    <width>220</width>
                    <height>12</height>
                    <label>$INFO[System.CpuFrequency]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>Free RAM</description>
                    <posy>7</posy>
                    <width>220</width>
                    <height>12</height>
                    <label>$INFO[System.FreeMemory]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>Screen Resolution</description>
                    <width>220</width>
                    <height>12</height>
                    <label>$INFO[System.ScreenWidth] x $INFO[System.ScreenHeight]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>Windows</description>
                    <width>180</width>
                    <height>12</height>
                    <label>$INFO[System.KernelVersion]</label>
                    <textcolor>c0FFFFFF</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
            </control>
        </control>
    </include> 


Needs to be added just before the final </includes> tag at the end.

Here you can find my modified skin files I currently use but since there are probably some other tweaks in there be cautious with just copying over the original files.
In the zip you'll also find the icons I used. The images in the xml part pasted above are also pointing directly to files on my filesystem (C:\Users\Jos\AppData\Roaming\XBMC\addons\skin.aeon.nox\media\) so you'll need to change that as well

[Martijn]

That does look nice



Note:
..bump to Big Noid

[josz]

Thx Machine-Sanctum,

I'm not good enough a skinner to make this as generic as it should be.
A cool feature would be different OS icons depending on the OS you're running.
The internet icon already resembles the connected/disconnected state, that was easy Dunno how to go about doing something similair for OS. A (partial) text matching function for visibility or something?! haven't really looked at that yet.

The icons in general are not really a Nox thing but I did it this way to save some valuable space in the box. Textlabels indicating what each value means, take up too much space.

[Martijn]

the new eden GUI engines provides a condition that should simplify things.
'conditional' labels and 'vars'.
Haven't really got into that however Big Noid shouldn't have trouble adding such a thing.

[BigNoid]

Looks great. Mind if I integrate this in the skin?

[josz]

Not at all, would save me modifying it through XML each time

[josz]

What would be even cooler is to create a list out of this "widget". When you select one, more info would popup to the left?! Maybe an icon to go with it?! Dunno, do not consider myself much of a designer.
Coming from MediaPortal I missed all the geeky extra's that went with MP. For the system info there were a couple plugins that would let you do anything thru skinning.
A similair system info plugin could ofcourse be created for xbmc. If only my python skills were a little more than zilch (php/C# kinda background) I might have a go @ it... Wishful thinking Especially the xAP functionality provided in the HTPCInfo plugin was kinda cool (which I was beta testing Micropolis's work back in the day). Check the system stats of your server on clients, geeky sure, but cool anyways