• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Visio Guy

Smart graphics for visual people




  • Home
  • Hire Me
    • Hire Me
    • Résumé
  • Products
    • Products
    • Bubble Revision Shape
    • Layers to Pages Utility
    • Rack Unit Dimension Line
    • Radial Elements Tool with up to 100 Wedges
    • Text on a Circle Visio SmartShape
  • Index
    • Articles by Date
    • YouTube – VisioGuy
    • Download Information
    • Suggestion Box
    • Shop
    • Visio Art
    • Visio Links
    • – Visio Shapes & Stencils
    • – Visio Templates & Drawings
  • About
    • About
    • Donate
    • GitHub
    • jsFiddle
    • Reading List
    • Subscribe & Follow
      • – E-mail
      • – facebook
      • – Twitter
      • – RSS
    • Privacy Policy
  • Discussion Forum
You are here: Home / Development / Punish Your Users with (not so) SmartShapes That Misbehave

Punish Your Users with (not so) SmartShapes That Misbehave

June 14, 2008 By Visio Guy 5 Comments

Read Full Article You can learn a lot from bad examples.

Call it learning-from-our-mistakes, anti-patterns, or devilish fun, there’s a lot to be gained by looking at how-not-to-do-it.

Those of us over 30 might remember our first introduction to BASIC programming, taught to us by our friend Jeff, in the electronics corner at the local super market. While Dad was shopping, Jeff went over to the Commodore Vic 20 demo kiosk and typed the following lines:

1
2
10 PRINT "Chris is a turkey!"
20 GOTO 10
10 PRINT "Chris is a turkey!"
20 GOTO 10

Utterly useless, except for the fact that it forever singed into our memory the ideas of branching and infinite loops…

Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a 
turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chr
is is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a tur
key! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris 
is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey! Chris is a turkey
! Chris is a turkey!
 

Ha ha ha. Very funny, Jeff.

Well BASIC is ancient history, but we continue to get our feet wet by creating some form of “Hello World” in the latest-and-greatest programming language. Hopelessly impractical, Hello World nonetheless introduces us to the syntax and basic workings of a language.

Three Terrible Examples

So for those of you who’ve noticed Visio’s ShapeSheet, and are curious about SmartShape capabilities, this article is about having mischievous fun while learning how not to create SmartShapes.

From three example shapes, you’ll learn how to make Visio shapes do stupid things and behave very badly! And if you’re not careful, you might get practical ideas for your very-own, actually-useful SmartShapes.

If you are completely new to the ShapeSheet, I suggest first reading John Goldsmith’s excellent introduction to Visio development, the ShapeSheet, and automating Visio. The article is located here: Just for starters. This will make the rest of this article easy to understand.

For those of you who have dabbled a bit, the rest shouldn’t be too difficult.

Freak Out!

For all of our shapes, we are going to create a special ShapeSheet cell–a flag, so to speak–that indicates that it is time for the shape to behave badly.

We’ll call this the “Freak Out” flag, and we’ll implement by adding a User-defined cell called User.freakOut to each ShapeSheet of our misbehaving shapes. Generally (but not always) this cell will contain an expression that evaluates to True or False.

Other cells in the ShapeSheet can then reference this cell, in a way very similar to how Microsoft Excel works.

The choice of cells that respond to User.freakOut determines how our Not-so SmartShape behaves!

Adding User-defined Cells

User-defined cells are a great vehicle for storing parameters and calculations in your shapes that you don’t want your users to see. To add a user cell to a shape, do this:

  1. Select your shape
  2. Choose: Window > Show ShapeSheet
  3. Right-click and choose: Insert Section…
  4. Check the User-defined cells option and hit OK
  5. Give the first cell in the User-defined cells section a name by clicking in the left-most column where the red text is and typing a new name
  6. You can add more cells by right-clicking and choosing: Insert Row

That’s all there is to it!

Disappearing Shape

