Today I “released” a small OS X user interface component called CDMedallionView. It is a subclass of NSImageView which has been styled to look like the image view on the login screen of OS X Lion and Mountain Lion

It should work on OS X 10.6 and up and it supports retina screens. To build the source you need ARC (must at least be enabled for the CDMedallionView.m file).

Using the Class

As CDMedallionView is a subclass of NSImageView you can use it as you would use an NSImageView instance. For example in code;

CDMedallionView *medallionImageView = [[CDMedallionView] alloc] init];
medallionImageView.frame = NSMakeRect(0.f, 0.f, 60.f, 60.f);
medallionImageView.image = /* some NSImage instance */; 
medallionImageView.borderWidth = 2.f; // Default is 4.0.

[self.view addSubview:medallionImageView];

The class can also used via interface builder, drag out an NSImageView and using the “Identity” inspector (⌘+⌥+3) set the class to CDMedallionView. You can then configure it as you please using the other inspector panels. To change the shine, shadow and border width and color create an outlet to the view and then set those in code.

Getting the Code

You can get the component from the GitHub project rastersize/CDMedallionView where you can also create issues and pull requests if you find any problems or opportunity to improve. The code is available under the MIT license. See the license file for more information.

So my “old” framework CDEvents turned two and a half less than a month ago 🎉 and today it got updated to a whooping version 1.2.0. This brings the power of ARC and blocks (which have been in the develop branch for quite some time). It also raises the OS X deployment target to 10.6 and drops support for the now deprecated garbage collection.

Thanks to JustSid, tonyxiao and dwlnetnl for their contributions and helping to squash some bugs as well as improve the framework.

You can get it from its GitHub page, rastersize/CDEvents, and the API documentation has been updated.

(The project is still licensed under the MIT license.)

A little over a month ago I had quite a lot of time to myself so I decided to update the graphics of an open source application to be compatible with retina Mac screens¹. I choose an application which I frequently use and which would otherwise probably not have been updated, namely CoRD (the screenshot on their site is not up to date). My intention was to get this post up sooner but due to some issues with getting Octopress, ruby and the ruby gems to work it has been delayed by a few weeks²…

CoRD is a native remote desktop client for Mac OS X and allows you the user to connect to Windows machines over the Remote Desktop Protocol (RDP). There is also the official client by Microsoft but it keeps crashing for me, especially when quitting it, and it does not have a built-in server list. Two things which CoRD provides.

Sadly CoRD has received less updates as time has passed by. A transition to FreeRDP, which is mostly required, has been planned for quite a few years now. As such I felt that the only way for me to not have to suffer while looking at the user interface graphics as well as the application icon was to fix them myself. Initially I planned to just update the existing original graphics files for retina and then re-export them as an additional @2x file. This did not happen.

As I initially could not find the original graphics files I set out to re-create them instead, from the ground up. When at the last icon, I was unable to find a way to make the application show it in use so I looked around on the website for a screenshot of it and stumbled upon a ZIP file with the originals. Thus that last, clock, icon was more or less the original scaled to @2x. More on the user interface graphics later, now on to the application icon.

Application Icon

The original application icon file did obviously not contain any retina assets since the icon was created long before Apple settled down and decided to go the iOS way with @2x. If you are view this page on a retina screen you should be able to recognise the blurryness of the original application icon shown below.

The intention with the new application icon was to capture the look and feel of the old icon – to make users used to the old versions feel at home – while still making it feel new and shiny. Furthermore the goal was to make the icon show how CoRD bridges OS X and Windows and it being a utility application.

The icon tries to convey that it bridges the gap between OS X and Windows by utilising the starry, galaxy styled photos Apple use as desktop backgrounds by default in OS X. In turn the black cubes both reflect the connection to the Windows flags as well as the old application icon. Lastly the type of frame matches the utility application icon frame used in OS X. The frame matches that of the System Preferences icon quite closely. The new icon also fits a lot better in the dock, taking up the same amount of vertical space as Apple’s icons.

Even though the icon is almost completely made using vector shapes and layer effects in Photoshop, exporting it to 10 different sizes was a real chore… Well OK, the 16-by-16 pixel @1x icon was created separately. See it below, preferably on a @1x screen as it will look blurry on a @2x screen due to scaling.

The application icon was also used a the basis for the new document icons. They are very much standard (compliant) white sheets of paper with a curled corner with the application icon in the middle. Another 10 exports in color and 10 in grayscale.

User Interface Graphics

While updating the user interface graphics I tried to keep them somewhat similar to how the looked previously. Although some things were revamped, such as the next and previous session buttons which now use standard controls instead of being round custom butcons.

The new icons are, like with the application icon, intended to look quite similar to previous ones but with a more updated look. Not a lot to say about them besides that the @2x versions look better than the @1x.

You can check them all out by visiting CoRD’s GitHub project page or by downloading CoRD and running it directly. The Photoshop files are located in the GraphicsOriginals directory in the root, except for the application icon where the .psd files are located in Resources/App Icon, while the exported .png images exist in the Resources directory.

All the icons and graphics are licensed under the Attribution-NonCommercial-ShareAlike 3.0 United States (CC BY-NC-SA 3.0) and the copyright belongs to Aron Cedercrantz.

I have redesigned this site again as I were not happy with the old look =). This time I took the liberty of creating a custom theme instead of just dumping an extreme amount of CSS rules into the styles.css. The custom theme approach probably required more effort than just hacking the classic theme but I am hoping it will prove easier to maintain and update.

Stuff left to fix are the code blocks which currently look quite awful, as well as the tables. That will have to wait though.

Update: Slightly updated today (2012-08-13); whiter, more space, new header and red instead of blue.

So far I must say I like the pen but the Mac OS X application needs to be completely redesigned. It looks and acts terrible. What else can you say when it asks you to draw on your screen to calibrate the pressure sensitivity. Copy-paste job from their more traditional tablets maybe?

No it is not pretty.

I will try and post what I think of the pen when I have used it some more. Check this space for a new blog post on the subject in the future!