Author Topic: How can I change the Last.fm icon in the main player panel?  (Read 10270 times)

mvana

  • Jr. Member
  • **
  • Posts: 66
Hi! How can I change the Last.fm icon in the main player panel? What are the element id for selected, mouse hover, disconnected and connected?
And how many pixel are the size of the png icon for Last.fm?

I'll upload the source once I'm done making the skin

The Incredible Boom Boom

  • Sr. Member
  • ****
  • Posts: 1269
Code
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKlJREFUeNpi/P//PwMlgImBQjDwBrAgc86amIgCqZlA7AHEu4G4CSQMxLpAXA3ETkB8EIizjM+ceY1hABD0AnEglO0HxPZA7AbEu4CYHyoeAsTfgTgOmxdi0fggTSeRNGOoo3ogdhOprwmXAZVA3EdAcwc+A/4CcTEQ2+LQbAK15C/WaEQCR4BYGIjfIomB+O/wpgM0AFLMDsQ/gZgLGnUYgHHoZyaAAAMANqIhDnrEvjgAAAAASUVORK5CYII=
</element>
<element id="LastFmLoveSelected">
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKlJREFUeNpi/P//PwMlgImBQjDwBrAgc86amIgCqZlA7AHEu4G4CSQMxLpAXA3ETkB8EIizjM+ceY1hABD0AnEglO0HxPZA7AbEu4CYHyoeAsTfgTgOmxdi0fggTSeRNGOoo3ogdhOprwmXAZVA3EdAcwc+A/4CcTEQ2+LQbAK15C/WaEQCR4BYGIjfIomB+O/wpgM0AFLMDsQ/gZgLGnUYgHHoZyaAAAMANqIhDnrEvjgAAAAASUVORK5CYII=
</element>
<element id="LastFmLoveBright">
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAtElEQVQ4T2PYv38/AyWYIs0giweZAZs2bRIF4nVA/A2INwKxMciZQFoXiFcA8SsgXg1SBws3FC8AJRYB8f8tW7b8B9FA/AGIzaD0/82bN8PEF+EyAKwIZACSIWBNMDGYIUQZANOETBMyoAvZNnQDkLzQiMsFzEADeqH+hzsbzTvtQHlmrAbABIEKbJANgbFhsYKccnEmJKBiISSNoIAUwpbk8aZEoCY2qCGcuPLLIEvK5GRrAMfOcY04HygNAAAAAElFTkSuQmCC
</element>
<element id="LastFmNotLove">
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAtElEQVQ4T2PYv38/AyWYIs0giweZAZs2bRIF4nVA/A2INwKxMciZQFoXiFcA8SsgXg1SBws3FC8AJRYB8f8tW7b8B9FA/AGIzaD0/82bN8PEF+EyAKwIZACSIWBNMDGYIUQZANOETBMyoAvZNnQDkLzQiMsFzEADeqH+hzsbzTvtQHlmrAbABIEKbJANgbFhsYKccnEmJKBiISSNoIAUwpbk8aZEoCY2qCGcuPLLIEvK5GRrAMfOcY04HygNAAAAAElFTkSuQmCC
</element>
<element id="PlayerLastFmLove">
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKlJREFUeNpi/P//PwMlgImBQjDwBrAgc86amIgCqZlA7AHEu4G4CSQMxLpAXA3ETkB8EIizjM+ceY1hABD0AnEglO0HxPZA7AbEu4CYHyoeAsTfgTgOmxdi0fggTSeRNGOoo3ogdhOprwmXAZVA3EdAcwc+A/4CcTEQ2+LQbAK15C/WaEQCR4BYGIjfIomB+O/wpgM0AFLMDsQ/gZgLGnUYgHHoZyaAAAMANqIhDnrEvjgAAAAASUVORK5CYII=
</element>
<element id="PlayerLastFmLoveBright">
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAtElEQVQ4T2PYv38/AyWYIs0giweZAZs2bRIF4nVA/A2INwKxMciZQFoXiFcA8SsgXg1SBws3FC8AJRYB8f8tW7b8B9FA/AGIzaD0/82bN8PEF+EyAKwIZACSIWBNMDGYIUQZANOETBMyoAvZNnQDkLzQiMsFzEADeqH+hzsbzTvtQHlmrAbABIEKbJANgbFhsYKccnEmJKBiISSNoIAUwpbk8aZEoCY2qCGcuPLLIEvK5GRrAMfOcY04HygNAAAAAElFTkSuQmCC
</element>

