Mavericks/Yosemite Dual-Boot on a DIY fusion drive

As OS X 10.10 Yosemite DP1 runs awful in a virtual machine I wanted to install it onto my MacBook as a dual-boot configuration with OS X 10.9 Mavericks. My MacBook runs on a self-made FusionDrive configuration using a SSD and a regular hard disk. Here is a link to a HowTo for that FusionDrive stuff. As Mavericks is already installed, the hard part was to create partition for the Yosemite installation. What absolutely is not working is:

  • Simple create two volumes on the FusionDrive using the „diskutil coreStorage createVolume“ command
  • Add a second partition using the disc-utility

The disc utility does create a partition, but it completely ignores the size you specified. For me it worked by booting from USB and using the „resizeStack“ command (I got that hint from here).

diskutil cs resizeStack X Y 991G jhfs+ Media 120G

This command will resize the FusionDrive volume to 991G while creating a second partition with the size of 120GB. To exactly know how big your partitions should be, type:

diskutil cs list

It will show you the size of the current volume. If its, for example, 1000GB and you want to create a 20GB second partition, type:

diskutil cs resizeStack X Y 980G jhfs+ partitionname 20G

X should be the UID from the volume you want to shrink (also called Logical Volume (not Family)). Y is the UID from the physical volume you want to create the 2nd partition on. I used my regular disk for that to avoid reducing the performance of my FusionDrive. To make it clear: The second partition will not be part of the FusionDrive, so the performance may be slower that used to. To display the UIDs use the list command:

diskutil cs list

After that, install Yosemite on the newly created partition. After a successfull installation, you can choose which system to boot by holding the alt-key on boot. Worked for me and I hope it will work on your setup, too 😉

OS X Yosemite 10.10 in Virtual Box

I finally managed it to install Yosemite in VirtualBox as a, well, virtual machine.

Create a new virtual machine, choose OS X 10.9 x64 as operating system and give it some RAM. Then you need to prepare the install disk image (i have used the developer preview version!) with the following steps (taken from here):

1
2
3
4
5
6
7
8
iesd -i /Applications/Install\ OS\ X\ 10.10\ Developer\ Preview.app -o yosemite.dmg -t BaseSystem
hdiutil convert yosemite.dmg -format UDSP -o yosemite.sparseimage
hdiutil mount /Applications/Install\ OS\ X\ 10.10\ Developer\ Preview.app/Contents/SharedSupport/InstallESD.dmg
hdiutil mount yosemite.sparseimage
cp /Volumes/OS\ X\ Install\ ESD/BaseSystem.* /Volumes/OS\ X\ Base\ System/
hdiutil unmount /Volumes/OS\ X\ Install\ ESD/
hdiutil unmount /Volumes/OS\ X\ Base\ System/
hdiutil convert yosemite.sparseimage -format UDZO -o yosemitefixed.dmg

You can save these commands as a bash script, run it and relax. When finished, mount the yosemitefixed.dmg as a live-CD in your virtual machine. Internet said it is a good idea to change the chipset of the virtual machine to PIIX3, so do that. After installation it is important to remove the live-CD image and reboot. Voila, should work. Good luck!

But performance is really bad at the moment.

The new the-skylab.de Canvas Portfolio

I launched a new the-skylab.de front-/portfolio page today. I felt inspired by the current Vodafone advertisements, so I decided to do something in the same direction.

The skyLab logo should be the central element of the page and is used to navigate. Each click brings a new scene using a rotating black area which uncovers the content. The second scene features a full-screen view to make it possible to show more content.

The new page is heavily driven by Javascript and uses some new technologies like canvas, so i decided to give you some technical background and tell you about the problems I encountered.

This is how it looks like:

skylab-animation

The Final Result

DOM vs Canvas

At first I was unsure which technology to use. I started with some testing using pure DOM technology. I created a square using a DIV element, added round corners to it and did the rotation using jQuery and CSS3 transforms.

dom

Rotating Square using a DOM Div

The result was looking ok, but it felt a bit dirty and needed a lot of unnecessary HTML glue code to work correctly. So I decided to use the new hot shit: HTML5 Canvas.

I checked the „official“ Canvas-API first, but as usual, there are a lot better Javascript-Libraries out there which make the work easier. I checked some frameworks and decided to use fabric.js. Most of the frameworks support the drawing of circles and rectangles and the rotation of those, but lack the ability of setting an origin point for the rotation. A centered rotation doesn’t help me with my concept.

