Programming and general geekiness.

Archive for January, 2012

Keep Calm v1.2

Click the image to download

I’ve just updated Keep Calm to version 1.2, which I plan to be the last major update for a while. Version 1.1 introduced sharing and a less buggy UI whereas v1.2 has completely revamped the app: you are now able to generate a wider image for use as a wallpaper and customize the image. I had considered allowing users to use photos as the icon but it seemed a little easier to allow users to instead select from fifty built in images.

The images include everything from zombies to alternative crowns and cats to trees. The default image is the standard crown however there is no reason not to take advantage of the other images. The only major disadvantage is that it has doubled the size of the app from about 150KB to around 300KB – although I don’t see that as a major issue.

A lot of people have contacted me saying that they’ve had problems saving the image. After having looked into it I’ve made a few modifications to my code however it is worth noting that it requires your phone to have a SD card or some form of external storage. As soon as a notification is displayed that says ‘Image saved’ the image should be visible in your phone’s gallery app.

Advertisements

Keep Calm v1.1

Keep Calm and Carry On v1.1

Last night I pushed an update to my Android Keep Calm and Carry On app. After having been able to get strong feedback from comments, people IRL and other websites I’ve been able to make some decisions for improvements to the app. Here’s what’s new:

  • I’ve fixed a bug on the forms that meant that content dropped off in landscape mode (you can now scroll)
  • I’ve added the option (in preferences) to either have a gradient or solid background
  • I’ve fixed some text wrapping options though I recommend you aim to use less than seven lines with a maximum of ten characters per line
  • You can now tap the poster to display the menu
  • A bug with saving has been fixed
  • AWESOME NEW FEATURE: You can share straight to social networks
  • And I added a button to go to my blog on the about screen

The app has received relatively positive ratings (currently 4 stars-ish) and has over 1500 users. Not bad considering it only went live on Saturday afternoon. I think that I am going to keep this app free forever and not bother doing anything stupid with a ‘Pro’ or ‘HD’ paid version. I really can’t justify charging for anything less than 1000 lines of code…

Keep Calm and Carry On

Free Android app: Keep Calm

Click image to download from Android Market

I’ve been playing around with Android development for a few months now but I’ve only just got round to making my first app. Having already seen that the current top paid iPhone app (in the UK) was a simple app that let you design Keep Calm and Carry On style posters I had a look on the Android market for similar apps. There were, at the time, five apps available however they were all paid for. I thought it would be nice to make a free one.

My app allows users to customize both the text and background color (picture coming in the next version) of the poster and then to save it to the SD card on the device. Its pretty simple and frankly a bit of a useless app but its better than all the paid for alternatives. The app has received around 200 downloads in its first 12 hours* and lists top when you search for ‘Keep Calm’ and third when you search for ‘Keep Calm and Carry On’.

This slideshow requires JavaScript.

*After around forty hours it had over 1000.

HTML5 Canvas Particles

I was playing around with HTML5 this morning and decided to build a sort of particle simulation based on rules of Math rather than Physics. It was purely experimental but it looks quite cool. I won’t go into the exact rules of how the particles move around but it is based on some pretty trigonometry. Currently when I click the particles move to a new location however they always jiggle a little in their place. I plan to make it a little more advanced in the next week or so and release an Android version on the Android Market.

Create a Google style menu

A few weeks ago Google made a change to their menu which is a lot cleaner and integrates with Google+ a bit better. I thought that the menu was quite  cool so I figured that I could probably make a rough copy of it using jQuery and CSS. Here is the result:

Click to view demo

The menus fade appropriately. Here is the required markup:

 
<div id="header">
 <div id="menu">
 <h1 id="menu-header">MyWeb</h1>
 <div id="container">
 <div id="menu-box">
 <ul id="main-menu">
 <li style="background-image:url(logos/google.png)"><a href="http://google.com">Google</a></li>
 <li id="more">More...</li>
 </ul>
 <div id="menu2">
 <ul id="more-column-1">
 <li style="background-image:url(logos/apple.png)"><a href="http://apple.com">Apple</a></li>
 <li style="background-image:url(logos/windows.png)"><a href="http://microsoft.com">Microsoft</a></li>
 </ul>
 <ul id="more-column-2">
 <li style="background-image:url(logos/wii.png)"><a href="http://nintendo.com/wii">Wii</a></li>
 <li style="background-image:url(logos/yahoo.png)"><a href="http://yahoo.com">Yahoo!</a></li>
 </ul>
 <p id="even-more">Even More</p>
 </div>
 </div>
 </div>
 </div>
</div>

Note that I have removed a large number of the list items. You can add these in later. I included jQuery and added the following JavaScript:

$(document).ready(function()
{
 $("#menu-header").click(function()
 {
 $("#container").fadeToggle("fast");
 });
 $("#more").click(function()
 {
 $("#menu2").fadeToggle("fast");
 });
 $("#container").mouseleave(function()
 {
 setTimeout("$(\"#container\").fadeOut(\"fast\");$(\"#menu2\").fadeOut(\"fast\");", 750);
 });
});

I won’t bother explaining the JavaScript because it is relatively simple. Here is the enormous CSS that you need to use to make it look cool:

body
{
 margin:0;
 padding:0;
 font-family:sans-serif;
}
#header
{
 background-color:#eee;
 margin:0;
 padding:10px;
}
#container
{
 position:relative;
 display:none;
}
#menu-header
{
 font-family:"Book Antiqua", Garamond, Cambria, serif;
 font-size:35px;
 font-weight:300;
 margin:0;
 color:#aaa;
 cursor:pointer;
}
#menu-box
{
 position:absolute;
 left:20px;
 top:20px;
 font-size:15px;
 color:white;
 margin:0;
 padding:0;
 min-width:200px;
 max-width:600px;
 box-shadow:#aaa 1px 1px 5px; 
}
#menu-box:after
{
 top:-15px;
 right:auto;
 left:40px;
 bottom:auto;
 border-width:0 15px 15px;
 border-color:#2d2d2d transparent;
 content:"";
 border-style:solid;
 width:0;
 display:block;
 position:absolute;
}
#menu-box li
{
 padding-top:10px;
 padding-bottom:10px;
 padding-left:35px;
 background-repeat:no-repeat;
 background-position:left center;
}
#menu-box ul
{
 list-style:none;
 padding:0;
 margin:0;
 float:left;
 width:200px;
}
#main-menu li
{
 background-color:#2d2d2d;
 border-bottom:1px solid #eee;
}
#main-menu a
{
 color:white;
 text-decoration:none;
}
#main-menu-li:last-child
{
 border-bottom:none;
}
#main-menu li:hover
{
 background-color:#333;
}
#menu2
{
 background-color:white;
 color:black;
 width:400px;
 height:100%;
 float:right;
 display:none;
}
#menu2 a
{
 color:black;
 text-decoration:none;
}
#more-column-1
{
 float:left;
}
#more-column-2
{
 float:right;
}
#more-column-1 li
{
 border-bottom:1px solid #eee;
 border-right:1px solid #eee;
}
#more-column-2 li
{
 border-bottom:1px solid #eee;
}
#more-column-1 li:hover, #more-column-2 li:hover
{
 background-color:#eee;
}
#even-more
{
 margin:0;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:35px;
 clear:both;
}
#even-more:hover
{
 background-color:#eee;
}

You could probably add some extra stuff to make it even more cool but to be honest I was happy that it was working.