{"id":15249,"date":"2014-11-07T12:27:53","date_gmt":"2014-11-07T17:27:53","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=15249"},"modified":"2019-04-02T15:53:20","modified_gmt":"2019-04-02T22:53:20","slug":"programming-for-google-cardboard-on-ios-using-f","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/programming-for-google-cardboard-on-ios-using-f\/","title":{"rendered":"Programming for Google Cardboard on iOS using F#"},"content":{"rendered":"

One of the highlights of Xamarin Evolve<\/a> is the Darwin Lounge, a hall filled with programmable devices ranging from robots to iBeacons and quadcopters to wearables. One thing that was particularly intriguing this year was a stack of kits from DodoCase<\/a>, \u201cinspired by Google Cardboard.\u201d Google Cardboard is an inexpensive stereoscope that exploits the ridiculously small pixels of modern phones. Instead of synchronizing two displays, it directs your eyes\u00a0separately to the two halves of a phone screen in portrait mode.<\/p>\n

\"cardboard\"<\/a><\/p>\n

Unfortunately, all of the resources for programming Google Cardboard have been Android only. This is not the Xamarin way and could not stand! Luckily, Joel Martinez<\/a> had written a 3D demo for our talk,\u00a0Make Your Apps Awesome With F#<\/a>, and it was just a\u00a0matter of a quick hacking session to see our Xamarin.iOS<\/a> code in glorious stereoscopic 3D.<\/p>\n

\"before_and_after\"<\/a><\/p>\n

Functional Refactoring<\/h2>\n

As Mike Bluestein has written previously, the easiest way to program 3D on iOS is to use Scene Kit<\/a>,\u00a0which\u00a0is what Joel and I had done for our demo. Stereoscopic programming in Scene Kit, as it turns out, is easy!<\/p>\n

One great aspect of F#<\/a> and the functional programming style is that refactoring is often easier than object-oriented refactoring. Instead of creating new objects and data structures, you\u2019re generally focusing on \u201cminimizing the moving parts\u201d and extracting common functionality into reliable functions.<\/p>\n

For instance, the first thing we needed to do was switch from a single UIView<\/code> to two side-by-side views. We refactored this code:<\/p>\n

\/\/Configure view  \r\nlet r = new RectangleF(new PointF(0.0f, 0.0f), new SizeF(UIScreen.MainScreen.Bounds.Size))  \r\nlet s = new SCNView(r)  \r\nconfigView s scene |> ignore  \r\nthis.View <- s\r\n<\/code><\/pre>\n
into this code:<\/p>\n
\/\/Configure views  \r\nlet outer = new UIView(UIScreen.MainScreen.Bounds)\r\n\r\nlet ss =  \r\n    [\r\n        new RectangleF(new PointF(0.0f, 0.0f), new SizeF(float32 UIScreen.MainScreen.Bounds.Width \/ 2.0f - 1.0f, UIScreen.MainScreen.Bounds.Height));  \r\n        new RectangleF(new PointF(float32 UIScreen.MainScreen.Bounds.Width \/ 2.0f + 1.0f, 0.0f), new SizeF(UIScreen.MainScreen.Bounds.Width \/ 2.0f -1.0f, UIScreen.MainScreen.Bounds.Height));  \r\n    ]\r\n    |> List.map (fun r -> new SCNView(r))  \r\n    |> List.map (fun s -> outer.AddSubview(configView s scene); s)\r\n\r\nthis.View <- outer\r\n<\/code><\/pre>\n
Although you may be more familiar with C# than F#, you should be able to follow what\u2019s going on in the original snippet. We had a RectangleF<\/code> as big as the entire screen\u2019s Bounds<\/code>. We created a single SCNView<\/code> called s<\/code>. We configured s<\/code> to show our scene<\/code> and then, because we don\u2019t need to do any more manipulation on the result of that calculation, we called the ignore<\/code> function with the result (the |><\/code> is F#\u2019s pipe operator, which works just like the familiar pipe operator on the UNIX command-line or PowerShell). Finally, we assigned this single SCNView<\/code> to be the main View<\/code> of our controller object.<\/p>\n
To refactor, we introduce an outer<\/code> view that will contain our two eye-specific views. We then use the |><\/code> operator again to:<\/p>\n