Author Topic: New Theater Mode Elements  (Read 22833 times)

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 32353
- set the aspect ratio handling for the background picture
  <settings backgroundAspectRatio="XXXX" />
   where XXXX = keep, stretch, zoomKeep, zoomStretch

- set the fill color for when the background picture does not fill the panel
  <settings backgroundFillColor="0,0,0" />

- set the theater panel to a fixed size:
  <settings fixedWidth="300" fixedHeight="100" />

-
<element type="ArtistPicture" artistType="Composer" ...></element>
<element type="ArtistInfo" artistType="Composer" ...></element>
where
artistType="Artist"
artistType="Composer"
artistType="ComposerPref" - this one tries composer first and if blank then uses the artist

- icon element
<element type="Icon" image="Images\Test.png" mouseOverImage="Images\TestH.png" x="100" y="100" onClick="PlayPause"></element>

onClick="PlayNow"
onClick="PlayPause"
onClick="PlayStop"
onClick="PlayPrevious"
onClick="PlayNext"
onClick="VolumeToggleMute"
onClick="VolumeUp"
onClick="VolumeDown"

- multi-line text elements
  multiLine="true" and set the width and height
  <element type="Field" id="Comment" xAnchor="AlbumCover.Right" x="30" yAnchor="AlbumCover.Top" y="-3" xwidthDock="X:Panel.Right" xwidth="-300" width="120" height="100" multiLine="true" font="Arial" style="Bold" size="12" fg="250,250,250" ></element>

Last Edit: December 08, 2012, 09:32:50 PM by Steven

redwing

  • Guest
- Album track list

<element type="AlbumTracks" ...> now supports attribute: mouseOverFg="255,0,0"
and when clicking a track it plays that track from the album.
<element type="AlbumTracks" ... mouseOverFg="255,0,0">

if you are using the indexed field element, onClick="PlayNow" is already supported
<element type="Field" id="Tracks[3]" ... onClick="PlayNow" >

fg2 to color playing track differently

- Now Playing list

i've added support for including the now playing list
http://musicbee.niblseed.com/V2_1/MusicBee_Exe_Patched.zip

in this example i just replaced the album in the Album and Artist example. It also includes a new attribute on child elements so you can format the playlist index
format="#\." puts a . after the number

Code
<element type="Block" x="10" y="210" width="360" height="35" bg="230,5,5,5" />
<element type="NowPlayingList" x="10" y="245" width="360" height="290" font="Arial" style="Regular" size="9.5" bg="180,5,5,5" fg="240,240,240" mouseOverFg="220,10,10" >
    <child width="15" />
    <child id="Speaker" width="23" />
    <child id="#" width="50" format="#\." align="center" />
    <child id="TrackArtistAndTitle" width="230" />
    <child id="Duration" />
</element>

also i have added a row padding attribute (default is 2)
<element type="NowPlayingList" ... rowPadding="5" .../>
Last Edit: November 03, 2013, 01:08:50 AM by redwing

redwing

  • Guest
- Next track album cover

this is done for the next 2.1 update which i will post later today.
To implement just put which track the album cover is for in the id attribute

<element type="AlbumCover" id="Tracks[1]" x="0" y="53" width="80" height="80" brightness="1.0" ></element>
<element type="AlbumCover" id="Tracks[2]" x="0" y="143" width="80" height="80" brightness="1.0" ></element>

one thing to keep in mind is if you positioning elements relative to the main AlbumCover and using the default skin, you should name the main album cover element to avoid naming conflicts
<element name="#AlbumCover" type="AlbumCover" ...
and reference #AlbumCover for the fields that are positioned relative to the album cover
<element type="Field" id="Artist" xAnchor="#AlbumCover.Right" x="30" ...

- Skin-adaptive colors

to use - in any colour attribute:
 bg="TrackAndArtistPanel(bg)"
 bg="TrackAndArtistPanel(20)"
 fg="TrackAndArtistPanel(fg)"
 fg="TrackAndArtistPanel(90)"
 bdr="TrackAndArtistPanel(bdr)"

where a number between 0 and 100 means a %mix of bg and fg, where a lower number is more bg and higher number more fg

edit:
also added alpha support for background colours, where alpha is between 0 and 255 (unlike the weight parameter)
eg.
 bg="190,TrackAndArtistPanel(20)"
Last Edit: November 03, 2013, 01:10:12 AM by redwing

redwing

  • Guest
- Aligning square elements (album cover, box, etc.)

an align="xxx" attribute has now been added and can be one of: "Top.Left", "Top.Right", "Bottom.Left", "Bottom.Right"
its in the next 2.1 update
also note that the max="" attribute wasnt being set for artist pictures and now is, so that might have an impact on any existing embedded skins

- Right-aligning elements (almost superceded by the above "align" attribute)

for right aligning an element, i have added support for basic expressions (+/-) in the x and y offset values eg. to right align a variable size picture:
Code
<element type="AlbumCover" xAnchor="Panel.Right" x="11-Panel.Height" y="9" widthDock="Panel.Height" width="-20" heightDock="Panel" height="-20" min="100" max="300" brightness="1.0" ></element>

