Loading Profile...
Starting a new Add-On Project
I started building a mock-up on what i think a good skin and layout for Songbird would be. The aim of the Feather was to give songbird a clear and simple look and put emphasis on the things that matter the most. The name i came up with for this feather is Focus.
Parts of this skin obviously shouldn't be done via the feather, but through separate add-ons. For example, the New Tabs part should be a separate add-on, and probably called "Project Focus: New Tab Page". Same goes with the Library navigator on the nav-bar and maybe even the main menu hider. So it's not just a feather, but a slew of add-ons that i call (you've probably guessed) Project Focus.
Now I'm not just showing this to everyone just because i feel it. I need your help, because i honestly can't do crap outside of Gimp. So if you are an Add-On developer (or even have the potential to be), I'd like to invite you to become part of a team for developing the Project Focus Add-On Suite.
One small note: The mock-up was done purely in Gimp and i also forgot to make a media-view button.
Parts of this skin obviously shouldn't be done via the feather, but through separate add-ons. For example, the New Tabs part should be a separate add-on, and probably called "Project Focus: New Tab Page". Same goes with the Library navigator on the nav-bar and maybe even the main menu hider. So it's not just a feather, but a slew of add-ons that i call (you've probably guessed) Project Focus.
Now I'm not just showing this to everyone just because i feel it. I need your help, because i honestly can't do crap outside of Gimp. So if you are an Add-On developer (or even have the potential to be), I'd like to invite you to become part of a team for developing the Project Focus Add-On Suite.
One small note: The mock-up was done purely in Gimp and i also forgot to make a media-view button.
I’m hopeful
3
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The best point from everyone
-
Hi Lib, I'm answering here, I think that makes sense ;)
warning! long post! :>
I can't help coding on this project (too busy with keeping all the other stuff up to date and still have a playlist for pure player to code), but maybe I can give you some advice on how to change the Layout.
Basically, there are 3 ways to change the Layout:
1.) XUL Overlays
2.) Dynamical modifications via Javascript.
3.) Using a complete new XUL-Layout.
I have worked with all these: Pane Buttons are using 1), Q4 uses 2) and Pure Player uses 3). Here is my advice, but I discovered all this only by myself, though, I might wrong here and there. Anyway, what I found out:
No 1.) Is best & easiest for adding things to Layout, but it was a mess, when I tried to move existing elements with it, especially the once that are "binded" (these have red children in the DOM-Inspector). If I tried to move the tab-bar for Q4 that way, it basically stopped working, I think because all the Listeners are broke by the movement. Also it is difficult to apply the Overlay only to a specific feather.
No 2.) Is good for moving/changing & adding things to the Layout. One big benefit is, that you have more control over how and when things are moved, than with Overlays. But it's a lot more work than Overlays, so I wouldn't use it for just adding things. Also there might be modifications, that can't be done that way. Another reason i prefer this over No. 3 was, that I think it won't have to adept the skin very much, to get it to work with future Songbird-Version (if they add some buttons here and there, I don't have to repeat these changes. I would have, if I used No. 3)
No 3.) Gives you full control over the look. Pure Player wouldn't be possible otherwise. However, it is very much work. Only the few elements I have in PP took quite a while for me, to understand them and get them to work. But this is the cleanest and most professional way, because Songbird doesn't have to change anything (that might go wrong), it just takes the new Layout-file and uses that one. You can do like everything with that.
If I see your Mockups, No. 1) is not the best choice. I guess your changes might be possible with No. 2), but I think they are a little bit too complicated (status-bar under the progressbar, f.e.). So I think the way to do this right, would be No. 3. As I said, it's a lot of work, you might even have to change override some Bindings here and there. But it's possible.
If I were you, I would take a really close look on the More Gonzo-Addon: It's "Alternate" view does pretty much exactly the ground-work you need: implementing a new Layout-XUL, that is basically the default XUL file, only with some small changes.
That's what you should try to get to work in the first place: Create an extension that loads your own copy of Songbirds default XUL as a different layout. If you did this, start changing your layout-XUL slowly and try to adjust it step for step to your needs.
For how to get a working AlbumArt into the Media-Pane, take a look at Pure Player or Medium Player (it requires some JS-Work, too).
Besides the mdc (extremely useful!!!), what I found really helpful is the Search through Songbird source. It helped me a lot, to see how they do some things, and it helps with songbirds own functions & feature (that are not documented in mdc, and only a little bit on the SB-Wiki).
Sorry for the long post, but it still would be nice, if a professional dev could comment it, to tell us if my post is completely nuts, or if I'm correct, at least here and there ;)
I’m confident, that LIB can do this
3 people think
this is one of the best points
-
Inappropriate?I made a topic a few months ago about integrating a new tab page into Songbird similar to what they are developing for Firefox: http://getsatisfaction.com/songbird/t...
At the time, they were frequently posting progress about the project on Mozilla Labs, so I was hopeful that it would find its way into Firefox 3.5 and eventually Songbird. They seem to have taken a break from it for a while, so maybe we should wait for a while on the new tab page idea until they finalize it.
As for the feather mockups, they look very nice. It would be interesting to see album art incorporated into the control panel as you have it to free up room in the main service pane (although I'm afraid that it might be a little small. I have always hoped that they will make it possible to have more service panes so that the art could be put somewhere else than the main service pane). Maybe instead of cramming the song info and volume all to the left side of the main controls, you could only have the song info on the left and move the volume control to the right. That way you could also make the volume control straight instead of circular, since it can be difficult to adjust circular dials in programs (I used to have some trouble with circular volume dial in the Winamp skin MMD3). And what exactly are the items up top that say Library, Playlist 1, Playlist 2?
1 person thinks
this is one of the best points
-
Inappropriate?When you say straight, do you mean vertical or horizontal? I tried horizontal at first and it looked out of place. Maybe if keep it the same and just put a vertical bar? I know it seems cramped, but i can't put album art underneath pane toggle buttons. It's small enough as is.
One of my aims while designing this was to rid the necessity of the service pane. The service pane just takes up space and has always bothered me. So the text at the top (Library, Playlist1, Playlist2) is a navigator to switch through media pages such as Downloads, Concerts, Releases, and your playlists. The new tab page is part of this "rid the service pane" effort, and i can't wait until it's implemented. (I'm following the page you linked me too now)
This is how it looks horizontal:
Now that i look at it, i guess it doesn't look too bad :P
The arrows need a little work, but you get the idea.1 Comment Add a comment
This is one of the best points
-
I think the volume slider looks really good there. It will also look better balanced when you are playing a song or artist with a longer name so it takes up more room on the left side.
I just realized where the progress bar is, and I like it a lot. I don't know how much of the interface it is possible to change by coding a feather, but I do like how simple it looks not having the status bar above the player controls. I'm worried though what to do for the add-ons that keep icons there, like last.fm and personas. Maybe you could try to make a mockup of this with a status bar; it wouldn't look as simple, but it might be more practical, and then you could move the service pane buttons back on it and move the album art and song information all the way to the left.
I think it would be great if a feather made it possible to navigate to playlists and other places without the service pane showing. I currently hide my left service pane using the Pane Buttons add-on because it saves so much room and I don't use anything in it too often anyway, but it would be great to still have a way to select playlists and stuff. I'll keep thinking about it and I'll post any ideas if they come to me. Right now I am wondering how exactly the tab bar will come up; maybe the forward and back buttons could be on the tab bar, which would only be visible when you open up a new tab. That could simplify the look even more. -
Inappropriate?Thanks for offering your ideas and help Murphy.
Okay, i guess I'll keep the new volume bar there because it seems to be better overall. As for the progress bar, I'm not sure if that is possible to do either, but i think it really does help with keeping the interface clean. I had two ideas for the status bar: my first idea was that it autohides, kind of like Google Chrome does. My second idea was that considering the pane toggle buttons are part of the status bar, i could just turn that part into a status bar, but your idea seems like an improvement to this one.
The forward and back buttons do have a function while browsing through your media pages, even if it's rarely used by you or me. I think that should stay as is. And did you see the tabs on the second picture? I personally think they look a little chunky, but once again, that's the idea. Also, the media page navigator should probably be a separate add-on so other feathers can share the function. I can't code that, so I'm hoping a developer stops by here and offers his/her skill. -
Inappropriate?I'm not useful in the coding department, but I really wanted to let you know how much I like the feather you created. The design is so smooth and simple, but still very realistic. I love Songbird's add-ons and how they let me interact with the program, but I still long for a cleaner-looking interface. I hope that this is possible, and that someone with coding abilities decides to make this happen!
1 person thinks
this is one of the best points
-
Inappropriate?Hi Lib, I'm answering here, I think that makes sense ;)
warning! long post! :>
I can't help coding on this project (too busy with keeping all the other stuff up to date and still have a playlist for pure player to code), but maybe I can give you some advice on how to change the Layout.
Basically, there are 3 ways to change the Layout:
1.) XUL Overlays
2.) Dynamical modifications via Javascript.
3.) Using a complete new XUL-Layout.
I have worked with all these: Pane Buttons are using 1), Q4 uses 2) and Pure Player uses 3). Here is my advice, but I discovered all this only by myself, though, I might wrong here and there. Anyway, what I found out:
No 1.) Is best & easiest for adding things to Layout, but it was a mess, when I tried to move existing elements with it, especially the once that are "binded" (these have red children in the DOM-Inspector). If I tried to move the tab-bar for Q4 that way, it basically stopped working, I think because all the Listeners are broke by the movement. Also it is difficult to apply the Overlay only to a specific feather.
No 2.) Is good for moving/changing & adding things to the Layout. One big benefit is, that you have more control over how and when things are moved, than with Overlays. But it's a lot more work than Overlays, so I wouldn't use it for just adding things. Also there might be modifications, that can't be done that way. Another reason i prefer this over No. 3 was, that I think it won't have to adept the skin very much, to get it to work with future Songbird-Version (if they add some buttons here and there, I don't have to repeat these changes. I would have, if I used No. 3)
No 3.) Gives you full control over the look. Pure Player wouldn't be possible otherwise. However, it is very much work. Only the few elements I have in PP took quite a while for me, to understand them and get them to work. But this is the cleanest and most professional way, because Songbird doesn't have to change anything (that might go wrong), it just takes the new Layout-file and uses that one. You can do like everything with that.
If I see your Mockups, No. 1) is not the best choice. I guess your changes might be possible with No. 2), but I think they are a little bit too complicated (status-bar under the progressbar, f.e.). So I think the way to do this right, would be No. 3. As I said, it's a lot of work, you might even have to change override some Bindings here and there. But it's possible.
If I were you, I would take a really close look on the More Gonzo-Addon: It's "Alternate" view does pretty much exactly the ground-work you need: implementing a new Layout-XUL, that is basically the default XUL file, only with some small changes.
That's what you should try to get to work in the first place: Create an extension that loads your own copy of Songbirds default XUL as a different layout. If you did this, start changing your layout-XUL slowly and try to adjust it step for step to your needs.
For how to get a working AlbumArt into the Media-Pane, take a look at Pure Player or Medium Player (it requires some JS-Work, too).
Besides the mdc (extremely useful!!!), what I found really helpful is the Search through Songbird source. It helped me a lot, to see how they do some things, and it helps with songbirds own functions & feature (that are not documented in mdc, and only a little bit on the SB-Wiki).
Sorry for the long post, but it still would be nice, if a professional dev could comment it, to tell us if my post is completely nuts, or if I'm correct, at least here and there ;)
I’m confident, that LIB can do this
3 people think
this is one of the best points
6 Comments Add a comment
This is one of the best points
-
Thanks, that explained a whole lot. I think I'll do option three, and i also believe my little experiments with DOM inspector makes alot more sense now. I'm still open to developers, but i think i'll begin developing Focus.
-
i <3 atreiu
(in the platonic "I love any developer willing to help other developers" sense of <3) -
I love atreiu in the other kind of way...
-
-
LOL, yeah, i love you too, guys... :>
Hey LIB53, I see you are using GEdit, I used this in the beginning, too, but now I found Komodo Edit much better, and only use this now. You should take a look at it. I love the auto-complete for like every code (JS, XUL, CSS...), the project management and the powerful search & replace functions. And it's very easy and intuitive to use. -
Sorry for the side note, but GetSatisfaction doesn't have a PM system; I just wanted to let you know that I got your message on last.fm, atreiu, and sent you some ideas. And LIB53, looking good so far! It's cool that you are really learning how to make it happen.
CHAMP
CHAMP