Ont to example #1. Our unsuspecting user decides to correct the text on the shape, and disregards the warning.

First, she selects the shape:

Sentence1

Then she enters text-edit mode by double-clicking the shape, or by pressing F2. Placing the cursor at the end of the sentence, she completes the final word:

Sentence2

As the word “sentence” is completed, something dramatic happens: BIFF!

Sentence3

And when she clicks away from the shape, thereby de-selecting it, all visible traces of the shape vanish into thin air: POW!

Sentence4

Fun, eh?

Let’s look at the anatomy. Our misbehave flag looks like this:

User.freakOut = NOT( ISERR( FIND( “sentence”, SHAPETEXT(TheText) ) ) )

Wow! There are four ShapeSheet functions nested within each other! Let’s break it down a little so we can understand what it all means.

SHAPETEXT(TheText) is the way that we get an actual string that represents the text of the shape. Using this, along with various string-handling ShapeSheet functions, we can analyze the shape’s text.

A lot of beginners make the initial mistake of trying to compare strings directly in the ShapeSheet with expressions such as:

IF( “bob”=”steve”, True, False ).

This doesn’t work, because Visio tries to understand “bob” and “steve” as numerical expressions or ShapeSheet formulas, and essentially evaluates both of them as zero. The proper way to make such a test is to use ShapeSheet text-handling formulas, like this:

IF( STRSAME( “bob”, “steve” ), True, False ).

FIND simply searches the shape’s text to see if “sentence” is to be found. Very similar to the InStr function found in many programming languages. If the sub-string isn’t found, then the FIND returns #VALUE, which represents a ShapeSheet error.

If “sentence” is found, then FIND returns the position at which the sub-string appears. In this example, 36 is returned when our user completes the shape’s text.

ISERR is able to detect errors such as #VALUE.

NOT, of course, finds the case when ISERR is false, thereby reversing the results of all that junk inside of ISERR.

To get the shape to disappear, we simply turn off the geometry section that defines the box, and hide the text. That requires two references to our Freak Out flag, in two different cells:

Geometry1.NoShow = User.freakOut

Miscellaneous.HideText = User.freakOut

NoShow and HideText expect boolean values, which User.freakOut is more than happy to supply.

Intermission

Since these DumbShapes are intended to suprise, frustrate and annoy, it is really best to see them Live!, in action.

So I’ve prepared a little video that shows all three examples in motion, as your victims will experience them. The video is narrated, so turn up your speakers and enjoy!

Frozen Shape

Our next user sucker comes along and sees this shape:

Frozen1

He also decides to ignore the warning and move this shape:

Frozen2

Not satisfied with the new position of the shape, he decides to move it again, only to find that it is now locked in place, and can’t be moved. How delightfully frustrating!

So how did we get this to work? Let’s look at our special User-defined cell. This one is a bit different:

User.freakOut = DEPENDSON( PinX, PinY ) + SETF( GetRef( LockMoveX ), 1 ) + SETF( GetRef( LockMoveY ), 1 )

In this case, other cells don’t react to User.freakOut. User.freakOut does the talking by pushing values into other cells!

The Pin represents the position of a shape on the page. Two ShapeSheet cells control this value: ShapeTransform.PinX and ShapeTransform.PinY.

DEPENDSON simply watches for cells within the parentheses to change. If they do, then the entire formula gets triggered for re-evaluation.

SETF is used to push values or formulas into other cells. This is kind of backwards to the way spreadsheets are supposed to work. You can get some really cool effects doing this, but if you get too tricky, you can also create quite a mess!

In this case, we are pushing the value 1 into the cells Protection.LockMoveX and Protection.LockMoveY. This keeps the shape from being moved (but not resized!)

GetRef does two things: it shields the formula from being evaluated by changes to LockMoveX or LockMoveY. After all, we only want the cell to evaluate when the shape is moved, i.e., when PinX or PinY is changed.