These are the tags that appear in my skin (which I did from the bottom up using @hiccup's excellent Sample Skin.) I can't remember the answer to your last question and I'm not sure about mouse hover, connected or disconnected. I also don't use the Player Controls panel, so I'm not exactly sure if those element ids are for the stock icon or not. Hopefully one of the more experienced skin designers can provide more assistance.

mvana

  • Jr. Member
  • **
  • Posts: 66
Thanks for the response. I've found those codes already and I think the last.fm icons are only bitmap. Not sure about the codes though

We'll need this https://getmusicbee.com/addons/misc/77/bee78-source-files/
Last Edit: November 19, 2021, 04:40:49 AM by mvana

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
These are the tags that appear in my skin (which I did from the bottom up using @hiccup's excellent Sample Skin.)
Thnx, but those are indeed the small 16x16 'loved' icons.
Editing the bigger LastFM button(s) can only be done for bitmapped skins.
They need to be image files, of which you can decide the size for yourself:

LastFmOn.png
LastFmOnHighlight.png
LastFmOff.png
LastFmOffHighlight.png
LastFmError.png
LastFmErrorHighlight.png

Note that for the highlight (hover over) feature to work, you need to have the elements for those in the skin.xml too. (not all skins you may use as a template may have them)

Code
<element id="LastFmButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="5" />
  <top relativeTo="Panel.Bottom" offset="-36" />
  <images category="Off"
    default="Images\LastFmOff.png"
    highlight="Images\LastFmOffHighlight.png"
  />
  <images category="On"
    default="Images\LastFmOn.png"
    highlight="Images\LastFmOnHighlight.png"
  />
  <images category="Error"
    default="Images\LastFmError.png"
    highlight="Images\LastFmErrorHighlight.png"
  />
</element>
Last Edit: November 19, 2021, 07:29:33 AM by hiccup

mvana

  • Jr. Member
  • **
  • Posts: 66
Thanks for the help @hiccup , that makes it clear. Is it possible to only add the images without their positions, so they can be in their default position?
Quote
Code
 <left relativeTo="Panel.Left" offset="5" />
  <top relativeTo="Panel.Bottom" offset="-36" />

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Is it possible to only add the images without their positions, so they can be in their default position?
I'm pretty sure that's impossible.
When creating a bitmapped skin you will need to specify the positions of all the elements/buttons.
What is not required, is to create images yourself for all of them. You can set it in the skin.xml to have MusicBee generate default images for elements.

mvana

  • Jr. Member
  • **
  • Posts: 66
When creating a bitmapped skin you will need to specify the positions of all the elements/buttons.
What is not required, is to create images yourself for all of them. You can set it in the skin.xml to have MusicBee generate default images for elements.
I've tried to add positions for few elements and it almost works but track  time is out of place (it's sticking out), how can I fix it?

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
I've tried to add positions for few elements and it almost works but track  time is out of place (it's sticking out), how can I fix it?
I'm not sure I understand the question since my answer seems too obvious:
Position "TrackPosition" a bit to the left, or position the right of "ProgressBar" a bit to the right.
How to do that exactly may depend on what element you have anchored to what other element.

mvana

  • Jr. Member
  • **
  • Posts: 66
