Posts tagged ‘Software Development’

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 all new “Aircraft Weight and Balance” Web Application

 

The aircraft Weight & Balance App for smartphones is done. It’s been done for about a week but needed to do some usability testing and then create the video tutorial. I’ve had other hints on my mind so is had to wait. The wait is over.

The mobile web app is really just a specialized calculator so there is no reason it needs an Internet connection. Thus, even though the app is written with HTML, CSS, and JavaScript, it works in airplane mode on iPhones and iPod Touches (and probably android devices but I don’t have any for testing).

A few changes from the first release …

  • Helper feature to remind new users to add the app to their home screen
  • Dynamic UI to support a wider range of aircraft configurations from single seat to four occupants and up to three baggage areas.
  • CG results are displayed graphically as well as numerically.
  • Warning messages for missing configuration, over gross, and out of CG
  • This version of the app uses the jqMobi framework in place of jqTouch

You can install the application at: 53VG.com/wb. I hope pilots find the app useful. Leave feedback if there are features you’d like to see in the next release!

 

Addendum: a post to an aviation related forum reminded me of a small assumption I made in the app. While the data entry of the settings and the flight data are all meant to work with either English or metric units, the fuel load is in US Gallons and converts to US pounds during the calculation. Thus, the app does not really support metric. Sorry about that.

I probably won’t use jqMobi next time

Almost a year ago I wrote a mobile web application for my iPhone. It was a simple aircraft weight-and-balance calculator. The nice part was it would work without an Internet connection and it remembered all the settings from the last time it was used.

I wrote it for my airplane. It worked for any pilots long as they were flying an RV-8.

Over the past week of evenings, I rewrote the application to support a wide range of airplanes. I also took the opportunity to try a new mobile web application framework – jqMobi

The author(s) of jqMobi claim they have built a leaner faster replacement for the widely used jQuery Mobile. I'm not sure they hit their mark.

My gut tells me they have good intentions but insufficient resources to get the job done. I know jQuery is getting fat and slow on older iOS devices. JqMobi is smaller but for my project, it was still slow on older hardware. More worrisome is that is it very unpredictable and buggy. Something as simple as running their own “kitchensink” test application and switching themes (a part of their test) shows spacing and layout bugs. Worse still, they have made code paths that are totally unpredictable for tough events and form input. The lack of documentation and examples means you are debugging their code more often than your own.

Update 1: I was able to change my application's CSS and HTML to behave with the jqMobi parsing of the input fields withing the fieldset. The original markup worked fine for jqTouch and Dojo.

A google search shown low adoption for jqMobi and a fair amount of friction between jqMobi and the jQuery Mobile team. My guess is jqMobi was built by a team for their own use and the public release is secondary.

Update 2: The lack of online public usage and commentary means that most searches for “jqMobi” and a “question” will show jQuery results. There may be adoption going on but it is not public.

What does all of this mean ?

Simple – I don't trust jqMobi to get better and I don't trust it to be around and supported a year from now. There's no good reason to risk it.

Sadly, I have finished the weight-and-balance re-write using jqMobi. I finally have everything working. It took about 30 hours. But, I'm not going to release it. Instead, I will rip out jqMobi and re-write everything to either Dojox Mobile or jQuery Mobile.

Update 3: I did e re-write using Dojo. It was pretty quick. I attribute mush of that to the fact I've re-written the application three times now and the CSS, HTML, and JavaScript is very modular now. The Dojo documentation is also extensive. The Dojo implementation was the fastest of all the different frameworks – even on my old 1st generation iPod Touch. Sadly, I could not find a single working example of Dojo in full off-line mode. I posted to internal and external sites but no success. The off-line requirement was the show-stopper. Since I had the jqMobi version working, and I needed to release the update, I went ahead and cleaned up the final code and posted the app.

