Comanche Hill

Cowboy Coders Blog by Mark Morga

UML Diagrams From Graphviz

| Comments

I’m not a huge fan of UML. I find that it took a simple idea (standard conceptual drawings) and made it much more complex than necessary with the unwise goal of allowing commercial UML tools to flourish and make code-to-diagram round trip conversion something people might want to do. Something like MagicDraw I find horrible from a performance and usability perspective.

I’m also not a big fan of a lot of drawing software. Visio is great unless you don’t run on Windows, don’t own a copy, or care about usability. Omnigraffle on the Mac is arguably better on the usability front, but you still end up tweaking the drawing a lot more than just entering your relationships and drawing connections. With any drawing software, the saved file is not human readable - and looking at diffs in a source control system tells you nothing

I like Graphviz for making quick drawings that are minimalistic and take away the tweaking factor of a lot of apps. You describe the nodes and edges and Graphviz figures out how to handle the layout of the drawing. Need to add something later? No problem, just put it in the dot file and regenerate your results.

Graphviz has the advantages of:

  1. Runs everywhere
  2. Free
  3. Text based - diff friendly changes
  4. Supports a wide variety of output formats: bmp, eps, fig, gd, gd2, gif, gtk, ico, imap, cmapx, jpg, pdf, plain, png, ps, svg, tiff, vml, vrml, wbmp, webp, xlib

Graphviz’s disadvantages:

  1. Sometimes the layout is less than perfect
  2. The output is pretty plain unless you spend a lot of adding style in the dot (which hurts the simplicity of the input format). Or spend time tweaking the output format (which gets you back into the image software trap)
  3. Doesn’t support UML style graphics

For a long time graphviz supported the inclusion of PostScript files to define shapes, but this was only useful if you were outputting PostScript as a final result. I like using SVG as my format of choice since it can be freely scaled and works in most web browsers these days. Looking around the other day, I found a reference to the fact that Graphviz also supports the inclusion of SVG files as an image format. With a little experimentation, I found that it works pretty well.

First, I created a series of UML images in SVG format for inclusion. The full set is in the GitHub project referenced below, but an example for a Component icon looks like this:

component.svg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="91"
   height="36"
   id="component-svg">
   <defs>
     <symbol id="component-badge" class="badge" preserveAspectRatio="xMaxYMin" viewBox="-1 -1 14 12" style="fill:#ffffff;stroke:#000000;stroke-width:0.75">
        <rect height="10" width="10" x="3" y="0"/>
        <rect height="2" width="6" x="0" y="2"/>
        <rect height="2" width="6" x="0" y="6"/>
      </symbol>
    </defs>
    <g>
      <rect
           height="35"
           width="90"
           y="0"
           x="0"
           class="umlbox"
           style="fill:#ffffff;stroke:#000000;stroke-width:1;"/>
        <use x="72" y="4" xlink:href="#component-badge" width="15" height="11"/>
   </g>
</svg>

Then you can create a file describing your Component Diagram which looks like this:

sample.dot
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
digraph SampleComponentDiagram {
  label="Sample Component Diagram";
  fontname="Helvetica";
  fontsize="10";
  node [fontname="Helvetica",fontsize="10",shape=none];
  edge [arrowhead="vee",style="dashed",color="#003388",fontname="Helvetica",fontsize="8"];

  rankdir=LR;

  subgraph cluster0 {
    style=filled;
    color="#2b6f6f";
    fillcolor="#fc93cb";
    label = "Web Application";

    portal [label="Customer\nPortal", image="portal.svg"];

    // Services
    payment [id="payment",label="Payment",image="service.svg"];
    user [id="user",label="User",image="service.svg"];
    product [id="product",label="Product",image="service.svg"];
  }

  subgraph cluster1 {
    style=filled;
    color="#2b6f6f";
    fillcolor="#96f4eb";
    label = "Backend";

    billing [id="billing",label="Billing API",image="service.svg"];

    // Databases
    sqlServer [label="SQL\nServer",image="database.svg"];
    riak [label="Riak",image="cloud.svg"];

    // Components
    loggingJournal [label="Logging\nJournal",image="component.svg"];
    watchdog [label="Watchdog",image="component.svg"];
    eventQueue [label="Event ActiveMQ",image="queue.svg"];

    // Portals
    supportPortal [label="Support\nPortal", image="portal.svg"];
    riakAdmin [label="Riak\nAdmin\nWeb\nPortal",image="portal.svg"];
  }

  subgraph cluster3 {
    label = ""
    color="none";
    customer [label="Customer",image="user.svg"];
    apiClient [label="API Client",image="user.svg"];
  }

  devOps [label="DevOps", image="user.svg"];

  // Connections
  customer->portal;

  apiClient->payment;
  apiClient->user;
  apiClient->product;

  watchdog->riak;
  watchdog->billing;
  watchdog->supportPortal;
  watchdog->payment;
  watchdog->user;
  watchdog->product;

  devOps->riakAdmin;
  devOps->supportPortal;

  riakAdmin->riak;

  payment->eventQueue;
  product->eventQueue;
  user->eventQueue;

  eventQueue->billing;

  billing->sqlServer;
  billing->loggingJournal;

  loggingJournal->riak;
}