The second purpose for GetRef is to maintain links to named-cells that might change during the development process. For instance, I might have started out with a flag called User.f. Then later renamed it to User.flag.

GetRef( User.f ) will update to GetRef( user.flag ) when the change is made, thus freeing the developer from extra worry.

In older versions of Visio, GetRef didn’t exist, so target cells were enclosed in quotes: SETF( “User.f”, 1 ). Changes to named cells weren’t updated, because the quote marks hid them from the ShapeSheet engine, and lots of stuff got broken as a result.

Convenience and Sneakiness

Now, being a developer, of course I’ve left myself an out. If you double-click the shape, then the locked cells are reset to 0, so the shape can be moved. Again, SETF is employed to do this:

Events.EventDblClick = SETF( GetRef( LockMoveX ), 0 ) + SETF( GetRef( LockMoveY ), 0 )

Since we needed to reset two different cells, we just add two SETF expressions together. The result isn’t important in this case, just the pushing of values to the LockMoveX and LockMoveY cells.

And, we can again move our shape (once!) before it gets locked down again by our ShapeSheet shenanigans. Note also, that double-click won’t get you to text-edit mode. The expression in EventDblClick overrides and eliminates this behavior.

Dr. Jekyll & Mr. Hyde

Well, we sure hope you’re having fun! Our last example is a bit more complicated, and covers several topics, and should probably be a separate article. So if your boss is coming, bookmark this bit and come back later.

The concepts we’re going to need to understand to get Mr. Hyde to show his ugly mug include:

  • Referencing the Page’s ShapeSheet
  • Determining a shape’s ID
  • Inserting Text Fields
  • Referencing the group’s ShapeSheet from sub-shapes

Phew! Time to get up and stretch. See you in a few minutes…

In our last example, Visio Guy politely states his Pin Preference:

OnPageJekyll

Again, another disrespectful user comes along, disregards the warning, move Mr. Guy off of the page, and receives the punishment he sorely deserves:

OffPageHyde

So what’s the anatomy of this beast?

User.freakOut = OR( PinX<0, PinX>ThePage!PageWidth, PinY<0, PinY>ThePage!PageHeight )

Well, that looks like a lot, but it’s not really rocket science.

The OR function just says; “I am True if any of the conditions between my parentheses is true.”

And there are four conditions inside this OR function. They determine if the shape is off the page on any of the four sides:

  1. To the left: PinX < 0
  2. To the right: PinX > ThePage!PageWidth
  3. To the bottom: PinY < 0
  4. To the top: PinY > ThePage!PageHeight

Note the syntax for cross-sheet references. The ! is used to distinguish other “sheets”: ShapeSheets belonging to other shapes. In this case, we are referring to a special shape called ThePage, which–you guessed it–represents the actual page upon which we are drawing!

We can now tell if our shape is on or off of the page!

Smart Text

To control the text, we then created:

User.text = IF( User.freakOut, “I MEANT IT!”, “I prefer to be on the page.” )

and inserted it as a field in the word balloon. Since the word balloon is a sub-shape, we needed to do a little more work…

Referencing the Group

The whole shape is a group, containing several sub-shapes. In order to reference the top-level shape from a sub-shape, we need to know the ID of the top-level, group shape. We get this from the Format > Special dialog.

Now, in Visio 2007, this menu item isn’t on by default, so we need to turn on “Developer Mode” by going to: Tools > Options > Advanced tab and checking: Run in developer mode.

So let’s say that our group’s ID is 27, which we see right next to ID: label, at the top of the Special dialog.

Knowing the group’s ID, a sub-shape can refer to cells in the group’s ShapeSheet using the !-syntax we mentioned earlier. For instance, a sub-shape could be 1/2 the width of it’s parent with a formula like this:

Width = Sheet.27!Width*0.5

Inserting Text Fields

Armed with the ability to make cross-sheet references in our formulas, we set off to link the word balloon’s text to the group’s User.text cell.

