D-Icons

Royalty Free Icons for Developers and Designers!

Home
Set 1 - d-icons
Set 2 - d-icons2
Set 3 - d-Documents
Set 4 - d-Users
Set 5 - d-Smart Icons
Set 6 - d-Crisp
Set 7 - d-Crisp Letters
About
Licence
Purchase
Downloads
Get Icons FREE!
Clarion Icons
Using Icons in Clarion

Using Icons in Clarion

Multi-Format Icons

Modern icon files often contain more than one size of icon.  This is a sensible strategy, because icons are meant to be small, and rather than using some algorithm to calculate what an icon should look like, it allows icon makers to actually include different icon designs for different sizes and color depths.  Small icons need careful design - a 16x16 icon is exactly that - there is not much room for artistic scope:

This graphic shows a 16x16 icon in design mode, with the actual icon in real size beside it:

 

Compare this to the detail you can put in a 32x32 icon (which of course has 4 times as much detail) :

 

Of course, multi-format icons are a feature of 32 bit operating systems, not 16 bit ones.

The d-crisp icons contain these formats in one icon file:

Note that there are icons in this file that will display correctly under 256 colors.  Not essential perhaps for this design, but for this icon (from the d-smart icons) it might make a big difference:

As a comparison, here is a 128x128 gif file resized in clarion:

although you can get any size you like, the lower sizes suffer from distortion because it's hard to design an algorithm that can remove 75%+ of the data, and still end up looking good.  This is better done at design time, and that's why we have multi format icons.

Clarion and Icons ...

As a rule, the Clarion 16 bit IDE  displays only 32x32 icons.  No matter the size of a button you use at design time and no matter the formats within the icon, the icon that the IDE will display will be a 32x32 one.

However, your 32 bit program when compiled should display it correctly. (Apparently Clarion 7 will display them ok in the ide )

For interest I made a screen with different height buttons using one of the multi-format crisp icons the text on the button is the button  height.  All buttons show the same icon.    Here it is in the IDE :

 

 

 

And here it is in a compiled program

 

There are a couple of things to note

Left justifying the button generally makes it look better, even if there is no text:

 

And as a rule (remember the height is in DLUs, not pixels)

-          if the height is less than 16 it will display a 16x16 icon

-          if the height is less than 25 it will display a 32x32 icon

-          if the height is greater than 25 it will display a 48x48 icon, but be careful look at the 70 height button with 2 widths !

 

If users are allowed to resize your screens, you will be better off using the multi-format icons but sticking to the above guidelines when designing windows.

This is what a 16x16 icon looks like on a button that is 50 high:

 

In the ide a 16x16 icon is resized to 32x32 and it looks silly:

But, in a compiled program the 32 bit runtime knows how to handle 16x16 icons:

 

This would probably look better if the larger one were put there automatically

 Icons on Windows

Next comes the problem of placing icons on windows. 

If you place a 16x16 icon on a window, the window formatter places a default 32x32 image control on the window, and stretches the icon and it looks bad:

So if you really want a 16x16 icon on a window on a window you need to tell the Image control to stretch the icon, and explicitly state the size you want.

An example

 

(Note that it is stretched)

 

Then set the size (width and height)  to 15x15 (since we want the 16x16 format to display)  :

 

It looks like this in the IDE:

 But when compiled looks like this

 


 
Some comments from Mike Hanson ...
You mention how the icon size changes at specific DLU sizes, but those
will vary from system to system.  Therefore, it's best to design with
a bit of extra space in your buttons, and trust the RTL to do its job.

You mentioned only buttons.  Icons also play a big part in list boxes.
Since we can change the row height, 16x16 can seem really small in the
row, yet 24x24 might be too big to fit.  Sometimes I'll create icons
at 16x16, 18x18, 20x20, ... 32x32.  Regardless of how high I make the
list's line, it will always display an image that fills the row.  (I
could do all the odd sizes too, but I'm not THAT obsessive. <g>)

One final thing: Clarion is also quirky with the required column width
to show the icon, relative to the line height.  Here's a formula that
seems to work:

  ?List{PROPLIST:Width, MyIconColumn} = ?List{PROP:LineHeight} * 1.45

You might also mention that icons of Windows (especially the main
frame) should be in multiple sizes, as Windows likes to utilize
different sizes in different situations.
 

Icon Chooser
Some time ago I wrote an app that I use all the time called Icon Chooser
this app help you choose icons, see how they will be displayed, and copies them to your development folder.
The source is $25
 
 
I hope this helps someone !
Please check out my icons !
Cheers!
 
Dave Beggs