 |
 |
|
Current JBMM UI
|
My Ode
|
I love the JBMM. It is an incredible device. It's hardware is so versatile, and its expandability through the modules will give it a long healthy life. HOWEVER! Though it is true that people seem to be able to quickly understand the basic features of the current user interface (UI), the UI is unattractive, cumbersome, and limited to the point of strangling the JBMM's potential. Let me say this clearly: The #1 biggest problem with the JBMM is its user interface! The screen-size, though important is a very distant second. This is my inspiration for this project.
I started this project about a month ago when my JBMM failed and was sent back to Archos. Since I had a taste of the UI, in the free time I had after - not being able to play with my new toy, I have come up with this new user interface. My primary goal is to enhance functionality, specifically in the area of MP3 playing and management which is my primary use. However, I have also tried to address as many of the reasonable wishes that other people have expressed on the Archos JBMM news group at yahoo.com. All wishes that I have cataloged (many achieved in this demo UI) can be found here. Below I have also done a point-by-point address of the Firmware wishes and how my UI does or does not address them.
The scope of this Demo is large, but it doesn't cover everything. First and foremost, actual MP3 and AVI playback does not occur - it is faked. The visualizations are just screen shots of how I think they might look. The image editor does nothing in this demo. Lastly, move/copy/rename/createfolder/delete are all nonfunctioning. I left these things out either because it was impossible with JavaScript + HTML or it was hard for me to code and obvious for you to understand how it should work (move/copy/etc).
But, beyond that, this UI is fully functional! Everything else works! Playlisting, browsing, almost every config option work, etc... I expect you'll have a fun time playing around with this UI.
Now, I must make a comment about browsers. My Demo works with Internet Explorer 5.5 and 6.0 as well as Netscape 7.0. It almost works with IE 5.0 and there is some differences in functionality between the different browsers:
- Netscape 7: Everything works except for the right-hand-side scroll bar (seen in pictures on this page) and the "..." don't show when a line is truncated. Netscape 7 also gets kudos for running the UI the smoothest - their Javascript implementation is superior to IEs at least from a responsiveness point of view.
- IE 5.0: When lines are too long, the formatting of the page is messed up, other than that everything works. I highly recommend you upgrade to IE 6.
- IE 5.5: The "..."s don't show when a line is truncated. Everything else works.
- IE 6.0: The newest version of IE is where the UI looks the best. It isn't quite as smooth as Netscape 7, but everything looks the way I think it should.
- Opera: Does not work! Opera users (like me) will find it doesn't work in Opera! I hate this as much as you do - opera is my first choice browser. However, Opera has miserable Javascript support. Specifically, it doesn't support innerHtml or some equivalent method of rewriting the page's HTML. I tried many things, but NOTHING worked in Opera. (Please feel free to complain to Opera!).
- All other Browsers: Not tested!
If you can't see the javascript version, you can try my older, HTML version. It doesn't show half the cool stuff the javascript version does, but it should still give you some idea.
A note about resolution. I made my mockup to the resolution that Archos advertises for the JBMM's LCD. On a computer, This is larger than the physical JBMM display, but accurate detail-wise. I also just noticed, putting in the origonal-jbmm-ui picture, that the aspect ratio isn't quite the same. I used the res Archos advertised, and I'm sticking to it :).
Note to Archos: First, I love the hardware of the JBMM, you guys have done a great job. But you must take my UI complaints seriously. Apple and the iPod have raised the bar significantly and the JBMM's UI doesn't come close. I hope you, Archos, will consider using ideas in my user interface and even consulting me on a firmware upgrade for the JBMM. However, I Realistically, I don't expect anything to come from my hard work (over 100 hours), but I place to you this request: Please take the time to do a major overhaul of your Firmware and its user interface! The biggest thing holding the JBMM from stardom is its UI. It isn't half as elegant as the iPod - and many people care.
Note to Archos Engineers: My functional javascript code is around 150k and all icons used in the interface fit in a 10k gif. This is obviously a poor estimate, but an estimate none the less of how much Firmware space this UI might take up. Since JavaScript is entirely text, compiling it into firmware should be smaller. Additionally, the 10k of icons could be read from a Gif file off the HD at load time. My interpretation of this is that my UI could easily be made to run on the JBMM. Since I've done most of the R&D, probably not more than a month of coding would be needed to get my UI ported to the JBMM.
You can now go and give it a try! Be sure to scan the rest of this doc (at least the next section - new ui highlights!).
Click here for
Demo - Smaller Version - for 1024x768 (or smaller, though
I don't recommend it) res screens.
Larger Version - recommend 1600x1200
(or higher) res
Old, HTML Version - something to
try if you can't see the Javascript version (this isn't nearly as good
as the JS version)
Download the whole demo for viewing locally: Ode_js.zip (948k)
There are many cool things this UI does, so let me tell you the highlights to look for...
Fully Customizable Icons, Colors and Background
To me, this is the "coolest" thing. Completely impractical - just damn fun! As an example I have setup a Matrix skin for my Demo. Simply go to setup and press F2 to load it up (restore user settings B). Like the old Yellow of the JBMM? I setup a skin for that, too - press F1 in setup to load it.
|
 |
 |
