For my post on the refurbishing of the Rockwell Unisaw, I wanted to include the placard that is on the front of the machine. Sadly, I could not get a good photograph of it and was not able to find the artwork anywhere. So I created it in GIMP. Here are the steps.

The steps reference the filmstrip including with these instructions. The frames are numbered.

I took a usable photograph of the placard and opened it in GIMP. I then cropped it. I set this layer to 50% transparency and kept it at the top for reference.(frame #1)

Next, I added a new blank layer. I created rectangle selection area and set rounded corners until it was close to that of the image. With the new layer selected, I filled the rectangle with black. (frame #2)

I created another blank layer. I selected the photo layer, clicked on my foreground color to get the color dialog and then used the dropper to get the ‘blue’ color from the photo. I used the area under the end of Rockwell as it appeared to be the truest color. I selected the new layer and since the selection rectangle was still active, I filled the area with the blue. Then I created a selection rectangle of the bottom black portion and deleted it. (frame #3)

I created a forth layer and after resetting my foreground color to white, I set the paint brush to a solid line and increased the width until it matched the separator line in the photo. I clicked first outside of the visible in line with the line (if that makes sense) and then, holding down the SHIFT key, I moved the cursor to the opposite side and insured the line was horizontal before making the second click. (frame #4).

Next came the text. There are two fonts involved. The closes matches I found were Ariel Bold for the "Unisaw" and Calibri Bold for the rest. I had to alter the inter-character spacing to match the photo. (frames #5, #6, and #7)

I tried creating the logo using paths but the current version of GIMP has limited point editing. I eventually found a large enough example on the internet. I opened the image file as a new layer. I added transparency to the layer and then used "color selection" to get the three legs of the logo. I inverted the selection and deleted everything but the logo. Finally, I re-inverted the selection and filled the three legs with black. I performed an auto-crop on the layer. This layer is not visible in the final work. (frame #8) I duplicated the logo layer, inverted the color to white and then scaled and positioned it to match the photo. (slide #9)

While the placard was flat, I wanted a little flare to the graphic so I added drop shadow to the logo, the "Rockwell", and the overall rounded rectangle. (frame #10, #11, and #12) I tried using a white drop shadow for "Unisaw" and the "Power" text but it looked messy.

With all of the layers done, I hide the original photo layer and then order everything in reverse – shadows at the bottom, then the black and blue backgrounds followed by the white line with the text and while logo on top. The last frame shows the finished artwork.

Mostly for my own record but also for anyone curious how "the Salmon Farm" text log is created, here are the steps.

I use GIMP for my graphics work. Everything in this description will work with Photoshop however, the results of the "chisel script" will need to be done using Photoshop operations.

1. For working on small objects I like to use a sheet that is about four times my final image.
2. The font used is called "North Point" and is available from a number of internet sources.
3. The color is what I call "agriculture green" but more precisely is 0x70A000.
4. The beveled edges were originally done with separate inner and outer layers but now a script is available from the GIMP Plugin Registry called "Chisel/Carve" that does all of the heavy lifting.
5. The next steps only apply to the bevel so I select that layer.
6. The bevel’s intensity needs to be pumped up slightly. Here we adjust the "levels" to raise the floor of the black level (in this test to about 50).
7. The bevel is also a bit rigid so with the bevel layer still selected, we apply a small amount of Gaussian blur (3,3).
8. Now let’s reselect the text layer.
9. The last step is to apply drop shadow to the text. Remember that the working image in this example is 4x our final so these offsets will be very small in our final logo.

There is the logo. If you delete the white bottom canvas, and merge down all of the remaining layers, you can save this as a transparent PNG file. It is a good idea to save the original work first, then merge the layers and save the result as a PNG file. Then you can scale it down in steps, saving various sizes of the logo.

For size and performance reasons, the logo on the blog is ultimately saved as a JPEG file at 75% quality and a white background to fit with the background color of the blog’s header.

From a simple perspective, "analytics" for the end user means three things: Data + Processing + Display. While purists may say analytics is just the processing, the old adage of "garbage in / garbage out" is apt. So too is the recognition  that great data with great processing can still leave you scratching your head if you can see what is important.

All of this is to say I found it interesting to read that NBC has added a live twitter "pulse" analysis for the Olympics. At the moment I would guess it is must another gimmick to generate buzz. However, there could be real value in what it does.

The purpose of Twitter Pulse is to show the relative volume of tweets and the topics they represent.

Data: The data is Twitter but its not clear how they select tweets about the Olympics vs. all other tweets. For now, we will assume its a good data set.

Processing: Next, there is some type of analysis – presumable to pull out key words such as the sport, the interest, some data keys ("video", "medal", etc.) locations, athletes, and so on. All of this data is processed for one metric, "volume of traffic".

Display: the "volume of traffic" metric controls a box size. The other data keys are used to generate some text overlay and to choose a suitable background image. All of this is then rendered "tree map".

What does it mean ? OR more important to a company, what use is it ?

The resulting data could indicate what people are interested in seeing and thus influence what what content is broadcast as well as what types of advertising will have the highest impact. If this were trusted, then it could impact the cost of advertising as well as the size and demographic of the audience.

However, we need to remember the data set – Twitter. So perhaps this is not a sufficiently accurate sampling to make changes to broadcast content. But, what about using the data to change web content ? It could be a good predictor of web site traffic and thus advertisement selection and placement as well as to focus content.

As an aside, I found it interesting that over the 30 minutes or so of watching the Twitter Pulse, the sport of Curling rarely dropped out of the top 1/3rd of the graph’s boxes.

My observation of "analytics" is that success requires all three disciplines working in concert and more often than not, there are three distinct skill sets – data management, processing, and visualization. If you are interesting in the display component, you might be interesting is looking at "Many Eyes" which not only provides visualization of data set but also lets users share their discoveries – a kind of "social data processing" capability.

I didn’t like the control screen since all of the buttons for the Popcorn Hour did not fit when the iPod Touch was in landscape mode. in I redid a few buttons and redrafted the layout. It’s more compact than before but it now works in both orientations. 

I updated the original download from the previous post.

Over at the NetworkMediaTank forum I discovered Niels Leenheer had created a great Adobe AIR controller for the Popcorn Hour appropriately named “MediaController“. He also created a lesser well known web based controller for the iPhone (but that he did not have an iPhone, he has not promoted it much).

I downloaded the controller and and one I found the installation instructions* I had it up and running and working with my iPhone Touch. However, it was not very rich so I decided to start working on it. There were two pet peeves – very few actual controls were implemented and the lists of content were by “create date” and not alphabetical.

So, first I set out to find graphics to simulate a remote control. I did not find anything I liked so I used GIMP to create a full set. Next, I had to add a lot of command controls to the and get the layout of all the buttons I wanted. The layout was a bit of trial and error and the command controls was a combination of reading the NMT Wiki and a lot of cut/copy/paste and batch editing.

The image is what I ended up with for the control buttons. Along the way, I also fixed the sorting bug. I’m not 100% happy with the button layout but it’s close. I also do not know enough to do the right things to the button layout when the device is rotated. I’ll eventually dig into that.

If you are curious why I went through this exercise, it’s because there is a good change the Popcorn Hour will be buried in a cabinet in my home office far from the TV and thus the IR remote will not work.

BTW: the trick to the install is to …

1. copy the “controller” directory to the root of the Popcorn Hour’s internal HDD
2. you will need tenlet support enabled (I think)
3. insure the myiHome Server is running on the Popcorn Hour
4. point your iPhone / iPod Touch browser to:

   http://YourPopcornHour_IP:8088/stream/file=/opt/sybhttpd/localhost.drives/HARD_DISK/controller/index.php