Tag Archives: Wordpress

Embedding a UML SVG Image in my blog

For reasons that are beyond me, I’m currently interested in getting pretty SVG images of UML diagrams to display in web pages.  Specifically, in my blog.  First, I need a UML editor that doesn’t produce rubbish diagrams at home.  I’m currently sans a Windows install, so to add spice to the challenge, I wanted to see if I could get great looking UML diagrams out of Ubuntu (no, every Linux UML editor I’ve tried offends me greatly in terms of asthetics).

UML Editing under Ubuntu

There are only really two UML editors I love and they’re both Windows tools.  The cheap (as in free) one is StarUML; abandonware circa 2007.  The other is Enterprise Architect which I don’t have a home licence for (very good value for money all the same).  Both seem to have good reputations with running under Wine (1.3.28), so long as I respect a few winetricks for StarUML.

I’m happy to report that I can run StarUML under Ubuntu and everything I’ve tried to date seems to be working fine:

Here's StarUML, running under Ubuntu 11.10

Printing a PDF file in Wine

The next step was to get StarUML to print out PDF files.  After a bit of screwing around, the easiest approach was to simply add a PDF printer to  the Ubuntu print manager via a cups PDF printer (thusly from the command-line):

sudo apt-get install cups-pdf

Once installed, Wine seamlessly offered a PDF printer for me to print to, and StarUML was happy to spit a  PDF file of its current drawing out and drop it in a new PDF subdirectory off my home directory.

Converting a PDF file to SVG

I thought at this point that things would be plain sailing given the recent success I’ve had under Windows getting Inkscape to edit EPS files (I figured PDF would be just as hassle-free).  I was wrong, the PDF import under inkscape is doing something crazy-funky with the fonts.  In looking for answers/alternatives, I found a wonderfull little utility called pdf2svg.  I installed it, and from the command-line can do something like:

pdf2svg someVectorFile.pdf someVectorFile.svg

This gave me a perfect SVG equivalent to my PDF file.  I did a little cleanup in terms of whitespace with Inkscape, and moved onto how I could render it with my Blog.

Rendering SVG files via WordPress

Firstly, WordPress.com won’t allow me to upload SVG files as a valid form of media. I’m hoping they’ll eventually relax that constraint as browsers start rendering SVG files as a more common activity.  As an alternative, I decided I need a web address  for the file, so I uploaded it to  Dropbox account’s public folder, and retrieved a URL for it.

Secondly, I tried following all these suggestions for getting it to render, because WordPress support told me it’d work.  Sadly, none of the listed options gave me gold.  As a last ditched effort, I decided to use the WordPress “Add Media from URL” function, using the dropbox URL.  Joy of joys, it works.

Here’s the HTML that WordPress wraps the SVG image in, JIC you’re interested in that kind of thing (oh: I modified the width to consume the blog post width, as the image insert dialog doesn’t allow that kind of subtlty):

<img src="http://dl.dropbox.com/u/23814580/StarUML.svg"
 alt="An SVG image of a UML component diagram.  If you're seeing this,
does your Web Browser support SVG images?"
 width="100%" />

And finally, here it is.  A UML diagram that doesn’t suck (alright, maybe I could push the font size up a bit, but that’s my  problem), that is a scalar vector graphic, AND being rendered from my blog:

An SVG image of a UML component diagram.  If you're seeing this, does your Web Browser support SVG images?

Just for s**ts and giggles at this point, feel free to bash whatever keys you use with your browser to resize fonts (typically <CTRL>+ to embiggen, and <CTRL>- to emshrinken). Your mileage will vary, depending on how well your browser handles SVG files. For chrome, I’m having me a little nerdly squeefest doing it. 🙂

 And I’m done for tonight.  *yawn*

P*ssing in my WordPress Sandpit

For a while there, I had a sandpit environment for my parent’s webpage. The sandpit was a XAMPP install, running in a virtual Ubuntu machine via VirtualBox.  I eventually got around to an upgrade of VirtualBox, and the old snapshots wouldn’t play ball with the upgraded environment. So, the task I set myself tonight was to recreate the sandpit from the live WordPress install out at my ISP.  Turns out it wasn’t that simple to achieve.

First, I’ve been lazy with my Ubuntu kernel installs, and I’d forgotten which kernel I installed my latest VirtualBox with.  The first thing I did tonight was to purge all my unused kernels, and start with a fresh install of VirtualBox in the last kernel standing. To get get my monitors and desktop playing at full capacity, I needed the guest additions installed. Once I had a blank virtual OS with guest additions, I took my first snapshot (what a lifesaver when things stuff up, and tonight was full of reversions to previous snapshots).

Next, I laid down XAMPP, Freemind and Dropbox for locahost web-hosting, notes to self on all things web-page related, and easy file transfer across environments respectively, resulting in my 2nd snapshot.

Once that was done I needed the following in order (remember me saying I was backtracking alot?  The approach below isn’t exactly how the night went):

  1. dropped the entire WordPress directory zip file from my ISP into a new subdirectory of opt/lampp/htdocs
  2. Built a MySQL database and user to match what I’d set up at the ISP
  3. Imported the content of the live ISP database to the sandbox localhost database
  4. Modified the wp-config.php file to look at localhost instead of the ISP MySQL URL
  5. Switch off networking on the virtual machine briefly
  6. Step into the sandbox MySQL database, and modify relevant fields in the wp_options table so the sandbox environment wouldn’t go out to the live site and f**k it all up on me (the URL fields are the culprits)
  7. Switch networking back on within the sandbox, and whallah. Working copy from the live system that plays nicely.

And now I have a 3rd and final snapshot that I can try various shopping-carts out on before committing to a particular flavour.

I’ve learned tonight that the WordPress file backup and its matching MySQL backup go hand-in-hand for replicating the web-site across environments. I’ve also learned that the current backups sitting out at my ISP saved my bacon once I realised that the wp-admin screen in the sandbox was going out to the live site, and causing me to lock myself out of the live system, which suddenly thought its URL was based on a localhost address. DO NOT allow the sandbox to talk to the wider network until it’s happy to serve everything up locally Linds. JUST F**KING DON”T!

Might pour myself a stiff drink before I crash. Shaky nerves and all that jazz.