|
(Default Skin)
|
(Matrix Skin)
|
(Yellow Skin)
|
Custom icons come in the form of a GIF file stored in the System\Icons
folder on the JBM hard drive. As long as it follows the following layout,
you can customize it however you want:
 |
 |
All other user interface colors, as well as the background, can be set in the UI.
8-Line Font
Can't see enough items on screen at once? Switch to the 8-line font! You can choose your font for LCD and TV separately, too, so if 8-lines is too small for you on the JBMM screen, but perfect for you on TV-out, you don't need to keep changing the settings when you switch back and forth.
 |
 |
|
(Normal, 6-line font)
|
(8-line font)
|
Media Lib
The much desired Media library! See all your files organized by ID3 (if MP3) or a simplified directory structure - broken out by file type.
Playlist Enhancements
Since MP3 playing is my biggest JBMM use, I spend a lot of time enhancing the playlist abilities. You can sort the playlist by almost anything. You can select items easily, sort only selected items, reverse order of all or selected items, rearrange the playlist manually with one-key-presses (Left and Right buttons move the current item up and down in the playlist). Pretty much everything you've come to expect from a playlist editor (like Winamp in my case) and more.
(The playlist menu of options)
Image 4 and 9-up
The JBMM has a minimal 4-up ability, but it is an alternative to full screen viewing! For my solution, it is part of browsing. You can still see the current image full screen by just pressing play! I have also added a 9-up display. Lastly, you can switch to these modes quickly without going through any menu when browsing (While browsing, just press Right on a picture a fiew times. In playlist mode you have to go to the Menu - F1).
 |
 |
|
4-up Browsing
|
9-up Browsing
|
Browse With More File Info
By just pressing right on a file you can switch through almost 10 different types of file info and see that info for every file in the directory:
Hold
The much desired hold ability - just hold F1 anywhere (but the Setup menu) to lock your JBMM!
Visualization
Three modes of audio visualization! Taking my queue from Winamp, I provided the "basic" visualizations we expect from any computer MP3 player these days. Note that the two colors used for their color fades are user settable.
 |
 |
 |
