Home of the Squeezebox™ & Transporter® network music players.
Results 1 to 5 of 5
  1. #1

    PART1: The hack is over: My new LMS Default Web Browser skin

    I will start with three background comments. Sorry if this is TLDR.

    The Metadata

    I have been rocking a Transporter since they first came out in 2006 and in 2006/7 I did a rip of my CD’s with CDEX. CDEX doesn’t tag files with metadata, just creates WAV files that contain the track number/track name.

    This was sufficient at the time as the Transporter screen is text based but I did spend some time with corrections/making consistent the file names with some custom programs I wrote.

    PC based play back has moved forward a lot since 2006 and in the last couple of years I have been intrigued with the possibility of USB playback via a small footprint endpoint running squeezelite. Aside from future proofing my playback chain it also meant I could use LMS (via sox) to upsample on the server side rather than within the DAC.

    But all this meant I needed to first tag my files but I couldn’t dedicate any time to this until I retired at the end of 2019.

    The first part of tagging was easy… I just wrote a program that parsed my existing WAV file hierarchy to obtain artist/year/release/track no/track name and created the ID3 tags in the WAV files.

    The harder part was cover art which after trying several existing programs I ultimately ended up doing google artwork searches/print screen/paste/cut for 95% of my 4000 albums simple because most auto-fetched artwork was crap.

    I also did google artwork searches for my artist pictures for the same reasons as the artwork.

    The Software

    So with my albums all nicely tagged, the search started for playback software that worked with LMS.

    The natural contender was Roon but I hated Roon. I didn’t like the way you navigate in Roon and all the data masturbation that it does and throws in your face. This is not a poking the Borax at those who love Roon, it just that I am old fashioned and want to just playback an album and not drill down/slice and dice what I have or discover new artists.

    I looked at other playback software from the LMS eco system and much of it only ran on apple or android platforms (which I don’t use) or Windows. I played around with as much of this as possible but none of it really fitted my use case.

    This then brought me to the LMS “Default” Web Gui which I had not really used before. I liked the general layout, its work flow and the fact it was web based (i.e. platform independent).

    The downside was its a bit ugly, old skool in appearance and wouldn’t be very “touch screen” friendly.

    The upside is I could hack the code.

    The Hack

    I have been a Unix/Linux systems programmer for 42 years with a specialisation in databases so the thought of hacking LMS didn’t appear too daunting plus being retired I had time on my hands.

    Well… LMS uses an interlaced set of languages: Template Toolkit, Perl, CSS, javascript and HTML of which the first three were completely new to me.

    Secondly, the code has no comments and due to the potpourri of languages used, a section of code needing a massage might reference all languages, so understanding what did what, when and how was time consuming to analyse.

    Thirdly, the rendering of elements was all based on tight loops which couldn’t be altered in any way as this would break LMS.

    Finally there was also a lot of re-entrant code, much of it within “xmlbrowser.html” which handles basically all the rendering aside from the playlist.

    It become apparent that hacking the code would require a totally different strategy from what I had done in the past and required some cunning hacks.

    The Results

    The hack needed to achieve:

    - a GUI that had good delineation between the elements being rendered
    - a GUI that was pleasing to the eye and also easy on the eye with a dark theme
    - a GUI that was self contained such that navigation didn’t leverage the browser
    - a GUI that rendered some of Roons metadata stuff that I liked
    - a GUI that will work well with a mouse or a touch screen
    - a GUI that will display well on decent sized screens (say 15” or greater)

    And so here are the results.

    This is a “squashed” image of the first screen showing the dark theme and as per normal for the default GUI, you have a navigation frame on the left and a playlist frame on the right.

    The GUI runs full screen inside the browser (i.e. you don’t see any of the browsers controls) and I have placed drill downs into genres across the bottom.

    With a large number of genres, the drill downs will also occupy the top bar… so you can get ~30 to 35 genres presented. Me… I only have four!!!

    The “best of” genre is a special category that I will discuss later.

    Name:  a0.jpg