Script

Then I started implementing the script. It uses the concept of „scenes“, gathered together in a „script book“. I can specify the scenes in code which includes a specific rotation of the black area (which is no longer a rectangle, it is a custom drawn triangle path now) and pre- and post-hook to execute and my script will do the rest. These hooks are used e.g. for the circle animation in the second screen.

Problems

Resizing

One big problem was the strange behavior of the actual canvas area which is used for drawing. In my case it is needed to fill the whole screen. But if you specify the size with CSS, it „scales“ the drawing area but does not increase the size of the actual canvas used to draw. This results in ugly and unsharp drawing. You need to specify the size of the canvas in the HTML tag to make it work – or, as a workaround, you can set it via Javascript. This was the solution I decided to use. Currently, I’m hooking into the resize event of the browser and I’m doing a resize of the canvas area.

Also, the page needs to have a minimum and maximum size, otherwise the black area will get to small for the content. This problem isn’t yet solved completely, because enforcing a minimum and maximum size and falling back to scroll bars is currently causing drawing issues.

Mobile

Surprisingly, the page was working great on all mobile devices (I tested iOS7 iPhone & iPad & latest Android stuff). There was only a problem that the initial zoom level was to small on the phones with smaller screens. But there is a workaround: You can set the default view port with a HTML tag like this in your head:

1
meta name="viewport" content="width=1024 height=768

Content and Images

I used a trick to create the illusion that the black circle actually uncovers the content. In fact, that’s not the case. It fades in right before the rotation animation is starting. As the text color is white, the content is invisible until it’s covered with the black background. Unfortunately, that doesn’t work with images. They would be visible before the rotation animation is complete. I arrived at the conclusion that the best workaround is to fade the images in and out with a timed delay right before and after a scene change.

Conclusion

Finally, it was as usual a lot more work than I expected. Especially it wasn’t easy to get the right timing of all animations. But in my opinion, the result is great. I did test it with some people and most of them were sure about what to do. After some initial user tests I implemented the pulsating logo which you can see when you’re initially loading the page which makes clear „I am the logo, click me!“.

A problem with the usage of Canvas is that the page will not run on old browsers. But luckily, in these days that’s a thing you can disregard more and more as every major browser is updating itself.

What do you think about the result?

Layout overhaul

Yes, you’re eyes are not lying! After 7 years(!) the skyBlog gets a completely overhauled template. Yey!

MacBook Pro Early 2011’s are melting / graphic card problems

A few weeks ago, my MacBook Pro 2011 Early started to behave strangely. It started right after I had upgraded my system to Mavericks. I was testing the new iMovie as I was getting a black screen (of death). After a hard reset, the the grey boot screen (with the Apple logo) looked scrambled with strange line artefacts. And the machine refused to boot. I managed it to get the machine working a few last times (doing 100 reboots and trying out all boot options), but finally the machine was dead. It was clear, that the discrete graphic card has a problem. And so, the only solution was to replace the hole logic board.

So I went to the Apple Store. I had to wait 1.5 weeks to get my MacBook back and the price for it was 490€.

A quick look into the internet reveals: Apple has a problem. It looks like the number of melted MacBooks from 2011 is fast increasing:

https://discussions.apple.com/thread/4766577?start=1545&tstart=0

My flatmate, who also owns an Early 2011 MacBook, saw his MacBook fried this morning and is on his way to the Store now.

There is hope that Apple will announce an official replacement program in the future (and give a refund for the repair costs), but until then you have to pay the replacement yourself. But if you do, tell the Apple Staff that its a really common problem and their should do something about that now.

 

Install Windows/Bootcamp on MacBook Pro with Fusion Drive and no Optical Drive

Installing Windows on a Machine without a Optical Drive is a pain, because its no longer possible to boot from the Installation DVD. USB is no good workaround, because USB boot is also permitted somehow.

The case is getting more complicated when you have a FusionDrive setup as I have: I replaced my Optical Drive with a second harddisk (SSD) and formed one Volume out of it as a FusionDrive.

After Google’ing for many hours, i found a solution which actually worked on my setup.

http://huguesval.com/blog/2012/02/installing-windows-7-on-a-mac-without-superdrive-with-virtualbox/

