Skip to content

 

Creating and editing a line

A user asked me about editing a line, so I threw together a short tut on creating and then modifying a line.

 

How to create custom background libraries

You thought it would never happen. I finally got around to making a tutorial. First up: how to create custom background libraries.

A few notes:

  • Shortcut: One you have a background image in your library, you can just double-click it to set the diagram background
  • If you have a background image that’s supposed to tile, please make sure you have your background format set to “REPEAT” in the Diagram Properties window (the properties window can be accessed via control-R or diagram > properties in the menu bar).
  • Check out Atle Mo’s awesome Subtle Patterns website here: http://www.subtlepatterns.com

 

Sports Libraries

As I mentioned in an earlier post, I’m working on adding “.swf” files to libraries. What does this mean? Basically, by leveraging the powerful drawing capabilities of Flash and the .swf file format, you can now have nice colorful smooth vector shapes in your simple diagrams. This feature has moved along nicely since my last post and I’m excited to get some examples into your hands so you can try it out. So keep reading to learn how to do your own sports diagrams.

In my last post I showed some screenshots of a football play I made. The ultimate play, mind you. Against this play, no defense.

It’s time for you to have the power to diagram ultimate plays. I’m posting both a sports background library and a football shape library for you to experiment with (please make sure you’ve updated to the latest version of SimpleDiagrams before creating your opponent crushing plays).

Just click the links below to download each library. After downloading to your computer, just double-click each files to load it into SimpleDiagrams.

SportsBackgrounds.sdlp this background library includes playing fields for soccer, baseball, basketball and football.

Football.sdlp  : some simple symbols for football play diagramming

However, when you first add the background it might look kind of funky and stretched the wrong way, depending on the current size of your document. For example, here’s what my document looked like when I added a soccer field…

This is not right. How is Barcelona going to dominate without a sufficiently spacious midfield! To quickly set your document to the correct dimensions for the background you picked, use the Diagram > Fit to background size menu command and your field regains a sense of proportion and dignity.

And that’s it! Sports fans try them out and let me know what you think. This feature is pretty new so please let me know if you have any problems or would like to see some different or additional features to make it more effective.

By the way, an important note about setting your backgrounds…in the SimpleDiagrams Diagram Properties window you can set the “Format” for backgrounds to the following fill modes:

  • repeat (to tile the background across your document)
  • scale (stretch to fit your document)
  • clip (remain the default size regardless of the size of your document)

Here you see I’ve set my background to repeat…

 

But with these flashy new .swf backgrounds, you can only use the “scale” format…in fact, SimpleDiagrams will automatically set the fill type to “scale” and won’t let you change it in the diagram properties.

 

Coming soon: new kinds of libraries

Many users have requested new libraries for different industries and pursuits. As I thought about how to develop these kinds of symbols, it became clear that forcing everything to be simple chalk-like drawings was kind of limiting.

So, in order to expand the ways SimpleDiagrams can be used, I’ve decided to expand the kinds of symbols libraries can show. I’m finishing up this functionality now and will release it soon. Essentially, the libraries are now able to contain Flash SWF files in addition to the usual bitmap images or the simple “path”-based drawings.

I’ll explain more later, but here’s an example to keep you interested. I’m creating a set of libraries for sports, including backgrounds to represent playing fields. Here’s football:

And just like when working with regular SimpleDiagrams shapes, you can draw connectors, change the tint of the background, etc. as you describe something visually…

Resources for micropreneurs

A big part of my work on SimpleDiagrams involves learning how to be a micropreneur. In fact, this week a group of us in Fort Collins are getting together to talk about what it means to create and launch your own product.

This is a short list of resources that provide background to that discussion:

( This list is mirrored here : http://urli.st/ehGj )

Playing the game

One of the best parts about creating and selling your own software as a one-person startup is that you get to play *the game*. The game is better than coding. Or coming up with good UI. Or doing your own site design. The game is the full-on interweaving of your creation in the complexity of the world in such as way that it “lives.” Behind what appears to be a very simple scenario (make something, friggin’ sell it) is a world of things I never expected, much bigger than the lists of basic tasks to bring your bits to market.

I call this a game because your efforts extend to so many areas there’s no way to box it into a boring academic discipline. Nobody has condensed your tasks and situation into a nice paperback with an animal drawing on the front. You just jump in and learn as you go, picking up the flow of the game from those who have done well, while scrambling along the bifurcating trails of stuff-you-really-should-do.

  • Learn how to hack marketing
  • Psychology of internet purchasing
  • Security concerns for the individual developer
  • Upgrading programming skills
  • Becoming a contributing member of the community
  • Keeping with the graphic design zeitgeist
  • Time management and productivity
  • The art and politics of outsourcing
  • ..and the list goes on.

Every day it becomes more clear to me that if you’re a one-person deal — and if you are you know it and you can’t help it — you’re probably not going to going to achieve that blissful mountaintop of mastery after 10,000 hours of dedicated practice at whatever, painting, soccer, you name it. On some days this bothers me. On other days, I’m perfectly happy playing the game.

 

 

User to me: SimpleDiagrams needs some SimpleFixes

Romain Knieper wrote to me from France recently, asking for some improvements to SimpleDiagrams. Here’s what he sent…

Romain seemed surprised when I responded to his email with “friggin’ awesome, can I post this on my blog?” But that really is the way I feel: if you want improvements that means you’re using the software and it’s helping you, and now you want it to help more. Fifteen minutes is a lot of time these days, and if a user is spending that much time telling you what you can improve, it’s a vote of confidence in the software and its potential.

It’s been tough going recently and there haven’t been nearly enough updates to SimpleDiagrams. But that’s about to change, starting with the soon-to-be-released version 1.5, which sports some new features coded by superhuman ActionScripter Aleksey Shmatov. (More soon…)

 

 

 

Recent updates

Apologies for the recent group of updates. A couple users reported problems with the new library plugins, so I fixed them as quick as I could and pushed up new versions immediately to limit any problems you might have. (SimpleDiagrams is now on version 1.3.5 and at this point I’ll go back to a more regular update schedule.)

If you have an issue with your upgrade, please contact me and I’ll get you sorted ASAP.

In the meantime, you now can create your own xml-based library plugins! See this post for details.

Knowing when to stop

Sometimes you should stop what you’re doing. Today I didn’t and the result was the following mini-set of symbols. Only for Full version users who’ve installed version 1.3.2.

Right-click link to download: http://www.simplediagrams.com/library_plugins/EliteSaturday.sdlp

Creating your own .sdlp library plugin

SimpleDiagram library plugins used to be compiled, closed, uneditable and unfriendly chunks of code. Those days are gone.

Plugins are now much simpler in the new beta version of SimpleDiagrams (v1.3.1, available for download on the free page … just look for the “download beta” link). This blog post describes these changes and provides some steps to making your own library plugin. It’s a bit technical since you have to do some editing of xml files and such, but if you’re not afraid of that, read on…

Essentially I’ve changed plugins from compiled, signed bytecode to plain xml. (Cue fireworks.) Each library plugin and the shapes it contains are described in one file. When SimpleDiagrams starts, it looks in a specific folder for these plugins and loads them one by one into your library.

The xml format is pretty basic and looks something like this:

So not too complicated. First you create an <sdLibrary/> element and give the library a unique name as well as a “displayName” to show in the library panel.

Then, you add a bunch of <sdSymbol/> elements with a name attribute and one (and for now only one) <Path/> child element.

Each <Path/> element describes the path to draw the shape. This follows the Adobe FXG format and the shape path data is just one long string of instructions per Adobe’s path data format.

So the main effort for you really is just to get your drawings into this path data format. Perhaps some of you can imagine a vector shape and figure out the path data in your head. To you I say, “the world is such a big place and there are parks and flowers and waffle cones other things you’ve never experienced but might enjoy.”

For everybody else, you’re going to need a tool to create the path data for your shape. This example will show you how I create shapes in Adobe Flash Professional CS5, but my assumption is that you could use any tool that exports FXG (like Illustrator or Catalyst).

So here’s a basic shape I’ve created in Flash Professional CS5. The drawing is all on one layer:

Note that the shape is in the 0,0 position. You can make sure of this by hitting ctrl-A to select the whole drawing and then set the x and y properties to 0:

Now you’re ready to export your shape to FXG so you can get the path data. With the drawing selected, select the File > Export > Export Image menu command. Change the format to .fxg and save your image.

Open the .fxg file you just saved in a text editor. The Adobe FXG format is pretty easy to read, and since you only have one layer it shouldn’t be to long. Your job is to look for the <Path/> tag and grab the actual string of path instructions.

Here’s the FXG for my shape:

Woah! There’s more than one <Path/> element. No problem, just grab the data from each and append them into one long string. Then, take that string and add it to the data attribute of the <Path/> element in your own library plugin xml file. You can ignore all the other stuff since my format doesn’t yet understand things like groups or fills.

When you’re finished editing your xml file, save it with an .sdlp extension (for SimpleDiagrams library plugin). Then, load this .sdlp via the Libraries > Load Library Plugin menu command in SimpleDiagrams.

Alternatively, you can just place it manually in the SimpleDiagrams library plugin folder for your operating system:

  • Mac: /Users/[your user name]/SimpleDiagrams/lib
  • Windows7: /Users/[your user name]/AppData/SimpleDiagrams/lib
  • Windows C:\Documents and Settings\[your user name]\Application Data\SimpleDiagrams\lib

Ok wife just told me to stop monkeying around on the computer, so I’ll be back with more details later. Until then, good luck with your plugin!