Posts tagged ‘Hacks’

Mobile toolbar icons – sprite generation with Imagemagick

Geek Alert ! Geek Alert ! Geek Alert ! Geek Alert !

OK, all normal people have been warned. This is what happens when you mate graphic design with UI development.

actions_60Toolbars are a pretty common user interface mechanism. A series of graphical icons – each representing some action – are displayed side by side by side. Clicking or tapping on one, will initiate its specific action. Ideally, it will change color or shape or give some other indication that it has been effected.

Let’s assume we have four actions. That equates to four graphical icons. We also need alternate versions which indicate one has been effected. So we have eight images. For performance reasons, we really want to have just one image that is the combination of all eight images. This is called a sprite or sprite sheet. (Many of the web applications frameworks even assume the images have been combined.)

It’s not overly difficult to take a bunch of graphical icons, duplicate them and color or shade the duplicates, and then position them side by side by side and finally save the result as a single image.

It’s 8*4+1 steps (assuming our 4 icons). But wait. The graphic designer just changed one of the graphics. No worries, it’s just another 8*4+1 steps. Oops. There was a problem with one of the graphics. OK. Another 8*4+1 steps. Hey, can we change the coloration a bit ? Ugh. Another 8*4+1 steps. Umm … the new color still isn’t quite right. #%^%%&^&% 8*4+1 steps ! OK, the boss just asked us to add an icon. GET OUT OF MY OFFICE OR I WILL … #$^&$%#%

Calmer heads prevail and we reach for ImageMagick.

Lets’ break things down into a few steps.

  1. the graphic designer was working with black icons but since our toolbar will have a gradient grey/black background, we need light grey icons
  2. we want each icon to have an orange hint to it when it is selected
  3. we want to combine the icons into two rows with the light grey on top and the orange on the bottom. Finally, we want two different sizes for the output
    • one set will have all of the icons 40×40
    • one set will have all of the icons 20×20

 

we use the ImageMagick "convert" command to process each icon …

convert iconX.png -negate -modulate 85 tmp\normal_iconX.png

This command inverts the black icon to white and then make it 85% of its original brightness.

Now we process each icon again …

convert iconX.png -negate -modulate 65 -fill "#ff7f00" -tint 100 tmp\selected_iconX.png

Again we invert the black icon and lower its brightness a bit before tinting it with our color. The trick here is to pick the color first and then adjust the modulation to affect its brightness.

Finally we use the ImageMagick "montage" command to create the sprite …

montage -background transparent -tile 4×2 -geometry 20×20+2+2 tmp/*.png sprite20.png
montage -background transparent -tile 4×2 -geometry 40×40+2+2 tmp/*.png sprite40.png

Here we are combining all of the images. We specify we want the output to be 4 icons across in two rows. We also scale the individual images to 20×20 or 40×40 and we add 2 pixels of padding (the padding is not absolutely required but makes the resulting sprite easier to view.)

In production, all of this is done is a script file so the process of each icon is done in a loop and the montage can account for how many icons are in each row as well as control the order. … but you get the idea.

Oh, one more thing. Sprites are useful even if you are not using a JavaScript framework. You can reference any graphic in a sprite using CSS …

/* increment by 44 pixels = each icon is 40×40 and has 2 pixels of padding on all sides */
background: url(sprite40.png’) -44px 0;} // second image, first row
background: url(sprite40.png’) -88px -44px;} // third image, second row

Keep telling your boss that each change takes 8*4+1 steps. That way, you can say you’ll finish the new update in 30 minutes – click a button, have it done in 30 seconds, and go get a coffee !

The 5-minute desert your guests will kill for

Nearly a year ago I wrote about cake in a cup. It’s time to make it even better.

The original recipe takes less than a minute to prepare and a minute to cook.

I am making desert for guests so I made six cakes using small ramekins.

Now, take some kahlua and some caramel sirup – 2oz of sirup in 1/2c of kahlua for six cakes. Mix well and then spoon over the cakes while they are still in the ramekins.

Refrigerate for at least 30 minutes but can easily be a few hours.

When its time to serve, turn the cakes out onto individual serving plates and top with whipped cream.

For a real hack, pull out your French press. Pour in 1/2c heavy cream and 1oz of caramel sirup. Pump to froth. It will soon form soft peaks. Spoon over the cakes. Drizzle a little caramel on the plate and serve.

Watch out for the zombie apocalypse. Guests will kill for a second desert!

A fancy and quick egg sandwich

I grew up with the “Egg Sandwich” as a regular solid breakfast – especially with time was short. Here is an updated version that is even faster than the one my mime use to make.

The trick is in using a few non-conventional pieces of kitchen equipment in efficient new ways.

The “bread” for this sandwich is actually two buttermilk biscuits but no worries, you don't need to whip up a batch of batter or dough for these. These biscuits are actually those “biscuits in a can” from the grocery store refrigerated case. These are the jumbo size with 8 to a can. Rather than bake to 25-30 minutes in an oven, they get cooked for 5-6 minutes in a waffle iron. They end up about 6″ round. Go ahead and cook the whole can. The “waffled biscuits” keep nicely in the refrigerator or freezer.

