Creating an iPhone UI for Virtualmin

Introduction and History

Around the start of the year, I created a theme for Webmin designed to make it easier to access from mobile devices like smartphones and cellphones with simple built-in browsers. At the time I had a Treo 650, which had a very basic browser – certainly not powerful enough to render the standard Virtualmin or Webmin framed themes.

By using Webmin’s theming features, I was able to create a UI that used multiple levels of menus to access global and domain-level settings, instead of frames. The theme also changed the layouts of forms to be more vertical than horizontal, use fewer tables, and remove all use of Javascript and CSS for hiding sections.

This was released in the virtual-server-mobile theme package version 1.6, and all was good in the world. Anyone using it could now access all the features of Virtualmin from a very basic browser, and read mail in Usermin without having to rely on the awful IMAP implementations in most smartphones.

This shows what Virtualmin looked like on a Treo :

Then I bought an iPhone.

It has a much more capable browser, technically the equal of any desktop browser like Firefox or IE. The regular Webmin themes actually worked fine, although a fair bit of zooming is needed to use them. The mobile theme looked like crap, as it didn’t use any of the browser features like CSS and Javascript that the iPhone supports. Plus the layout rendered poorly due to the use of long lines of text that didn’t get wrapped at the browser’s screen width.

On the iPhone, the Create Alias page in mobile theme looked like this :

And in the regular Virtualmin theme, the Create Alias page looked like :

I mentioned this to Joe, and he pointed me at iUI, an awesome library of CSS and Javascript that allows developers to create websites that mimic the look of native iPhone applications. After trying out the demos and looking at their source code, it was clear that iUI would be perfect for creating an iPhone-specific theme.

It wasn’t quite as simple as I first thought, but after some hacking on both the theme code and iUI itself I was able to come up with a pretty good layout, as you can see in this screenshot of the Create Alias page :

Menu Implementation

Actually getting IUI to play nicely with the Webmin theming system was slightly more complex than I originally expected though. For example, an iPhone-style multi-level menu that slides to the left is implemented in IUI with HTML like :

<ul id='main' title='My Menu' selected='true'>
<li><a href='#menu1'>Submenu One</a></li>
<li><a href='#menu2'>Submenu Two</a></li>
</ul>
<ul id='menu1' title='Submenu One'>
<li><a href='foo.cgi'>Foo</a></li>
<li><a href='bar.cgi'>Bar</a></li>
</ul>
<ul id='menu2' title='Submenu Two'>
<li><a href='quux.cgi'>Quux</a></li>
<li><a href='#page'>Some page</a></li>
</ul>
<div id='page' class='panel' title='Some page'>
Any HTML can go here.
</div>

As you might guess, CSS and Javascript are used to show only one menu or div at a time, even though they are all in the same HTML file. This is quite different to the way menus are usually created in Webmin.

To get this kind of HTML from the theme, I created an index.cgi that generates a large set of <ul> lists and <div> blocks containing all the Virtualmin domains, global settings, Webmin categories and modules. This is loaded by the iPhone when a user logs in, and allows quick navigation to without any additional page loads. For example, these screenshots show the path down to the Users and Groups module. Only the last requires an extra page load :

The index.cgi script is able to fetch all Webmin modules and categories with the functions get_visible_module_infos and list_categories, which are part of the core API. It also fetches Virtualmin domains with virtual_server::list_domains and global actions with virtual_server::get_all_global_links.

For example, the code that generates the menus of modules and categories looks roughly like :

my @modules = &get_visible_module_infos();
my %cats = &list_categories(\@modules);
print "<ul id='modules' title='Webmin Modules'>\n";
foreach my $c (sort { $b cmp $a } (keys %cats)) {
    print "<li><a href='#cat_$c'>$cats{$c}</a></li>\n";
    }
