Posts tagged ‘Hacks’

iOS is not as homogeneous as it once was

Just a few years ago, the big complaint of the Android platform was that is was the wild west. Vendors could choose their own screen resolution and pixel density. This made it difficult for mobile app developers (and designers).

Fast forward to 2015 and there are iOS 7 and iOS 8 deployments, iPhone 4, 5, 5S, 5C, 6, 6P, iPad Mini, Mini Retina, iPad, and iPad Retina. If you want to render all of the needed icons and splash screens for your mobile app, it now looks like this …

iphone-size-comparison16px favicon
32px favicon
57px app icon
72px app icon
76px app icon
114px app icon
120px app icon
152px app icon
180px app icon
1536×2008 portrait launch image
768×1004 portrait launch image
1242×2148 portrait launch image
750×1294 portrait launch image
640×1096 portrait launch image
640×920 portrait launch image
320×460 portrait launch image
1024×748 landscape launch image
2208×1182 landscape launch image
2048×1496 landscape launch image

Thankfully, there is still ImageMagick and it’s ability to script the generation of all these different graphics.

Here is the updated script …

@echo off
echo Utility to generate all of the icons and splash screens for iOS.
echo One files needed in the current directory - mask.png
echo which is used to make iOS looking icons.
echo Assumes there is a file called src10241024.png and that the
echo 'important' material is 768x768 and centered with the remainder
echo of the area being solid color.

for %%S in (16 32) do (
	echo making the %%Spx favicon
	convert src10241024.png -gravity Center -crop 512x512+0+0 -scale %%Sx%%S favicon%%S.ico

for %%S in (57 72 76 114 120 152 180) do (
	echo making the %%Spx app icon 
	convert src10241024.png -alpha off -gravity center mask768.png -compose CopyOpacity -composite -gravity center -crop 768x768+0+0 -scale %%Sx%%S -background transparent icon_%%S.png

for %%S in (1536x2008 768x1004 1242x2148 750x1294 640x1096 640x920 320x460) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making the %%Ax%%B portrait launch image
		convert src10241024.png -scale %%Bx%%B -gravity Center -crop %%Ax%%B+0+0 screen-%%Ax%%B.png

for %%S in (1024x748 2208x1182 2048x1496) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making %%Ax%%B landscape launch image
		convert src10241024.png -scale %%Ax%%A -gravity Center -crop %%Ax%%B+0+0 -rotate 90 screen-%%Ax%%Br.png

Eventually, the sour 1024×1024 image should be undated to about 2400×2400

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 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

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!