So we sub-selected the word balloon and pressed F2 to enter text edit mode. Then, we chose: Insert > Field from the menu.

This is where we enter smart formulas for a shape’s text. From the Category list, we choose Custom Formula, and enter:

Custom Formula = Sheet.27!User.text

Our word balloon will now reflect the value of User.text in the group’s ShapeSheet.

Showing, Hiding and Coloring

Each of the horns has its visibility controlled by:

Geometry1.NoShow = NOT( Sheet.27!User.freakOut )

The eyebrows rotate and change color like this:

Shape Transform.Angle = GUARD( IF(Sheet.27!User.freakOut,-20 deg, 0 ) )

Fill Format.FillForegnd = GUARD( IF( Sheet.27!User.freakOut, RGB( 255, 0, 0 ), RGB( 0, 0, 0 ) ) )

And the eyes change color in a similar fashion.

Well, I hope you’ve found this article not only entertaining, but slightly educational. Now get out that copy of Visio sitting under your monitor and give some of these concepts a try!

Related Reading

If you’re interested in learning more about how to hide shapes and parts of shapes, be sure to check out: The Hidden World of Visio Shapes.

And by the way, you can find that snazzy word balloon shape in this appropriately-named article: Word Balloon Shape

  • Tweet
  • More
  • Pocket
  • Share on Tumblr
  • Print
  • Email

Related posts:

  1. Off-center Radial Fill Effect
  2. Visio Film Strip Shapes: Hurray for Hollywood!
  3. SmartShape Tutorial: Fading Trees
  4. How to Build Smart Frames and Bezels #1
  5. How to Build Smart Frames and Bezels #2

Filed Under: Development, ShapeSheet, Video Tagged With: Formulas, Hidden, ShapeSheet, SmartShapes, Tutorial, User-defined Cells

Previous Post: « European Cup 2008 Auto-Updating Visio Diagram
Next Post: How to Build Smart Frames and Bezels #1 »

Reader Interactions

Comments

  1. Wombat says

    June 14, 2008 at 9:25 pm

    Thanks for the video, mate! Loads easier to understand the article. The subshape text stuff was nice, I couldn’t figure out how to insert info about the group.

  2. David Parker says

    June 17, 2008 at 7:50 am

    Brilliant … I hope you have trademarked VisGuy!

  3. Mark Nelson says

    June 24, 2008 at 5:43 am

    Great teaching article!

  4. Johan says

    September 9, 2008 at 10:28 am

    Hi, is there a bitwise compare operator I can use for the NoShow field?

  5. Visio Guy says

    September 9, 2008 at 10:46 am

    Hi Johan,

    The ShapeSheet has these functions that you’ll find useful:

    BITAND()
    BITNOT()
    BITOR()
    BITXOR()

Leave a Reply Cancel reply

Primary Sidebar

Buy Über Bubble Revision Shape
Purchase

Categories

Buy my book!

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Tag Cloud

A/V Artistic Effects BPM Code Connectors Control Handles Countries Custom Patterns Custom Properties Data Graphics Data Linking Data Visualization David Edson David Parker Fill Format Formulas Functions Geometry Gradient Images Links Maps Multi-shapes Network Programming repeating shapes Resources Right-Click Actions Scale Shape Data ShapeSheet ShapeSheet Formulas ShapeSheet Functions SharePoint shiny SmartShapes Sport Sports Text Themes Tools Transparency User-defined Cells Visio 2007 Visio SmartShapes

Top Posts & Pages

  • - Visio Shapes & Stencils
  • - Visio Templates & Drawings
  • Dynamic Updating Org Charts in Visio!
  • Bubble Revision Shapes
  • Free Visio People Shapes
  • Amazon AWS Visio Shapes
  • Automatic Chevron Process Shape
  • Link Fields to Subshape Text
  • Go 3D with Free Isometric Piping Shapes for Visio
  • Text to the Bottom of the Shape

www.visguy.com - Visio Guy - since 2006