foreach my $c (sort { $b cmp $a } (keys %cats)) {
    my @incat = grep { $_->{'category'} eq $c } @modules;
    print "<ul id='cat_$c' title='$cats{$c}'>\n";
    foreach my $m (sort { lc($a->{'desc'}) cmp lc($b->{'desc'}) } @incat) {
        print "<li><a href='$m->{'dir'}/' target=_self>$m->{'desc'}</a></li>\n";
        }
    print "</ul>\n";
    }
print "</ul>\n";

The actual IUI styling and menu navigation comes from CSS and Javascript files which are referenced on every page in the <head> section, generated by the theme’s theme_header function which overrides the Webmin header call.

Other Pages

Other pages within Webmin are generated using the regular CGI scripts, but with their HTML modified by the theme. This is done by overriding many of the ui_ family of functions, in particular those that generate forms with labels and input fields. Because the iPhone screen is relatively narrow, it is more suited to a layout in which all labels and inputs are arranged vertically, rather than the Webmin default that uses multiple columns.

For example, the theme_ui_table_row override function contains code like :

if ($label =~ /\S/) {
    $rv .= "<div class='webminTableName'>$label</div>\n";
    }
$rv .= "<div class='webminTableValue'>$value</div>\n";

The label and value variables are the field label and input HTML respectively. The actual styling is done using CSS classes that were added to IUI for the theme. The same thing is done in functions that render multi-column tabs, tabs and other input elements generated with ui_ family functions.

The only downside to this approach is that not all Webmin modules have yet been converted to use the functions in ui-lib.pl, and so do not get the iPhone-style theming. However, I am working on a long-term project to convert all modules from manually generated HTML to the using the UI library functions.

Headers and Footers

In most Webmin themes, there are links at the bottom of each page back to previous pages in the heirarchy – for example, when editing a Unix group there is a link back to the list of all groups.

However, IUI puts the back link at the top of the page next to the title, as in native iPhone applications. Fortunately, CSS absolute positioning allows the theme to place this link at the top, even though it is only generated at the end of the HTML. The generated HTML for this looks like :

<div class='toolbar'>
<h1 id='pageTitle'></h1>
<a class='button indexButton' href='/useradmin/index.cgi?mode=groups' target=_self>Back</a>
<a class='button' href='/help.cgi/useradmin/edit_group'>Help</a>
</div>

The toolbar CSS class contains the magic attributes needed to position it at the top of the page, even though the theme outputs it last.

The new face of Webmin

After much deliberation (a bloodbath!), Jamie, Kevin, and I (and a little help from some friends) have chosen a new logo for Webmin, from the seemingly infinite great options offered up by our recent logo contest at SitePoint. Without further ado, I present to you the new face of Webmin:

The figure represents the letters W and M, but there is also the additional symbolism of three Ms to represent Webmin, Usermin, and Virtualmin. We agonized quite a bit over leaving behind the spider web themed branding of the old logo, but in the end, decided that a web was simply meaningless in a modern context where everything is web-based. When Webmin began, almost nothing for system administration ran on the web, and it was the defining characteristic of Webmin. Jamie is still justifiably proud of being so far ahead of the curve on adopting the web-based paradigm, but felt it was time to move on. The future of Webmin is virtualization and grid computing, mobile devices, public APIs, clustering, and more. The web-based UI is merely one aspect of a large swath of interesting facets.

We’d like to thank all of the designers who took part in the contest. They were patient, enthusiastic, and really good. We came into the final round of judging with a dozen or more entries that at least two of us loved, and only after two days of debate and seeking advice from friends and family, did we finally come to a concensus on one that we could all love. We’re extremely excited about the new logo, and plan to roll it out to the website, and the default Webmin theme in the next few days. We’ll also be printing some T-shirts, as soon as I find someone good here in the Bay Area to make them for us.

Thanks also to Kevin Hale, of Particle Tree and Wufoo fame for being our celebrity judge and providing adult supervision during the contest. His magical designer-y ways kept us thoroughly on the right path. Jamie’s sister Lara Cameron
also loaned us her eyes and expertise.

See also

Webmin Logo Contest

Getting a great logo: Reducing the field

It’s just not a contest until you see a goatse