[what element you have anchored to what other element.
I've applied that but after resizing the window all the icons go out of place
I most likely added some element or didn't add something

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
I've applied that but after resizing the window all the icons go out of place
That looks like the person who created the skin.xml used horizontal centering for some elements.
If you don't want that you'll need to use fixed values for anchoring to 'left' or 'right' of other elements.

mvana

  • Jr. Member
  • **
  • Posts: 66
That looks like the person who created the skin.xml used horizontal centering for some elements.
If you don't want that you'll need to use fixed values for anchoring to 'left' or 'right' of other elements.

I've tried changing things in skin.xml but couldn't fix that and now suddenly when I add-
Code
  <element id="Panel">
    <images stretchY1="1" stretchY2="1"
      default="Images\Background.png"
  />
  </element>
MusicBee can't start and shows errors.

So far the code-

Code
<?xml version="1.0" encoding="utf-8"?>

<root sourceSkin="TEST THEME">




<element id="Speaker" parent="Panel">
  <left relativeTo="Panel.Left" offset="142" />
  <top relativeTo="Panel.Top" offset="29" />

</element>

<element id="VolumeSlidebar" parent="Panel">
  <left relativeTo="Speaker.Left" offset="32" />
  <top relativeTo="Speaker.VerticalCenter" offset="0" />

</element>



<element id="TrackInfoPanel" parent="Panel">
  <left relativeTo="ProgressBar.Left" offset="0" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
  <right relativeTo="Panel.Right" offset="-300" />
  <bottom relativeTo="Panel.Bottom" offset="-10" />
</element>



<element id="ProgressBar" parent="Panel">
    <left relativeTo="Panel.Left" offset="300" />
    <top relativeTo="Panel.Bottom" offset="-14" />
    <right relativeTo="Panel.Right" offset="-300" />
    <bottom relativeTo="Panel.Bottom" offset="-8" />
    <bufferingMargin top="2" bottom="2" left="2" right="2" />
    
</element>



<element id="TrackLove" parent="Panel">
  <left relativeTo="ProgressBar.Left" offset="0" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />

  <images category="NotLoved"
      default="Images\LoveNot.png"
      highlight="Images\LoveBright.png"
  />
  <images category="Loved"
      default="Images\Love.png"
 highlight="Images\LoveNot.png"
  />
</element>


<element id="TrackRating" parent="Panel">
  <left relativeTo="TrackLove.Left" offset="24" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
</element>



<element id="EqualiserButton" parent="Panel">
  <left relativeTo="LastFmButton.Left" offset="-56" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
  <images category="Off"
    default="Images\EQ.png"
highlight="Images\EQ-High.png"
  />
  <images category="On"
    default="Images\EQ.png"
highlight="Images\EQ-High.png"
  />
</element>



<element id="LastFmButton" parent="Panel">
  <left relativeTo="RepeatButton.Left" offset="-56" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />

  <images category="Off"
    default="Images\LastfmMonOff.png"
    highlight="Images\LastfmMonBright.png"
  />
  <images category="On"
    default="Images\LastfmMonOn.png"
highlight="Images\LastfmMonBright.png"
  />
  <images category="Error"
    default="Images\Error.png"
highlight="Images\ErrorBright.png"
  />
</element>


<element id="RepeatButton" parent="Panel">
    <left relativeTo="ShuffleButton.Left" offset="-56" />
    <top relativeTo="Panel.VerticalCenter" offset="0" />
    <images category="Off"
      default="Images\Repeat Off.png"
 highlight="Images\Repeat Off-High.png"
    />
    <images category="On"
      default="Images\Repeat All.png"
 highlight="Images\Repeat All-High.png"
    />
    <images category="One"
      default="Images\Repeat Once.png"
 highlight="Images\Repeat Once-High.png"
    />
</element>

<element id="ShuffleButton" parent="Panel">
    <left relativeTo="Panel.Right" offset="-56" />
    <top relativeTo="Panel.VerticalCenter" offset="0" />
    <images category="Off"
      default="Images\Shuffle Off.png"
      highlight="Images\Shuffle Off-High.png"
    />
    <images category="On"
      default="Images\Shuffle On.png"
      highlight="Images\Shuffle On-High.png"
    />
    <images category="AutoDJ"
      default="Images\AutoDJ.png"
      highlight="Images\AutoDJ-High.png"
    />
</element>

</root>

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
I've tried changing things in skin.xml but couldn't fix that and now suddenly when I add-
Code
  <element id="Panel">
    <images stretchY1="1" stretchY2="1"
      default="Images\Background.png"
  />
  </element>
MusicBee can't start and shows errors.
I don't know what is wrong exactly, but I do notice you have removed quite a few elements from the skin.xml
Not sure if that is directly related to your problem, but as a general rule I would start with a well-functioning skin.xml, and then edit or remove things step-by-step.
That should make it easier to spot where things go wrong.
If that doesn't work and you keep getting errors you could post the error message. That might give a clue.

mvana

  • Jr. Member
  • **
  • Posts: 66
I don't know what is wrong exactly, but I do notice you have removed quite a few elements from the skin.xml

I started from a non bitmap skin, and started to add bitmap elements, that probably messed something up

mvana

  • Jr. Member
  • **
  • Posts: 66
If that doesn't work and you keep getting errors you could post the error message. That might give a clue.

I started with a sample skin and I get 2 errors -

Quote
MusicBee v3.4.7805.33439D  (Win10.0), 25 Nov 2021 12:58:

System.NullReferenceException: Object reference not set to an instance of an object.
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zFhK2e0P9gc9139a29A==.#=zOsNumcfVasCy()
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zFhK2e0P9gc9139a29A==.#=zdGuSgLewDF3c()
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zNkPZEcv$mdiy(Rectangle #=zYwQUFZE=)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z8dYhglO8IDeL(#=zJ3$_6zS_wOvH #=zp0zifZ0=, Boolean #=zlEYwJixajodsUpFNRA==)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=zOsNumcfVasCy()
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=zcHRmr6iFTNiD(Rectangle #=zfXc6Ka1l8hKSdQYuD$_WyEk=, Rectangle #=zMH4bKFuxSoOWH21hzzmf0W0=)
   at #=zSwTkwis$1grROSU74dSdKWE=.OnResize(EventArgs #=zJqXIhV8=)
   at System.Windows.Forms.Control.OnSizeChanged(EventArgs e)
   at System.Windows.Forms.Control.UpdateBounds(Int32 x, Int32 y, Int32 width, Int32 height, Int32 clientWidth, Int32 clientHeight)
   at System.Windows.Forms.Control.UpdateBounds()
   at System.Windows.Forms.Control.WndProc(Message& m)
   at System.Windows.Forms.ScrollableControl.WndProc(Message& m)
   at System.Windows.Forms.Form.WndProc(Message& m)
   at #=zSwTkwis$1grROSU74dSdKWE=.WndProc(Message& #=z4XtD8jw=)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.WndProc(Message& #=z4XtD8jw=)
   at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

2nd Error:
Quote
MusicBee v3.4.7805.33439D  (Win10.0), 25 Nov 2021 12:58:

System.NullReferenceException: Object reference not set to an instance of an object.
   at #=z7qW7AeHL$3KblJt8ym2X2Z0=.#=z7KVoMHFP6eRO()
   at #=z7qW7AeHL$3KblJt8ym2X2Z0=.#=z3Ruocgiq$2qy(Int32 #=zeUo9XZ7xnf4O, Int32 #=zLJtR7N_OejguTusMmA==, Boolean #=zk9xZk50nVLuOXZv1qA==)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zFhK2e0P9gc9139a29A==.#=zDplgG8A=(Boolean #=z9ybYv7A=)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zFhK2e0P9gc9139a29A==.#=zdGuSgLewDF3c()
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z3HZukvEew$BL.#=zNkPZEcv$mdiy(Rectangle #=zYwQUFZE=)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=z8dYhglO8IDeL(#=zJ3$_6zS_wOvH #=zp0zifZ0=, Boolean #=zlEYwJixajodsUpFNRA==)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u.#=zfmhuPoK1n_j$(#=zJ3$_6zS_wOvH #=zp0zifZ0=, Boolean #=zlEYwJixajodsUpFNRA==)
   at #=zziapYCHkKIL0B5EplaYmmhGl87_u..ctor()
   at #=zsSqWEB_uCfYs1RIo5gmlWEiXxs7c.Main(String[] args)

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34312
i think its likely something with the progress bar/ button not being set