Share:

" /> Visio Guy » 3-Label Dynamic Connector: Input Methods
Home » Shapes, ShapeSheet

3-Label Dynamic Connector: Input Methods

Submitted by on April 24, 2014 – 11:21 pm | | 7884 views 15 Comments

3-label-visio-connectorI’ve been working on a three-label, Visio dynamic connector and thought I’d share some of my design thoughts with you.

Visio’s main forte is helping users to create connected diagrams, be they flowcharts, org-charts, network diagrams, software diagrams, wiring diagrams and more. There are several articles on this website that talk about Visio connectors in one way or another.

Maybe you’ve read or seen some of these:

Feedback from these articles, along with various work I’ve done for custom Visio schematic diagramming solutions, got me thinking about producing a three-label connector, which I will soon release into the wild for a modest fee. Look for it on the Products page soon.

The goal is to enable users to label connectors something like this:

3-label-connector

The text at one end of the connector reflects the terminal at the other end. This allows you to more easily read diagrams where connectors connect things that are far apart. I can see that terminal USB In 1 connects to USB Out without following the connector all the way to the other end. The middle text can then be used to add some extra information. Here we see that this should be a USB 3 cable.

I won’t go into how I actually built the connector to display three text blocks in this article. For you Visio-geeks out there, I’ll hint that ShapeSheet functions added in Visio 2010 make this much more do-able, although it wasn’t impossible in Visio 2007.

Instead, I’ll discuss the three methods I came up with for inputting the text.

One Delimited Text Block

When you’re editing the text in a Visio diagram, it can get a bit tedious to have to pick up the mouse, click on a shape, possibly enter text edit mode, then return to the keyboard to type. Doing that three times for each connector could get old.

So this first flavor allows you to type one block of text that holds the information for all three bits. You tell the shape which part of the text goes where by separating the three items with a semicolon. Click the connector, then type: USB Out;USB 3 Cable;USB In 2, and you’re done!

The other major trick with this shape is that the main text block is actually hidden. You only see the text when you’re typing. Thereafter, the ShapeSheet takes over, splits the text into pieces, and sends those pieces to the subshapes at the beginning, middle and end of the connector.

3-label-conn-delimitedIf you’ve read this blog, you have probably seen me use this technique before. Notable examples include:

Shape Data Fields

The second iteration lets you set the text using three Shape Data fields. This also allows you to stay at the keyboard, since you can Tab between fields.

For the shape pictured below, you need only select the shape, then click on the Text Begin field in the Shape Data window.

As long as your left pinkie knows where the Tab key is, you won’t have to leave the keyboard to finish editing all three text blocks. Just type value-tab-value-tab-value-enter and you’re done! Again, the ShapeSheet is wired so that the each text block reads one of the values in the Shape Data.3-label-conn-shape-data

Subselection

The third method is the most direct, but gets us back to the original complaint: three sets of clicking-on-a-shape, then returning to the keyboard to type.

I would argue that this is the simplest method, in terms of explaining it to novice users. They only have to learn how to subselect shapes. Simply put, you subselect shapes in a group by first clicking the “top-level” group shape, pausing for half-a-second, then clicking again on the subshape. Here we can see the middle text block is subselected. Don’t worry about craning your nick, though! When we start typing, the text will be right-side-up while we type.

3-label-conn-subselect

There is one glitch that can occur with this method: What happens when the user deletes all of the text? How do they subselect an empty or blank shape that could possibly be either very small, very invisible, or simply unselectable?

I’ve developed another technique for that. If a subshape has no text, the ShapeSheet detects this and makes the shape a minimum size, and shows a gray fill color. It also sets the subshape to non-printing, so that the ugly gray boxes don’t spoil an otherwise beautiful document when it is output to paper and delivered to customers.

The gray box gives the user a nice target to subselect, and they can happily resume editing connector text at a later time, when they’ve decided what to type.

3-label-conn-subselect-blankThe connectors I’ve built also have the option to selectively show or hide each text block. So if one of the stations has no text, and you turn it off, the gray box goes away until you turn it on again.

Conclusion

Hopefully this gives budding shape designers food for thought. Or if you’re contemplating enhancing shapes or templates that you use in your business, this might also be interesting to you. I can’t really say if one method is better than the other. I think it depends on user experience levels and workflow for the particular discipline.