Views: 569
Size:  61.4 KB

    If you click on a genre drilldown, the left frame presents a customized alphabetic drilldown (wont bore you with the details but it works differently from the default one).

    Below the alpha list, on the left, is a “drilldown” icon that takes you into an album view mode and below that we have the artists listed for the selected genre.

    Name:  a1.jpg
Views: 559
Size:  239.2 KB

    As all artists (or albums) are presented as a contiguous set, you can use say a mouse scroll wheel effectively.

    I force a “line break” at the change of an alphabetic section so its easy to see the artists associated with say the “D” drill down.

    You drill down on the albums for the artist you are interested in by clicking on the artist image.

    Name:  a2.jpg
Views: 558
Size:  214.1 KB

    Once inside a specific artist you click the album artwork to start playback or you hover (or click in touch mode) over the album name to see the tracks associated with the album.

    NOTE: I don’t use the concept of adding an album (or some of its tracks) to a playlist but if I did then I would render the albums tracks as was the default behaviour but with visual tweaks).

    Name:  a3.jpg
Views: 556
Size:  233.2 KB

    As noted above, at the top of each genre drilldown is an icon that, when clicked, lists all albums for the genre.

    This view presents two visual break points: a break on the alpha and then a break on the artists. This makes visual navigation way easier than just a torrent of albums images.

    Name:  a4.jpg
Views: 546
Size:  67.8 KB

  2. #2
    Senior Member Greg Erskine's Avatar
    Join Date
    Sep 2006
    Sydney, Australia
    I can appreciate your effort to get these great results.

    There is nothing better than doing things exactly as you like them.

    I also started with the Transporter but luckily I was already a EAC user, so I had the CUE files for meta data. Dodged a bullet there.

    I found Album Art Exchange was good for a lot of my album covers but also ended up getting a scanner, because I found it quicker to scan CDs covers than looking elsewhere.

  3. #3
    Quote Originally Posted by Greg Erskine View Post

    I found Album Art Exchange was good for a lot of my album covers but also ended up getting a scanner, because I found it quicker to scan CDs covers than looking elsewhere.
    Hmm... I dont think even I would go as far as scanning my own CD's for album art unless it was a last resort.


  4. #4
    Senior Member Pascal Hibon's Avatar
    Join Date
    Oct 2006
    Quote Originally Posted by Greg Erskine View Post

    I found Album Art Exchange was good for a lot of my album covers but also ended up getting a scanner, because I found it quicker to scan CDs covers than looking elsewhere.
    Same here, I scan my CD album covers. Very fast and easy. I have created a template for scanning CD album art in my HP scanning software. Works great and it is done in no time. As an added bonus: the scanned images are of excellent and consistent quality. That is usually a challenge when downloading images from the net.
    Yamaha A-S3000 (sliver) -> Focal Electra 1028 Be
    1 x SB Boom, 1 x SB Radio, 1 x SB Touch and 2 x RPI 2B
    1 x SB3 and 1 x SB Touch in storage
    ReadyNAS NVX for storage
    piCorePlayer on RPI 4B as LMS server
    iPeng on iPhone, SqueezePad & iPeng on iPad, Material Skin

  5. #5
    Senior Member bakker_be's Avatar
    Join Date
    May 2009
    Kwaadmechelen, Belgium
    This looks very nice. How can I get my grubby hands on it
    Main System: Touch; Marantz SR-5004 + TMA Premium 905 + TMA Premium 901 + Teufel Ultima 20 Mk 2 + BK Monolith+ FF + Lenovo T460 + Kodi + Pioneer PDP-LX5090H
    Workshop: iPad 32GB Wifi + Squeezepad (local playback activated)
    Wherever needed: Acer Iconia Tab A700 + Squeezeplayer
    Kitchen: iPhone 5s + iPeng (local playback activated) + NAD 312 + Teufel Ultima 20 Mk 2
    Headphone (cozy corner): Lenovo T550 + Squeezelite-X + Cyrus Soundkey + Topping A30 + Focal Elear
    Car: TBC ...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts