Graphics, Design and UI

KPI Icons neatly designed for colour blindness

Andy Burns, , , , 3 Comments

I was talking with one of our customers about SharePoint branding the other day. They’ve got some neat icons for displaying the status of things. However, the guy I was talking to wasn’t keen on them as they were the same colour (although their shape differs). This sort of led around to a discussion of the use of colour (or ‘color’) in web development.

One of my ‘neat tools to have around’ is the Color Contrast Analyzer (which I think you can get here -I must confess, I’m not sure who exactly wrote it or where exactly you’re supposed to get it from). This little tool lets you check the contrast of colour schemes so that your users will be able to use the site, even if they’re colour blind. Fair enough. The really exciting bit, though, is the ability to take screenshots and then simulate the different types of colour blindness.

I used this to look at the SharePoint KPI icons. Similar icons to this are available in Excel 2007 for conditional formatting. I thought this was pretty interesting. For a start, it turns out that colour blindness is more complicated that just “red-green-blue” colour blindness, not least because the photoreceptors for the different colours overlap in their response to different frequencies of light. Still, this tool give a good view of the effects of the main conditions. For a full description, read this article at Wikipedia.

KPI - Normal
Normal		 KPI - Greyscale
GreyScale
KPI - Deuteranopia (Red-Green Colour Blindness)
Deuteranopia (Red-Green Colour Blindness)		 KPI - Protanopia (Different Form of Red-Green Colour Blindness)
Protanopia (Different Form of Red-Green Colour Blindness)
KPI - Tritanopia (Blue-Yellow Colour Blindness)
Tritanopia (Blue-Yellow Colour Blindness)

What this shows is pretty obvious – that the icons from red and green are pretty similar for red-green types of colour blindness (what a surprise), but that the shape of the icons still gives a good visual cue to the state of the KPI. Given that (according to Wikipedia) 7-10% of men are Red-green colour blind, this is important. It’s worth noting that women are very rarely colour blind, and that this probably explains my Dad’s dress sense and my Mum’s opinions on it…

Advertisement
KPI Icons neatly designed for colour blindness

TableLayoutPanel – doesn't autosize or autoscroll correctly

Andy Burns, , , 8 Comments

I’ve been doing some Windows forms programming lately – not really my thing, but needs must. I’ve got an application which needs to dynamically create a form at run time, and so I’m using a System.Windows.Forms.TableLayoutPanel.

All the controls contained by the TableLayoutPanel resize automatically, and the TableLayoutPanel automatically provides scrollbars. “Great!”, I thought, “This will deal with large forms nicely.” Wrong!

The problem is when form has too many fields – it becomes deeper than the display area of the TableLayoutPanel. This is fine – the TableLayoutPanel should automatically add a vertical scrollbar, and adjust the size of the controls it contains to fit in the smaller area. Except it doesn’t. What I actually get is this:

Problems with TableLayoutPanel

Notice that I’ve got a vertical scrollbar, but it hasn’t resized the child components. This, they overlap some of the fields – and I now have a nice horizontal scrollbar. Arse.

I eventually found that others had had this problem and told Microsoft about it. However, they’ve decided not to fix it. Thanks Microsoft, that cost me an hour and half – it’d be wise to fix it. I found the answer from the same link – add a vertical scrollbar’s width as padding on the right of the TableLayoutPanel.

TableLayoutPanel – doesn't autosize or autoscroll correctly

Nice list of fonts

Andy Burns, , Leave a comment

Nice fonts here. Now if there were some way to push them onto the client…

…actually, why the hell isn’t there? A truetype font is, what, 100-200k? Why aren’t these downloaded to some form of isolated storage, and used for display purposes in the browser. You can even, oh, I don’t know, have a font cache, so you don’t have to download them repeatedly. Perhaps some sort of signing mechanism to avoid version problems.

Comments from my old blog:

Yes – very good list. Myriad is a great font – it manages to strike a balance between being pretty, and practical too. Fonts are one of those areas where I benefit from having a designer for a brother, so was exposed to lots of barracking when I was younger and playing with DTP software… “make the line height 120%”, “make the body text smaller”, “no more than 2 fonts on a page!” and other rules of thumb…

By Jonathan at 18:06:08 Tuesday 5th June 2007

Nice list of fonts

Graphics and Developers

Andy Burns, , Leave a comment

