Introduction
Although MuSe was in a useable state there were may aspects which were inconvenient to use or counter-intuitive. Updates were made, mainly to html/css/javascript, to provide a solution that is better and easier to use than other clients. Problem/objectives and solutions are outlined below, roughly in the order of implementation.1 Group related functions together
Choice of radio station, ambient background, pre-defined playlist and NoAd radio are broadly similar and were grouped together, initially in a <div> with a border. Similarly buttons (e.g. play, pause, next) and presets (e.g. Passenger Playlist, start Absolute radio) were grouped.Album selection was contained in its own group and, at the bottom of the page all the useful options / information for development/diagnosis was kept sepater.
At the top of the page the current status of whether MuSe was connected and playing are shown followed by the current track artist and title.
2 Update bluetooth status information
In the status section "connected" or "NOT connected" show whether bluetooth has been started. It takes a few seconds for start or stop bluetooth to complete. After the start / stop command was issued setTimeOut() function was used to wait 5 seconds and refresh the screen so that the status remained upto date.A refresh button is also available for the user so that the screen can be refreshed at will. For example if the MuSe browser tab was hidden and is then displayed a screen update needs to be completed.
3 Time Conversion
Initially elapsed time was shown in seconds JS functions were used to convert to minutes and seconds. Time is only available for album tracks, it was left blank for playlists and streaming radio.4 Album choice
The initial display of albums provided no .
5 Move groups into tabs
The screen layout for smartphone use was small, cluttered and hard to use. Javascript tabs were implemented so that the bottom half of the screen could show:a) current play queue
b) radio station, ambient background or playlists
c) NoAd radio playlists
d) Album selection
e) Diagnosis section
6 Change select boxes
MPD.js initially populated the selection boxes for play queue and playlist selection with select multiple statements. These looked fine on Chrome(PC) with the size= parameter showing say 5 itmes in the list. However for mobile devices the select statement comes out as a single line which provides a dropdown box when you click on it. Initially I looked for a solution which makes apps appear similar on different devices, then I investigated jquery apps which might do a better job. There didn't seem to be anything sensible, which I found a bit surprising. Eventually I replaced the selection boxes with div statements in a box. I could choose a box of any size quite easily.The <div> box had an onclick command for each option and it was difficult to work out how to request a specific playlist or track to load. I used the console.log to narrow down the solution. In fact I had to slightly modify playSong and loadPlaylist to make them work and make the correct requests from the MPD backend.
7 fit to phone screen
There is no real benefit to using the expanse of a PC large screen as the MuSe webpage will be mostly used to control the system from a phone / tablet. Consequently I limited the page size to 360hx560w so that it fits nicely on my Samsung S5. This looks ok on both iPad and PC chrome screen.8 show source at top
It can be difficult to know exactly what is playing, a track could be on the radio, in a playlist or on an album. MPC doesn't provide a command to tell you whether you are streaming, on an http playlist or loading locally.
I provided a simple JS function which uses the websocketd interface to run a script called source.sh which creates a file on PI3. The function provides a parameter describing what is running which is written to the file. When the source is changed the function is invoked. When the screen is refreshed the file is read using w3.js includeHTML() function to read the contents of the file.