Running the file through graphviz like this:

Process the dot file
1
dot -Tsvg -O sample.dot

Results in an image that looks like this:

Sample Component Diagram

Which is not too bad of a start. From here, there’s a few things I think I could do to make it even better.

  1. Pre-process the dot file. Come up with an annotation to denote the type of image to include for a node without having to reference the image file.
  2. Assign ids and classes as appropriate in the output which is handy for animating the resulting SVG or otherwise working with the SVG DOM later.
  3. Post-process the SVG output to look nicer. Apply a better look to the sub-graphs, round the corners, add add gradients, etc. This sort of thing has been done before with XSLT.

I think this approach is reasonable for some UML types: component, use case, collaboration, activity, and maybe deployment. Sequence diagrams are different in layout and probably aren’t worth the effort to attempt.

Making the Windows Shell Livable

| Comments

Back when I last “did” Windows development, .Net didn’t exist and the Windows CMD prompt was one of the first things I replaced (with Cygwin). Unfortunately, last time I helped someone with a Windows machine the Cygwin install didn’t go well - it seemed to be mired in the past, was slow, and the git version included did not work for some reason with the repos we needed to use.

Fast forward to the last couple of weeks. I’m in the process of learning C# and .Net to help build a new framework with a team and I’m running Windows 7 in a VM. So I’m coming to Windows fresh after a break of almost 8 years. The good news so far has been than C# strikes me much better than Java did (when I last used it) and that the .Net environment is pretty easy to get learning. Some DLL hell still exists (which I ran into using the ZeroMQ NuGet libraries), but for the most part it has been fairly pleasant. Unfortunately, the old Windows CMD prompt is unchanged from all those years ago. Despair sets in.

Then I learned about PowerShell. After giving it a whirl and learning a thing or two, I’ve finally got a very usable shell configuration for Windows development that doesn’t make me weep every time I have to use it. Here’s how I have it configured.

On my VM, PowerShell comes pre-installed, you may need to download it depending on your version of Windows.

Console2

First I installed Console2. Console is a Windows GUI which wraps the shell of your choice and adds: multiple tabs, text editor-like text selection, different background types, alpha and color-key transparency, configurable font, different window styles, hot-key mapping, etc. This step isn’t strictly necessary but I like having a more responsive window for my shell and I use tabs often in iTerm on the mac.

I configure Console to use PowerShell by starting Console, selecting the Edit->Settings menu, then selecting the PowerShell exe in the “Shell” chooser which on my machine is located at: “C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe”.

Git

A lot of Windows developers seem GUI bound which is an unfair self-limitation to impose. I install the git version from the primary Git site. Download

When installing, Git offers you the choice to install git for Git Bash only or for general use. I chose the general purpose case.

Configuring Git

Note to self - you need to configure git to use .ssh keys in order for things to work correctly with remote repos. I’ll post something on this later.

Installing Posh-Git into PowerShell

Once you have git installed and configured, to get the most from Powershell, I recommend installing posh-git.

First set the security for your PowerShell instance. Run PowerShell as Administrator and type:

1
Set-ExecutionPolicy RemoteSigned -Confirm

Make sure git can be run from your shell. If not, add it to your user’s PATH.

Type the following commands to install PsGet and Posh-Git:

1
2
(new-object Net.WebClient).DownloadString("http://psget.net/GetPsGet.ps1") | iex
install-module posh-git

To make it available at all times, install it in the PowerShell profile script. On my machine, this is located in my Documents folder: WindowsPowerShell\Microsoft.PowerShell_profile.ps1.

Microsoft.PowerShell_profile.ps1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Push-Location (Split-Path -Path $MyInvocation.MyCommand.Definition -Parent)