As I’ve mentioned here and here, we’re holding a logo contest for Webmin’s tenth anniversary. We’ve gotten a ton of fantastic entries, and we’re coming down to the final hours of the contest. We are feeling really good about quite a few of the entries, but today the entries finally achieved what all great contests should aspire to: an unintentional goatse troll.

The finest goatse logo troll of all time, of course, appeared during the BBC Olympic “Lisa Simpson doing something naughty” logo coverage (pay attention at about :29 on the clock). But, now we’ve got one of our very own:

I’m so proud.

See also: Article at the Register

Getting a great logo: reducing the field

We’re holding a logo contest over on SitePoint. We mentioned it in an article a few days ago and since then it has become the most popular contest running right now on the site! Awesome. That’s the good news. There’s also great news: The designers entering the contest are really good! There’s at least half a dozen designs that we’d be proud to call our logo, and at least a dozen of the designers are folks I would love to work with in the future. Hundreds of entries would do us no good if they all sucked, but these guys are doing really solid work.

We’re about 30 hours from the end of the contest, so I wanted to post a summary of the work so far, and offer some advice to the designers, as well as offer up our thought process on why we like the logos that we like, and a few for logos we want to like, but don’t, and why. This is, by no means, an exhaustive list. For that you’ll need to check out the contest itself and the feedback on each of the entries.

Our Judging Guidelines

These are the guiding principles in our decision making process. We don’t all agree on how they should be reflected in the end product, but we all agree that these are right for the Webmin logo. It helps to know, in advance, the general feel of the branding you want, as it makes it really easy to rule out some possibly great executions of ideas that don’t fit. I think this is one of the leading causes of a failed branding effort; if you don’t know what you want, you’ll almost certainly not get it. So here’s the guidelines we’re using in our judging and advice to the designers:

  • We’re an Open Source project, so super corporate looking logos probably aren’t right.
  • We’ll be printing T-shirts, so too much complexity is a negative. Costs more to print, and looks stupid when screen-printed. It also leads to a weaker brand image…takes a long time to remember a really complex logo, but a simple one can stick on first or second viewing.
  • Colors aren’t set in stone. We’ll have the SVG vector version, and can change the colors, as needed. Though poor color choices might indicate a lack of skill on the part of the designer, and we might be wasting our time trying to guide them towards perfection if the logo has problems other than color. I’ve noticed some of the designers take advice much better than others. Some of these folks are pros, while others are well-meaning amateurs, and one of the things that separates the pros from the amateurs is an uncanny ability to read my mind. We aren’t going to miss out on a great logo just because it is by an amateur, but we’re also going to choose a perfect execution of a good idea over a mediocre execution of a great idea.
  • Be gentle, and have fun. We’re encouraging everyone to get involved, so we’ve got a few entries that are, frankly, not great. You can be harder on an entry that you really like a lot, because it’s easy to soften the criticism with praise. But, if one of us picks something that another hates, be gentle in vetoing it.
  • Jamie has veto power (we all do, but Jamie really does). It’s his baby, and he gets to say no to any logo, no matter how much one of the other judges loves something.

The Top Ten (give or take a few)

This is a bunch of logos that Jamie or I loved. Kevin is reserving judgment until the end, so we’ll have to wait for the professional opinions, but here’s where we stand, right now. This is definitely not an exhaustive list of the good to great logos in the contest, but it’s the ones that we picked out as being our favorites. Some of these won’t actually be going into the final round, due to a veto by Jamie or I, but these are all great by either my estimation or Jamie’s, so they’re worth commenting on.

Modern stylized spider web by vjeko

http://contests.sitepoint.com/contests/3497/entrants/206414#entry206141

I like everything about this one. The spider web is clearly a spider web, it feels kinda like the Pentagon of spider webs: a place where Serious Internet Business takes place. The font is fun and the colors are soothing and modern. It scales small and large with no loss of impact and handles limited colors like a champ. Jamie also likes this logo. He’s unsure of hanging on to the spider or spider web branding of the old Webmin logo, so many of my favorites are in limbo (most of my favorites are spider related). But the strength of this logo won Jamie over, and he’d be happy with this concept.

