Tiles redesign.

[me4oslav]

I just started working fairly seriously on this plugin redesign. The toggling method from the previous bug report does not count as serious work. :P So, here is the first thing I did - tiles redesign.

Note three things:

• I did two designs - circular and square ones, we have to settle on one. Or better yet, maybe use circles for Artists and Squares for albums.
• I have no clue if this is doable to be implemented. There might be a need for some Clutter and perhaps CSS work. :P
• I've used 220px tiles, which is ok for big monitors, but for tiny one it will be problematic so here is what I am suggesting - detect how big the window size and according to that size display differently sized tiles. Size responsive design. The current small tiles don't fit well on large resolutions. Additionally in preferences we might include an option to disable that responsiveness and set a static size for the tiles.
• The V should be centred. GIMP does not like librsvg ...
• This is just an incomplete first mockup, so we can change stuff.

I actually paid attention to what data is in the mockup this time, haha. I also apologise in advance for the amount of time and work you will have invest in what I have in mind for the coverart plugin.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[fossfreedom]

A side responsive design sounds interesting. Lets talk how it would work.

From GTK we can get the screen size - both height and width.

For the rhythmbox application we can get the tiles window area - both height and width.

The questions we need to decide is as follows:

1. when running the application full screen how many tiles should you see for the width - e.g. 1280px display - 220px tiles you would see approx 4 to 5 tiles.
2. when not running the application full screen what would we use for the width? - the tiles window width or the screen width? - for example - lets say we run the application taking half the width of the screen - would we see only 2 to 3 tiles or would the "responsive" design say that the new tiles sizing should be 110px in width - thus still seeing 5 tiles

The above screen shot looks like something I was envisaging for the redesigned artist view.

i.e. you wouldnt mix album-artists and albums in the same view - just feels wrong.

When clicking an artist what were you thinking should happen? Maybe split the screen into two - the left hand pane being artists and the right hand pane the albums for the artist?

Note - gnome-music and coverart uses a GTK.IconView to show tiles. This does somewhat limit what you can do in terms of "tiles" redesign. What I've done to get things like "shadow" to work is to manually merge a shadow bitmap with the album bitmap. Thus maybe could do "circles" the same way. Using clutter would effectively mean a complete rewrite - there is no GTK "clutter" iconview although I've see someone try to create something like a clutter iconview in vala.

[me4oslav]