# Load posh-git module from current directory
# Import-Module .\posh-git

# If module is installed in a default location ($env:PSModulePath),
# use this instead (see about_Modules for more information):
Import-Module posh-git


# Set up a simple prompt, adding the git prompt parts inside git repos
function prompt {
    $realLASTEXITCODE = $LASTEXITCODE

    # Reset color, which can be messed up by Enable-GitColors
    $Host.UI.RawUI.ForegroundColor = $GitPromptSettings.DefaultForegroundColor

    Write-Host($pwd) -nonewline

    Write-VcsStatus

    $global:LASTEXITCODE = $realLASTEXITCODE
    return "> "
}

Enable-GitColors

Pop-Location

Exit out of Console/PowerShell and the next time you start up, you’ll see extra functionality for Git while in directories that are Git repositories.

You can now use tab completion to complete both git commands and to fill in branch or remote names in addition to file names.

When you type “git status”, you will see color highlighting of files that helps understanding what is staged versus what isn’t yet.

Have fun. Let me know if you have any tips for PowerShell that I should pick up.

Spoiler Free Avatar Review

| Comments

        <p>The bottom line, it’s well worth seeing with a couple of caveats below.</p>

The Good:

  • The most amazing visuals that I’ve seen in a movie. The imagery is like seeing great science fiction paintings come to life.
  • The 3d on a 4k digital projection is by far the best I’ve ever seen. It does take a bit to get used to and there are moments that look somewhat video game-like.

The Bad:

  • The story is pretty pedestrian and has a lot of cliches
  • Most of the characters are two dimensional
  • I would have liked aliens that were a little more alien and a little less “thinly veiled Native Americans”

The Really Bad:

Like the Dude said:

The Dude:
I don’t see any connection to Vietnam, Walter.
Walter Sobchak:
Well, there isn’t a literal connection, Dude.
The Dude:
Walter, face it, there isn’t any connection.
  1. The Vietcong weren’t primarily armed with bows and arrows.
  2. To imply (as this film seems to) that Al Qaeda and/or the Taliban were just innocent people sitting on a resource we wanted to steal is ridiculous.
  3. To imply further that Al Qaeda or the Taliban were just declared terrorists (despite doing nothing to provoke us) to justify attacking them is outright offensive.
  4. “Daisy Cutters?” Seriously? Afraid that the audience wouldn’t get your subtle effort at analogy?

The class and race politics in Avatar are almost of caricature of rich, white, liberal guilt and self-loathing.

  • Business (and the military**) = universally bad (hate nature, greedy, lie, cheat, steal)
  • Shamanistic and low technology people = universally good (love nature, peaceful – except, of course, when righteously killing the above)

** Except for the female soldier of color.

The Bottom Line

James Cameron spent tens of thousands of hours to build one of the most beautiful and engaging worlds yet seen in the movies. Unfortunately, he should have spent a weekend with a real science fiction author to come up with a story deserving of that world.

Moved to SliceHost

| Comments

I’ve moved my blog off of my Rackspace personal server onto a SliceHost server.

Film Personality Test

| Comments

via Kottke via Nels

Choose your favorite movie per director. 1) Joel Coen, 2) Wes Anderson, 3) Hal Ashby, 4) Kevin Smith, 5) Quentin Tarantino, 6) Stanley Kubrick, 7) P.T. Anderson, 8) Errol Morris

  1. Joel Coen: The Big Lebowski
  2. Wes Anderson: Rushmore
  3. Hal Ashby: Being There (Full disclosure, I barely remember Shampoo and haven’t seen Harold and Maude)
  4. Kevin Smith: Dogma
  5. Quentin Tarantino: Kill Bill
  6. Stanley Kubrick: The Shining
  7. P.T. Anderson: Punch-Drunk Love
  8. Errol Morris: The Thin Blue Line

Letus35 Mini Review

| Comments

I’ve been wanting to get back into filmmaking. I’ve been working periodically on a feature length script but in the meantime, I was asked to work on a music video (more on this soon). The Letus35 mini has had me interested for quite a while. I had made a deal with myself that I would purchase one if I made enough progress on the script, but the opportunity to shake it out on a music video was too tempting.

This summer, I purchased a Canon HF10 HDV camcorder. I had been looking at the HV20 and HV30, but the reviews indicated that the sensor quality on the HF10 was similar and I couldn’t pass up the opportunity to leave tape behind. So this post is more of a collection of my experiences with the combination of the HF10 and the Letus35 mini rather than a comprehensive review.

