[MOD] Simple Album Art visualization for PM3 - Skin Mod

ted209 · 2009-05-04 12:40

Here's a quick attempt at a simple album art visualisation.

My aim is to have a simple full screen album art with album/track information on screen.

Screenshot:

Step 1:
Make a text file called advancedsettings.xml with the following content, and put it in your UserData folder:

Code:

<advancedsettings>

   <thumbsize>512</thumbsize>

</advancedsettings>

(I believe 512 is the maximum art size XBMC allows - please correct me if I'm wrong, I'd like 720x720 cover art!)

Step 2:
I'm modifying the PM3 HD skin MusicVisualisation.xml. Here is my current version:

Code:

<window id="2006">

    <defaultcontrol>2</defaultcontrol>

    <allowoverlay>no</allowoverlay>

    <controls>

        <control type="image">

            <description>Cover</description>

            <posx>280</posx>

            <posy>0</posy>

            <width>720</width>

            <height>720</height>

            <info>MusicPlayer.Cover</info>

        </control>

        <!-- codec & viz infos -->

        <control type="group">

            <posx>0</posx>

            <posy>600</posy>

            <visible>Player.ShowCodec</visible>

            <animation effect="fade" time="300">VisibleChange</animation>

            <control type="image">

                <description>Dialog Footer</description>

                <posx>266</posx>

                <posy>52</posy>

                <width>150</width>

                <height>70</height>

                <texture>dialog_bottom.png</texture>

            </control>

            <control type="image">

                <description>media info background image</description>

                <posx>0</posx>

                <posy>0</posy>

                <width>400</width>

                <height>105</height>

                <colordiffuse>BBFFFFFF</colordiffuse>

                <texture border="10">dialog_middle.png</texture>

            </control>

            <control type="label">

                <description>Codecinfo</description>

                <width>380</width>

                <posx>10</posx>

                <posy>5</posy>

                <label>$INFO[musicplayer.Codec,Audio Codec: ,] $INFO[musicplayer.Channels, - Channels: ]

$INFO[musicplayer.Bitrate,Bitrate:,kbps]$INFO[musicplayer.bitspersample, - Bits:,bit]$INFO[musicplayer.Samplerate, - Freq.: ,kHz]</label>

                <align>left</align>

                <font>font12</font>

            </control>

            <control type="label">

                <description>Presets label</description>

                <posx>10</posx>

                <posy>50</posy>

                <width>380</width>

                <label>$LOCALIZE[250] - $INFO[Visualisation.Name]</label>

                <font>font12</font>

                <align>left</align>

                <visible>!Visualisation.Locked</visible>

            </control>

            <control type="label">

                <description>Presets label</description>

                <posx>10</posx>

                <posy>50</posy>

                <width>380</width>

                <label>$LOCALIZE[250] - $INFO[Visualisation.Name] - $LOCALIZE[20166]</label>

                <font>font12</font>

                <align>left</align>

                <visible>Visualisation.Locked</visible>

            </control>

            <control type="label">

                <description>Presets label</description>

                <posx>10</posx>

                <posy>70</posy>

                <width>380</width>

                <label>$INFO[Visualisation.Preset]</label>

                <font>font12</font>

                <align>left</align>

            </control>

        </control>

        <!-- media infos -->

        <control type="group">

            <visible>Player.ShowInfo</visible>

            <animation effect="fade" time="1000">VisibleChange</animation>

            <control type="group">

                <posx>0</posx>

                <posy>0</posy>

                <control type="image">

                    <description>Dialog Footer</description>

                    <posx>266</posx>

                    <posy>52</posy>

                    <width>150</width>

                    <height>70</height>

                    <texture>dialog_bottom.png</texture>

                </control>

                <control type="image">

                    <description>media info background image</description>

                    <posx>0</posx>

                    <posy>0</posy>

                    <width>400</width>

                    <height>105</height>

                    <colordiffuse>BBFFFFFF</colordiffuse>

                    <texture border="10">dialog_middle.png</texture>

                </control>

                <control type="fadelabel">

                    <description>Artist label</description>

                    <posx>10</posx>

                    <posy>5</posy>

                    <width>380</width>

                    <info>MusicPlayer.Artist</info>

                    <align>left</align>

                    <font>font13</font>

                </control>

                <control type="fadelabel">

                    <description>Title label</description>

                    <posx>10</posx>

                    <posy>26</posy>

                    <width>380</width>

                    <info>MusicPlayer.Title</info>

                    <include>textcolor-yellow</include>

                    <align>left</align>

                    <font>font14</font>

                </control>

                <control type="fadelabel">

                    <description>Album label</description>

                    <posx>10</posx>

                    <posy>52</posy>

                    <width>380</width>

                    <info>MusicPlayer.Album</info>

                    <align>left</align>

                    <font>font12</font>

                </control>

                <control type="fadelabel">

                    <description>time label</description>

                    <posx>10</posx>

                    <posy>95</posy>

                    <width>380</width>

                    <label>$INFO[musicplayer.Time]$INFO[musicplayer.Duration, / ]</label>

                    <align>left</align>

                    <font>font12</font>

                </control>

                <control type="label">

                    <description>Playlist Pos No</description>

                    <posx>10</posx>

                    <posy>75</posy>

                    <width>200</width>

                    <label>$INFO[musicplayer.Playlistposition,$LOCALIZE[435] ]$INFO[musicplayer.Playlistlength, / ]</label>

                    <visible>!MusicPartyMode.Enabled</visible>

                    <align>left</align>

                    <font>font12</font>

                    <include>textcolor-green</include>

                </control>

                <control type="label">

                    <description>PartyMode Enabled</description>

                    <posx>385</posx>

                    <posy>75</posy>

                    <width>200</width>

                    <label>589</label>

                    <visible>MusicPartyMode.Enabled</visible>

                    <align>right</align>

                    <font>font12</font>

                    <include>textcolor-green</include>

                </control>

            </control>

        </control>

    </controls>

