I have 2 questions that I can’t seem to figure out.
If you’re in iTunes and click on an Album or Movie, a sheet opens. You see those popups more often as help text. With a triangle a-like arrow. What kind of sheet is this and can this be done with Xojo without plugins?
The other question is about the text colors iTunes uses. Somehow they calculate 2 text colors that stand out of the background blur (so it’s always readable) but also ‘fit’ into the color range of the background (so it’s never pink or lime on a black background). Any suggestions on how to calculate 2 good colors like how iTunes does it? I don’t think that simply inverting colors based on some average background color will do the trick. Maybe someone knows a smart trick for this?
and the color: I would start by counting the appearance of different colors on the thumbnail and would chose the one that appears most often as background color, then calculate a text color by inverting the backgroundcolor’s value property around 0.5 (for example if its value is 0.8, use a textcolor with a value of 0.2 and vice versa. If it’s around 0.5, use 0.1 or 0.9 instead.)
The second text color for the subtitles could be just another, not so frequent color from the first step (again if its value differs enough) or the textcolor but with a slightly modified Hue value.
@Michel Bujardet . Thanks! I’m trying it now. Looks promising.
@Ulrich Bogun. I have my backgrounds. Those are blurs of the thumbnail (leaving a smear of the main colors).
The two text colors I’m talking about are the ones as on the screenshots. In the first one, you see (for example) that ‘Insurgent’ has a different color than ‘2015’ and ‘Plot summary’. In iTunes, those two colors are always perfectly readable no matter what background blur they used.
So what I have is a canvas with a background (blur) and I’m looking for two colors that are readable and somehow fit into the color scheme.
See here:
I like the idea of changing the Hue for the text based on the average background color but how do I calculate that based on what I have on my canvas? I was playing with canvas.RGBSurface but I don’t have much experience with this and not getting much further.
The iTunes thing is more than just a blur of the cover. I read something when it first came out where someone went through and broke down the math they pull off. The background color iTunes selects is based upon the colors around the edge of the cover, and the foreground text colors are selected from the main content of the cover by sampling the inner circle of the cover. I also seem to recall something about using the color wheel/table to help select text colors and increase visibility.
For example, take a look at how iTunes handles the Freemasons Shakedown cover. The text is a mix of the skin tones, and because the edges are black and skintones the background it has created is a darker version of the skintones.
It’s not about the background, it’s about picking proper Text Colors for a background. A text color that fits within the color scheme and still keeps the text readable.
I don’t know upfront what the background color is going to be. Let’s say if it’s an all pink or green background, I can invert the text color to make sure it’s readable but it looks horrible. Somehow iTunes picks (2) text colors that fit the background perfectly.
If the background is black (RGB 0,0,0), iTunes goes all the way to the other end with an RGB 242,242,242 text color. If it’s white (RGB 255,255,255), iTunes uses an RGB 12,12,12 text color.
How they come up with text colors for any background color other than black and white is a mystery to me. They even use 2 different text colors.
Tim, I think you’re right about some sort of color scheme/wheel/table.
What I’ve tried so far is figuring out all background pixel colors and then trying colors like least used, average, highest, lowest etc. and tried to adjust my text color based on that.
So far no luck finding something that always works.
[quote=203353:@Marco Hof]What I’ve tried so far is figuring out all background pixel colors and then trying colors like least used, average, highest, lowest etc. and tried to adjust my text color based on that.
So far no luck finding something that always works. :|[/quote]
I suspect the iTunes layouts are not entirely automatic, and that graphic artists may be tweaking them to obtain the best result. You would not believe the level of demand graphic artists can have.
Alternatively, they may have created contrast rules, which are part of the iTunes color charter. This would explain the 12,12,12 text color on white. versus 242, 242, 242 on black.
If you were to apply simple BW contrast rules, though, simple light distance calculation would not be terribly off. 255-12 = 243.
For color, you got to use the color complimentarity, which is based on the diametrical opposite on the color wheel.
Not even sure they use complimentary colors. In the example you display, the text color is not in the opposite ; it is the same color as the background, but lighter.
It may not be possible to have an automatic setting without a whole set of graphic rules in addition.
[quote=203353:@Marco Hof]What I’ve tried so far is figuring out all background pixel colors and then trying colors like least used, average, highest, lowest etc. and tried to adjust my text color based on that.
So far no luck finding something that always works.[/quote]
One problem is that your method of just blurring the cover brings too many different colors and therefore has too much contrast. This would mean you’d have to use different text colors. Apple’s background looks more like one solid background cover with a few lighting effects and a soft blur effect.
The text, like others have written, has just another brightness value. I’d recommend to leave the RGB color model and use HSV instead. With it, you can either change the value (= brightness) without changing the hue, and for a variation of the text color you can even change the hue a bit, but not too much.
Or, if you like to keep your blurred cover, you’d have to draw the text with a different blendmode so it mixes with the background. I don’t know what and if kind of OS X extension you’re using. I am sure MBS supports the CGGraphics object fully, but unsure about MacOSLib. Theoretically you could grab the relevant code from https://github.com/UBogun/Xojo-iosLib/wiki/AppleCGContext for your OS X project with only a few modifications. Being a foundation object, they should be (as good as) identical on both systems.
@Michel Bujardet. It’s automatic because when I replace standard artwork with my own random images, it comes up with matching backgrounds and text colors. And yes, it’s complimentary colors that I’m looking for. I didn’t know there was a word for it.
@Norman Palardy. That’s awesome. Thank you so much. Those links are a great find and great help. I’ll go study it.
@Ulrich Bogun. True about the blurring. I need to change it to a softer blur but I can easily tweak that. iTunes seems to partly blur and ends up with less colors and a smoother background. And yes, it seems I was on the wrong track with RGB. HSV seems way more suitable. Thank you!
You are right of course. In French it is complémentaire, which is different from compliment. Thank you for noticing it.
I am not so sure you want complementary colors. In the example you show, it is not the case.
The background is made of two colors in gradient from 57, 51, 37 to 64, 49, 36. Average 60, 50, 36. The numbers are of a similar color but lighter 220, 138, 112 and the descriptions even lighter and somewhat yellowish : 219, 165, 126.
The same kind of differences happen in the purple example.
This is definitely not complementary. Not too sure about hue either. Changing it would not make the color lighter. There is indeed a slight hue delta, but it is not the core of the difference, which is mostly white.
Finding the right combination probably requires analyzing several similar examples. And see what happens with much lighter colors as well as when text becomes lighter as the background or darker. What threshold is there.
You’re right. I figured that out after reading the URL’s from Norman. Those links give good examples for a solid background but not for blurred backgrounds. I think older versions from iTunes used solids and now they changed it to blurs.
I started extracting the dominant colors anyway to see where I end up with. Maybe I can tweak it enough by (for example) blurring more so end up with less colors.
Here is a good example (in JS) that uses solid backgrounds:
I found some more examples but all are for solid backgrounds.
It’s a fun side project though. I’m learning a lot.
Indeed, it looks as if the JS project does use the lightest color when the background is mostly dark, and the darkest one when the background is mostly light. The result is not identical to iTunes, though. In Kid A, the numbers are barely readable. I suspect iTunes would have a much better rendition. I looked for that album on iTunes, but am unable to obtain the popover as posted in this thread. Neither in Mac OS X or Windows, or iOS. What is the trick ?
I think it needs to be in your library. You can just grab the cover art someplace and manually paste it into an album like I did here for something I didn’t have art for (get info > artwork). At least that’s the only way I’m seeing this drop down display.
Indeed this is interesting. The iTunes display is almost identical for the text color, but the numbers and title are very different from the JS example. So they do not seem to just use the palette.
Looking again at your first example, you may want to blur a tad more, and also use a threshold under which the color cannot go, so you cannot have a background entirely black. The Freemasons Shakedown cover in Tim’s example is a very good example : no black in the background color.
Well, after fiddling more hours with it, I had to put it to the side for now. I’ll get back to it if I have some new inspiration.
I went in the direction of reducing the depth to 256 base colors. The most used would then be the background. Second for text.
(I’d hoped that Xojo would help me with reducing color depth but no luck. I found a cool Xojo library ‘ImagePlayEffectsLibrary’ that has really nice routines for graphics but unlike the others, the routine for reducing of colors is extremely slow.)
But while playing with that and getting some results, it’s is way too slow and far from perfect. Even when figuring out the most dominant color, it doesn’t guarantee that the second most shows readable on top of that.
Anyway, thanks for all the help. If I figure out the solution, I’ll follow up here.
