It is important to note at this stage that the elements are executed in the order in which they are defined in the .xml files.
Most of the times, the order does not matter. But in cases where:
Category | Attribute | Description | Example |
element structure | type | Dictates how elements of this nature will be handled by MusicBee
| ⤵ |
⤷ | ⤷ | ◦ Prints out the specified text ◦ Draws a solid rectangular shape ◦ Draws a shape similar to the block style ◦ Displays the specified image from your local storage ◦ Displays simplified and interactive player controls ◦ Displays the progress bar ◦ Displays a button on the progress bar ◦ Displays the time portion that has been played ◦ Displays the duration of the track ◦ Displays a combination of the two styles above ◦ Displays the soundgraph / wavebar ◦ Displays the visualiser ◦ Displays your system clock ◦ Displays a list of album tracks ◦ Displays a list of upcoming tracks ◦ Retrieves images from MusicBee and/or the web ◦ Retrieves the value of a specified tag ◦ Retrieves the album artwork ◦ Retrieves the artist's thumbnail ◦ Retrieves the artist's biography ◦ Retrieves the lyrics
| type="Text" type="Block" type="Line" type="Icon" type="PlayerBar" type="ProgressBar" type="ProgressButton" type="Position" type="PlayDuration" type="ProgressPosition" type="Soundgraph" type="SpectrumVisualiser" type="Time" type="AlbumTracks" type="NowPlayingList" type="Gallery" type="Field" type="Album Cover" type="ArtistPicture" type="ArtistInfo" type="Lyrics"
|
⤷ | name | Assigns a label for reference purposes
| e.g ... name="#Shade" type="Block" height="50" type="Album Cover" heightDock="#Shade.height" means the artwork's height will also be 50px
|
⤷ | allowPinning | It is a panel save-state of sorts Only applicable to autoHide and floating panels
| allowPinning="true" makes the TM remember the last opened panel
|
⤷ | disableHotPoint | Disables a(n) floating/autoHide panel from showing up when hovering the mouse over a certain location
| <autoHidePanel name="#MainTab" disableHotPoint="true"
|
⤷ | autoOpenLyrics | Automatically opens an auto-hide panel if it contains lyrics and closes if none are available
| autoOpenLyrics="true" enables the setting
|
element position | xAnchor | Used to horizontally position an element relative to another
| type="Lyrics" xAnchor="Panel.Center" will position the lyrics at the center of the screen
|
⤷ | x | Used as a horizontal offset The default value is zero
| type="Text" xAnchor="Panel.50" x="-100" will place the text 100px to the left of the screen center
|
⤷ | yAnchor | Used to vertically position an element relative to another
| e.g ... name="#ABC" height="40" type="Field" yAnchor="#ABC.10" will position this at 10% of ABC's height. That means the field will be placed 4px below the top-most part of ABC
|
⤷ | y | Used as a vertical offset The default value is zero
| type="Gallery" y="0" will display the picture from the top-left position of the monitor
|
⤷ | widthDock | Used to dynamically set the width
| type="ProgressBar" x="0" widthDock="X:Panel.Right" means the progress bar will stretch from the utmost left to the utmost right
|
⤷ | width | Used to offset the length
| widthDock="Panel.Width" width="200" will display across the entire screen while cutting off 200px from the right edge
|
⤷ | heightDock | Used to dynamically set the height
| e.g ... type="Lyrics" y="0" height="40" type="ArtistInfo" y="10" heightDock="Y:Lyrics.Bottom" means the biography will be 30px in height
|
⤷ | height | Used to offset the height
| heightDock="Panel.Height" height="10" means 10px of the element will be displayed out of bounds (below the screen)
|
⤷ | align | To align elements within their width
| type="Field" id="Title" widthDock="Panel.Width" align="Center" will position the tag in the middle of the screen
|
childElement format | reserveWidth | Ensures that an amount of space is reserved for following child elements
| type="Field" id="Title" x="0" width="200" reserveWidth="75" means the title will be allocated 125px before getting cut-off as the remaining 75px will be reserved for the child element(s)
|
⤷ | rightMargin | Pads the right side of an element to ensure some space between the next child element. It's only supported on the Rating elements.
| id="RatingLove" rightMargin="5" will add an extra 5px to the right side of the 'love' button
|
⤷ | topMargin | Moves the element down from where is would be by default It's only supported on the Rating elements
| id="Rating" topMargin="2" means the rating stars will be moved 2px below the y-coordinate of the parent element
|
⤷ | format | Used in conjuction with the '#' id
| id="#" format="#\." to display numbers with a dot. e.g 13.
|
⤷ | Tracks[#] | Used to access tag info from an upcoming track Where # represents the track position in the upcoming tracks list
| type="Field" id="Tracks[5]" font="Segoe UI"><child id="Title"/></element> will display the <title> of the 5th upcoming track
|
Element text | font | Changes the font type
| type="Text" font="Segoe UI"
|
⤷ | style | Text - changes the font style ProgressBar - changes the button. The default is a round button.
| font="Webdings" style="Semi-bold" type="ProgressBar" style="Diamond"
|
⤷ | size | Changes the font size
| font="Calibri" style="Regular" size="14"
|
⤷ | minSize | Dynamically sets the font size based on the length of the text
| type="Field" id="Album" fg="185,185,185" size="26" minSize="7" means the font will automatically adjust to use the largest size possible in the range 26pt down to 7pt
|
⤷ | rowPadding | Adjusts the row spacing on type AlbumTracks and NowPlayingList. Has a default value of 2.
| type="NowPlayingList" rowPadding="4" will insert 4 vertical pixels between the individual tracks
|
⤷ | multiLine | Reserves additional height for multi-line
| type="Field" id="Comment" multiLine="true" will wrap additional text over to the reserved height in the next line
|
Element colours | bg | Changes the background colour
| type="Block" bg="75,0,0" will display a red solid rectangle
|
⤷ | fg | Changes the foreground colour
| type="Text" font="SegoeUI" fg="0,0,150" means the text will be blue
|
⤷ | fg2 | Changes the secondary foreground colour, if the type supports it.
| type="Soundgraph" bg="20,20,20" fg="50,5,5" fg2="10,10,100" bdr="255,50,150"
|
⤷ | bdr | Changes the border colour
| type="AlbumCover" bdr="100,TrackAndArtistPanel.Highlight(50)" means the artwork border will have a colour sourced from the MusicBee skin
|
Element pictures | min | Used in conjuction with type AlbumCover It will set the minimum size of each side
| type="AlbumCover" x="10" widthDock="X:Panel.Center" min="100" means that even though the width is dynamically generated, it will be capped at a minimum of 100px
|
⤷ | max | Same as above, but used to set the maximum
| same as above but with reference to the maximum size
|
⤷ | aspectRatio | Applies to picture elements It is used to crop or stretch the image when necessary
| type="Gallery" aspectRatio="keep/stretch/zoomKeep/zoomStretch"
keep means keep aspect ratio (default)
stretch means the picture is stretched to fill the entire area
zoomKeep will keep the aspect ratio, but allow the sides of the image to be cut off (no vertical gaps)
zoomStretch is similar to zoomKeep, but stretches rather than keep the apect ratio
|
⤷ | fillColor | Sets the background color for when an image does not fill the panel
| type="Gallery" aspectRatio="zoomKeep" fillColor="75,75,75" will give the gaps a grey shade should the aspect ratio crop the image
|
⤷ | resizePictures | Applicable to floating and autoHide panels where this can be used to resize images
| <autoHidePanel name="#MainTab" allowPinning="false" resizePictures="true" />
|
⤷ | fade | For use on the artist thumbnail. The effect can be between 0 and 1
| type="ArtistPicture" fade="n" where n=0 means no dimming and n="1" is a full dim
|
⤷ | artistType | Applies to retrievable thumbnails
| type="ArtistPicture" artistType="Artist" will retrieve the main artist's thumbnail
|
⤷ | pictureSize | Linked to the above attribute
| type="ArtistPicture" pictureSize="Square" will search for square thumbnails only
|
⤷ | brightness | Used to dim and brighten elements
| type="AlbumCover" brightness="n" where n=0 is completely black and n="1" is normal brightness
|
⤷ | alpha | Used for opacity control
| type="BackgroundAlbumCover" alpha="n" where n is between 0 and 1
|
⤷ | gammaCorrected | Adjusts the lightness of the colours on blocks, autoHide blocks, and icons. It is true by default and only affects images with alpha values < 255
| type="Icon" Image="MusicBee.png" gammaCorrected="false" means the image will have a heavier/darker overlay
|
⤷ | refreshInterval | For use in the backgroundAlbumCover
| type="BackgroundAlbumCover" refreshInterval="n" where n is the interval in seconds
|
⤷ | interval | Applies to the gallery element. It specifies the rotation interval Has a hardcoded 30s minimum interval in order to reduce strain on the artwork hosting sites
| type="Gallery" interval="n" where n is the timer in seconds after which the next image will be loaded
|
⤷ | tags | Applies to the gallery element. It specifies the search query.
| type="Gallery" tags="artist:local" for the retrieval of local artist images type="Gallery" tags="landscape,blue,animals" means that MusicBee will retrieve web images where any of the tags match
|
Element mouseActions | mouseOverFg | Used to highlight text in a different colour
| type="Text" fg="100,0,0" mouseOverFg="0,100,0" means the text will show up in green when highlighted, and red otherwise
|
⤷ | mouseOverImage | Displays an image when hovering over another image Both images will share the same position
| type="Icon" image="Buttons/Primary.jpg" mouseOverImage="Buttons\Secondary.png" will display the secondary image whenever the primary image is hovered upon
|
⤷ | onClick | Performs an action when clicked on
| type="Field" id="Title" onClick="Pause" will pause the playing track when the title is clicked on
|
⤷ | onDoubleClick | Performs an action when double-clicked on
| type="Text" onDoubleClick="OpenAutoHidePanel(#Explorer)" will open a panel called Explorer when double-clicked on
|
⤷ | showMouseHand | Disables the mouse hand pointer during onClick events
| onClick="PlayNext" showMouseHand="false" will not show the hand pointer when hovering over the element
|
Element controls | visible | Enables Rating fields to follow the visibility status on MusicBee's main player panel
| id="Rating" visible="MusicBeeSetting" allows the plugin to display or hide the field depending on the user's option in the player controls
|
⤷ | visibleTrigger | Applicable to toggle buttons (e.g mute vs speaker) This allows users to set up different icons for the two events
| type="Icon" image="Speaker.jpg" onClick="VolumeToggleMute" visibleTrigger="VolumeNotMute" type="Icon" image="Mute.jpg" onClick="VolumeToggleMute" visibleTrigger="VolumeMute"
|
⤷ | extras | For adding controls to the player_bar, which by default, excludes the progress bar & position
| type="PlayerBar" extras="ProgressBar"
|
⤷ | autoSwitch | Automatically invokes commands in sequence
| type="Text" autoSwitch="command_1;command_2" visibleTrigger="AutoSwitchOff" will invoke command one, then two, then one again, and two again, and so on
|
⤷ | autoSwitchInterval | The milliseconds gap in which the commands are invoked
| autoSwitch="OpenAutoHidePanel(#one);command_2" autoSwitchInterval="5000" means the commands will be invoked every five seconds
|