Tips_gui   >   Icons   >   Icons (All Contents)

Icons

This section covers topics relating to icons in Omnis Studio.

Icons for your Omnis Studio app can be store in several locations:

  1. #ICONS system class located inside the System Classes folder of each library.
  2. #ICONS system class in the library specified by the $iconlib library property.
  3. omnispic.df1 file located inside the icons folder a subfolder of the folder containing the Omnis executable.
  4. userpic.df1 file located inside the icons folder a subfolder of the folder containing the Omnis executable.

Each icon given an ID number. The icon number must be unique within the location it is stored. It is possible to have the same icon ID in each of the 4 possible locations. In the event of a duplicate ID, Omnis Studio willl use the closest icon in the order of: #ICONS of the current library, #ICONS of the altenate library specified by $iconlib, omnispic.df1, userpic.df1.

Each library has an $iconlib property which allows you to point that library to look at the #ICONS class in a different library. This allows you to have a single repository #ICONS class for all of your libraries, thereby avoiding having to copy (and update) the #ICONS class to every module in your application.

The #ICONS class is the best place for storing your icons. If you have icons which are module specific, store them in the #ICONS class of that module's library. If you have multi-module use icons, store them in your applications startup library, or create a special myicons.lbs library where you store them and set the $iconlib property of your other libraries to myicons. (Replace myicons.lbs with a meaningful library name of your choice.)

Warning

Always, always set the library Prefs $defaultname in your myicons library. If you don't set the default name property the library name will change if someone accidentally changes the file name, causing the $iconlib property in other libraries to point to a now non-existent library name.

Icons Editor

To edit icons:

  1. Double-click a library in the F2 Browser.
  2. Double-click the System Classes folder.
  3. Double-click the #ICONS classy. This opens the Icons Editor window.
  4. If you are working with a new library, there will be no icons in the #ICONS class.
  5. Click New Icon Page... to start a new pages of icons.
  6. Enter the Page Name and check the sizes of icons you want to store on the page.
  7. If you want to be able to have opaque icons, select Solid & Alpha radio button.

    Note

    If you select Solid and Alpha you really end up with 2 sheets within each page. The one sheet has the solid version icons, the other sheet has the alpha version icons. You switch between the sheets by clicking either of the uppercase A icons on the right side of the Icons Editor window. You can add the Alpha version icons sheet after by clicking the Page Options button and then clicking the Alpha copy of 24 bit button.

  8. Click the Create button.
  9. Copy an image to the clipboard. For example, copy a folder or file icon from your Desktop.
  10. Single-click one of the 20 empty icon picture fields on the top-right area of the Icon Editor window.
  11. Single-click the 16x16 picture field at the bottom-left of the Icon Editor window.
  12. Paste the image from the clipboard. It will be sized to fix the 16x16 pixels area.
  13. Repeat for the 32x32 and 48x48 picture fields if you are creating larger icons as well.
  14. If you are creating Alpha version icons, click the left uppercase A icon to switch to the Alpha sheet and repeat the above to paste the image from the clipboard to the different size icons.
  15. Click the Set Icon ID... button on the left side of the Icon Editor window. You will be prompted to enter an ID for the icon.
  16. To further edit icons, select the icon in the sheet, select the size at the bottom, then click the Edit Icon button.
Tip

If you are creating large and small icons, first create and edit the largest icon. After you are satisfied with the largest icon, copy and paste it to the smaller size icons.

Warning

Never edit icons in the omnispic.df1 file, your changes will be wiped out by new releases of Omnis Studio.

Transparent Icons

If you want part of a Solid Version icon to be transparent you need to do the following:

  1. Select the icon's page in the Icon Editor window.
  2. Make sure the Solid/Alpha A button is set to Solid Version.
  3. Click the Page Options... button near the bottom of the window.
  4. Check the Substitute Transparent Color checkbox if it isn't already checked.
  5. Click the Update Page Settings... button. The change won't take effect until you click this button.
  6. Click the Edit Icon button to edit the currently selected icon.
  7. You will notice one of the green colors in the color selector has the letter T in the color. This is the transparent color. Click the transparent color to select it.
  8. Click the paint can icon near the bottom of the Icon Editor window or another appropriate tool.
  9. Click any of the areas around the edges of your icon in the icon editor which you want transparent. This pours the transparent color into those areas.
  10. Click the Update button when you are done.

If you want part of an Alpha Version icon to be opaque or completely transparent.

  1. Select the icon's page in the Icon Editor window.
  2. Make sure the Solid/Alpha A button is set to Alpha Version.
  3. Use the eyedropper tool to select the color you want to make transparent or opaque.
  4. There is an Alpha slider bar on the right side of the Icon Editor window. Grab the slider handle and drag it to the left. The further left you drag the slider the more transparent the color will turn. If you drag it all the way to the left it will be completely transparent.
  5. Use the paint can tool or another appropriate tool to paint the opaque or transparent color on the icon.
  6. Click the Update button when you are done.
You will see the changes to existing icons after you close the Icon Editor window.

Multistate Icons

Multistate icons are used for kCheckbox, kRadioButton, and kTreelist fields.

If you watch a kCheckbox field closely you will be able to detect 4 different icons as follows:

  1. Normal - The checkbox is unchecked.
  2. Hilited and Unchecked - The cursor is over the unchecked checkbox and the mouse button is down. If you hold the mouse button down and move the cursor away from the checkbox you will notice the checkbox change to the Normal state icon.
  3. Checked - The checkbox is checked.
  4. Hilited and Checked - The cursor is over the checked checkbox and the mouse button is down. If you hold the mouse button down and move the cursor away from the checkbox you will notice the checkbox change to the Checked state icon.

Click the Run Demo button in the StudioTips Browser window to test the above checkbox and radio button states.

You can create your own multistate icons in the Icon Editor. The steps are as follows:

  1. Double-click the #ICONS class in your library's System Classes folder. This opens the Icon Editor.
  2. Click New Icon Page.... Click the Solid & Alpha radio button, name the page (e.g. Multistate 1) and then click the Create button to create the new page.
  3. Click the Page Options button.
  4. Check the Multistate Page checkbox.
  5. Click the Update Page Settings... button.
  6. Click the Page Icons... button to return to the icons pane. You should now see headings above the columns of icons. The headings map as follows to the 4 different states of the kCheckbox field described earlier.
    • Normal column = Normal state
    • Checked column = Checked state
    • Hilited column = Hilited and Unchecked state
    • N/C column = Hilited and Checked state
    • N/C/Gray column - Hilited and Checked and Disabled.
  7. Click the right blue letter A icon button to switch to Alpha Version icons.
  8. Proceed with creating your own row of multistate icons.
  9. Set the icon ID for the Normal state icon. Leave the icon ID as zero (0) for the other columns.

StudioTips Documentation - Copyright 2006 Vencor Software