Fuji Web-Based Tooling: Design Request 2

First request is available here .

Canvas Visuals

Currently on the canvas we have two types of nodes: regular components (they share a common visual form + an icon specific to the type of the component) and so-called "control structures". The latter do not have an icon on the canvas, but are distinguished by their visual form. Example: a JRuby component connected to a broadcast control structure, which is connected to a File component and a XMPP component.

I need help to define visual forms for the following control structures:

• Broadcast — this control structure has one inbound connector an an unlimited number of outbound connectors. When it receives a message on the inbound channel, the message is broadcasted to all outbound channels.
  • Suggected visuals: probably the current one is good enough, but I'm not sure if it's any good at denoting the nature of this control structure.
  • Reply:
• Splitter — this control structure has one inbound connector and one outbound connector. When a message arrives to this control structure, it is split into several messages according to a specified rule. These messages are then consequently sent to the outbound channel.
  • Suggested visuals: the book, from which the notion of splitter was taken defines this notation: http://www.enterpriseintegrationpatterns.com/Sequencer.html (don't be confused by the URL, they must have made a mistake ;)
  • Reply:
• Aggregator — this is the opposite of splitter. This structure waits for several incoming messages and when it's ready to aggregate — produces a single "umbrella" message which is sent to the outbound channel.
  • Suggested visuals: same as for Splitter — http://www.enterpriseintegrationpatterns.com/Aggregator.html
  • Reply:
• Content Baser Router — this control structure has a single inbound connector and a number of outbound ones. When a message arrives, it analyzes its contents and then makes a decision on to which outbound channel the message should be routed. The message is then sent to the chosen channel(s).
  • Suggested visuals: same as for Splitter — http://www.enterpriseintegrationpatterns.com/ContentBasedRouter.html
  • Reply:

It is very important to note that the above are not icons. They are drawn programmatically in some sort of vector format (similar to SVG and VML), so we should mostly come up with a good visual form, but not a fixed-size icon.

Icons

Palette Icons

We've got a bunch of new components which should be available on the palette, so I need to get the icons for them (24x24 pixels):

• Broadcast — see above for the description.
  • Suggested visuals: see above
  • Reply:
• Splitter — see above for the description.
  • Suggested visuals: see above
  • Reply:
• Aggregator — see above for the description.
  • Suggested visuals: see above
  • Reply:
• Content Based Router — see above for the description.
  • Suggested visuals: see above
  • Reply:
• Default — this icon will be used for components, which do not yet have a specific icon. I.e. if we decide to throw in a Health Layer 7 binding component, we ned to be able to show it in the palette, while the HL7-specific icon is yet in the works.
  • Suggested visuals: I'd say we should use the icon suggested for File in the previous request as the default, while inventing something different for File component.
  • Reply: (used the no-label (first) variant for HTTP (SOAP) from Request 1)

Global Toolbar

In the first request (see above for link) I've requested that the icons are 32x32 pixels. Unfortunately, when I actually added them to the UI, it turned out that they are way too big. :( Could we please re-do them in 24x24? I also need another icon:

• Properties — clicking on this button will invoke the Properties modal dialog with properties of the current graph and current user preferences for the application.
  • Suggested visuals: a gear icon, or, the current one used for the node toolbar (see below) with "i" standing for "information", "get info". I like the gear one better, honestly.
  • Reply: (used the second variant)

Reply for 24x24 versions of previously requested icons:

Node Toolbar

Each node on the canvas has it's own toolbar, which currently has two entries: Properties and Delete (see screenshot).

In the nearest future, I'll be extending the toolbar to consist of three items: Create shadow, Properties and Delete. I need icons for these actions, they should be 20x20px, or, probably smaller. I'm very much open in this question. :)

• Create Shadow — clicking on this action will create a new node on the canvas, which will be a "shadow" of the current one. It means that the node will share all the properties of the source one and will essentially a "link" to it. Changing a property on one of them (either the source or the shadow) will change the properties of the other.
  • Suggested visuals: a sort of mini-node icon.
  • Reply:
• Properties — clicking on this button, will invoke the model Properties dialog.
  • Suggested visuals: a gear icon, or, the current one with "i" standing for "information", "get info". I like the gear one better, honestly. It definitely should be the same as the properties icon for the global toolbar.
  • Reply: (used the second variant)
• Delete — clicking on this button will delete the node and all its connections.
  • Suggested visuals: there is a delete icon for the global toolbar. I believe we could reuse it. The only thing is that I would like it to be smaller than the other icons on the node toolbar, so that it is more difficult to accidentally delete a node.
  • Reply: (used the second variant)

This page (revision-13) was last changed on 19-Nov-08 12:50 PM, -0800 by KirillSorokin.
This page was created on 02-Sep-08 04:05 AM, -0700 by KirillSorokin.

More info...