I am gonna leave the math aside for a few lines, partly 'cause I am baaaaaad at math, partly 'cause I am more worried about another thing. Lemme tell you about the albums/artists that don't have pretty pictures - the "V" I have use for "Various artists" is what I used to illustrate this case, 'cause obviously "Various" starts with "V". And what I was planning for these albums and artists is the following - you can a circle (for artists) and square (for albums) which is coloured is some colour (I can make a set of colours) and you have a white first artist / album name letter over that baseplate. Is this doable to be implemented? GTK.Label over GTK.IconViewTile? About the albums and artists - I have not thought at all about albums and artists splitting. I will coome up with a cool way to do that, but this bug report is about the tiles design. Shadow - I would rather draw you bunch of baseplates with the shadow and all as images than making you code clutter if that requires complete rewrite. But there is an issue - clipping. If we go with artists as circles, you will have to somehow clip the artist logo / mugshot in a circular shape. I can provide you with clipping baseplates without shadows from which to clip, but I dunno how easy it is to code clipping. And because artists pics would mostly be mugshots (sefies if you wish), I would rather have them as circles. Now, the responsive math - This is the easiest bit design wise, I can do a math for a few windows sizes and do baseplates (provided we don't go with clutter, but static baseplates). Or we can have @satya164 do us the responsive math. The design for it is the least concern. I dunno how easy it will be to code it, but I hope it is possible.

[fossfreedom]

The circle version of an image probably can be done via a Cairo clipped drawing. I'll have a play. You can't have a gtk label over an iconview cell. What you can do is pango draw over the cell image. Look at the tile view preferences and set the label to be within instead of below.

[me4oslav]

Ah yes, pango will do the trick. So, can you do code preliminary version and in the meanwhile I will do the math? If you need any baseplates just say the word.

[satya164]

I'm not very fond of circles and squares mixed here. Also the shadows, a lot of tiles with shadows, meaning elevation, just doesn't feel natural. I would prefer flat tiles any day. (http://www.google.co.in/design/spec/components/cards.html#cards-usage)

Also, even in a responsive view, the tiles feel too big compared to other objects, I think.

[me4oslav]

No, no, we're NOT mixing circle and square. What I had in mind was just like Google music - artists in artists view have circles, albums in albums view have rectangles. The C and S will not be visible in a same view, 'cause we all agree that would be awkward. About the shadow - I am fine with flatter shadow. About the tiles size - aye, 220px might be bit too big for ike everything window size. We can set the biggest size to be 200.

[satya164]

@me4oslav Ah.

But I'm talking about no shadow, not flatter shadow.

What's wrong with lots of tiles in a big screen? The size just feels consistent with other elements in the screen, and not too big.

[me4oslav]

@satya164 I added the shadow, 'cause I wanted to avoid too much flatness. I would rather avoid one size fits all tiles - lets say we make them 150, which would fit up to 1680x1050 (I did some math ;p). However for bigger displays (FULL HD and above) that would mean LOTS of tiles in that view (hello cluttered look) and chopped down text for cases where the album / artist name is too long. Even if we make the text two lines to fix the first issue, the cluttered look issue stiil remains. This happens right now with the small tiles (they are 100px, I think) and it does not look good. Hence I would like to make it responsive.

[satya164]

@me4oslav But too many slides + shadow also mean too much shadow.

Also, about bigger tiles, I don't think that feels consistent, because you're zooming the tiles, but everything else in the UI remains the same size. I'm not against zooming in big screens, I'm against zooming only a certain element.

[me4oslav]

Wait, slides? What are slides? Do you mean tiles? 'Cause I as thinking of a subtle shadow like this one: It does not get overwhelming.

About responsiveness - fair point which I did took into account. What I'm thinking is somewhat of a compromise - three tiles sizes - 100 (small screens), 150 (for up to 1680x1050) and 200 (for full HD and above). There will be slight inconsistency as you have noticed, but the users will ONLY see it if they have big monitors and set the player to smaller size (and then set it to bigger size again). And this way avoid too small tiles in too big window size and too big tiles in to small window size. Is that OK?

[satya164]

Ah, I meant tiles*.

The shadow looks fine, but this is a very spacious layout and I don't think it's a good fit for my small 13'' laptop. May be they could be bit smaller and less padding on small screens?

Anyways, what I would prefer is, like party mode. Where everything else fades away, the player becomes fullscreen and black background, and all tiles become bigger!

[me4oslav]

Well, yes - evidently on smaller screen we will have less padding and subtler shadow. I am not against party mode for full screen. But we are discussing window mode here. We can't have bigger tiles only in part mode, 'cause like I said if we leave the tiles small in window mode on big screens, it looks bad.

[me4oslav]

@fossfreedom, any luck with initial implementation of this?

[fossfreedom]

I have been busy with my moderator duties on Ask Ubuntu as well as stuff on another project - so no time in the last week. I am also away on business for the next two weeks so will only be around via the phone.

[me4oslav]

Okies. I will try to design more cover art stuff in that time.

[me4oslav]

Preliminary artists mode mockup. But what mode it is doesn't matter for this bug report. What matters is that it uses proper spacing and 180px tiles and no square and circle tiles at once. Looks better, right? P.S. Are you OK with circles for artists and squares for albums? I went this way, 'cause artists photos are mugshots and these are usually circular. And albums arts are squares.

[fossfreedom]

Circles vs squares are a good idea. The mathematics though is problematic and will need careful thought. Need to work out how to grab the centre part of an image which the circle can be overlayed with

Why the genre list on the right side? Genre is just another filter and exists currently with the other filter options ... Click the search button. I don't understand the new bar underneath the song and categories. Where has the album/artist information pane disappeared to?

[me4oslav]

Just focus on the tiles and ignore the obvious faults in the UI logic departments for the view. :P The view design is for another bug report.

[fossfreedom]

@me4oslav ( possibly @satya164 ?)

I've spent a fair bit of fruitless time on this.

Creating a circle based image is very simple - cairo drawing here is possible.

What I've been unable to-do is create a shadow-effect around the circle. It seem python3 version of cairo has not been fully updated i.e. the API is not fully supported compared to python-cairo - this stops me doing image-surface manipulations. Also cairo doesnt seem to support "shadows" so you have to code a gaussian blur routine to-do this.

I've also tried to use PIL based images but have been unable to convert successfully a PIL image to a pixbuf for which GTK requires you to-do. Nor have I been able to mask a circle over the top of a JPEG.

Thus, in conclusion, I cannot get the high-quality circular + shadow effect your design calls for :(

Google-music obviously does all this manipulation via HTML/javascript/CSS - so while I could use webkit to display such a HTML page and interact with it (various part of the plugin does this already) - coding such a web-page from scratch is beyond my skill-set.

[satya164]

Can't we add the shadow with CSS here?, since GTK supports CSS?

[fossfreedom]

@satya164

I've only a rudimentary knowledge of CSS with Gtk

• https://www.dropbox.com/s/9p4arelkgscx2wf/testcircle.tar.gz?dl=0

I've uploaded a test program showing an GTK iconview with a circular image renderer

extract and run within the testcircle folder -

python3 test.py

Any chance you can have a look to see what CSS stuff can be applied?

[satya164]

Thanks. I'm already in bed. I'll have a look tomorrow. On Jun 7, 2015 12:23 AM, "David Mohammed" notifications@github.com wrote:

@satya164 https://github.com/satya164

I've only a rudimentary knowledge of CSS with Gtk

• https://www.dropbox.com/s/9p4arelkgscx2wf/testcircle.tar.gz?dl=0

I've uploaded a test program showing an GTK iconview with a circular image renderer

extract and run within the testcircle folder -

python3 test.py

Any chance you can have a look to see what CSS stuff can be applied?

— Reply to this email directly or view it on GitHub https://github.com/fossfreedom/coverart-browser/issues/363#issuecomment-109636757 .

[fossfreedom]

thanks @satya164

maybe another way is to apply a greyish circle slightly offset from the image - gives a slightly 3D effect in this example

• https://www.dropbox.com/s/28y8jdwcwb08gym/test-circle2.tar.gz?dl=0

[me4oslav]

I will have a look after work tomorrow.

[me4oslav]

Question - how is the current shadow around the albums tiles drawn?

[fossfreedom]

the code is very straightfoward -

look at the cellrendererthumb

two layers

first is the image second is the shaded circle.

last part you can see that the shaded circle is painted onto the main layer offset by a few pixels the very last part is that the main image is then painted over the top on the main layer.

Change the +5 values to +/- depending upon the offset required.

I've used a linear gradient for the shaded circle. A bit of an overkill but I was just playing here.

Change the opacity of those color_stop functions to lighten the "grey" - i.e. reduce the final param from 1.0 down to (for example) 0.2 to get a light grey.

[me4oslav]

Rrrrrright, is their anything stopping us from doing the same for the circles shadows? (Of course with much subtler and prettier shadow)

[fossfreedom]

hmm? doing the same for what?

Dont know what "subtler and prettier shadow" means - the grey circle is just a grey circle. All I was talking about above was changing the grey scale and the offset.

[fossfreedom]

@me4oslav

were you actually referring to changing the grey circle and replacing it with a circular PNG shadow of some-sort?

If so - yes that is indeed possible to do - the image on the icon would then be made up of the PNG shadow overlayed with the actual circular cover.

If that is indeed what you were inferring - just need a test PNG shadow to play with - say 256x256 pixels that I would scale according to the coversize.

[me4oslav]

I will do it tomorrow. I am sick today.