Siemens

Simcenter STAR-CCM+

Timeline: 2012 – Present

My Role: Designer/Developer on a Java client built upon NetBeans.

Significance: This is illustrates some examples of creative ways to make improvements to a legacy product with minimal changes.

Simcenter STAR-CCM+

Simcenter STAR-CCM+ is a software tool used to simulate complex physics problems. The existing user interface is a Java client built upon the NetBeans framework.

Refreshed Icons

Sometimes icons and other graphics need to be refreshed and redesigned. Here are a few examples of my icon designs.

Favorite Macros

STAR-CCM+ users automate a lot of processes by running Java macros, but there wasn’t a way to run their frequently used macros with a single click.

Design Process

Investigating the NetBeans framework the Java client is built upon, I found a way to leverage the Customize Toolbars dialog built into NetBeans.

Customize Toolbars dialog built into NetBeans

I was able to add ten blank actions with default icons to the NetBeans Customize Toolbars dialog. The actions were designed to be fully customizable by the user.

The user could add any of these actions anywhere in the NetBeans toolbar by dragging and dropping icons from NetBeans’ Customize Toolbars dialog, meaning they could easily create up to ten shortcuts to their favorite Java macros, and it could be developed using functionality NetBeans was already providing.

Action Dragged into Toolbar

As soon as the action is added to the toolbar, so it’s icon is badged to indicate it needs to be set up before it can be run. Clicking on the icon brings up the Edit Favorite Macro dialog where the user can specify the macro file, the action’s icon and create a tool tip for the action. By default the tool tip is the path of the Java macro file itself. This dialog is always located right under the so the user doesn’t need to navigate too far from the toolbar.

The dialog for specifying the details of the macro.
The completed setup of the favorite macro.

Once the macro has been specified, the user can run their Java macro with a single click from a toolbar button rather than browsing for the file.

Macro action with user-defined tool tip
Macro action with default tool tip

Readable Decimal Format

By default, numbers are displayed in Simcenter STAR-CCM+ with the full double precision. Unfortunately this can sometimes make the numbers quite difficult to read.

I developed a mechanism to present the numbers in a readable decimal format. Now, the user can specify several pre-defined decimal formats or create their own custom decimal formats.

Decimal Display Format dialog previewing the custom decimal format

The full precision is displayed in the tool tip or when the user edits the value. Here is the same data displayed in double precision and a user-defined custom readable decimal format.

Data displayed in double precision
Easier to read custom decimal format with tool tip showing full precision value

Color Palette

Users used to select colors from a drop-down menu of color names sorted in alphabetical order. I replaced this with a color palette developed from scratch in Java, the colors grouped then sorted by luma coefficient (see Java method below). For backward compatibility the color palette was required to represent all 196 colors listed in the existing menu.

 /**
   * Returns the perceived brightness.
   *
   * @param c The color we're calculating the brightness (Luma Coefficient) of.
   * @return The brightness (Luma Coefficient) of the input color.
   */
  private static int getBrightness(Color c) {
    return (int)Math.sqrt(
        Math.pow(c.getRed(),2.0) * .299 +
        Math.pow(c.getGreen(),2.0) * .587 +
        Math.pow(c.getBlue(),2.0) * .114);
  }

Design Process

Showing the colors was always going to be better than the user deducing what colors the names represented.

The requirement to continue showing all of the existing 196 allowed the colors to be show in an efficient 14×14 grid, but the question still remained, how do we sort these 196 random colors so that the user can make sense of them?

These 196 colors can be sorted in 196! ways, that’s 508012211086704676250273578534744855832729752494702698292997143104359057480013603705540137242115195719262628671043031667501252088161309228461647972823682280495348903461291560889483687823263915860291345617137392657194686983749887501702176113098676677779711031060019608283576803094698692188285748113739606947612227692134400000000000000000000000000000000000000000000000 ways!

Displaying the colors in alphabetical order, the order they appear in the original menu, looked rather random.

Colors in alphabetical order.

So I sorted by the sum or red, green and blue values, then grouped the colors. This was better, but still there were colors that seemed to be out of order.

Sorted by the sum of each color’s red, green and blue values
Grouped then sorted by sum of each color’s red, green and blue values

Finally, I applied the relative luminance to sort the colors within the groups, and got something that everyone could agree on.

Sorted by perceived brightness
Grouped then sorted by perceived brightness

With the support of product management, the recommended approach, grouping the colors then sorting by perceived brightness was agreed upon, the colors grouped by grayscale, browns, pinks, yellows through reds, magentas, blues, cyan and finally greens.

The color cells needed different borders to indicate different things…

A single gray border is the default, neutral border.

A bold compound border of black, white and gray is used to indicate the current selected color.

A single black border is used to highlight cells during navigation.

Each cell needed to be big enough to easily be seen and clicked, but not so big that the overall editor took up excessive space. After testing different cells sizes, everyone agreed that 14×14 pixels was a good compromise.

Another consideration was the RGB information for the color. It was felt that this was too much information and could be overwhelming if shown everywhere, so it was displayed along with the name in the tool tip.

Since the user can define additional custom colors, we added an additional row of up to 14 of those colors.

Row of up to 14 custom colors.

Before: Original Menu

After: Color Palette