Chalk this one up to a “character building exercise” :-(

 

Mobile Web Application Frameworks – the good enough, the potentially better, and the down right frustrating

I’ve spend far too many hours over the past three days trying to build myself a simple mobile web application template from which most of my demos, interactive designs, and development work will emanate. In the end, it came down to two factors:

  1. the learning curve – how long before I was effective
  2. the results – how good does the working application look, and can I achieve the functionality I need/desire

While I am sure there will be projects that gravitate (or even dictate) one framework over another, I am settling on jQuery Mobile.

Now, let me backup and give a short set of notes on what I tried and what I experienced. As will all subjective things, your mileage may vary.

jQuery Mobile

dojox mobile (Dojo)

Sencha Touch

This framework is a mix of HTML, CSS, and JavaScript and as such, it’s quick to get something that “looks pretty good”. Some web reviews indicate its performance isn’t top of the charts but it then again, it is not yet officially at a 1.0 level release yet (according to them (is 1.0rc2 as of this post)). There are a lot of extensions for jQuery and the framework model is you explicitly add anything you want/need but it’s not there by default. There is a very busy “community” effort around jQuery and most of it works with jQuery Mobile. There are lots and lots of working examples, so people who “Learn by Googling” will be productive quickly. As a software development framework, it may not be the best for “heavy lifting” but then again, a lot of the web is built with PHP and pundits say that is not “commercially viable”. It seems to have very large code base and very professionally run operation with big names investing it it (and it looks it). The code and documentation looks like it was written for an IT department. The examples are terse at best and do not help a develop to become productive. I think the framework would be very powerful if you paid to attend a week long hands on training program. In the end, the learning curve was far too great and within a short amount of time, I had already encountered more than one case where I needed a bunch of customer code to get the desired result. It seems to cater to hard core software developers and not to quick hacks or interactive design work. I also found it baffling to figure out how to subset all of the imported code. If you don’t cut down on the unnecessary importing of JavaScript, the load time of the app is nuts – “go for a bagel” nuts. This is a programming language and not a markup language. What I mean is that every application has the same tiny skeleton HTML file. Everything – and I mean everything – about the application is done in JavaScript using the Sencha class library. You will do common object-oriented development practices such as sub-classing and using class inheritance. There is even a syntax language for generating formatted markup. While the API documentation is growing, it is still lacking enough ‘complete examples and in most cases the documentation is incomplete. It is also going through a major change from 1.1 to 2.0 so things may get better in a year or so. There is a good looking development tool but it is specific to Sencha and at a price. Software developers may find Sencha to there liking and most web reviews indicate its performance (especially for UI actions, smooth scrolling, and animation transitions) is one of the best.

 

Moving pictures with HTML5

For the life of me I can not think of the term given to the cartoon animation technique when depth is created with layers and the characters move in front and behind the layers.

It doesn’t really matter. What does matter is that you can do it with HTML5 and there is no need for FLASH or video.

The still image shown has 5 layers. The sky, the mountains, and the brush are all static. The hiker and the bird move … Well, they don’t move in this blog post but if you head on over to this page then you can see what I mean.

I won’t go into great detail on how it’s done. The magic is just using two capabilities in HTML5. The first is the “canvas”. The second is the z-axis (depth). By creating multiple canvases and assigning each a differed order in the z-axis, you can achieve this old style animation.

If you want the code, just right-click on the page. It’s not pretty but it is good for learning. I’ll admit that the layers I am using are inefficiently large. I’d avoid that if you are going to do this for a real website. However, the technique works well for an animated banner or other small frame that would have previously been done with FLASH.

A developer in designer’s clothing

When working as a user interface designer – especially when focused on mobile computing – I find that a lot of my software developer methods take over. Whereas most of my peers are fluent in Photoshop, I use tools like GIMP and ImageMagick as well as programming languages and tools.

A recent example is my need for lots of similar graphics resources.

When building web applications for Apple devices like the iPhone and iPad, there are a dozen or more different sizes and shapes needed. In many cases, the graphic content is the same but it must be scaled and cropped. The square icon needs three sizes to accommodate the two different iPhone resolutions and the iPad. The launch screen has four sizes – two for the iPhones and one each for the iPad in landscape and portrait. There are even different icon sizes needed for the settings page when develop native apps.

Rather an create each image, I create one master image at a large “pre-determine” size. From that one image, I have scripted the generation of all the other graphics. The script even creates the iOS styled rounded corner icons with the glossy effect.

The script does not yet create some of the Android OS specific graphics but most will be easy to add.

If you are interested in the script or to look at the results, visit http://communicat.us/auto-graphics for an example.