</window>

If anyone would like to help out and improve this, I'd be very grateful.

rudeboyx · 2009-05-06 15:02

what does this do exactley. a screenshot would be good

**Jezz_X** · 2009-05-06 23:45

indeed the masses need screenshots not code Smile

ted209 · 2009-05-09 19:23

Ok, ok, screenshot added. I know it's simple - what do you guys think?

I guess maybe I should offset the album art to the right and have more space for text.

Please feel free to tweak it yourselves.

rudeboyx · 2009-05-10 14:47

not to shabby but could do with some kind of visualization in the background maybe. just seems a little sparse. and also a progress bar would top it off

nice job though

**joebrady** · 2009-05-22 21:56

rudeboyx Wrote:not to shabby but could do with some kind of visualization in the background maybe. just seems a little sparse. and also a progress bar would top it off

nice job though

I agree, I might try out my rudimentry skinning skills to play with this one a bit. I'd like the visualization in the background too.

But this would be nice for my 7 inch display in my truck.

Still wish we could get the Artist Fanart to show in this window...maybe one day.

rudeboyx Fan Posts: 747 Joined: Dec 2007 Reputation: 0 Location: Burnley, UK	2009-05-06 15:02 Post: #2 what does this do exactley. a screenshot would be good
	find quote

Jezz_X Team-XBMC Skinner Posts: 5,264 Joined: Jun 2006 Reputation: 55 Location: Earth	2009-05-06 23:45 Post: #3 indeed the masses need screenshots not code Skins I have done.... And others in the past... Want to know what I'm working on currently? Check me out on Google+
	find quote

ted209 Junior Member Posts: 19 Joined: Nov 2008 Reputation: 0	2009-05-09 19:23 Post: #4 Ok, ok, screenshot added. I know it's simple - what do you guys think? I guess maybe I should offset the album art to the right and have more space for text. Please feel free to tweak it yourselves.
	find quote

rudeboyx Fan Posts: 747 Joined: Dec 2007 Reputation: 0 Location: Burnley, UK	2009-05-10 14:47 Post: #5 not to shabby but could do with some kind of visualization in the background maybe. just seems a little sparse. and also a progress bar would top it off nice job though
	find quote