The egg and cheese is done in the microwave. I know, I know – microwave eggs look weird. So what?! You can't see much of the egg once it in the sandwich. Take a large ramekin or similar sized cup or bowl that is microwave safe. Coat the inside of the dish with a no-stick spray and then add one egg, a tablespoon of grated parmesan cheese (even the cheap stuff works in this case), a tablespoon of water. Now beat with a fork to mix it all up. Don't worry if its not frothy and perfect. No one will be able to tell. Finally, microwave for 1 minute.

Flip the egg from the ramekin onto one of the waffled biscuits and top with the other!

Now, get out the door and get something accomplished – you've started you day with a hearty breakfast and done it in hardly any time at all :-)

 

Cinnamon Bun Mini Waffles

cook cinnamon buns in a waffle maker

cook cinnamon buns in a waffle maker

I can not take credit for this idea but I’ve forgotten where I read it so feel free to share it freely !

You know those cheap canisters of biscuits and breakfast buns you find in your grocery store refrigerated section? Well, you can cook them in a waffle maker!

Heat your waffle maker up to medium-high. Spray some non-stick on both surfaces. Open the canister of sticky buns, cinnamon buns, or the like – the instructions say to press a spoon into the seam but we all know it’s a lot more fun to just whack the side of the canister against the edge of the counter. Place one or two of the buns on each side of the waffle maker (a full size waffle maker can easily take two per side). Cook for about 3-4 minutes. Check to see that they are golden brown and mostly firm. Remove and drizzle a little of the glazing.

Bon appetite !

Integrating a laptop into a multi-monitor setup

two VESA conversion plates hide a laptop

two VESA conversion plates hide a laptop

My office has both a typical desktop computer and a laptop but I use a single keyboard and mouse to use everything. I hated to have the laptop take up precious desk space and it was a waste to hide its nice HD display.

My monitors already were wall mounted on monitor arms (thanks to monoprice.com). The question was how to hide all of the laptop except the screen.

The trick is to make a space behind the wall mounted monitor to hide par of the laptop. But just standing up in back didn’t work out too well. I finally found a solution (yes, it was with more parts from monoprice.com)

I used two VESA adapter plates. I mounted one to the existing wall mount monitor arm and the other to the monitor. I then used various spacers that came with he adapter plates to create a gap between the two plates. The laptop is opened up and flipped upside down. The keyboard is slid up into the newly formed gap and secured with a simple catch. Since every laptop is different, this last bit will be custom. Lastly, configure the laptop display to be “portrait flipped”.

The plates are wide enough for most laptops, even those 17″ screens!

Rotating Images with Arqball Spin

There is a cool App available for iPhone and iPad call Arqball Spin. It creates those 360 degree rotating product shots.

The App is designed to work with a "spin table" but most people don’t have one of those and Arqball hasn’t yet started producing and selling their $80 unit. So what is a person to do ?IMG_5736

Hack of course !

The trick to the whole "spin" is that the app records 20 seconds (20.02 seconds based on the company’s spokes person). The object needs to rotate smoothly one complete revolution in 20 seconds. For this, you need two things – a rotating surface and a motor .. a pretty slow motor. The rotating surface is easy. You may already have one in your kitchen. If not, they are under $10 – a Lazy Susan. The motor is equally easy, inexpensive, and you may have one as well – an electric screwdriver. I had a nice hand panted turntable on my dining room table and I had previously purchased the electric screwdrivers from a local big box store for $8.88 (the price should tell you the ‘falling prices’ store). For convenience, you will also want some way to have something to hold your iPhone (I grabbed a suction cup mount from my car).

Now for the only real trick – getting the turntable to rotate every 20 seconds.

Since the App uses an iPhone, just use the "clock: app which ahs a stopwatch. Place a small mark or something near the edge of the turntable (I used a kernel of popcorn). Gently press the electric screwdriver on the edge of the turntable and press the ‘on’ button. You may need to add something to the screwdriver shaft to add some friction (I used a little double stick tape). Now time how long it takes for the turntable to make one revolution. If it is slower than 20 seconds, you can wrap some tape around the screwdriver shaft. If it is faster than 20 seconds, you can use some tape of a bit of foam or something to make a tapered cone on the end of the shaft. The goal is to be as close to 20 seconds without going under. (If you are a little over 20 seconds, the final ‘spin’ will have a tiny jump at the end but if you are under, the recorded ‘spin’ will be a little over 360 degrees and it will look like it suddenly jumps backs at the end.)

With the timing corrected, place an object on the turntable, start the screwdriver and then start the app ‘record’ feature. The App will finish the recording automatically after 20 seconds and it will then render the final ‘spin’. If you like it, upload it to their website and share it !