vjeko deserves special mention for poking fun at me with this variant that adds a fitting tagline:

http://contests.sitepoint.com/contests/3497/entrants/206414#entry207627

Fat, friendly spider by Haetro

http://contests.sitepoint.com/contests/3497/entrants/181135#entry205608

I love this spider! Every time I see it, I like it more. It’s got real personality, and with only one color. It looks great in any color, and even with fonts I don’t care for, like the one in this particular instance. Some of the other variants of this logo have better fonts, but miss out on the purity of this one. I like the single color, and I like the square spider icon better than the later instances that round the spider or add more colors to the Webmin text (though other instances do have better fonts). Haetro has a great sense of style and a minimalist approach that I find very appealing.

Unfortunately for me, and for this design, Jamie vetoed it. The white space is pretty deeply offensive to him, and when scaled up he finds the spider frightening (I can see that…the eyes get really scary when he’s big). That said, Haetro is among the best designers in this contest, and I hate that none of his entries will make it to the final round. So, an interesting lesson to learn from this is that perhaps some of the most compelling images can also be the most off-putting. I asked around about this one, and it’s a very polarizing logo, you either love it or hate it.

Solid Webmin surrounding racks full of servers by RetroMetro Designs/Steve

http://contests.sitepoint.com/contests/3497/entrants/163719#entry208658

This one is out of left field, and that’s a big part of why I like it. It’s unlike any other entry, so far, and gets bonus points for that originality. The feel I get from the green blocks in the center is clearly “look at these modern server racks filled with systems doing Serious Internet Business”. And the big fat WEBMIN sitting on either side makes it real clear who’s in charge. It’s simple, clean, clearly relevant, reduces nicely, and looks good. Steve’s entry prior to this one is really nice, too, and in fact, Jamie likes it better. Steve has done some revisions of that idea, which Jamie and I both like better, so it may find its way into the final round.

Interestingly, while Jamie and I both like Steve’s sense of style, we diverged on which of his designs we like best. But, at least one of Steve’s entries will be in the final round.

Give me a “W”, Give me an “M”, What does that spell? Spider! by highendprofile

http://contests.sitepoint.com/contests/3497/entrants/195360#entry205913

Awesome execution on the idea of a spider built from the letters W and M. This is a gorgeous illustration. I wasn’t so sure about highendprofile’s skills based on his first entry, which was a nice idea but not very well executed, but this spider immediately blew me away. Beautiful execution and the spider is among the best illustrations in the contest. I don’t love the font on this one–it’s a bit tall and thin, but the colors are nice, and the spider is what draws the eye, so even with a not quite right font, I really like this logo.

This is another of the spider-based logos that has gotten the axe by Jamie. In this case, the cuteness that I love is a turnoff for Jamie. It won’t, unfortunately, make it into the final round, but highendprofile is a great designer, and I wish we had another idea or two from him in the contest.

Ooh, shiny spider makes me happy, by demonhale

http://contests.sitepoint.com/contests/3497/entrants/108155#entry205579

What a champ. Give demonhale an idea and he runs it all the way in. This is a great spider illustration. Cute and shiny, very modern, very friendly. The font looks spidery, and the whole thing just screams “New Technology!” Great color choice, but color isn’t necessary for this one to look good. I like that the spider is hanging by a thread…perhaps going some place new. And, who doesn’t love shiny things?

Jamie, surprisingly, did not veto this spider. It’s shiny and serious enough to pass the “is it too cute?” muster, and it’s also a really simple design. The colors are subdued and the execution is clean. So, shiny spider is going to the final round.

Webmin is like a box or a building block, by joswan

http://contests.sitepoint.com/contests/3497/entrants/178126#entry207368