|
Levels Visualization
|
O-Scope Visualization
|
Frequency Visualization
|
Graphic Equalizer
Want real control over the sound coming out of your JBMM? How about a 10 channel graphic equalizer? This is a quick mockup, and an even better, one-screen version could easilly be made.
10 Channel Graphic Equalizer
More Versatile Slide Shows
In my Demo you can display several JPGs while listening to one song or play several songs while viewing on JPG, unlike the current JBMM. My friend has also suggested several more ideas (not implemented in the demo) such as:
- All JPGs in the playlist after one MP3 but before the next are cycled through in order or randomly as the song plays.
- All JPGs in the playlist are pulled out from the MP3s. As the MP3s play, the JBMM cycles through all the JPGs.
- All JPGs in the playlist are pulled out from the MP3s and their delay-time is set automatically so the slides finish when the MP3s do.
- Further ideas might include playing only part of an MP3, fading out when it is at the stop-point.
Image Editing
Just a few kinds of image editing, and the ability to save the changes, would make the JBMM much more suitable for photo enthusiasts. My demo doesn't actually do these because of JavaScript/Html limitations, but I mocked up where they would be: (If you view the Farscape image, as shown in the picture below, Zoom and Rotate to work, but not together - as they should).
Simple Image Editing
Other Cool Features
Bookmarking - save your place in any AVI or MP3 by bookmarking it!
Item selecting - You can easily select items for any operation (play, add to playlist, copy, move, delete, etc...) by pressing F2, or holding F2 to toggle the entire selection. Pressing Play plays all selected items (and all sub items!). Holding Play adds all selected items (and all sub items!) to the play list!
Scroll Bar - As you can see in the screen shots above, a scroll bar appears when there are too many items to display on the current screen - a must-have feature in my opinion (well done, iPod!) (Netscape users won't be able to see the scroll bar).
Instant Record - You can instantly start recording anywhere - even when the JBMM is off - by holding F3. This is a must to make the JBMM a real note-taking dictation device! You could be in the middle of playing a movie, hold F3, make a comment about the movie, then the movie will automatically resume once you finish recording.
This is just a sketch of the key ideas of the interface. There is also dynamic help that appears next to the interface as you use it to help you navigate through the UI.
There is dynamic help for ever UI, Menu, and many individual Items on the right of the screen - be sure to read it! UIs are major sections: MediaLib, Files Browser, Setup, Top Menu, Playlist UI, Playing UI, and F1-Menus. Menus are the lists of items - every directory/fold the MediaLib and File Browser are menus. Items are the individual items you can select with your cursor by pressing Up or Down in a menu. These include files, subdirectories, Setup settings, and Menu items.
Your location in the MediaLib or File browser is not lost when you press off and return to the Top UI. This way you can easily swap back and forth between two deeply nested directories in the two browsers. Further more, every position of every menu or directory is remembered - this speeds up navigation when you want to go right back to where you were.
Buttons Almost Everywhere:
- Hold F1 anywhere (but the setup menu) to lock the JBMM (hold).
- Hold F3 anywhere -even when off- (except when Hold is on) to immediately start recording. Easy dictation - dictate when you have to idea - don't lose the idea while you setup your JBMM. When you are done, pressing off returns to what you were doing - even if you were in the middle of playing something.
- Pressing On anywhere gets you to the Setup menu where you can configure every option. Some options are duplicated in local menus for quicker access, but all are in the Setup menu.
- Hold Play to add to playlist. Anywhere in the MediaLib or Files browser: all selected items and their sub items are added. In the Playlist UI: all selected items are duplicated in the playlist). In the PlayingUI the current playing item is added.
- Pressing Off in a F1 Menu always goes back a Menu Level, unless it is at the F1 Menu - then it exits the menu (since Left is sometimes used by an item for changing its value).
- Pressing Off Several Times from anywhere (unless Hold is on) returns you to the Top menu.
- Holding Up or Down Skips forward or back one album or directory (searches for the next different artist/album or Dir)
- Pressing F1 brings up the appropriate Menu for the current UI.
Buttons In the Playing and Top UIs
- TopUI Only: F1 goes to the MediaLib, F2 goes to the Files, and F3 goes to recording or whatever module is connected
- Playing Only: F2 cycles through 4 diffrent views if the current playing item.
- Pressing Play plays/pauses
- Pressing Left or Right Skips forward or back one song in the playlist
- Pressing Up or Down adjusts the volume
- Holding Up or Down Skips forward or back one album or directory (searches for the next different artist/album or Dir)
- Pressing Off stops playing and exits back to the MediaLib or Files UI.
Buttons In the MediaLib or Files UIs:
- Pressing Off returns you to the Top UI (and remembers where you were)
- Pressing F2 selects/unselects the current item
- Holding F2 toggles the current selection (selects what isn't selected and unselects what is selected)
- Pressing F3 cycles through the Playlist UI, the Playing UI and back to the MediaLib or Files UI.
- Pressing Right on a Directory item goes into it
- Pressing Left exits the current Directory
- Pressing Right on a File item in a browser cycles through file display modes (includeing 4 and 9-up modes when pictures are present)
Buttons in the Setup UI
- Pressing F1 or F2 loads the current save user settings for the current Setup Menu and all sub Menus.
- Pressing F3 loads the factory defaults for the current Setup Menu and all sub Menus.
- Holding F1 or F2 saves the current user settings to either of the two save slots. This saves all settings in the current Setup Menu and all sub Menus.
- Pressing Left and Right go into or out of Setup Menus IF the current item does not use Left or Right to set it.
- Pressing Off will always return to the previous Setup Menu or exit setup.
- Pressing Play on an item will go into it if it is a Sub menu and will cycle through its values if it is a setting.
This is point-by-point address of the long wish-list on my website here.
The Wishlist Items Featured in My Ode: (red items were deamed high prority on the Wishlist)
|
Wishlist Item
|
Wishlist Item in My Ode? Yes/No
|
|
2 browsing modes: File+Directory based and ID3 tag based (like iPod) |
Yes - This is red because it was a high priority item, and I've got it - in Technicolor! |
|
Show ALL (non-hidden) files |
Yes |
| Instead of "name already exists" when recording just add to end of _## sequence | Yes |
| WAV file or higher bit-rate recording | Yes |
| Smarter, faster interface so it stalls less often due to HD | Yes/No I can't show this. My whole UI is in RAM so there are no pauses. However, I think this is a very important thing for Archos to fix - it is really annoying. |
| A lock mode to stop accidental button pressing while the JBMM is in your pocket. | Yes |
| More use of color in UI (set UI background image, color icons, etc.) | Yes - In Technicolor! I hope you'll agree! |
|
Playlist PlayMode: can edit the current playlist while it is playing |
Yes - It works very well, try it out! Great for DJing parties! |
|
Current playlist doesn't have to be saved or named to be played or edited |
Yes |
|
Add this dir and all subdirs to playlist |
Yes - this is very easy. Just go to the dir and hold play! |
|
Add saved playlist to current playlist. |
Yes |
|
Can keep adding (tagging) files, directories, and other playlists for playlist generation without having to go through the menu |
Yes - Either by selecting the items first then holding play, or just holding play on each one |
|
More than max 999 (9999 should be good) file playlist |
Yes - unlimited actually :) |
|
Sort playlist (by Artist, Album, Filename+Path, and random-sort) |
Yes - and much more! |
|
Playlist view - see the playlist while it is playing. |
Yes |
|
While playing, add a song to the playlist without interruption |
Yes |
|
Allow AVIs in playlists |
Yes |
|
add a currently playing song to the playlist |
Yes - or JPG |
|
Automatic playlist: new songs and automatically create a playlist for all newly added materials |
Yes/No - This one I don't directly have, but you can quickly add all MP3s to the playlist and then sort by date - if they have newer dates. If the JBMM tracked a second date - the date the files were copied to the JBMM then just adding another sort would fully support this. |
|
Automatic playlist: least played songs so you can listen to material that is new |
Yes - Though a little different - add all songs to the playlist then sort by last played. |
|
Automatic playlist: most played songs so you can listen to material that is the most popular to you |
Yes - Though a little different - add all songs to the playlist then sort by times played. |
|
Copy and Move files and directories without a PC |
Yes - I didn't implement the guts for the Demo, but it is represented in my UI. |
| Faster scrolling through large directories | Yes - Though my solution is a hack that probably won't work well on the JBMM (hold up or down to move up or down a page). The JBMM needs a different solution that I can't do in HTML (hold up or down - and continue holding - to scroll up or down quickly - a page a second or more). |
| Memory of where you last were scrolled to in each Dir | Yes |
| able to set a default recording directory | Yes |
| Graphic spectrum analyzer during playback | Yes - And O-scope, too |
| Hold Down/Up to skip to next MP3/AVI/JPG with a different Artist/Album/Directory | Yes |
| No-repeat Random | Yes |
| Bookmarking: Any MP3, AVI, or Playlist should be able to be stopped with a "place-bookmark" that can be used later to resume | Yes |
| Save sound presets. Even just two or three would be good. | Yes - all configs can be saved to one of two save slots |
| Graphic equalizer sound controls | Yes |
| TV-out adjustments: Brightness, contrast, and most of all, gamma. | Yes, and a seperate set for the LCD, too. |
| User settable HD spin-down time-out | Yes |
| Each time-out (HD spin-down, JBMM poweroff, and Backlight) can be disabled by setting it to MAX time-out | Yes |
| Customizable UI (change fonts - smaller fonts to display more information on screen would be nice for TV-out mode, change UI colors) | Yes on all accounts |
| Small Image Editor: Rotate, brightness & contrast, hue and sat, cropping, load TIFF/RAW, change JPG compression level, and save changes. | Yes - mocked up anyway, doesn't work. Didn't demo loading Raw and Tiff images |
| Adjust playback-speed and pitch independently | Yes |
| Browse and view jpgs while listening to MP3's | Yes - can watch a slideshow while browsing, too |
| Remember your favorite songs and creates custom mixes, like charts / top 100 / 20 | Yes - basically, see above (with the ability to sort by last played and times played) |
The Wishlist Items I would like to see in my Ode (no time or not able/practical to do with JavaScript):
|
Wishlist Item
|
Wishlist Item in My Ode? Yes/No
|
| View Images (jpg/gif) while Music (mp3/wav) is playing | No - But it should be: This could easilly be done in my UI, but I didn't get around to it. This is an important feature. |
| Frame-by-frame forward and backward | No - But it should be: Good idea, but I just didn't get around to it |
| Different play speeds .5x 1x 2x 5x 10x 30x 300x. | No - But it should be: Again, good idea, but I didn't get around to it |
| Savable Settings: you should be able to save your settings to a file. | No - But it should be: I think this is a good and easy idea - it is useful for backing up settings before removing the battery and it is useful for sharing settings (like skins) with friends. But, I didn't demo it. |
| Display total diskspace, sub-dirs, and fiels of each directory | No. But it should be: But this would be easy, from a UI standpoint, to add. Fits right in with my more-file-info |
| Finer volume control (the quietist setting isn't quiet enough) | No - But it should be: Mine may be worse than the JBMM, but mine doesn't make any noise, so, isn't that quiet enough? (actually, I think this is important, I just chose 20 volume steps because more seemed like a lot of clicking and JavaScript in IE pauses a 1/2 sec after every click). |
| Download to Flash media | No - But it should be: I didn't mockup any module interfaces |
| Better file format support (MPEG-1, AAC Audio, WMA Audio, OGG Audio, M-Jpeg. TIFF and RAW images) | No - But it should be: I mean I didn't demo it, but all playback is faked anyway. The UI doesn't have to change to support this. Archos: I still think this is very important |
| Text viewer (poor man's personal organizer) | No - But it should be: this might be easy for Archos - and a good idea for viewing, day firmware update ReadMes! |
| Timer function: sleep, start playing/recording at a specific date/time | No - But it could be: I like this idea and I think it is reasonable, but I didn't do it |
| Alarms: Set a MP3/Playlist/AVI/JPG and a Time/Date | No - But it could be: I like this idea and I think it is reasonable, but I didn't do it |
| Asian Multilingual support | No - But it could be: but then again, I only fudged my multi-lingual support in any case |
| Hard-drive access indicator when computer is writing/reading or when waiting for HD to spin up w/o computer | No - But it could be: I don't actually even access the hard drive. |
Wishlist Items that are cool, but I don't think it is practical/nessesary for Archos to implement:
|
Wishlist Item
|
Wishlist Item in My Ode? Yes/No
|
| A battery-timer that is reset by the users that measures how long the JBMM has been running on battery. | No - If the Archos battery indicator was reliable we wouldn't need this) |
|
Show a picture as a screen saver |
No - You don't want it for running off the battery and it isn't that big of a deal for running the TV - we have screen-off time-outs. |
| Advanced ID3 support (Lyrics, album images, etc...) | No - I mean I didn't demo this, and it is probably fancier than Archos really needs to do. |
| Adv. Viewer (PDF, HTML, eBook) | No - lots of coding for archos - unlikely |
| Personal organizer (appointments, phonebook, calendar, world-time, voice notes etc...) | No - useful, but off-topic for the device |
| Games | No - fun, but off-topic for the device |
| Passwords for files/folders | No - Lost of effort to code and get right and little public interest |
| DSP audo effects | No - Nice, but fancy, unnessesary, and a lot of programming work for Archos |
Can play: MP3/WAV, JPG/GIF, AVI/MPG files.
Move/Copy/CreateDir/Rename/Delete
Vis colors can be changed to effect the color fades
Actually functioning image editor - mine is just mocked up.
Sliders highlight center, min, and max values. Sliders cycle.
More harddrive info in setup.
I have dramatically expanded the number of custom settings for your JBMM. In addition, I have changed many that were represented by slider bars when I would rather just seeing their actual value. The new ones are:
Audio -> Graphic Equalizer
Audio -> Pitch (does not effect play speed)
Audio -> Play Speed (does not effect pitch)
Play -> 4 Time display modes (From Start, Until End, From PlayingList
Start, Until PlayingList End)
Play -> Repeat on/off
Play -> Shuffle on/off (no repeat shuffle that is)
Play -> Scan (4 modes of scan 5/10 seconds, start/middle of song)
Play -> Mixed Media play list display time (if MP3s and JPGs are "playing"
at the same time, which one do you want to see the info on?)
User Interface -> Visualization (3 vis modes + not vis option. Customize
vis colors, too)
User Interface -> Choose Icon sets (icons loaded from a GIF on hard
drive - allows user custom icons)
User Interface -> Background Image (choose custom background image)
User Interface -> Colors (customize every color in the user interface!)
User Interface -> LCD Font (choose 6 or 8 lines up when viewing on
the LCD)
User Interface -> TV Font (choose 6 or 8 lines up when viewing on the
TV)
User Interface -> Momentary delay (sets how long momentary screens
stay up)
Record Setup -> Set Record Folder
Power -> AC timeouts - set separately from on-battery-power timeouts
Power -> HD spin-down time-outs
LCD -> Brightness, Contrast, Gamma
LCD -> X-Pos, Y-Pos, X-Size, Y-Size
TV-Out -> Brightness, Contrast, Gamma
TV-Out -> X-Pos, Y-Pos, X-Size, Y-Size
No volume display. My cell phone doesn't display the volume all the time, and I don't think the JBMM needs to. You can check it quickly from the Top and Play UIs by pressing up or down. Elsewhere you can check it quickly by pressing On and going to the setup.
Play Modes: One Directory, All Tracks, Single, and Queue can all be easily done with my playlist interface. All Tracks - go to MediaLib and press play on one of the first three items. Single - select one item then press play. Queue, put a song in the play list, play the play list, then every song you add to the playlist after that is "queued" (note you can queue more than one song and you can edit the queue as the JBMM plays it - much more flexible).
Repeat, Scan, and Shuffle - I don't understand why Archos chose their method of representing these. They are orthogonal - you should be able to turn then each on or off independently of each other and any other "play modes". In my UI you can.
Startup Resume is always on in my UI. I don't know why Archos let you turn if off. Just pause what is playing, turn the JBMM off, and when you load back up, press play to continue!
Loudness, base, treble, base boost. Basically can be done via the equalizer. Perhaps loudness or base boost do something special, if so, I'd have no problem adding ONE of them back in, both is confusing.
Play Speed changed - should not effect pitch, in my demo it "doesn't" (well, I don't play anything at all, but I demo as if it doesn't).
