Lib Task Generate App Icons

Purpose

This task is used to generate the application icons

Implementation

NEEDS WORK to discuss new JSON EC4111 format that drives generator

This task invokes ./iconify script found in the library folder that inplements this complex procedure. The ./iconify is passed 2 parameters.

1. The target location. The icons are generated in target/war/res/icons

2. The name of the json file (.js format) that indicates what whould be made. It is assumed to reside in target/gen-icons

Given the above information ./iconify performs the following steps:

1. Validates the information. The target/gen-icons is assumed to contain the base and devlopment image files used as the basis to generate the icons.

2. Converts the json file into a linear work order file

3. Invokes GIMP running under control of GaelGenIconsV2.py that reads the owrk order file and creates the icons.

Description

This is used to generate a suite of GAEL application icons.

GAEL applications tend to be Single-page-apps with the possibility of sub-pages such as the cheque writer application.

Furthermore, in a development environment there may be both production and development tabs.

To complicate things further, there may be multiple GAEL apps running.

To handle these cases and to quicky locate a tab where dozens may be open the following strategy was chosen. The GaelGenIconsV2.py script in this same folder implements this strategy.

1. Each application has a unique shapes (such as square, triangle, hexagon)

2. Two contrasting colors are chosen for production and development and two .png images of 48 x 48 pixels are created that reflect the shape and color.

Their names should be xxxx-%COL%-%LTR%.png where xxxx is the app nickname %COL% is the letter color and %LTR% is the actual letter

The gael.zapIcon function used to attach the favorite icon to the tab using the production name. The gael.zapIcon function will swap the app name to 'devp' if it detects it is in a development environment.

3. Sub-pages are identified by using a lower case letter of the main app.

4. GaelGenIconsV2.py is executed with the four parameters described in the next section.

5. GaelGenIconsV2.py iterates thru each .png, letter and combo creating new icons in the target directory of the appropriate.

GaelGenIconsV2.py Parameters

GaelGenIcons.py takes four parameters as follows:

1. runlog - the name of the output log

2. dir - a pointer to the gael development directory for the application. GaelGenIcons.py looks for the base-pngs folder containing the .png images created according to step (2) above.

It also uses this pointer to derive the output target folder of ./war/res/icons

3. combos - A repeating string separated by + of the format defined in section Combo Format below

4. cusCols - A repeating string separated by + of the format defined in section Adding Custom Colors

Combo Format

The iconGenStr string contains the combo string which contains repeating strings separated by a +, each string of the following format:

 letters/col1/.../coln

Where each field contains:

• letter A string of letters to be generated such as W for welcome page (To Windows W and w are the same in a filename so this script prefixes lowercase letters with a lc- in the generated name)

• coln multiple color references separated by / where each color reference is defined in the default color table or added with the iconCusCol string.

Default Colors

These colors can be referenced and need not be added:

   wht  white  rgb(255, 255, 255);
   blk  black  rgb(0, 0, 0);
   cyn  cyan   rgb(0, 235, 235);
   yel  yellow rgb(235, 201, 8);
   pnk  pink   rgb(222, 0, 182);
   blu  blue   rgb(0, 14, 214);
   red  red    rgb(230, 0, 0);

Adding custom colors

Custom colors may be added using the cusCols parameter. Each custom color is a 4 part string (separated by /). Each custom color definition is separated by a +.

The 1st value of the 4 part string is the color reference name and the remaining 3 parameters are the red, green, blue values for the RGB function used to generate the custom color.

For example, the string flo/0/255/0+gray/195/195/195 generates florescent green referenced by the name flo and a gray color referenced by gray.

Setup

The task.cfb requires entries that define what icons to generate.

• iconGenStr is used as the combo parameter as described above.

For example WDPa/wht/blk+C/yel/red is used to generate the citc system

• iconCusCol can be used to add extra colors.

In addition base-icons needs to be populated with the 48x48 px .png images (see below)

Creating base images

The name should be app-%COL%-%LTR%.png where app is the application id such as demo or citc

Windows paint can be used to create a simple colored shaped .png image that is 48px by 48px.

Note: It is easier to use 384 x 384 and resize just before saving.

Duplicate the image and use fill to make 2 colors as variants for production and development. Name the development one devp- instead of the application name.

It is preferable to have the borders transparent. Assuming the border parts to be transparent are white the following steps in GIMP can be used to accomplish this.

1. Open the .png image with GIMP

2. Ensure GIMP is in RGB mode (Menu.image -> mode)

3. Goto Menu.layer -> transparancy -> color of Alpha

4. If the main color is white use a different color for the transparent border. Note the hex value and use this to set the transparent layer color.

5. A pop-up will show up with a default transparent color of white.

6. Click OK

7. Menu.File->export as and save the file as a .png (over the same name works).

8. Close GIMP without saving. You are done.