Color-coded AWI icons

[Michael A. Lowry]

Using a custom AWI favorite icon

If you are not satisfied with the built-in AWI icon or the solid-color icons associated with the session colors, it is possible to use your own icon instead.

New AWI icon

Here is my new AWI icon, redrawn by hand in Affinity Designer.

AWI icons with colored borders

And here are the variants with colored borders — one for each of our staging environments.

Orange #FA9607	Yellow #FFCC00	Blue #2A97FF	Green #00C400	Red #FF0000

A ZIP file containing all icons in PNG, ICO, and SVG formats is attached below.

Open the SVG files in a drawing program to see how the designs are constructed or to make your own customizations.

Changing the AWI icon using session colors

There is a way to associate a custom icon with each session color. This approach involves specifying session colors, and creating a specially-named ICO file for each one.

Changing the default AWI icon

It can be useful to assign a particular icon to each AWI server, regardless of the session color.

New approach

To override the default AWI favorite icon, just place the ICO file you want to use in the main AWI directory and give it the name favicon_E6E6E6.ico. (The color with hexadeximal RGB value E6E6E6 is the light shade of gray next to No Color in the Session Color menu.)

Update 2023.04.14 10:00 CEST: It looks like I spoke too soon. Sadly, the above approach appears not to work. In my initial test, the browser had been loading a cached icon, not the icon from the AWI server. The original approach, described below, still works.

Original approach

In 2016 I shared some ideas about Web Interface customization, including an idea for using color-coded custom icons to replace the default favicon.ico file. I discovered then than one can customize the AWI favorite icon by replacing the default icon file located in a JAR file inside the AWI WAR file.

awi.war:
WEB-INF/bundle/webui-vaadin-framework-theme.jar
→
webui-vaadin-framework-theme.jar:
VAADIN/themes/oneui/favicon.ico

[Michael A. Lowry]

We use the different colored icons to make it easy to quickly distinguish our staging environments:

Orange	Experimental 2
Yellow	Experimental 1
Blue	Development
Green	Testing
Red	Production

As I have mentioned, we are in the process of migrating from one cloud provider to another, and will for at least a couple of years have AE systems running side-by-side in both clouds.

As we prepare to migrate from one cloud provider to another, a new dilemma appears: how do we distinguish the AE systems of the same environment running in the two cloud providers from each other? For instance, how do we distinguish the Development system in the old cloud provider from the Development system in the new cloud provider? The logo can be customized and specified via the AUTOMIC_LOGO_FILENAME environment variable (or via logo.filename in colors.properties). But when we have many tabs open, how can we tell at a glance which tab belongs to which Development system?

Recently one possible solution presented itself. The upper left corner of the AWI icon is essentially blank. This space can be used to insert the logo of the new cloud provider for AWI systems that are running there. This small change makes those AWI systems instantly recognizable. The logo is small, and when the whole favicon is displayed at the scale of 16x16 pixels, the logo inside the icon is mostly unrecognizable. However, if the favicons of the old systems remain as-is, without the additional small logo in the corner, then just the presence of the logo is enough to distinguish the new systems from the old.

Just to give an idea of what it looks like, here are two Dev icons, side-by-side - one with a small star shape in the upper left hand corner.

This is just one possibility. Another idea would be to change the colors of the spirograph inside. This would be even more easily distinguishable.

[Michael A. Lowry]

I submitted a new idea: AWI: custom favicon

If you like the idea, please vote for it.

Background

The AWI provides several options for theming, including the ability for administrators to assign a custom logo and colors to an AWI system.

Proposal
The AWI should also allow administrators to specify a custom favorite icon (favicon). The suggested new environment variables are listed in bold in the table below.

Environment variable	Example value
AUTOMIC_MAINCOLOR	#FA9607
AUTOMIC_SESSION_COLORS	#FA9607 - Orange
AUTOMIC_WHITE_BACKGROUND	false
AUTOMIC_LOGO_FILENAME	logo.svg
AUTOMIC_LOGO_MIMETYPE	image/svg+xml
AUTOMIC_LOGO_BACKGROUND	#1E1E1E
AUTOMIC_LOGO_BASE64
AUTOMIC_FAVICON_FILENAME	favicon.svg
AUTOMIC_FAVICON_MIMETYPE	image/svg+xml
AUTOMIC_FAVICON_BASE64

Benefits

This would make it possible for administrators to hard-code a different custom favicon for each AE system, in turn making it easier for users to distinguish bookmarks and open browser tabs.

References

Color-coded AWI icons
Custom AWI logo in SVG format
Configure AWI via environment variables

[Michael A. Lowry]

Deleted

[Michael A. Lowry]

Here is an improved version of my AWI favorite icon, including the versions with colored borders.

Improvements include:

• The dark background is #1E1E1E instead of pure black.
• The green border is a darker shade, #00C400.
• The spirograph is constructed using a smaller number of shapes.
• The shapes are more precisely positioned & oriented.

A ZIP file containing all icons in PNG, ICO, and SVG formats is attached.

Attachment(s)

AWI Favicons.zip   698 KB 1 version

[Leon Carroll]

Thanks, I'll use those for my teams channel integrations

[Michael A. Lowry]

We recently automated replacement of the favicon.ico file during AWI deployment. Below is the relevant snippet from the deployment pipeline. This bit of shell scripting replaces the default favicon.ico file with the color-coded icon specific to the target environment.

The ENV_COLOR variable is set to one of the environment-specific colors (orage, yellow, blue, green, red) by a variable group associated with the deployment stage. The awi.zip file is just the awi.war file, renamed.

# Replace favorite icon file based on environment.
shopt -s extglob
ENV_COLORS='@(orange|yellow|blue|green|red)'
echo "Environment: ${RELEASE_ENVIRONMENTNAME}"
echo "Env. color: $ENV_COLOR"
case "$ENV_COLOR" in
${ENV_COLORS})
  echo "Replacing favicon.ico with ${ENV_COLOR}-bordered icon for ${RELEASE_ENVIRONMENTNAME} environment."
  cd ${SYSTEM_DEFAULTWORKINGDIRECTORY}/_AWI/build
  unzip awi.zip WEB-INF/bundle/webui-vaadin-framework-theme.jar
  mkdir -p VAADIN/themes/oneui
  cp ${SYSTEM_DEFAULTWORKINGDIRECTORY}/devops/icons/favicon_${ENV_COLOR}.ico VAADIN/themes/oneui/favicon.ico
  zip WEB-INF/bundle/webui-vaadin-framework-theme.jar VAADIN/themes/oneui/favicon.ico
  zip awi.zip WEB-INF/bundle/webui-vaadin-framework-theme.jar
  rm -rf WEB-INF VAADIN
  ;;
*)
  echo "Environment color $ENV_COLOR is unknown. Skipping replacement of favicon.ico file."
  ;;
esac

Until the Automation Engine is updated to make customization of the favorite icon easier, the above approach works pretty well. Enjoy!