Coding Horror has blogged about developers needing to know graphics programs, and I agree entirely. Jeff’s right, we’re not designers, and never will be (I don’t even wear glasses, let alone ‘cool’ ones). Don’t try and learn how to build beautiful websites if you’re a developer – either, you’re gifted and you already can, or there is simply too much learning involved.

But we can build ‘fair’ sites, and rough mock ups. Every site doesn’t have to be a work of art, just as every ceiling doesn’t have to be the Sistine chapel. As developers, we should make an effort to not build websites that look crap.

And if you need to build the Sistine chapel, remember it’s a team effort. You can build the structure – and get a specialist to make the ceiling pretty.

Link to some tutorials Jeff provided (note to self – take a look)

Graphics and Developers

What the hell are the System.Drawing.Color predefined Colors?

Andy Burns, , , Leave a comment

The .NET framework has a number of predefined colours in the System.Drawing.Color class. You ‘d think this would be easy to iterate over – after all, there’s quite a lot of them. I can see that that would be useful for, say, drawing palettes.

Well it ain’t easy. They’re not an enumeration, so you can’t iterate over them. Instead, to get a list of the colours, you’ve got to do something like:

List<Color> colorList = new List<Color>();

Array colorsArray = Enum.GetValues(typeof(KnownColor));
KnownColor[] allKnownColors = new KnownColor[colorsArray.Length];
Array.Copy(colorsArray, allKnownColors, colorsArray.Length);

foreach (KnownColor c in allKnownColors) {
Color col = Color.FromKnownColor(c);
if(( col.IsSystemColor == false) && (col.A > 0)) {
colorList.Add(col);
}
}
That’s a lot of work for something obvious like iterating over colours!

What the hell are the System.Drawing.Color predefined Colors?

Arial…

Andy Burns, , , Leave a comment

Strictly, not a coding thing, but it’s about font style. How to Spot Arial and The Scourge of Arial are interesting reads.

For years now I’ve been interested in typography. It seems to me that it’s one of those overlooked things – that web page looks okay, until someone who knows about type works on it, and then it looks great.

I agree with the article, I don’t like Arial – the weight of the top of the ‘a’ seems wrong. Not sure what to use instead – at the moment I use Tahoma and Trebuchet a lot, but I’m not entirely happy with either. And yes, I’m sticking with the free fonts – I’m not a specialist, I ain’t paying for fonts (blimey but some of them cost…)

Arial…

Styling Checkboxes with JavaScript

Andy Burns, , , , Leave a comment

I’ve been reading recently about how to do Styled Checkboxes. Well, this was something I was working on too – and naturally, I like my way more.

How it works
When the page loads, the JavaScript in checkbox.js checks all of the INPUT tags on the page. If they are a checkbox, and have BOTH and imgOn and an imgOff, then the INPUT tag has its style set to hidden, and the appropriate images are added to the DOM. They’re floating, though, and so are positioned where the checkbox was on the page.

When you click on one, it changes the state of the underlying checkbox (it’s still there, just hidden), and displays the image appropriate for that state.

When the form is submitted, the checkbox is submitted as normal.

As a user leaves the page, on unload the code in checkbox.js tries to tidy up after itself, although I’m a little concerned about memory leaks after some interesting articles I read recently.

Known Issues

  • These controls are not part of the tabindex. My friend Bruce Sandeman has been working on a version of this where the images are ‘tabable’, but is struggling to turn the border of the images off. I’ve included the code anyway – see checkbox2.js. I’ve not reviewed it yet, so user beware!
  • It’d be nice to hand all events on to the original checkbox for handling.
  • At the least, some sort of mouseover/mouseout? It’s not so obvious that these are checkboxes, at least with the demo images I’ve chosen.
  • I’m a little concerned about memory leaks given some things I’ve read recently and my use of closures. If anyone knows how to prove/prevent any leaks, let me know, that would be cool

How to Use

Real tricky this – include the checkbox.js file in your HTML page.
<script src="checkbox.js"></script>
Then, in the HTML for each of your checkboxes, add two new attributes – ‘imgOn’ and ‘imgOff’. The value of these attributes should be the path to the images you want to use for the checked (‘on’) and unchecked (‘off’) states.

<input type="checkbox" value='2' imgOn='tick.gif' imgOff='cross.gif' />

and with luck, that should be you done.

See the code below: Continue reading “Styling Checkboxes with JavaScript” →

Styling Checkboxes with JavaScript