I chose to go with the Canon FD lens mount because I already had a few FD lenses and FD lenses are plentiful and inexpensive on eBay. The Canon EF mount is also available, but due to the lack of aperture ring on EF lenses, you need to set the aperture via a fairly hacky process involving an EOS body, not the best way to work. In practice, this may not be as bad as it sounds, because you have a tendency to want to use the lenses close to wide open anyway to get the shallow depth of field that is one of the prime features of this sort of adapter.

I ordered the kit which included the FD mount, the rails system to mount the camcorder and lens securely and a nice case. After working with the adapter for a few days, I’m convinced the rails kit is a requirement. The rails from Letus are high quality and I wouldn’t feel comfortable using the adapter without the extra support that the rails provide. The weak link in this system is definitely the filter threads that are used to join the camcorder to the adapter - you don’t want to risk damaging them.

The setup of the system is a little involved, but with practice I believe I’ll be able to assemble, align, and focus the system in about 15 minutes. The focus process is pretty easy to accomplish, but the HF10’s screen is too small to be used to focus on the ground glass. Using the A/V out to my old standard-def TV was sufficient to focus correctly. Since you will need to accomplish focus each time you re-assemble the system, you will probably want to bring a portable monitor with you on location.

My first feature request is for transport of the system. It would be nice to have a case in which you could securely store the assembled system. I will likely purchase one in the near future. As an alternative, it would be nice to be able to leave the 37mm threaded ring on the camcorder when storing the adapter, but there isn’t a cover to protect the adapter if you do this, so you end up having to fully disassemble the adapter when putting any part of it back in the case.

When the HF10 is mounted on the riser on the rails system, the camcorder is pretty close to the power button on the adapter. I thought this might be a problem at first, but in practice it wasn’t at all. The only potential problem here is that you can’t immediately see if the power light is on. I did forget once or twice to power the adapter on (which results in video with noticeable grain from the ground glass), but this is more a matter of practice and habit. It’s pretty obvious when the power is on because of the vibration of the unit.

Vibration is probably the biggest issue to be aware of. Vibration is used by the adapter to hide the grain of the ground glass. This works very well in practice. I noticed a couple of side-effects with this system. The biggest problem with the vibration is that it confuses the image stabilization system on the HF10. With IS enabled, the video warbles when the camera is still and tends to overreact to actual shake. As a result, I don’t believe I’ll be able to use the IS setting while using the adapter. Not the end of the world. The vibration does emit sound. I doubt this sound would be picked up when using an external mic, but the on-board mics do pick up the sound as a low frequency buzz or rumble. As a practical matter, if you are going to spend $1500 on a lens adapter system and not use an external mic, you hard larger problems ahead of you anyway.

The only other issue I ran into was a result of moving the camera around quite a bit on my camera test expedition with the kids. Because the camera is mounted via the filter threads, the camera can easily rotate a bit with respect to the adapter during normal handling. As a result, it’s important to occasionally verify the alignment when shooting. It only caused a problem for me when I was zoomed out more than I normally would be to accentuate the natural vignetting of my 24mm lens. I didn’t notice the alignment problem on the built in screen because of the vignetting, but I could see an off-kilter box frame in the final video. This isn’t a huge problem, but it is something to keep an eye on.

So aside from the minor issues (and they are truly minor), I’m really happy with the result. The video I’ve captured looks much more filmic than I’ve ever achieved with pro-sumer cameras that I’ve had access to. The look of the video straight off the camera is very pleasant to look at (nice bokeh from those FD lenses). The focus is very manageable in the field with the built-in camcorder screen (the focus flaws in my camera test are more indicative of my skill than flaws in the adapter). Certainly having a larger screen from the camcorder would make it easier to be much more precise when focusing. I will be bringing a small monitor with me on shoots where I won’t be running all over.

My biggest gripe in shooting on video in the past has that I haven’t had control over the depth of field and now I do. I’m a very happy adapter owner. I’ll post a followup with the results and lessons I learned on the music video shoot.

Camera Test

| Comments

I shot some video this weekend with my kids in Landa and Hinman Island Parks to try out my camera with my new Letus35mini adapter. I just cut this together in iMovie - so the editing is minimal. I did no processing of the video - this is straight off of the camera.


Vampire Tag from Mark Morga on Vimeo.