This is another nice idea, that breaks from the old spider web and spider tradition. A box built from the letters W and M, with a nice solid font and cool colors. It’s quite pleasant to look at, and has some relevance for what Webmin does. Boxes don’t have a lot of personality…but it looks good nonetheless. It degrades nicely, and makes for a good favicon and icon version.

Jamie doesn’t love the colors here, and I have to agree. Orange and blue have a feel that is distinctly non-high tech. But joswan is an excellent designer, and does really nice work, so we can probably chase him into getting the colors right.

The fleur de Webmin, by ulahts

http://contests.sitepoint.com/contests/3497/entrants/133542#entry206250

This designer has submitted nothing but great entries, but this is my favorite. The WM here is subtle and pleasant, the Webmin is bold and distinctive in red and gray. Nothing says Serious Internet Business like some sturdy red text. A stylized WM doesn’t mean much, but it sure looks nice as hell. It feels like it’s got the weight of Webmin’s ten year history behind it (ten years in Internet time is like 20 generations, so this is kinda like a family crest or family plaid to represent the Webmin family of products for the next 20 generations, or more). This is a very distinctive logo.

Jamie found this one a bit boring, but likes some of ulauts other work. We might end up pulling another of his logos into the final round, instead of this one.

Life saving technology, by dumples

http://contests.sitepoint.com/contests/3497/entrants/188768#entry206787

This designer came out of left field with this one. It’s his only entry, but man did he ever knock it out of the park! Jamie and I both like this one a lot. The bubbly WM is just very pleasing and it feels familiar in a good way. I trust this logo. It feels kinda like a lifeguard. And, I can even kinda see one swimmer being helped to shore by another, now that I try to figure out why I think “lifeguard” when I look at it.

So, dumples, has swept in with one lone entry, and found himself as a shoe in for the final round. You don’t have to do lots of entries, if the one you run with is great, and this one is great.

Infinity needs system administrators, by fbarriac

http://contests.sitepoint.com/contests/3497/entrants/119506#entry206689

Another one that Jamie and I agree on. We like the subtle use of color here, and the lovely dark gray Webmin in a round and friendly font. The infinity shape doesn’t mean much in reference to Webmin, except maybe that there are seemingly infinite things Webmin can do, but it looks good as hell doing it. I can picture this on great looking T-shirts (that cost an arm and a leg to print, because it requires shading to look this good), and it really shines on the web.

Webmin is sorta like a castle…or maybe a rook in a game of chess, by rust3dboy

http://contests.sitepoint.com/contests/3497/entrants/83333#entry207364

Jamie likes the colors and sturdiness of this one. But it’s one that I vetoed. I’m not wholly aghast at the “WM as castle or rook” idea, but this execution feels like a logo for a BBS from the 80s. I think I broke several federal laws in order to call that BBS for free when I was thirteen. Jamie might have fond memories of calling that BBS, too, and that may be clouding his judgment. So, this one won’t be in the running, but another of rust3dboy’s logos will be, as we both really like most of his ideas…in particular the next one in the list.

Do you have a flag? by rust3dboy

http://contests.sitepoint.com/contests/3497/entrants/83333#entry207307

In general, a great designer is one that can produce numerous really great logos, and rust3dboy has done that. We don’t all love all of them, but at least a couple of his entries are among our favorites. This is another good, abstract “it’s a W and an M!”, concept, implemented by a real pro. I like the color symmetry here, and the WM looks kinda like a flag (I’ve always thought people who have a Black Flag tattoo are super cool, and this looks kinda like the Black Flag logo). Nothing to complain about here.

Links in a chain, open source style, by BeeOsx

http://contests.sitepoint.com/contests/3497/entrants/170918#entry206768

This is another the both Jamie and I really like. The colors are beautiful and professional. Very modern feel all around. We have no clue what those dots and lines are all about. It’s like they’re being dropped into a shredder or something, or maybe it’s a wood chipper and those are the chips flying out. I think my favorite thing about this one is actually the colors, and the really professional execution rather than the idea itself. It just looks really clean. BeeOsx is a really good designer with some interesting ideas, and I suspect at least this entry will be in the final round.