From my perspective, the ultimate goal is to create an integrated solution where an add-in or VBA macro watches the user draw. When the user creates a connection, the text block at the other end of the connector gets populated with information at the point of connection. There are many technical applications where folks create diagrams that need this type of automated user assistance.

Such a solution would save a lot of users a lot of typing! And any of the three structures would be quite usable by the code that could detect and read information about glued connectors. The three-label connector is the first piece of the puzzle.

15 Comments »

  • Jumpy says:

    Hello Chris,

    nice shape and maybe a good business idea (looking at the many threads about this kind of connector in the forum).

    One question popped up in my mind while reading the article: If one edits the (hidden) main text of the shape or the text of the subshapes: Is that propagated vice versa, and is it propagated to the shapedata?

    I think some of the org chart shapes offer the possibility to alter ShapeData or the shapes text and they both keep the other method up to date but afaik that is handled by the Addon.

  • Visio Guy says:

    Hi Jumpy,

    No, it’s one way. Subshapes take a piece of the hidden/main text.

    The org chart shapes are being driven by the org chart (“OrgC11″) add-on that comes with Visio. That add-in is watching for changes to either shape data or text and doing some intelligent things to keep them in synch.

    Generally Visio/ShapeSheet stuff only goes one way, although as you know, we try our best to do tricks!

  • Craig says:

    I love this idea. I draw very large InterConnect Diagrams (ICD) all the time and this would help me. I’ll be in line to purchase.

  • Niels Urban says:

    Hi
    This is really usefull, I have been searching for solution for a while
    Niels

  • Abdu says:

    So where is the product? I am ready to buy…………….

  • Craig says:

    Here, here! Ready to buy.

  • Visio Guy says:

    Ok guys, like my Dad would say, “I’ll get my butt in gear” and get them ready for prime-time!

  • Abdu says:

    Thanks! Please email me as soon as it is good to go. I can (seriously) start using it yesterday :-)

  • Visio Guy says:

    Hi All,

    The shapes are very close to complete, but I ran into one bug that I want to fix before release, and I’ve got a lot of project work to finish this week. Thanks for your support and patience!

  • Oliver says:

    Hi Chris,

    Thanks for all the tutorials – I’m new to Visio ShapeSheets and without your resource I wouldn’t have gotten to the limited stage I have.

    I appreciate you’re looking to make this a commercial product, but could you elaborate a little on what you’ve hinted at in the article – specifically, how do you approach adding additional text (and hopefully by extension, any “subshape”) to the dynamic connector?

    I’ve been trying all day but just can’t get anything to work – I’ve tried grouping shapes but then I lose the features of the dynamic connector (unless I sub-select it from the group, which doesn’t seem right?).

    Would you mind giving me a shove in the right direction?

  • Abdu says:

    So what’s the story morning glory? Still in works?

    Let me know if I should fax over some Gatorade and midnight snacks!

  • Visio Guy says:

    You guys are awesome, thanks for your patience! I am juggling a bit of summer vacation with trying to get this done. If you know anything about the ShapeSheet, I currently have one “circular reference” that might be harmless, but I want to get it ironed out before I release this thing.

    Cheers,

    Chris

  • Oyvind says:

    Hi,
    thank you for tips and suggestions on Tripple tagged connectors.

    I found an easy way if you have straight connectors.

    1. In ShapeSheet : Change alignment for text…
    TxtAngle=ANGLEALONGPATH(Geometry1.Path,1)
    I like to add Text Block background (30% transparancy)

    2. Open Format for Text->Tab and add 2 tabs.

    3. Edit the tabs in ShapeSheet,
    Tabs.1.posision=TxtWidth*0.5
    Tabs.1.alignment=1 (center)

    Tabs.2.posision=SQRT((EndX-BeginX)^2+(EndY-BeginY)^2)*0.75
    Tabs.2.alignment=2 (left)

    Now edit the text for connection.
    Left text : Text at beginning of line
    First tab : Center text
    Second tab : End of line

    Change space between object and text by editing factor (0.75) in Tabs.2.posision

    BR,
    Oyvind

  • tangosierra1999 says:

    This would be awesome if it could be combined with your oblique connector

  • Visio Guy says:

    Good idea, Tango!

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*