Colorful apps icons (ImageMagick expertise wanted)

[Joanna Rutkowska]

I thought that we could somehow improve the appearance of Qubes GUI in
Beta 2, particularly the "Start menu", by preserving the shape of apps
icons (instead of replacing them with colorful padlocks as it is being
done now).

Using ImageMagick tools, I can easily take an arbitrary colorful icon
and convert it into grayscale, e.g.:

convert firefox.png -colorspace gray firefox-gray.png

Now, I would like to convert such a grayscale monochrome icon to another
monochrome icon, but instead of shades of gray I would like to use
shades of some other color, e.g. red, or purple, i.e. the label color of
the VM.

Unfortunately, after quick reading of the ImageMagick docs I fail to see
an easy method for doing this...? Additionally, while I'm pretty sure it
should be easy to use shades of red, green, or blue, instead of gray,
I'm not so sure about using shades of other, i.e. non-basic colors, such
as yellow, or purple (we do have such color labels in Qubes)...?

I though that perhaps somebody on the list might have more experience
with image editing and ImageMagick toolset in particular, and could help
with this?

Thanks,
joanna.

[Alex Dubois]

What about either preserving the original icon, or possibly take the shade of grey and put a colourful border, background or slate underneath?

Shade of grey with coloured border would be better at spotting the security level...

My 2c

Alex

[Pete MAYNARD]

You could use -colorize to specify the amount of colorization as a percentage  with a comma-delimited list of values (e.g., -colorize 0,0,50). -fill is used to standardize the colour, with out it you will get a relative colour percentage from the original image.

convert firefox.png -fill "rgb(255,255,255)" -colorize 0,100,0 firefox-green.png
convert firefox.png -fill "rgb(255,255,255)" -colorize 0,0,100 firefox-blue.png

I also found pseudocolor, which generates channels from the image and merges them together. Could provide some insight. - http://www.fmwconcepts.com/imagemagick/pseudocolor

Hope this helps,

Pete

--
You received this message because you are subscribed to the Google Groups "qubes-devel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to qubes-devel...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Pete Maynard
http://petermaynard.co.uk

[Joanna Rutkowska]

On 02/02/13 16:29, Pete MAYNARD wrote:
> You could use -colorize to specify the amount of colorization as a
> percentage with a comma-delimited list of values (e.g., -colorize 0,0,50).
> -fill is used to standardize the colour, with out it you will get a
> relative colour percentage from the original image.
>
> convert firefox.png -fill "rgb(255,255,255)" -colorize 0,100,0
> firefox-green.png
> convert firefox.png -fill "rgb(255,255,255)" -colorize 0,0,100
> firefox-blue.png
>

This is close to what I want, but not exactly. The problematic part is
that the above procedure seems to map the grayscale levels of the
grayscale representation of the input picture to different hue values,
which results in e.g. the red-colored firefox icon to contain not only
red shades, but also pink, orange and yellow! Such random mixture of
colors can be characterized as "controversial" at best ;)

So, what I want instead is to map the grayscale levels (again I can
easily generate the grayscale picture via "convert gray") to various
lightness levels (as in the HSL mode), but to keep the hue constant
(this would be chosen to match the VM label color). So, I think we need
an operator that works on HSL/HSV space, not on RGB space, which is
quite inconvenient for any color manipulations...

Thanks,
joanna.

[Joanna Rutkowska]

On 02/02/13 14:43, Alex Dubois wrote:
> What about either preserving the original icon, or possibly take the
> shade of grey and put a colourful border, background or slate
> underneath?
>
> Shade of grey with coloured border would be better at spotting the
> security level...
>

My point here is to make this somehow aesthetically pleasing also...

joanna.

[Joanna Rutkowska]

Ok, so one thing I forgot about (and strangely nobody on the list
pointed out?) is whether we can really trust the ImageMagick's convert
program (which we would need to run in Dom0) to not be exploited by a
malicious icon file? I think we cannot, unless we write such program
ourselves, preferably in some "safe language".

It wouldn't change much, of course, if we did the
conversion/colorization in VM either -- if the VM served us a malicious
icon file we still couldn't be sure if the Window Manager in Dom0, when
displaying this icon in the "Start menu" won't get exploited (plus we're
loosing guarantees for proper colorization according to the VM's real
color).

So, anybody interested in writing such a _trusted_ icon converter?

joanna.

[Abel Luck]

Joanna Rutkowska:

Could you perhaps use the GIMP (or w/e) to create an example of the sort
of transformation you're looking for? I'm still not sure I understand.

[Joanna Rutkowska]

I don't really know how to perform this conversion in GIMP or any other
graphics editor. But I can describe the steps, that I believe would get
me what I want:

1) Take an arbitrary icon file (png?) on input.

2) Convert it to a grayscale image. In such image, as I understand, each
pixel represents a shade of gray, from white, to black (say, this means
each pixel is described by a number from 0-255).

3) Now, take this grayscale image, and for each pixel convert this pixel
to a HSL color:

pixel.new_color = HSL (hue(vm_label), saturation(vm_label),
pixel.grayscale_level)

In other words the grayscale level should now be mapped to the HSL
lightness parameter, while the hue/saturation should remain constant,
set according to the VM's label color.

Probably we can skip the #3 point above, and perform the conversion in
one step, such as:

pixel.new_color = HSL (hue(vm_label), saturation(vm_label),
grayscale(pixel.color))

This sounds like a trivial program to write in e.g. python, however one
catch is the we don't want to use any library for parsing the input PNG
file, because this is where the attacker might exploit us. Yeah, I know,
python is considered safe in terms of memory operations, etc, but I
would still prefer not to use some full blown image parsing library and
instead some minimal, hand-written, PNG parser written with speciousness
in mind (extra sanitation of each header field)...

joanna.

[Joanna Rutkowska]

I think this could be further simplified by doing .png parsing in the VM
and exporting to Dom0 some super-simple bitmap format, perhaps just an
array of RGB values -- no headers, or just a minimal header that tells
the N, M which are dimensions of the array and the index of the
transparent color. Now, the program in Dom0 could just expect this very
simple input, discarding everything that doesn't look like it.

Then it could proceed with this rather simple color transformation I
described above and then save the array as a PNG file using whatever
python library there is for it.

joanna.