What else?

So those are the ones that bubbled to the top in the first round of discussions. Except for three or four vetoed entries those will definitely be considered in our final round of judging. There are a few that have come up since we had our discussion a couple of days ago that deserve special mention, as they are interesting new entries.

Swooshy wavy W and M, by babitaverma

http://contests.sitepoint.com/contests/3497/entrants/188315#entry211034

This one is nice and subtle. I have no idea what the waves mean here, but they look awesome, and the color scheme is amazingly pretty. The font is a bit squat, but otherwise this is a great, simple, idea executed brilliantly. I’m going to unilaterally pull it into the final round of judging, but it may bounce right back out if Jamie or Kevin veto it.

This designer showed up after the first round of judging, so he missed out on getting feedback from Jamie, but I think at least two of his designs are final round calibre entries.

Butterflies, by babitaverma

http://contests.sitepoint.com/contests/3497/entrants/188315#entry212204

Another by the same designer as the previous one. If we’re going to go with a new mascot, rather than a spider or web, butterflies would be a great choice. This illustration is lovely and simple, and looks great in all sorts of colors.

WM is a box, by RetroMetro Designs/Steve

http://contests.sitepoint.com/contests/3497/entrants/163719#entry210713

This is the other entry by Steve that Jamie and I both liked, but had some reservations about during early discussion. Steve touched up the problem spots, and now it looks pretty darned good. Definitely a contender.

WM is another kind of box, by DaHoNK

http://contests.sitepoint.com/contests/3497/entrants/38446#entry210527

This is another early entry that we had some reservations about, but the designer cleaned up those problems, and now it looks really good. This one takes such a different route on color scheme that it’s notable for that reason alone.

Tell us what you think!

What’s your favorite logo, so far? Any gems we’ve missed that you think ought to be make it into the final round? Let us know! This is the future of Webmin’s branding we’re talking about here.

Webmin Logo Contest!

Your mission, should you choose to accept it, is to bring Webmin’s branding into the modern Web 2.0 era, while still representing the respectability that IT guys demand of their tools. In return for your trouble, you’ll win some cool prizes, including $500 cash and a Virtualmin Professional Unlimited license. You’ll also have the satisfaction of knowing that your work is being seen by millions of people every day for years to come.

Make a new logo for Webmin, and you could:

  • Impress the opposite sex!
  • Win the admiration and respect of your peers!
  • Win $500, a T-shirt with the logo you design, plus other fantastic prizes!

OK, so maybe only the final one is guaranteed to be true.

The Fine Print

OK, so it’s not fine print. But these are the rules for submission:

  • Original work only. No composites, borrowed clip art, etc. Webmin is legally clean and will remain that way.
  • Submissions must be submitted in SVG vector format. If you’re feeling adventurous, make a favicon.ico, as well. Entries in anything other than SVG will not be accepted.
  • Keep it simple enough for a T-shirt, coffee mug, or sticker. Fewer colors is better, because more colors costs more to print, and usually looks terrible. If it looks good in white on black and black on white, you get bonus points.
  • What colors you choose will, to some degree, dictate future themes for Webmin: choose wisely.
  • You may submit as many logo designs as you like.
  • You may, or may not, derive your logo ideas from the existing Webmin spider web logo. Go with your instincts.
  • We will solicit feedback from the Webmin community, but we’re the sole arbiters of the final winner.

Judges

The winner will be determined by the following judges:

Jamie Cameron – Creator of Webmin and primary developer, founder Virtualmin, Inc.
Kevin Hale – Renowned designer, Particle Tree blogger, Treehouse editor and writer, founder Wufoo.com.
Joe Cooper – Webmin developer, founder Virtualmin, Inc. (And brainiac who came up with the idea for this contest.)

So break out your Illustrator or your Inkscape, and get started! Webmin’s tenth birthday only happens once, and Webmin has only ever had two logos (by some definition of “logo”, since Jamie designed the first one).

Visit this contest at SitePoint to submit your entries, and to see the competition, so far.