User Interface Philosophy

So, why do we need this page? What’s this Philosophy thing about?

In a nutshell: iPeng wants to be simple, so it’s a bit different. Penguin ain’t got fingers, penguin got wings. Wings are for swimming, not for using gadgets.

Differences to SqueezeCenter:

Another nutshell: iPeng is for iPhone/iTouch so it prefers Apple guidelines over SqueezeCenter guidelines. For example: When clicking on a track in the browser, SqueezeCenter displays song information, whereas iPeng plays the song. iPeng does not have shortcut icons for this, iPeng only has icons to add to the current playlist.

Also: When selecting a song, SqueezeCenter will replace the current playlist with this song and then only play this, whereas iPeng will replace the current playlist with the album, the song is in and start to play the album from the selected song.

iPeng also has a Main Menu (called ‘Home’) that will bring you to a top level menu. You can select this menu from anywhere EXCEPT for the Playing screen by selecting the “Home” icon in the lower right corner of the page.

Header Bar

On any screen in iPeng you have a “Header Bar” that will tell you where you are, that is: display the title of the current page. And it will give you a “Playing” button to get to the “Playing” screen and a back button bringing you to the last menu level you visited. The latter is NOT a “back” button, if you are switching between several pages on the same level (e.g. while browsing) you will not get back to the last page visited but it will bring you UP one level in the page hierarchy.

Toolbar

You have a Toolbar at the bottom of the page. This will be at the bottom of the screen for the main menu but you will have to scroll down to this page on all lists. That’s unfortunate, but there is no real way around it. If you divide the screen into divisions, you need two-finger-scroll on mobile Safari to scroll, and you don’t want that for long lists.

The Toolbar by default has several shortcut icons to certain functions, currently that’s

• Browse Albums
• Browse Artists
• Browse Lists
• Search
• Main Menu (Home)

As of version 0.4, the Footer Bar is finally configurable. There’s a configuration page under settings->plugins->ipeng where you can enable and disable commands, and you can even define your own (see Extending iPeng). Footer Bar icons/commands are VERY flexible and iPeng already comes with more than 20 different commands at hand. Anything that can be reached in iPeng can be put on a toolbar button!

Just to give a small example: the “Player control” toolbar that would mimic the NowPlaying screen toolbar:

Toolbars can be context specific, so a plugin could offer commands, that only make sense within the context of the plugin. One example for this are the “home” screen commands (Internet Radio, Alarm, Sleep) that get you directly to the respective page on the home screen but are not available from other screens.

Configuring the Toolbar

Now how does configuring Toolbar icons work?

First, you have to turn the commands you want to see on. You do this in the settings under “Enable/Disable Commands“. The toolbar commands are referred to as toolbar/…

There can be different sections defining where a certain Toolbar icon is available. Currently, two are defined: “home” for commands that are only available on the Main Menu pages and “*” for any items that are available everywhere. Plugins may add further categories in the future.

When you have turned on the commands you want to see, you will have to place them on the bar. You do that by selecting the configuration subpage “Positioning Commands“. For each command you can enter a position between “1” and “5” with “1” being the leftmost and “5” being the rightmost icon. If you define no position, the icon will be placed in any “unused” position, filling the bar from left to right.

If you define different commands for the same position under the “*” and a specialized category (e.g. “home“), the specialized category will take precedence. This way, you can define commands that will be shown on these specific pages while reverting to some other icons on other pages. One example could be to have the “Home” icon in the general section and another icon on the home section, so “Home” will not show up in the Main menu, where it has little use other then beautifully glowing blue and indication where you are 🙂

Differences from iPhone/iTouch

Whenever there are differences in what you would expect to happen between SqueezeCenter and iPhone/iTouch you are probably in for a good guess that it will work like in iPhone/iTouch. With two notable exemptions…

Not all files are in one big list

On iPod, you have all your albums/tracks/artists presented in one big list you cann scroll through pretty fast. Unfortunately it does not work this way on SqueezeCenter. Loading long lists is too slow and you have no way to do slick scroling behind user interface elements, so you always have to scroll up/down the whole page. So shorter lists (if you don’t like this, change SqueezeCenter’s page length setting to something like 7,200 😉

iPeng uses a current playlist

iPod (and iTunes) usually does not work off the “on the go” playlist but uses the current album as standard ordering criterion. Coolio hates this. I hate this. I want playlists! SqueezeCenter uses playlists!

So I stuck to that. Doesn’t make much of a difference if you just start playing songs or albums, but in addition to this, you always have the option to add songs to the current playlist using the -symbol. And on the “Playing” page, if you flip the cover around, you don’t get the current album list, but the current playlist. And you can save the current playlist to re-use it later instead of having to generate an “on-tho-go” playlist first.