also i have changed it so "enableScaling" is ignored for embeded theatermode skins because as implemented it causes positioning problems for aligning elements (I will leave it in for the normal theatermode skins incase the change causes older skins to not work plus its useful for resizing fonts)

- For embedded theater mode, consult the following thread:

http://getmusicbee.com/forum/index.php?topic=8234.0

for embedded skins it now respects the aspectRatio setting which by default is "Keep"
Last Edit: November 03, 2013, 01:11:41 AM by redwing

redwing

  • Guest
- Restrict the gallery to local pictures

you can now set the gallery element with the tags attribute set to "artist:local" which will restrict the gallery to local pictures.
<element type="Gallery" ... tags="artist:local" .../>

- Gallery sources

Also the existing artist gallery has been improved so it now uses htbackdrops.com and fanart.tv in addition to last.fm and then flickr
<element type="Gallery" ... tags="artist" .../>

- Flickr for Gallery now follows compact player setting

i've changed it to use the same setting as the Compact player

- Square artist picture

to retrieve square artist pictures (from last.fm)
<element type="ArtistPicture" artistType="Artist" pictureSize="Square" ...

- Artist picture priority

for the next v2.2 update i have changed it so fanart.tv is given a higher priority than htbackdrops.
Last Edit: November 03, 2013, 01:13:07 AM by redwing

redwing

  • Guest
- A new field that populates either movie title or album

i have added "movieOrAlbum" as a supported field

behave like <Album> except if there is a movie title

- Percentage support for anchors and dock attributes. Note that only dock attributes require "X:" or "Y:"

support for percentage values
e.g. heightDock="x:#Cover.70" would be 70% of the width of element #Cover

percentages for anchors is now supported

the syntax for anchors is
xAnchor="Panel.30" x="0"

i have made the change to support
widthDock="X:target element name.Center"   ie. the width of the element is set to half the width of the target element
heightDock="Y:target element name.Center"

- Split progress position with two new element types

"PlayPosition" and "PlayDuration"

- Two new onClick functions

Support for onClick functions for "ShuffleToggle" and "RepeatToggle"

- Toggling images or texts for toggling onClick functions

the following attribute is now supported for fields, blocks, child elements etc.
 visibleTrigger="XXXX"
when XXXX is true the element is displayed. So that means you would need to repeat the element but show it with a different image or text and the opposite trigger condition
Valid triggers are:
            Playing
            NotPlaying
            VolumeMute
            VolumeNotMute
            ShuffleOn
            ShuffleOff
            RepeatOn
            RepeatOff
            EqualiserOn
            EqualiserOff
            ScrobbleOn
            ScrobbleOff

eg.
Code
<element type="Text" x="81" yAnchor="Panel.Bottom" y="-52" width="50" font="Webdings" style="Bold" size="25" fg="255,255,255" mouseOverFg="0,150,250" onClick="PlayPause" visibleTrigger="Playing">4</element>
<element type="Text" x="81" yAnchor="Panel.Bottom" y="-52" width="50" font="Webdings" style="Bold" size="25" fg="255,255,255" mouseOverFg="0,150,250" onClick="PlayPause" visibleTrigger="NotPlaying">8</element>

- Background color of magnified album cover

for the background image, i have created a new element
<element type="BackgroundAlbumCover" brightness="0.2" refreshInterval="20"></element>

its basically the same as what you have done except its more optimised and picks a random location on the album cover. It always sizes to the panel size. Also the refreshInterval (seconds) will choose a new random location
Last Edit: November 03, 2013, 01:14:00 AM by redwing

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 32353
http://musicbee.niblseed.com/Patches/mb_TheaterModePlugin.zip

new onClick action similar to OpenAutoHidePanel(#id), but instead floats the panel above others without closing other auto-hide panels
OpenFloatingPanel(#id)



Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 32353
http://www.mediafire.com/download/0e307c4vxtqitq5/mb_TheaterModePlugin.zip

this version should load a lot faster when you have multiple blocks or icons displayed and fading should be much smoother/ less cpu intensive.
it also supports a new gammaCorrected="true/false" attribute for blocks, auto-hide blocks and icons
with a default value of true. Set to false if you want a heavier/ darker overlay, whereas the default true adjusts for the lightness of the colours.
It only affects images with alpha values < 255
eg.
  <element type="Icon" image="x.png" gammaCorrected="false"></element>

tumuyan

  • Newbie
  • *
  • Posts: 11
Does  multiLine="true" not be support now?
When I add this key , MB not display any text for the element; and when I remove it, MB could display comment as single line text

Code

<element name="#artwork_text_3" type="Field" id="Comment" multiLine="true" xAnchor="#Cover.Left" x="0"  yAnchor="#artwork_text_2.Bottom" y="13" widthDock="x:#Cover.Right"  width="0" align="left" font="Calibri"  size="12" fg="200,200,200" hight="40" />