Some Additions:

  • Even If you have an MacBook Pro 2011: Do Part 1 Step 3! I didn’t do it and after rebooting I got a blue screen
  • To trick the Boot-Camp Assistant creating the partition for you, it also works mounting the Windows Installation ISO with Toast or Daemon Tools
  • The correct installation order is: FIRST create your fusion drive, then let the BootCamp Assisstant build the Windows Partition
  • Don’t try the solution with replacing the MBR with the one created in the VM: It does not work on a FusionDrive setup
  • To avoid the complicated removal of the „system reserved“ partition as stated in the manual, do this: When you install Windows  in the VM, format the drive. A message will popup informing you that it may create some more partitions blabla. Click ok and you will see it actually created 2 partitions. Now manually remove the small 100 MB Partition and install on the other one. It will work and boot correctly.
  • WinClone is no longer free available as some stupid company bought it and did some minor updates to it. But maybe you find it somewhere. If you use the latest version, it will ask you if it should delete the cache files while creating the image. I clicked yes. On restore, I had it replace the booting-information.

Finally it worked. When I boot my mac holding ALT the boot device selection menu shows up. It displays my Mac drive two times as well as the windows drive two times. Anyone know a solution out there how to fix that?

Paying attention to details

I am currently working on an overhaul of Episodes main interface. As a Mac developer, you need to pay attention to the small things. This is what a good App makes a great App.

In the last days, I’ve spent several hours in reworking the small view on the lower left which indicates that Episodes is doing some tasks in the background. This is how its looking in current version:

old

Its okay, but its not great. The expand/collapse animation was a bit buggy as well as the progress indication itself. To improve the visual appeal I decided to invest some hours to make it perfect. This is the result. My goal was to let it look like its „below“ the surrounding  interface. I’ve also added an animation which „slides away“ the concealing panel.

panel

In the next iteration of Episodes i’m going for a borderless interface, which leads to some problems.

blank

 

What happens if the list is getting longer or the user resizes the window? A scrollbar will become visible with its bottom end hanging loose in the air. It would look pretty bad. My solution is to slowly fade in a shadow to distinguish the list from the bottom menu.

light

This makes it a lot better. Apple uses the same approach e.G. in Apple Mail and its great, but its not yet in the framework so each developer has to implement it them self and most people are doing it only half-assed.

But thats only half the deal. What happens if the progress-panel slides in? The gradients and shadows have to match in this combination also.

full

 

These are the small things which need a lot of work to make them right. Most people won’t even notice any of then. But they would, if things would look bad. Its makes an App better, as the User feels better when he uses it.

Custom selection/highlighting colors in a view based SourceList using a NSOutlineView (badge)

I’ve tried to implement the „Bubble“ badges that Apple uses in many applications using a view based NSOutlineView, e.G. Mail:

Bildschirmfoto 2013-03-21 um 12.50.16

There are many solutions out there (see PXSourceList), but I wanted to use a view based approach this time.

Its no big deal creating the view, but when you start implementing the Badge you will face several problems. You may use a NSButton with inline style here, but if you start binding its title to your data things starting to go wrong as its clearly the wrong control for this case. So I decided to use a custom NSTextField with custom drawing.

Bildschirmfoto 2013-03-21 um 12.53.45

The main problem was the different drawing if the row is selected. You need to change your font- and background color. As a NSTextField, you do not know if you are highlighted or not and so you can’t do that. After some digging in the documentation if found the solution:

The enclosing NSTableCellView gives its subviews a „hint“ how it should draw itself. The method it uses is

1
- (void)setBackgroundStyle:(NSBackgroundStyle)<em>style</em>

The docu says:

The default implementation automatically forwards calls to all subviews that implement setBackgroundStyle: or are an NSControl, which have NSCell classes that respond to setBackgroundStyle:.

So what you have to do is to simply implement setBackgroundStyle in your custom NSTextField. For example, save the set value to an ivar:

1
2
3
- (void)setBackgroundStyle:(NSBackgroundStyle)style {
_backgroundStyle = style;
}

Finally, use this value in your drawing code and you’re done:

1
2
3
4
5
6
7
8
- (void)drawRect:(NSRect)dirtyRect
{
...
if (self.backgroundStyle == NSBackgroundStyleDark) {
backgroundColor = [NSColor darkGrayColor];
} else {
backgroundColor = [NSColor lightGrayColor];
}